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.
Note
Because MXML is compiled into ActionScript, there is no runtime performance difference between components written in MXML and components written in ActionScript. The difference is primarily seen at authoring time. When you're writing a component, you will find there are differences between using MXML and using ActionScript. MXML is usually faster to write than ActionScript, but it also has its limitations. When you need to create something that is dynamic or can be highly parameterized, ActionScript is usually the better approach simply because it gives you greater low-level control. Furthermore, although an MXML component gets converted to an ActionScript class during compilation, it is not possible to customize the constructor for an MXML component. Therefore, if you need to customize the constructor, you must use ActionScript.
When you use an MXML tag to create a component instance, it is the
equivalent of 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:
public 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 a button and sets
the label:
<mx:Button id="button" label="Click" />
The following code is the ActionScript equivalent (assuming that
button is already defined as we’ve
already seen):
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 the mx.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 extends
mx.core.Application and creates one
property called Button of type mx.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 {
public var button:Button;
public function Example() {
super();
button = new Button();
addChild(button);
}
}
}Note
The preceding example is an oversimplification. The actual equivalent ActionScript class would be more complex due to the 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.