Why should I use MXML?

Question

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.

Answer 1

Designing UI elements with mxml and the visual designer is much easier than in code, and less error-prone in my opinion.

Even if the UI changes dynamically, often this means swapping pre-defined UI elements in and out.

Answer 2

If you use FlexBuilder then MXML is useful for laying out an application as FlexBuilder can read/ write MXML in the design view. Also it is far easier to implement states via MXML.

If you do not use a tool such as FlexBuilder that has a design view, then it may be less useful. Remember though that Flex4 is due to introduce the new Thermo stuff, which includes the ability to create vector graphics using MXML notation, and will allow MXML to be used to skin the Flex components. It'll likely come into its own then. You'll have an advantage at that point if you have already learned your way around MXML.

Answer 3

Are you saying that you're going to use the Flex framework, but are choosing whether to use MXML or work dynamically in AS? If so, then the chief advantage of MXML is integration with the design interface. If having access to the WYSIWYG interface is not of value to you, then you may find that there's little difference between MXML and pure AS.

If you're asking about using MXML vs. using FLA files, then that's a very different question though - it amounts to "why should I use the Flex Framework?"

Answer 4

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.