R – use MXML

actionscriptactionscript-3apache-flexmxml

If everything that can be accomplished in MXML can also be accomplished in ActionScript and many things are easier to accomplish in ActionScript (loops, conditionals, etc) why take the time to learn MXML?

The best reasons I have at this point are that the structure of the MXML nicely matches the visual hierarchy of the UI components and that the lines of code to initialize the UI are reduced. On the other hand real-world UIs are often dynamic, implemented as a simple static structure and then filled in dynamically based on runtime conditions (in which case UI updates are in ActionScript anyway). It would also be possible to reduce the SLOC needed for ActionScript with the creation of a few helper methods.

Best Answer

It depends on your application's needs, but I generally break my design into visual chunks and use custom MXML components to lay out the main areas and components of my application (data panels, dialog boxes, etc) using mxml based custom components. Then I'll augment that with custom actionscript components where I need more visual flexibilty than the built in layout components provide. MXML is handy because it makes it extremely easy to get components on the stage and set their various properties and style settings.

Take this example of two identical login panels:

In MXML:

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="290" height="148" title="Login">
    <mx:Label text="User name:" width="80" textAlign="right" y="8" x="8"/>
    <mx:Label text="Password:" width="80" textAlign="right" y="38" x="8"/>
    <mx:TextInput id="txtUsername" maxChars="20" y="8" x="90"/>
    <mx:TextInput id="txtPassword" displayAsPassword="true" y="38" x="90" maxChars="20"/>
    <mx:Button x="185" y="68" label="Login" id="btnLogin" click="doLogin()"/>
</mx:Panel>

And in actionscript:

package
{
    import flash.events.MouseEvent;

    import mx.containers.Panel;
    import mx.controls.Button;
    import mx.controls.Label;
    import mx.controls.TextInput;

    public class MyLoginPanel extends Panel
    {

        private var _unLabel:Label;
        private var _passLabel:Label;
        private var _txtUsername:TextInput;
        private var _txtPassword:TextInput;
        private var _btnLogin:Button;

        public function MyLoginPanel()
        {
        }

        override protected function createChildren():void
        {
            super.createChildren();

            this.width = 290;
            this.height = 148;
            this.title = "Login";
            this.layout = "absolute";

            _unLabel = new Label();
            _unLabel.text = "User Name:";
            _unLabel.width = 80;
            _unLabel.setStyle("textAlign", "right");
            _unLabel.move(8, 8);
            this.addChild(_unLabel);

            _passLabel = new Label();
            _passLabel.text = "Password:";
            _passLabel.width = 80;
            _passLabel.setStyle("textAlign", "right");
            _passLabel.move(8, 38);
            this.addChild(_passLabel);

            _txtUsername = new TextInput();
            _txtUsername.move(90, 8);
            this.addChild(_txtUsername);

            _txtPassword = new TextInput();
            _txtPassword.move(90, 38);
            _txtPassword.displayAsPassword = true;
            this.addChild(_txtPassword);

            _btnLogin = new Button();
            _btnLogin.label = "Login";
            _btnLogin.move(185, 68);
            _btnLogin.addEventListener(MouseEvent.CLICK, doLogin);
            this.addChild(_btnLogin);
        }       
    }
}

Seven lines of code vs 62. That's a pretty simple example, but hopefully you can see how you might benefit by laying out many portions of your application in MXML, whether you're using the design mode in Flex Builder or not.

One thing I do recommend however is keep actionscript out of your mxml files as much as possible. Treat MXML as your view and separate any heavy functionality into other classes. You can then provide public properties in those classes that the controls in your MXML components can bind to. MXML is a layout language and in my experience it pays in the end to use it where it makes sense and drop into actionscript whenever heavier lifting is required.

Related Topic