May 31, 2008

MXML Basics

Posted by Jeremy Mitchell
Arguably, one of the most important parts of the Flex SDK is the Flex Class Library (ActionScript classes categorized and organized into packages). Consisting of numerous ActionScript classes, the Flex Class Library provides a foundation for rapidly building Flex applications.

Dubbed a convenience language, MXML provides developers access to the Flex Class Library through an easy-to-use, easy-to-learn, clean and concise syntax. MXML is simply converted to ActionScript at compile time.

As you may have guessed, MXML follows the convention of XML and, as such, follows the basic syntactical rules of XML.

In many scenarios, using MXML in lieu of ActionScript is considered a best practice. The most popular scenario involves the authoring of application / component layout and structure.

As mentioned earlier, the Flex Class Library is an extensive collection of prebuilt ActionScript classes available for use by your Flex applications. At a very high level, these ActionScript classes provide developers with the ability to accomplish the following:

- Dictate application / component layout and structure
- Style the application / component
- Provide functionality
- Access / parse data

MXML provides an alternate method for Flex development which may be suitable for many scenarios (i.e. application / component layout and structure)

Keep in mind that everything in Flex is derived from an ActionScript class. In other words, every aspect of your Flex application is defined by an instance of an ActionScript class (an object) or by the class itself (static methods, constants, etc). ActionScript is a human-readable, Object-Oriented Programming (OOP) language that when compiled by the Flex compiler is converted into native Flash bytecode and wrapped in a SWF file. This SWF file is ultimately loaded and played by Flash Player 9 embedded in most browsers. Therefore, to build Flex applications, the developer is responsible for the creation and delivery of a collection of ActionScript classes (either prebuilt or custom) to the Flex compiler.

MXML IS ActionScript. MXML is nothing more than an alternate approach to instantiating (creating an object / creating an instance of) a prebuilt or custom ActionScript class for use in a Flex application.

Here is a line of MXML and its ActionScript equivalent.

Creating an instance of the Button class using MXML:

<mx:Button id="myButton" label="Hello" />
Creating an instance of the Button class using ActionScript:

var myButton:Button = new Button();
myButton.label = "Hello";
The MXML is more concise and cleaner in my opinion. In this example, the XML element name (Button) creates a reference variable (named myButton) with reference to a Button object. In MXML, XML attributes typically define the state of the object by setting properties (or instance variables) of the object. Not bad for one short line of code.

Also, as MXML is XML, it makes sense for use in scenarios where parent / child relationships are commonly defined. Application / component layout and structure commonly defines parent / child relationships through use of nested containers and controls, and therefore, makes a great candidate for the use of the XML-based MXML.

1 comment:

nhabibi said...

Brief but excellent description!