Flex Extensibility - Blink for Flex

DIGG IT!     3 Comments Published Tuesday, June 20, 2006 at 7:17 AM .

It seems that many developers do not realize that Flex is extensible. Sure its XML, but Flex allows you to create new components and extend MXML in your applications. To make this point clear I wrote the dreaded Blink tag for Flex.

Blink Tag for Flex 2 (View Source Enabled)




Blink Tag Source(ZIP)

HTML and its success has always been tightly bound to a browser HTML/JavaScript version. Each browser embeds its logic for interpreting HTML and JS within each 5MB-30MB Download of Internet Explorer and Firefox. The only way to upgrade this logic today is to download a new browser.

With Flash Player, the browser and os are completely independent resulting in the ability to run new Flash Players and applications (Flex, Flash, Breeze) in older browsers and operating systems.

Exercise:

- Go find an old copy of Netscape 3.0
- Install Flash Player 9
- Build a Flex 2 application and it will work seamlessly!

Given that Flash player is upgradable with a 1MB download, long term Flash Player will be more compatible than the base browser for building applications. The result is a wide compatibility footprint for Flash Player for delivery of applications.

In supporting components within the Flash Player, Adobe decided to deliver component to the Flash Player within the SWF and RSL formats. Basically, components are delivered with your application, they never ship in the Flash Player. This keeps the player very small and allows developers to creatively extend applications using ActionScript and all formats supported by Flash Player (SWF, GIF, JPG, PNG, FLV, XML, AMF, MP3, and others).

In Flex development you can write a new ActionScript Class and extend MXML and the applications you are creating. In writing the Blink Tag, I simply extended the mx.controls.Text component like so:

package com.ted.text{

    import mx.controls.Text;

    public class Blink extends Text
    {
        public function Blink():void
        {}

    }

}

Basically this is a custom component that simply extends mx.controls.Text with no changes. Drop this into the com/ted/text package folder and name it Blink.as and you have a custom component for Flex. As this extends mx.controls.Text, 100% of the logic in Text is present by default, my new Blink component only contains the differences. Ahhh... Inheritance. Ok lets make this component Blink like it should.

package com.ted.text{

    import mx.controls.Text;
    import flash.utils.Timer;
    import flash.events.TimerEvent;

    public class Blink extends Text
    {
        private var blinkTimer:Timer;

        public function Blink():void
        {
            this.blinkTimer = new Timer( 1000 , 0 );
            this.blinkTimer.addEventListener( "timer" , toggleText );
            this.blinkTimer.start();
        }

        public function toggleText( event:TimerEvent ):void
        {
            if( this.visible ){
            this.visible = false;
            }else{
            this.visible = true;
            }
        }

        public function get interval():uint
        {
            return this.blinkTimer.delay;
        }
        public function set interval( value:uint ):void
        {
            this.blinkTimer.delay = value;
        }

    }

}

Ah that's better. I added a Timer to the class and added a getter/setter called 'interval' to change the delay of the Timer class, and a method to change the visibility of the component. So now we have a working Blink tag for Flex 2.

So a few things to remember:

1. You can extend MXML with custom AS Classes.
2. Components are delivered within your Flex Application SWF file.
3. Old Browsers are compatible with new Players.
4. Old SWF content is always backward compatible with Flash Player.

More to come!

Ted :)

---