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.

May 26, 2008

Flex Overview

Posted by Jeremy Mitchell
Flex is a collection of resources packaged into an SDK (software development kit consisting of the Flex class library (ActionScript classes), the Flex compilers, the debugger, the MXML and ActionScript programming languages, and other utilities) provided by Adobe for use in building expressive and interactive rich internet applications (RIA). By leveraging the Flex SDK and Flex Builder (an Eclipse plugin), developers can create feature-rich, web-based and cross-browser compatible (thanks to Flash Player) applications.

Most applications of any merit consist of client-side functionality and server-side functionality. Traditional web applications utilize Javascript on the client side and a host of scripting languages (ColdFusion, PHP, JSP, .NET, etc) on the server side. Flex applications follow the same model. In fact, the Flex portion of an application (delivered as a SWF file) closely resembles the HTML / Javascript portion of a traditional web application. Flex takes care of the user interface (UI) or the client-side functionality of a web application. Server-side functionality (database interaction, for example) is still dependent on server-side components written in a traditional scripting language (ColdFusion, PHP, JSP, .NET, etc). However, you'll notice that many functions typically handled on the server (i.e. web service consumption) are now handled in the client thanks to Flex.

Web applications that depend too heavily on the server have a negative impact on user experience - specifically applications that require a full-page refresh to interact with the server. As the technology has become available, web applications are shifting a significant amount of work from the server to the client. The result is a highly responsive application providing instant user feedback which results in happier users. Flex-based applications and AJAX-based applications are leading the way.

As developers, one of our goals is to create the files that compose an application. As a whole, these files dictate the layout, structure, style and business logic of an application. In Flex, these files consist primarily of MXML files and ActionScript files (although CSS files play their typical role as stylesheets and Javascript is also available to your Flex app for additional client-side functionality, if necessary).

Best practices suggest the seperation of layout (or structure), style and business logic when developing web-based applications. The same holds true for Flex apps.

A properly-defined Flex app might look like the following*:

- Layout / structure: MXML files and/or ActionScript files
- Style: CSS files
- Client-side business logic: ActionScript files

However, there are exceptions to every rule, and many scenarios justify the use of inline ActionScript inside MXML (layout/structure) files. Similar to the use of inline Javascript inside HTML files, inline ActionScript can be used to provide client-side functionality such as event handling (event handlers) and data binding. However, it is probably best to limit your use of inline ActionScript to simple statements such as method calls or property assignment rather than complex logic. For example:

<mx:Button id="myButton" click="myObject.myFunction()" />
<mx:Button id="myButton" click="currentState='myState'" />
In the first example, a click event dispatched by the myButton instance of the Button class triggers a call to the myFunction method of the myObject instance. In other words, when you click myButton, myFunction is called. The MXML only maps the event to the method. The body of the method may be stored in a separate AS file and, therefore, business logic is successfully separated from layout / structure.

In the second example, a click event dispatched from myButton triggers a simple property assignment (currentState) required to alter the layout / structure using application states. Since this ActionScript statement impacts the layout / structure of the application, one could argue that it's place belongs in the MXML file used to define layout / structure.

When our development is complete, the Flex compiler that ships with Flex Builder generates one or more SWF files based on our MXML files and Actionscript files.


Deploying a Flex application involves the delivery of the SWF file(s) plus an HTML wrapper, the CSS file(s) and any server-side script files (i.e. .CFM, .PHP, etc) to the server. Like traditional web applications, these resources are delivered from the server to the client browser using the customary HTTP request / response fashion.

Check out the animated overview of the Flex development life cycle for a nifty visual of the process.

*Don't forget a complete application usually requires server-side functionality (i.e. database interaction) implemented in the form of server-side scripts (ColdFusion, PHP, JSP, .NET, etc.).