ActionScript 3 vs Flex 3: Buttons
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 integrate the two to get the best result.
Be familiar with both methods of coding and you’ll be making some of the best rich internet apps yet. This post outlines the basics of creating button with both ActionScript 3 and MXML in Flex.
The ActionScript 3 Way
For a button control the mx.controls.button package must be loaded. If you forget, you’ll be reminded by an error message about how the class “Button” wasn’t recognized. You will notice that to create a button actionscript first needs to declare it as a variable before adding it to the stage via the addChild() method.
Sorry if the change of format is clashing with anyone, the syntax highlighter I normally use doesn’t currently have support for ActionScript 3, so I found an alternative until an update improves the situation.
import mx.controls.button; private var asButton:Button = new Button(); asButton.x = 100; asButton.y = 100; asButton.id="actionscriptButton"; asButton.label = "ActionScript 3 Button"; addChild(asButton);
The Flex 3/MXML Way
The code below generates the same result as above. With MXML, you’ll notice that everything has been condensed into one tag. With MXML, each attribute to the button tag contains the same information outlined in the actionscript example above.
You do not need to declare a variable for each tag, import control packages, or add the button to the stage. All of those actions are automatically handled within the tag.
<mx:Button id="flexButton" x="100" y="100" label="MXML Button"/>
Both examples shown in the post produce the same result. Have any questions? Leave them in the comments and we’ll set you straight.