MXML development is based on the same iterative process used for other types of web application files such as HTML, JavaServer Pages (JSP), Active Server Pages (ASP), and ColdFusion Markup Language (CFML). Developing a useful Flex application is as easy as opening your favorite text editor, typing some XML tags, saving the file, requesting the file's URL in a web browser, and then repeating the same process.

Flex also provides tools for code debugging. For more information, see Using the Command-Line Debugger.

Laying out a user interface using containers

In the Flex model-view design pattern, user interface components represent the view. The MXML language supports two types of user interface components: controls and containers. Controls are form elements, such as buttons, text fields, and list boxes. Containers are rectangular regions of the screen that contain controls and other containers.

You use container components for laying out a user interface, and for controlling user navigation through the application. Examples of layout containers include the HBox container for laying out child components horizontally, the VBox container for laying out child components vertically, and the Grid container for laying out child components in rows and columns. Examples of navigator containers include the TabNavigator container for creating tabbed panels, the Accordion navigator container for creating collapsible panels, and the ViewStack navigator container for laying out panels on top of each other.

The Container class is the base class of all Flex container classes. Containers that extend the Container class add their own functionality for laying out child components. Typical properties of a container tag include id, width, and height. For more information about the standard Flex containers, see Introducing Containers.

The following image shows an example Flex application that contains a List control on the left side of the user interface and a TabNavigator container on the right side. Both controls are enclosed in a Panel container.

Use the following code to implement this application:

<?xml version="1.0"?>
<!-- mxml/LayoutExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <mx:HBox>
            <!-- List with three items -->
            <mx:List>
                <mx:dataProvider>
                    <mx:Array>
                        <mx:String>Item 1</mx:String>
                        <mx:String>Item 2</mx:String>
                        <mx:String>Item 3</mx:String>
                    </mx:Array>
                </mx:dataProvider>
            </mx:List>

            <!-- First pane of TabNavigator -->
            <mx:TabNavigator borderStyle="solid">
                <mx:VBox label="Pane1" width="300" height="150">
                    <mx:TextArea text="Hello World"/>
                    <mx:Button label="Submit"/>
                </mx:VBox>

                <!-- Second pane of TabNavigator -->
                <mx:VBox label="Pane2" width="300" height="150">
                    <!-- Stock view goes here -->
                </mx:VBox>

            </mx:TabNavigator>
        </mx:HBox>
    </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

The List control and TabNavigator container are laid out side by side because they are in an HBox container. The controls in the TabNavigator container are laid out from top to bottom because they are in a VBox container.

For more information about laying out user interface components, see Using Flex Visual Components.

Adding user interface controls

Flex includes a large selection of user interface components, such as Button, TextInput, and ComboBox controls. After you define the layout and navigation of your application by using container components, you add the user interface controls.

The following example contains an HBox (horizontal box) container with two child controls, a TextInput control and a Button control. An HBox container lays out its children horizontally.

<?xml version="1.0"?>
<!-- mxml/AddUIControls.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            private function storeZipInDatabase(s:String):void {
                // event handler code here
            }
        ]]>
    </mx:Script>

    <mx:HBox>
        <mx:TextInput id="myText"/>
        <mx:Button click="storeZipInDatabase(myText.text)"/>
    </mx:HBox>

</mx:Application>
The executing SWF file for the previous example is shown below:

Typical properties of a control tag include id, width, height, fontSize, color, event listeners for events such as click and change, and effect triggers such as showEffect and rollOverEffect. For information about the standard Flex controls, see Controls.

Using the id property with MXML tags

With a few exceptions (see MXML tag rules), an MXML tag has an optional id property, which must be unique within the MXML file. If a tag has an id property, you can reference the corresponding object in ActionScript.

In the following example, results from a web-service request are traced in the writeToLog function:

<?xml version="1.0"?>
<!-- mxml/UseIDProperty.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:VBox>
        <mx:TextInput id="myText" text="Hello World!" />
        <mx:Button id="mybutton" label="Get Weather" click="writeToLog();"/>
    </mx:VBox>
    <mx:Script>
        <![CDATA[
            private function writeToLog():void          {
                trace(myText.text);
            }
        ]]>
    </mx:Script>
</mx:Application>
The executing SWF file for the previous example is shown below:

This code causes the MXML compiler to autogenerate a public variable named myText that contains a reference to that TextInput instance. This autogenerated variable lets you access the component instance in ActionScript. You can explicitly refer to the TextInput control's instance with its id instance reference in any ActionScript class or script block. By referring to a component's instance, you can modify its properties and call its methods.

Because each id value in an MXML file is unique, all objects in a file are part of the same flat namespace. You do not qualify an object by referencing its parent with dot notation, as in myVBox.myText.text.

For more information, see Referring to Flex components.

Using XML namespaces

In an XML document, tags are associated with a namespace. XML namespaces let you refer to more than one set of XML tags in the same XML document. The xmlns property in an MXML tag specifies an XML namespace. To use the default namespace, specify no prefix. To use additional tags, specify a tag prefix and a namespace.

For example, the xmlns property in the following <mx:Application> tag indicates that tags in the MXML namespace use the prefix mx:. The Universal Resource Identifier (URI) for the MXML namespace is http://www.adobe.com/2006/mxml.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

XML namespaces give you the ability to use custom tags that are not in the MXML namespace. The following example shows an application that contains a custom tag called CustomBox. The namespace value containers.boxes.* indicates that an MXML component called CustomBox is in the containers/boxes directory.

<?xml version="1.0"?>
<!-- mxml/XMLNamespaces.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComps="containers.boxes.*"
>
    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <MyComps:CustomBox/>
    </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

The containers/boxes directory can be a subdirectory of the directory that contains the application file, or it can be a subdirectory of one of the ActionScript source path directories assigned in the flex-config.xml file. If copies of the same file exist in both places, Flex uses the file in the application file directory. The prefix name is arbitrary, but it must be used as declared.

When using a component contained in a SWC file, the package name and the namespace must match, even though the SWC file is in the same directory as the MXML file that uses it. A SWC file is an archive file for Flex components. SWC files make it easy to exchange components among Flex developers. You exchange only a single file, rather than the MXML or ActionScript files and images, along with other resource files. Also, the SWF file inside a SWC file is compiled, which means that the code is obfuscated from casual view. For more information on SWC files, see Using the Flex Compilers.

Using MXML to trigger run-time code

Flex applications are driven by run-time events, such as when a user selects a Button control. You can specify event listeners, which consist of code for handling run-time events, in the event properties of MXML tags. For example, the <mx:Button> tag has a click event property in which you can specify ActionScript code that executes when the Button control is clicked at run time. You can specify simple event listener code directly in event properties. To use more complex code, you can specify the name of an ActionScript function defined in an <mx:Script> tag.

The following example shows an application that contains a Button control and a TextArea control. The click property of the Button control contains a simple event listener that sets the value of the TextArea control's text property to the text Hello World.

<?xml version="1.0"?>
<!-- mxml/TriggerCodeExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <mx:TextArea id="textarea1"/>
        <mx:Button label="Submit" click="textarea1.text='Hello World';"/>
    </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

The following image shows the application rendered in a web browser window:

[

The following example shows the code for a version of the application in which the event listener is contained in an ActionScript function in an <mx:Script> tag:

<?xml version="1.0"?>
<!-- mxml/TriggerCodeExample2.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            private function hello():void {
                textarea1.text="Hello World";
            }
        ]]>
    </mx:Script>
    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <mx:TextArea id="textarea1"/>
        <mx:Button label="Submit" click="hello();"/>

    </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

For more information about using ActionScript with MXML, see Using ActionScript.

Binding data between components

Flex provides simple syntax for binding the properties of components to each other. In the following example, the value inside the curly braces ({ }) binds the text property of a TextArea control to the text property of a TextInput control. When the application initializes, both controls display the text Hello. When the user clicks the Button control, both controls display the text Goodbye.

<?xml version="1.0"?>
<!-- mxml/BindingExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <mx:TextInput id="textinput1" text="Hello"/>
        <mx:TextArea id="textarea1" text="{textinput1.text}"/>
        <mx:Button label="Submit" click="textinput1.text='Goodbye';"/>
    </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

The following image shows the application rendered in a web browser window after the user clicks the Submit button:

As an alternative to the curly braces ({ }) syntax, you can use the <mx:Binding> tag, in which you specify the source and destination of a binding. For more information about data binding, see Storing Data.

Using RPC services

Remote-procedure-call (RPC) services let your application interact with remote servers to provide data to your applications, or for your application to send data to a server.

Flex is designed to interact with several types of RPC services that provide access to local and remote server-side logic. For example, a Flex application can connect to a web service that uses the Simple Object Access Protocol (SOAP), a Java object residing on the same application server as Flex using AMF, or an HTTP URL that returns XML.

The MXML components that provide data access are called RPC components. MXML includes the following types of RPC components:

• WebService provides access to SOAP-based web services.
• HTTPService provides access to HTTP URLs that return data.
• RemoteObject provides access to Java objects using the AMF protocol (Adobe LiveCycle Data Services ES only).

The following example shows an application that calls a web service that provides weather information, and displays the current temperature for a given ZIP code. The application binds the ZIP code that a user enters in a TextInput control to a web service input parameter. It binds the current temperature value contained in the web service result to a TextArea control.

<?xml version="1.0"?>
<!-- mxml/RPCExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <!-- Define the web service connection
        (the specified WSDL URL is not functional). -->
    <mx:WebService id="WeatherService"       
        wsdl="http:/example.com/ws/WeatherService?wsdl" 
        useProxy="false">

        <!-- Bind the value of the ZIP code entered in the TextInput control
            to the ZipCode parameter of the GetWeather operation. -->
        <mx:operation name="GetWeather">
            <mx:request>
                <ZipCode>{zip.text}</ZipCode>
            </mx:request>
        </mx:operation>
    </mx:WebService>
    
    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10" >

        <!-- Provide a ZIP code in a TextInput control. -->
        <mx:TextInput id="zip" width="200" text="Zipcode please?"/>

        <!-- Call the web service operation with a Button click. -->
        <mx:Button width="60" label="Get Weather"
            click="WeatherService.GetWeather.send();"/>

        <!-- Display the location for the specified ZIP code. -->
        <mx:Label text="Location:"/>
        <mx:TextArea text="{WeatherService.GetWeather.lastResult.Location}"/>

        <!-- Display the current temperature for the specified ZIP code. -->
        <mx:Label text="Temperature:"/>
        <mx:TextArea
            text="{WeatherService.GetWeather.lastResult.CurrentTemp}"/>
    </mx:Panel>
</mx:Application>

The following image shows the application rendered in a web browser window:

For more information about using RPC services, see Accessing Server-Side Data with Flex.

Storing data in a data model

You can use a data model to store application-specific data. A data model is an ActionScript object that provides properties for storing data, and optionally contains methods for additional functionality. Data models provide a way to store data in the Flex application before it is sent to the server, or to store data sent from the server before using it in the application.

You can declare a simple data model that does not require methods in an <mx:Model>, <mx:XML>, or <mx:XMLList> tag. The following example shows an application that contains TextInput controls for entering personal contact information and a data model, represented by the <mx:Model> tag, for storing the contact information:

<?xml version="1.0"?>
<!-- mxml/StoringData.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- A data model called "contact" stores contact information.
        The text property of each TextInput control shown above
        is passed to a field of the data model. -->
    <mx:Model id="contact">
        <info>
            <homePhone>{homePhoneInput.text}</homePhone>
            <cellPhone>{cellPhoneInput.text}</cellPhone>
            <email>{emailInput.text}</email>
        </info>
    </mx:Model>

    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10" >
        <!-- The user enters contact information in TextInput controls. -->
        <mx:TextInput id="homePhoneInput"
            text="This isn't a valid phone number."/>
        <mx:TextInput id="cellPhoneInput" text="(999)999-999"/>
        <mx:TextInput id="emailInput" text="me@somewhere.net"/>
    </mx:Panel>

</mx:Application>
The executing SWF file for the previous example is shown below:

Validating data

You can use validator components to validate data stored in a data model, or in a Flex user interface component. Flex includes a set of standard validator components. You can also create your own.

The following example uses validator components for validating that the expected type of data is entered in the TextInput fields. Validation is triggered automatically when the user edits a TextInput control. If validation fails, the user receives immediate visual feedback.

<?xml version="1.0"?>
<!-- mxml/ValidatingExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <!-- A data model called "contact" stores contact information.
        The text property of each TextInput control shown above
        is passed to a field of the data model. -->
    <mx:Model id="contact">
        <info>
            <homePhone>{homePhoneInput.text}</homePhone>
            <cellPhone>{cellPhoneInput.text}</cellPhone>
            <email>{emailInput.text}</email>
        </info>
    </mx:Model>

    <!-- Validator components validate data entered into the TextInput controls. -->
    <mx:PhoneNumberValidator id="pnV" 
        source="{homePhoneInput}" property="text"/>
    <mx:PhoneNumberValidator id="pnV2" 
        source="{cellPhoneInput}" property="text"/>
    <mx:EmailValidator id="emV" source="{emailInput}" property="text" />

    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10" >
        <!-- The user enters contact information in TextInput controls. -->
        <mx:TextInput id="homePhoneInput"
            text="This isn't a valid phone number."/>
        <mx:TextInput id="cellPhoneInput" text="(999)999-999"/>
        <mx:TextInput id="emailInput" text="me@somewhere.net"/>
    </mx:Panel>

</mx:Application>
The executing SWF file for the previous example is shown below:

The following image shows the application rendered in a web browser window:

For more information about using data models, see Storing Data. For more information on validators, see Validating Data.

Formatting data

Formatter components are ActionScript components that perform a one-way conversion of raw data to a formatted string. They are triggered just before data is displayed in a text field. Flex includes a set of standard formatters. You can also create your own formatters. The following example shows an application that uses the standard ZipCodeFormatter component to format the value of a variable:

<?xml version="1.0"?>
<!-- mxml/FormatterExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- Declare a ZipCodeFormatter and define parameters. -->
    <mx:ZipCodeFormatter id="ZipCodeDisplay" formatString="#####-####"/>

    <mx:Script>
        <![CDATA[
            [Bindable]
            private var storedZipCode:Number=123456789;
        ]]>
    </mx:Script>

    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <!-- Trigger the formatter while populating a string with data. -->
        <mx:TextInput text="{ZipCodeDisplay.format(storedZipCode)}"/> 
    </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

The following image shows the application rendered in a web browser window:

For more information about formatter components, see Formatting Data.

Using Cascading Style Sheets (CSS)

You can use style sheets based on the CSS standard to declare styles to Flex components. The MXML <mx:Style> tag contains inline style definitions or a reference to an external file that contains style definitions.

The <mx:Style> tag must be an immediate child of the root tag of the MXML file. You can apply styles to an individual component using a class selector, or to all components of a certain type using a type selector.

The following example defines a class selector and a type selector in the <mx:Style> tag. Both the class selector and the type selector are applied to the Button control.

<?xml version="1.0"?>
<!-- mxml/CSSExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Style>
        .myClass { color: Red } /* class selector */
        Button { font-size: 18pt} /* type selector */
    </mx:Style>

    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <mx:Button styleName="myClass" label="This is red 18 point text."/>
    </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

A class selector in a style definition, defined as a label preceded by a period, defines a new named style, such as myClass in the preceding example. After you define it, you can apply the style to any component using the styleName property. In the preceding example, you apply the style to the Button control to set the font color to red.

A type selector applies a style to all instances of a particular component type. In the preceding example, you set the font size for all Button controls to 18 points.

The following image shows the application rendered in a web browser window:

For more information about using Cascading Style Sheets, see Using Styles and Themes.

Using skins

Skinning is the process of changing the appearance of a component by modifying or replacing its visual elements. These elements can be made up of bitmap images, SWF files, or class files that contain drawing methods that define vector images. Skins can define the entire appearance, or only a part of the appearance, of a component in various states. For more information about using skins, see Creating Skins.

Using effects

An effect is a change to a component that occurs over a brief period of time. Examples of effects are fading, resizing, and moving a component. An effect is combined with a trigger, such as a mouse click on a component, a component getting focus, or a component becoming visible, to form a behavior. In MXML, you apply effects as properties of a control or container. Flex provides a set of built-in effects with default properties.

The following example shows an application that contains a Button control with its rollOverEffect property set to use the WipeLeft effect when the user moves the mouse over it:

<?xml version="1.0"?>
<!-- mxml/WipeLeftEffect.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <!-- Define the effect. -->
    <mx:WipeLeft id="myWL" duration="1000"/>

    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <!-- Assign effect to targets. -->
        <mx:Button id="myButton" rollOverEffect="{myWL}"/>
    </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

For more information about effects, see Using Behaviors.

Defining custom MXML components

Custom MXML components are MXML files that you create and use as custom MXML tags in other MXML files. They encapsulate and extend the functionality of existing Flex components. Just like MXML application files, MXML component files can contain a mix of MXML tags and ActionScript code. The name of the MXML file becomes the class name with which you refer to the component in another MXML file.

The following example shows a custom ComboBox control that is prepopulated with list items:

<?xml version="1.0"?>
<!-- mxml/containers/boxes/MyComboBox.mxml -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
     <mx:ComboBox >
        <mx:dataProvider>
            <mx:String>Dogs</mx:String>
            <mx:String>Cats</mx:String>
            <mx:String>Mice</mx:String>
        </mx:dataProvider>
    </mx:ComboBox>
</mx:VBox>

The following example shows an application that uses the MyComboBox component as a custom tag. The value containers.boxes.* assigns the MyComps namespace to the containers/boxes sub-directory. To run this example, store the MyComboBox.mxml file in that sub-directory.

<?xml version="1.0"?>
<!-- mxml/CustomMXMLComponent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComps="containers.boxes.*">

    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10" 
    >
        <MyComps:MyComboBox/>
    </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

The following image shows the application rendered in a web browser window:

For more information about MXML components, see Simple MXML Components.

You can also define custom Flex components in ActionScript. For more information, see Simple Visual Components in ActionScript.