ActionScript 3 vs Flex 3: Labels

Flex can’t do it all alone. While it’s possible to build a RIA in strictly ActionScript 3.0 or Flex 3’s MXML, sometimes you have to be familiar with both methods to get the best result.

In this post we’ll look at two ways of making one of the most common components in Flash and Flex development: the label.

The Actionscript 3 Way

The code below creates a label with size 24 font using with only actionscript in Flex. I’ve commented each line for easy reading:

//Load label class for Flex
import mx.controls.Label;
//Declare new label
private var asLabel:Label = new Label;
//Assign Text to label
asLabel.text = "This is built with ActionScript";
//Set font size to 24px
asLabel.setStyle("fontSize", 24);
//Add instance
addChild(asLabel);

For those of you with backgrounds in Flash – you’ll notice that we’re loading a different class for the label component. Flex uses the mx.controls.Label class instead of fl.controls.Label.

I’ve noticed a few compatibility issues resulting from the switch, so be aware that actionscript copied between Flash and Flex may require some tweaking to work.

The Flex 3/MXML Way

As expected, the MXML version is significantly more compact:

<mx:Label text="This is built with MXML" fontSize="24"/>

The demos here used minimal styling for the text output. For those interested in adding more variety, I’ll be putting up a post sometime soon on stylesheets with Flex that will help add some formatting to the equation. Subscribe to the feed and make sure you catch it!

Have any questions? Leave them in the comments and we’ll set you straight.