1. Developer Connection
2. Flex Developer Center
3. Quick Starts

Flex Quick Start: Getting started

Table of contents

• Coding with MXML and ActionScript
• Creating your first application
• Handling events
• Positioning and laying out Flex components
• Embedding application assets

Coding with MXML and ActionScript

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 <mx:Button> tag to create an instance of the Button control using the following MXML statement:

<mx: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"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    horizontalAlign="center" verticalAlign="center">

    <mx:Button id="myButton" label="I'm a button!" />
</mx:Application>

After you write a Flex application, you must 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 Flex Builder 3 installation, this is the path to the Flex compiler: ...\Flex Builder 3\sdks\3.0.0\bin

Instructions

1. Create a new file in your favorite text editor (e.g., Notepad) and save it as MyFirst.mxml.
2. Enter the code from the preceding example into MyFirst.mxml and save your file.
3. Open up a command window by selecting Start > All Programs > Accessories > Command Prompt.
4. Change your current directory to the folder that contains the Flex application you saved in step 1.
5. 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, and they are used to 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.

6. Either double-click the SWF file in Windows Explorer or enter its name in the command line to open it up in the standalone Adobe Flash Player 9.

This example results in the following SWF file:

This content requires Flash

Download the free Flash Player now!

To view the full source, right-click the Flex application and select View Source from the context menu.

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.

Continuing with the example above, Flex provides the ActionScript Button class that defines the Flex Button control.

Note: In the preceding example, the mx prefix in the <mx:Button> tag is a namespace. It is declared by using a unique URL in the Application tag. The mx prefix maps each of the components in the mx 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 mx namespace.

The following example demonstrates how to create a Button control by using ActionScript. The ActionScript code is contained within the <mx:Script> tags in the MXML file. The result of this example is identical to the previous version.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/GettingStartedActionScript/index.html"

    creationComplete="creationCompleteHandler();"
    width="300" height="80"
 >

    <mx:Script>

        <![CDATA[
            import mx.controls.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 = "I'm a button!";
                
                // 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
                addChild (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;
            }

        ]]>
    </mx:Script>
</mx:Application>

When you create a Flex component through ActionScript, you must import the component's class. You must also add the component to the DisplayList of your application by using the addChild() 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:

This content requires Flash

Download the free Flash Player now!

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.

Back to top

For more information

• MXML vs ActionScript 3.0 in the Flex 3 Getting Started Experience
• Developing applications in MXML in the Adobe Flex 3 Help
• Using ActionScript in the Adobe Flex 3 Help

About the author