Flex SuperLabel Component : An Easy How To on Extending Flex Components with Custom Events and Effects

Since I switched from developing XUL/Javascript based RIAs using the Mozilla platform to programming in Flex and Actionscript one of the things I have been most impressed with is how easy it is to extend existing components and customize them to fit my needs perfectly.

Recently (as in 10 minutes ago) I was working on laying out the interface for a new application which displays some dynamically changing content. One part of the interface which was dynamically changing was the page title which I was displaying as a Label component. I thought it would be nice to add a small effect every time the text property for Label changed. Looking at the language reference documentation for the Label component I noticed there was no built in event or effect which could be triggered when the text property is updated.

No problem, I thought. I'll just add that in. So with less than 25 lines of code and in less time than it is taking to type this post I was done.

Here is a summary of the steps I took to create my new SuperLabel Component.

• Created a new Actionscript Class
• Added Metatags for the new Event and new Effect
• Created a function which overrides the text property setter function
• done.

Here is the source code for the new component.

package claire.com
{
 import mx.controls.Label;  
 import flash.events.Event; 

 [Event(name="textChange", type="flash.events.Event")]
 [Effect(name="textChangeEffect", event="textChange")]

 public class SuperLabel extends Label
 {
   public function SuperLabel()
   {
      super();
   }
   public override function set text(value:String):void
   {
     if ( value != this.text )
     {
        this.dispatchEvent( new Event('textChange') );
     }
     super.text = value;
   }
 }
}

There you go. It really is that easy.

Just to finish off here is how you use the new component in MXML.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:com="claire.com.*">
<mx:WipeRight id="myEffect" duration="750" />
<com:SuperLabel textChangeEffect="{myEffect}"/>
</Application>