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);
Length of code does not always mean inefficient. The more familiar you become with MXML and ActionScript, the more you will realize how actionscript can to give more intricate control when used with Flex. Don’t view Flex’s MXML as a replacement to conventional actionscript coding. It is essentially a framework, much like what jQuery and MooTools are to JavaScript.
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.
Discussion
June 1st, 2010 at 8:12 AM
Hi Zach,
I am trying to drag and drop buttons from a hbox to a canvas. However, after i drag and drop, it is vanishing from the hbox and appearing in canvas. I want it to also remain in hbox. My event handler is as follows:
public function dragButton(e:MouseEvent):void
{
if(e.buttonDown)
{
var button:Button = e.currentTarget as Button;
var buttonProxy:Button = new Button();
buttonProxy.width = button.width;
buttonProxy.height = button.height;
var dragSource:DragSource = new DragSource();
dragSource.addData(button, ‘button’);
DragManager.doDrag(button, dragSource, e);
//button.parent.addChild(button);
}
}
Actually i should be able to duplicate the button “button” and create a new button “buttonProxy” with same features as that of “button”. The actual button has a “icon” property. But when i create “buttonProxy” i cant seem to have such property. What do i do?
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.