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.

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.

Both examples shown in the post produce the same result. Have any questions? Leave them in the comments and we’ll set you straight.

Posted Friday, December 19th, 2008 · Back to Top

SPONSOR

Add Comment

2 Comments 1 Mentions

  1. Ronnie Author Editor

    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?

    ·

  2. Markus Author Editor

    Hi Zach,

    i think it should be:

    import mx.controls.Button;

    instead of:

    import mx.controls.button;

    Thanks anyway, helps me to build my button :)

    Kind regards

    ·

 

Build Internet by One Mighty Roar. Since 2008.