Coding with MXML and ActionScript
Requirements
User level
All
Adobe implemented Flex as an ActionScript class library. That class library contains components (containers and controls), manager classes, data-service classes, and classes for all other features. You develop applications by using the MXML and ActionScript languages with the class library.
MXML
MXML is an XML language that you use to lay out user-interface components for Adobe Flex applications. You also use MXML to declaratively define nonvisual aspects of an application, such as access to server-side data sources and data bindings between user-interface components and data sources.
For example, you use the <s:Button> tag to create an instance of the Button control using the following MXML statement:
<s:Button id="myButton" label="I'm a button!"/>
You set the id property to give the Button instance a unique name that you can use to refer to it later on. The label property sets the text of the label displayed on the Button instance.
The following example shows the complete code required to create a Flex application that displays a Button control:
<?xml version="1.0" encoding="utf-8"?>
<!-- GettingStartedMXML.mxml -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="300" height="80">
<s:layout>
<s:VerticalLayout horizontalAlign="center"
verticalAlign="middle"/>
</s:layout>
<s:Button id="myButton" label="Submit"/>
</s:Application>
After you write a Flex application, you compile it using the Flex compiler. The Flex compiler is a small executable file called mxmlc in the bin folder of the Flex SDK. In a Flash Builder 4 installation, this is the path to the Flex compiler: .../Adobe Flash Builder 4/sdks/4.0.0/bin.
Tip: Ensure that the Flex compiler is in your system's path. Having the Flex compiler in your path allows you to invoke it from the command line regardless of the folder you are currently in.
Follow these steps:
- Create a new file in your favorite text editor (for example, Notepad or TextEdit). Save the file as MyFirst.mxml.
- Enter the code from the preceding example into MyFirst.mxml and save your file.
- Open a command window:
- Windows: Select Start > All Programs > Accessories > Command Prompt
- Mac: Run Applicatons/ Utilities/Terminal
- Change your current directory to the folder that contains the Flex application you saved in step 1.
- Type the following command to invoke the Flex compiler:
mxmlc --strict=true --file-specs MyFirst.mxml
The items in the command string that start with double dashes are known as compiler options. Compiler optons define the behavior of the Flex compiler. In the preceding example, you set the --strict option to true to force the compiler into strict mode. In strict mode, the compiler has higher expectations of your code. For example, it expects you to statically type your variables. You use the --file-specs option to specify the MXML file that is compiled.
- Double-click the SWF file in Windows Explorer or the Finder on a Mac. You can also invoke the file from the command line to open it up in the standalone Adobe Flash Player 10.
The following listing shows the result of compilation from a Terminal window on the Mac:
Macintosh-5:FlexApps genovese$ mxmlc --strict=true --file-specs MyFirst.mxml
Loading configuration file /Applications/Adobe Flash Builder 4/sdks/4.0.0/frameworks/flex-config.xml
/Users/flexuser/Documents/FlexApps/MyFirst.swf (38412 bytes)
Macintosh-5:FlexApps flexuser$
Macintosh-5:FlexApps flexuser$ ls -l
total 88
-rw-r--r--@ 1 flexuser flexuser 341 Feb 23 14:23 MyFirst.mxml
-rw-r--r-- 1 flexuser flexuser 38412 Feb 23 14:30 MyFirst.swf
This example results in the following SWF file:
Tip: You can also create and compile your Flex applications using Adobe Flash Builder 4, an Integrated Development Environment (IDE) for Flex development that contains a visual design view. For more information, refer to Using Flash Builder 4.
ActionScript
MXML tags correspond to ActionScript classes or properties of classes. When you compile your Flex application, Flex parses your MXMLtags and generates the corresponding ActionScript classes. It then compiles these ActionScript classes into SWF bytecode which it stores in a SWF file.
Tip: To see the intermediary ActionScript files that Flex generates, add the --keep-generated-actionscript option to your mxmlc command.
Continuing with the example above, Flex provides the ActionScript Button class that defines the Spark Button control.
Note: In the preceding example, the s prefix in the <s:Button> tag specifies the Spark namespace. With Flex 4.0, Adobe introduces the Spark component set, available from the Spark namespace. The namespace is declared by using a unique URL in the Application tag. The s prefix maps each of the components in the s namespace to its fully qualified class name. This is how the Flex compiler can find the ActionScript classes that correspond to the MXML tags in the s namespace.
The following example demonstrates how to create a Spark Button control using ActionScript. The ActionScript code is contained within the <s:Script> tags in the MXML file. The result of this example corresponds to the previous version.
<?xml version="1.0" encoding="utf-8"?>
<!-- GettingStartedActionScript.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="300" height="80"
creationComplete="creationCompleteHandler()">
<fx:Script>
<![CDATA[
import spark.components.Button;
import mx.events.FlexEvent;
private var myButton:Button;
private function creationCompleteHandler():void {
// Create a Button instance and set its label
myButton = new Button();
myButton.label = "Submit";
// Get notified once button component has been created and processed for layout
myButton.addEventListener (FlexEvent.CREATION_COMPLETE, buttonCreationCompleteHandler);
// Add the Button instance to the DisplayList
addElement(myButton);
}
private function buttonCreationCompleteHandler ( evt:FlexEvent ):void {
// Center the button
myButton.x = parent.width/2 - myButton.width/2;
myButton.y = parent.height/2 - myButton.height/2;
}
]]>
</fx:Script>
</s:Application>
When you create a Flex component through ActionScript, you import the component's class. You also add the component to the DisplayList of your application by using the addElement() method to make it visible. By comparing the length and complexity of this example with its equivalent MXML version, you can see how the simple, tag-based, declarative syntax of MXML saves you from writing many lines of ActionScript code to lay out your components.
This example results in the following SWF file:
Note: This example demonstrates the use of inline ActionScript with the Script tag, which is one possible method of including ActionScript in your Flex application. Other methods are to separate script blocks into external ActionScript files or to use external ActionScript classes.
For more information
This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License.
