Here are the first 3 pages of Chapter 30 of Essential ActionScript 3.0
30. A Minimal MXML Application
In Chapter 20, we learned that the Flex framework includes a sophisticated collection of customizable components for creating user interfaces. The Flex framework’s user interface components are typically used with MXML-based applications, but can also be used in applications written primarily in ActionScript. For the benefit of readers who do not wish to use MXML, this chapter describes the bare minimum steps required to use the Flex framework’s UI components in a Flex Builder 2 project, with as little MXML as possible.
For the record, this chapter has nothing against MXML. In general, MXML is an excellent tool for creating standardized interfaces deployed to the Flash platform. This chapter simply caters to situations where either an application’s layout is entirely programmatically generated or where the developer does not have the time or interest to learn MXML.
For complete information on MXML and the Flex framework, see Adobe’s documentation and O’Reilly’s Programming Flex 2 (Kazoun and Lott, 2007).
Users of the Flash authoring tool should note that Flash CS3 includes its own set of user interface components in the package fl. The Flash CS3 components can also be used (both technically and legally) in ActionScript programs compiled with Flex Builder 2 or mxmlc.
The General Approach
Here are the minimal steps for creating an application that uses the Flex framework’s UI components via ActionScript:
1. In Flex Builder 2, create a Flex project.
2. In the new project, define a class with a static method that will act as the application’s point of entry.
3. In the project’s main MXML file, add an MXML event property that listens for the top-level Application instance’s FlexEvent.APPLICATION_COMPLETE event, and invokes the static method from step 2 in response.
4. In the static method from step 2, create the desired UI components, and add them to the Application instance.
The following sections describe the preceding steps in detail.
Create the Flex Project
To create the project for the application, we follow these steps:
1. In Flex Builder 2, choose File®New®Flex Project.
2. On the New Flex Project dialog, for “How will your Flex application access data?,” select Basic, then click Next.
3. For Project name, enter the desired project name, then click Next.
4. For Main source folder, enter src.
5. For Main application file, enter the desired filename, with the extension .mxml. For example, MinimalMXML.mxml.
6. Click Finish.
In response to the preceding steps, Flex Builder 2 creates a new project whose Library path automatically includes the file framework.swc, which contains the UI components.
Once the project has been created, we create the application’s point of entry, as described in the next section.
Create the Application Point of Entry
Our application’s point of entry is a static method defined by a custom class. In our example, we’ll name the static method main() and the custom class EntryClass. The main() method creates the UI component instances and adds them to the top-level Application instance’s display hierarchy. The top-level Application instance is an automatically created object that acts as the basis of all MXML applications, and provides access to the display list. Throughout our program, the top-level Application instance can be accessed via the mx.core.Application class’s static variable, application.
Example 30-1 shows the code for EntryClass.
Example 30-1. The ActionScript class for a minimal MXML application
package {
import mx.controls.*;
import mx.core.*;
public class EntryClass {
// Application point of entry
public static function main ():void {
// Create Flex framework UI components
// For example:
var button:Button = new Button();
// Add UI components to the screen
// For example:
var mxmlApp:Application = Application(Application.application);
mxmlApp.addChild(button);
}
}
}
Once the EntryClass.main() method has been created, we can invoke it in response to the top-level Application instance’s FlexEvent.APPLICATION_COMPLETE event, as described in the next section.
Trigger the Application Point of Entry
Earlier under “Create the Flex Project,” we specified MinimalMXML.mxml as our example project’s main application file. As a result, Flex Builder 2 automatically inserts the following code into that file:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> </mx:Application>
We need to make only one minor change to the preceding MXML code: we must add an event property that invokes EntryClass.main() when the top-level Application instance receives FlexEvent.APPLICATION_COMPLETE event notification. The following bolded code shows the approach:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="EntryClass.main()"> </mx:Application>
In response to the preceding code, when the application has finished initialization, it will automatically invoke EntryClass.main(), which, in turn, creates the desired UI component instances. (Look mom, no MXML!)
Let’s apply the general approach covered in the preceding sections to a real example.