Flex defines two sets of components: MX and Spark. The MX component set was included in previous releases of Flex, and is defined in the mx.* packages. The Spark component set is new for Flex 4 and is defined in the spark.* packages. The Spark components use a new architecture for skinning and have other advantages over the MX components.

The MX and Spark component sets contain many of the same components. For example, both component sets defines a Button control, TextInput control, and List control. However, while you can use MX components to perform most of the same actions that you can perform by using the Spark components, it's best to you use the Spark components when possible.

Because MXML files are ordinary XML files, you have a wide choice of development environments. You can write MXML code in a simple text editor, a dedicated XML editor, or an integrated development environment (IDE) that supports text editing.

The following example shows a simple "Hello World" application that contains just an <s:Application> tag and three child tags, the <s:Panel> tag and the <s:Label> tags, plus a <s:layout> tag. The <s:Application> tag defines the Application container that is always the root tag of an application. The <s:Panel> tag defines a Panel container that includes a title bar, a title, a status message, a border, and a content area for its children. The <s:Label> tag represents a Label control, a very simple user interface component that displays text.

<?xml version="1.0"?> 
<!-- mxml\HellowWorld.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <s:Panel title="My Application"> 
        <s:Label text="Hello World" fontWeight="bold" fontSize="24"/> 
    </s:Panel> 
</s:Application>

Save this code to a file named hello.mxml. MXML filenames must end in a lowercase .mxml file extension.

 <?xml version="1.0" encoding="utf-8"?>

You comple MXML files into SWF files.

You can deploy your application as a compiled SWF file or as a SWF file included in an AIR application.

End users of the application do not typically reference the SWF file directly in an HTTP request. Instead, you embed the application SWF file in an HTML page. The HTML page then uses a script to load the SWF file. Collectively, the HTML page and the script are known as the wrapper.

When the SWF file is embedded in the HTML page, users then access the deployed SWF file by making an HTTP request to the HTML page, in the form:

 http://hostname/path/filename.html

For more information on wrappers, see Creating a wrapper.

Flex also provides a command-line MXML compiler, mxmlc, that lets you compile MXML files. You can use mxmlc to compile hello.mxml from a command line, as the following example shows:

 cd flex_install_dir/bin 
 mxmlc --show-actionscript-warnings=true --strict=true c:/app_dir/hello.mxml

In this example, flex_install_dir is the Flex installation directory, and app_dir is the directory containing hello.mxml. The resultant SWF file, hello.swf, is written to the same directory as hello.mxml.

For more information about mxmlc, see Flex compilers.

Flex is implemented 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 tags correspond to ActionScript classes or properties of classes. Flex parses MXML tags and compiles a SWF file that contains the corresponding ActionScript objects. For example, Flex provides the ActionScript Button class that defines the Flex Button control. In MXML, you create a Button control by using the following MXML statement:

 <s:Button label="Submit"/>

When you declare a control using an MXML tag, you create an instance of that class. This MXML statement creates a Button object, and initializes the label property of the Button object to the string "Submit".

An MXML tag that corresponds to an ActionScript class uses the same naming conventions as the ActionScript class. Class names begin with an uppercase letter, and uppercase letters separate the words in class names. Every MXML tag attribute corresponds to a property of the ActionScript object, a style applied to the object, or an event listener for the object. For a complete description of the Flex class library and MXML tag syntax, see the ActionScript 3.0 Reference for Apache Flex.

You can write an MXML application in a single file or in multiple files. You typically define a main file that contains the <s:Application> tag. From within your main file, you can then reference additional files written in MXML, ActionScript, or a combination of the two languages.

A common coding practice is to divide your Flex application into functional units, or modules, where each module performs a discrete task. In Flex, you can divide your application into separate MXML files and ActionScript files, where each file corresponds to a different module. By dividing your application into modules, you provide many benefits, including the following:

Ease of development

Different developers or development groups can develop and debug modules independently of each other.

Reusability

You can reuse modules in different applications so that you do not have to duplicate your work.

Maintainability

You can isolate and debug errors faster than if your application is developed in a single file.

In Flex, a module corresponds to a custom component implemented either in MXML or in ActionScript. These custom components can reference other custom components. There is no restriction on the level of nesting of component references in Flex. You define your components as required by your application.

You can also use sub-applications rather than modules to develop applications that are not monolithic.

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 HGroup container for laying out child components horizontally and the VGroup container for laying out child components vertically. Examples of navigator containers include the MX TabNavigator container for creating tabbed panels and the MX Accordion navigator container for creating collapsible panels. Typical properties of a container tag include id, width, and height. For more information about the standard Flex containers, see Introduction to containers.

The following example application contains a Spark List control on the left side of the user interface and an MX TabNavigator container on the right side. Both controls are enclosed in a Spark Panel container:

<?xml version="1.0"?> 
<!-- mxml/LayoutExample.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <s:Panel title="My Application"> 
        <s:HGroup> 
            <!-- List with three items --> 
            <s:List> 
                <s:dataProvider> 
                    <mx:ArrayCollection> 
                        <fx:String>Item 1</fx:String> 
                        <fx:String>Item 2</fx:String> 
                        <fx:String>Item 3</fx:String> 
                    </mx:ArrayCollection> 
                </s:dataProvider> 
            </s:List> 
 
            <!-- First pane of TabNavigator --> 
            <mx:TabNavigator borderStyle="solid"> 
                <s:NavigatorContent label="Pane1" width="300"> 
                    <s:layout> 
                        <s:VerticalLayout/> 
                    </s:layout> 
                    <s:TextArea text="Hello World"/> 
                    <s:Button label="Submit"/> 
                </s:NavigatorContent> 
 
                <!-- Second pane of TabNavigator --> 
                <s:NavigatorContent label="Pane2" width="300" height="150"> 
                    <!-- Stock view goes here --> 
                </s:NavigatorContent> 
            </mx:TabNavigator> 
        </s:HGroup> 
    </s:Panel> 
</s:Application>

The List control and TabNavigator container are laid out side by side because they are in an HGroup container. The controls in the TabNavigator container are laid out from top to bottom because they are in a NavigatorContent containers that use the VerticalLayout class.

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

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 HGroup (horizontal group) container with two child controls, a TextInput control and a Button control. An HGroup container lays out its children horizontally.

<?xml version="1.0"?> 
<!-- mxml/AddUIControls.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
    
    <fx:Script> 
        <![CDATA[ 
            private function storeZipInDatabase(s:String):void { 
                // event handler code here 
            } 
        ]]> 
    </fx:Script> 
 
    <s:HGroup> 
        <s:TextInput id="myText"/> 
        <s:Button click="storeZipInDatabase(myText.text);"/> 
    </s:HGroup> 
</s:Application>

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 UI Controls.

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.

The following example uses the trace() function to write the value of the text property of a TextInput control to the log file:

<?xml version="1.0"?> 
<!-- mxml/UseIDProperty.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
    
    <fx:Script> 
        <![CDATA[ 
            private function writeToLog():void { 
                trace(myText.text); 
            } 
        ]]> 
    </fx:Script> 
 
    <s:VGroup id="myVGroup"> 
        <s:TextInput id="myText" 
            text="Hello World!" /> 
        <s:Button id="mybutton" 
            label="Get Weather" 
            click="writeToLog();"/> 
    </s:VGroup> 
</s:Application>

This code causes the MXML compiler to generate a public variable named myText that contains a reference to the TextInput instance. This 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 myVGroup.myText.text.

For more information, see Referring to components.

The xmlns property in an MXML tag specifies an XML namespace. To use the default namespace, specify no prefix. Typically, you specify a tag prefix and a namespace.

For example, the xmlns properties in the following <s:Application> tag indicates that tags corresponding to the Spark component set use the prefix s:.

 <s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:mx="library://ns.adobe.com/flex/mx" 
	xmlns:s="library://ns.adobe.com/flex/spark" >

Flex defines the following Universal Resource Identifiers (URI) for the Flex namespaces:

• xmlns:fx="http://ns.adobe.com/mxml/2009" 

  The MXML language namespace URI. This namespace includes the top-level ActionScript language elements, such as Object, Number, Boolean, and Array. For a complete list of the top-level elements, see the Top Level package in the ActionScript 3.0 Reference for the Adobe Flash Platform .

  This namespace also includes the tags built in to the MXML compiler, such as <fx:Script>, <fx:Declarations>, and <fx:Style> tags. For a list of the compiler elements, see the MXML Only Tags appendix in the ActionScript 3.0 Reference for the Adobe Flash Platform .

  This namespace does not include the MX or Spark component sets.

  The complete list of top-level ActionScript language elements included in this namespace is defined by the frameworks\mxml-2009-manifest.xml manifest file in your Flex SDK installation directory. Note that this file does not list the MXML compiler tags because they are built in to the MXML compiler.

• xmlns:mx="library://ns.adobe.com/flex/mx" 

  The MX component set namespace URI. This namespace includes all of the components in the Flex mx.* packages, the Flex charting components, and the Flex data visualization components.

  The complete list of elements included in this namespace is defined by the frameworks\mx-manifest.xml manifest file in your Flex SDK installation directory.

• xmlns:s="library://ns.adobe.com/flex/spark" 

  The Spark component set namespace URI. This namespace includes all of the components in the Flex spark.* packages and the text framework classes in the flashx.* packages.

  This namespace includes the RPC classes for the WebService, HTTPService, and RemoteObject components and additional classes to support the RPC components. These classes are included in the mx: namespace, but are provided as a convenience so that you can also reference them by using the s: namespace.

  This namespace also includes several graphics, effect, and state classes from the mx.* packages. These classes are included in the mx: namespace, but are provided as a convenience so that you can also reference them by using the s: namespace.

  The complete list of elements included in this namespace is defined by the frameworks\spark-manifest.xml manifest file in your Flex SDK installation directory.

  The following table lists the classes from the mx.* packages included in this namespace:

  Category	Class
  RPC classes	mx.messaging.channels.AMFChannel mx.rpc.CallResponder mx.messaging.ChannelSet mx.messaging.Consumer mx.messaging.channels.HTTPChannel mx.rpc.http.mxml.HTTPService mx.messaging.Producer mx.rpc.remoting.mxml.RemoteObject mx.rpc.remoting.mxml.Operation mx.messaging.channels.RTMPChannel mx.messaging.channels.SecureAMFChannel mx.messaging.channels.SecureStreamingAMFChannel mx.messaging.channels.SecureHTTPChannel mx.messaging.channels.SecureStreamingHTTPChannel mx.messaging.channels.SecureRTMPChannel mx.messaging.channels.StreamingAMFChannel mx.messaging.channels.StreamingHTTPChannel mx.rpc.soap.mxml.WebService mx.rpc.soap.mxml.Operation mx.data.mxml.DataService
  Graphics classes	mx.graphics.BitmapFill mx.geom.CompoundTransform mx.graphics.GradientEntry mx.graphics.LinearGradient mx.graphics.LinearGradientStroke mx.graphics.RadialGradient mx.graphics.RadialGradientStroke mx.graphics.SolidColor mx.graphics.SolidColorStroke mx.graphics.Stroke mx.geom.Transform
  Effect classes	mx.effects.Parallel mx.effects.Sequence mx.states.Transition mx.effects.Wait
  States classes	mx.states.State mx.states.AddItems
  Component classes	mx.controls.Spacer mx.controls.SWFLoader

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

<?xml version="1.0"?> 
<!-- mxml/XMLNamespaces.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:MyComps="myComponents.boxes.*"> 
     
    <s:Panel title="My Application" 
        height="150"> 
        <MyComps:CustomBox/> 
    </s:Panel> 
</s:Application>

The myComponents/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 source code is obfuscated from casual view.

For more information on SWC files, see Flex compilers.

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 <s: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 <fx: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 --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
    
    <s:Panel title="My Application"> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
        <s:TextArea id="textarea1"/> 
        <s:Button label="Submit" 
            click="textarea1.text='Hello World';"/> 
    </s:Panel> 
</s:Application>

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 <fx:Script> tag:

<?xml version="1.0"?> 
<!-- mxml/TriggerCodeExample2.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
    
    <fx:Script> 
        <![CDATA[ 
            private function hello():void { 
                textarea1.text="Hello World"; 
            } 
        ]]> 
    </fx:Script> 
    
    <s:Panel title="My Application"> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
        <s:TextArea id="textarea1"/> 
        <s:Button label="Submit" 
            click="hello();"/> 
    </s:Panel> 
</s:Application>

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

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 --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
    
    <s:Panel title="My Application"> 
        <s:VGroup left="10" right="10" top="10" bottom="10"> 
            <s:Label text="Enter Text:"/> 
            <s:TextInput id="textinput1" 
                text="Hello"/> 
            <s:Label text="Bind Text to the TextArea control:"/> 
            <s:TextArea id="textarea1" 
                text="{textinput1.text}"/> 
            <s:Button label="Submit" 
                click="textinput1.text='Goodbye';"/> 
        </s:VGroup> 
    </s:Panel> 
</s:Application>

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

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.

In MXML, define the RPC components in an <fx:Declarations> tag. You use the <fx:Declarations> tag to declare non-visual components an MXML file.

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 --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
    
    <fx:Declarations> 
        <!-- Define the web service connection 
            (the specified WSDL URL is not functional). --> 
        <s: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. --> 
            <s:operation name="GetWeather"> 
                <s:request> 
                    <ZipCode>{zip.text}</ZipCode> 
                </s:request> 
            </s:operation> 
        </s:WebService> 
    </fx:Declarations> 
    
    <s:Panel title="My Application"> 
        <s:VGroup left="10" right="10" top="10" bottom="10"> 
            <!-- Provide a ZIP code in a TextInput control. --> 
            <s:TextInput id="zip" width="200" text="Zipcode please?"/> 
 
            <!-- Call the web service operation with a Button click. --> 
            <s:Button width="60" label="Get Weather" 
                click="WeatherService.GetWeather.send();"/> 
 
            <!-- Display the location for the specified ZIP code. --> 
            <s:Label text="Location:"/> 
            <s:TextArea text="{WeatherService.GetWeather.lastResult.Location}"/> 
 
            <!-- Display the current temperature for the specified ZIP code. --> 
            <s:Label text="Temperature:"/> 
            <s:TextArea 
                text="{WeatherService.GetWeather.lastResult.CurrentTemp}"/> 
        </s:VGroup> 
    </s:Panel> 
</s:Application>

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 <fx:Model>, <fx:XML>, or <fx:XMLList> tag. In MXML, define a data model in an <fx:Declarations> tag. You use the <fx:Declarations> tag to declare non-visual components an MXML file.

The following example shows an application that contains TextInput controls for entering personal contact information and a data model, represented by the <fx:Model> tag, for storing the contact information:

<?xml version="1.0"?> 
<!-- mxml/StoringData.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
 
    <fx:Declarations> 
        <!-- 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 by using data binding. --> 
        <fx:Model id="contact"> 
            <info> 
                <homePhone>{homePhoneInput.text}</homePhone> 
                <cellPhone>{cellPhoneInput.text}</cellPhone> 
                <email>{emailInput.text}</email> 
            </info> 
        </fx:Model> 
    </fx:Declarations> 
 
    <s:Panel title="My Application"> 
        <s:VGroup left="10" right="10" top="10" bottom="10"> 
            <!-- The user enters contact information in TextInput controls. --> 
            <s:TextInput id="homePhoneInput" 
                text="This isn't a valid phone number."/> 
            <s:TextInput id="cellPhoneInput" 
                text="(999)999-999"/> 
            <s:TextInput id="emailInput" 
                text="me@somewhere.net"/> 
        </s:VGroup> 
    </s:Panel> 
</s:Application>

This example uses data binding in the model definition to automatically copy data from the UI controls to the data model.

Flex includes a set of standard validator components for data such as phone numbers, social security numbers, and ZIP codes. You can also create your own custom validator.

In MXML, define validators in an <fx:Declarations> tag. You use the <fx:Declarations> tag to declare non-visual components an MXML file.

The following example uses validator components for validating that the expected type of data is entered in the TextInput fields. In this example, you validate a phone number by using the PhoneNumberValidator class and an e-mail address by using the EmailValidator class. 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 --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
    
    <fx:Declarations> 
        <!-- Validator components validate data entered into the TextInput controls. --> 
        <mx:PhoneNumberValidator id="pnV" 
            source="{homePhoneInput}" property="text"/> 
        <mx:EmailValidator id="emV" 
            source="{emailInput}" property="text" /> 
    </fx:Declarations> 
 
    <s:Panel title="My Application"> 
        <s:VGroup left="10" right="10" top="10" bottom="10"> 
            <s:Label text="Enter phone number:"/> 
            <s:TextInput id="homePhoneInput"/> 
            <s:Label text="Enter email address:"/> 
            <s:TextInput id="emailInput"/> 
        </s:VGroup> 
    </s:Panel> 
</s:Application>

A component with a validation failure displays a red border. If the component has focus, it also displays a validation error message. Set the component to a valid value to remove the error indication.

For more information about using data models, see Storing data. For more information on validators, see Validating 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.

In MXML, define formatters in an <fx:Declarations> tag. You use the <fx:Declarations> tag to declare non-visual components an MXML file.

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 --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
 
    <fx:Script> 
        <![CDATA[ 
            [Bindable] 
            private var storedZipCode:Number=123456789; 
        ]]> 
    </fx:Script> 
 
    <fx:Declarations> 
        <!-- Declare a ZipCodeFormatter and define parameters. --> 
        <mx:ZipCodeFormatter id="ZipCodeDisplay" formatString="#####-####"/> 
    </fx:Declarations> 
 
    <s:Panel title="My Application"> 
        <!-- Trigger the formatter while populating a string with data. --> 
        <s:TextInput text="{ZipCodeDisplay.format(storedZipCode)}"/> 
    </s:Panel> 
</s:Application>

For more information about formatter components, see Formatting Data.

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

The <fx: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.

Namespace qualification is required for type selectors in the <fx:Style> tag. Prefix the namespace qualification with the @namespace tag.

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

<?xml version="1.0"?> 
<!-- mxml/CSSExample.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
    
    <fx:Style> 
        @namespace s "library://ns.adobe.com/flex/spark"; 
        @namespace mx "library://ns.adobe.com/flex/mx"; 
        
        /* class selector */ 
        .myClass { 
            color: Red 
        } 
        
        /* type selector */ 
        s|Button { 
            font-size: 18pt 
        } 
    </fx:Style> 
 
    <s:Panel title="My Application"> 
        <s:Button styleName="myClass" label="This is red 18 point text."/> 
    </s:Panel> 
</s:Application>

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 by 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 Spark Button controls to 18 points.

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

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.

One of the big differences between Spark and MX components is that Spark components rely on the component skin to define its layout and appearance. When working with Spark components, you often define a custom skin to modify the component appearance.

MX components use a combination of CSS styles and skins to control their appearance. With MX components, you can use styles to modify much of the appearance of the component without having to define a custom skin.

For more information about using Spark skins, see Spark Skinning. For more information about using MX skins, see Skinning MX components.

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. In MXML, you apply effects as properties of a control or container. Flex provides a set of built-in effects with default properties.

In MXML, define effects in an <fx:Declarations> tag. You use the <fx:Declarations> tag to declare non-visual components an MXML file.

<?xml version="1.0"?> 
<!-- behaviors\TargetProp.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
 
    <fx:Declarations> 
        <s:Resize id="myResize" 
            heightBy="25" 
            widthBy="50" 
            target="{myButton}"/> 
    </fx:Declarations> 
        
    <s:Button id="myButton" 
        label="Resize target" 
        click="myResize.end();myResize.play();"/> 
</s:Application>

For more information about effects, see Introduction to effects.

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/myComponents/boxes/MyComboBox.mxml --> 
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
    
     <s:ComboBox> 
        <s:dataProvider> 
            <s:ArrayCollection> 
                <fx:String>Dogs</fx:String> 
                <fx:String>Cats</fx:String> 
                <fx:String>Mice</fx:String> 
            </s:ArrayCollection> 
        </s:dataProvider> 
    </s:ComboBox> 
</s:VGroup>

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

<?xml version="1.0"?> 
<!-- mxml/CustomMXMLComponent.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:MyComps="myComponents.boxes.*"> 
 
    <s:Panel title="My Application" 
        height="150"> 
        <MyComps:MyComboBox/> 
    </s:Panel> 
</s:Application>

For more information about MXML components, see Simple MXML components. You can also define custom Flex components in ActionScript. For more information, see Create simple visual components in ActionScript.