ActionScript in Flex Applications

MXML is a powerful way to simplify the creation of user interfaces. In most cases, it is far better to use MXML for layout than to attempt the same thing with
ActionScript. ActionScript is far better suited for business logic and data models. However, MXML and ActionScript are not really so different. In fact, MXML actually gets converted to ActionScript during compilation, and the MXML structure can be understood in terms of an ActionScript class. This can be useful because it allows you to better understand how MXML works and how it relates to ActionScript.

When you use an MXML tag to create a component instance, it is the equivalent to calling the component class’s constructor as part of a new statement. For example, the following MXML tag creates a new button:

  <mx:Button id="button" />

That is equivalent to the following piece of ActionScript code:

  var button:Button = new Button();

If you assign property values using MXML tag attributes, that’s equivalent to setting the object properties via ActionScript. For example, the following creates abuttonand sets thelabel:

  <mx:Button id="button" label="Click" />

The following code is the ActionScript equivalent:

  var button:Button = new Button();
  button.label = "Click";

This demonstrates that MXML component tags correspond to ActionScript classes. Furthermore, MXML documents themselves are essentially ActionScript classes, simply authored in a different syntax. This is an extremely important point to understand. An application document is a class that extends themx.core.Application, and component documents are classes that extend the corresponding component class (e.g.,mx.containers.VBox).

MXML simplifies writing these classes because the MXML tags automatically translate into many lines of ActionScript code that handle important Flex framework tasks such as initialization, layout rules, and so forth.

When you create components with IDs in an MXML document, those are really properties of the class formed by the document. For example, the following creates a new class that extendsmx.core.Applicationand creates one property calledButtonof typemx.controls.Button:

  <?xml version="1.0" encoding="utf-8"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Button id="Button" />
  /mx:Application>

The preceding example is essentially the same as the following ActionScript class:

  package {
    import mx.core.Application;
    import mx.controls.Button;
    public class Example extends Application {
      internal var button:Button;
      public function Example() {
        super();
        button = new Button();
        addChild(button);
      }
    }
  }

The preceding example is an over-simplification. The actual equivalent ActionScript class would be more complex due to initialization requirements of Flex framework components. However, it illustrates the basic relationship between MXML and ActionScript.

When code is placed in an MXML script, it is equivalent to placing code within a class body. Variable declarations within MXML scripts are treated as properties of the class, and functions are methods of the class. This means that the rules that apply to writing pure ActionScript classes also apply to MXML scripts. For this reason, we’ll focus almost exclusively on writing pure ActionScript class code throughout the remainder of this chapter. However, note that you can apply what you learn to MXML scripts as well.

Please check back next week for the continuation of this article.