Controls are user-interface components, such as Button, TextArea, and ComboBox controls. You place controls in containers, which are user-interface components that provide a hierarchical structure for controls and other containers. Typically, you define a container, and then insert controls or other containers in it.

At the root of a Flex application is the <mx:Application> tag, which represents a base container that covers the entire Adobe® Flash® Player or Adobe AIR™ drawing surface. You can place controls or containers directly under the <mx:Application> tag or in other containers. For more information on containers, see Introducing Containers.

Most controls have the following characteristics:

• MXML API for declaring the control and the values of its properties and events
• ActionScript API for calling the control's methods and setting its properties at run time
• Customizable appearance by using styles, skins, and fonts

The following image shows several controls used in a Form container:

The MXML and ActionScript APIs let you create and configure a control. The following MXML code example creates a TextInput control in a Form container:

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

    <mx:Form width="300" height="100">
        <mx:FormItem label="Card Name">
            <mx:TextInput id="cardName"/>
        </mx:FormItem>
    </mx:Form>
</mx:Application>
The executing SWF file for the previous example is shown below:

This example produces the following image:

Although you commonly use MXML as the language for building Flex applications, you can also use ActionScript to configure controls. For example, the following code example populates a DataGrid control by providing an Array of items as the value of the DataGrid control's dataProvider property:

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

    <mx:Script>
        <![CDATA[

        private function myGrid_initialize():void {
          myGrid.dataProvider = [
            {Artist:'Steve Goodman', Album:'High and Outside', Price:8.99},
            {Artist:'Carole King', Album:'Tapestry', Price:11.99},
            {Artist:'The Beach Boys', Album:'Pet Sounds', Price:13.99},
            {Artist:'Original Cast', Album:'Camelot', Price:9.99} ];
        }
        ]]>
    </mx:Script>
    
    <mx:DataGrid id="myGrid" 
        width="350" height="150" 
        color="#7B0974"
        creationComplete="myGrid_initialize();"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

This example produces the following image:

Text controls

Several Flex components display text or take text input, as the following table shows:

These controls can display plain text that all has the same appearance. The controls can also display rich text formatted by using a subset of the standard HTML formatting tags. For information on using text controls, see Using Text Controls.

Data provider controls

Several Flex components, such as the DataGrid, Tree, and ComboBox controls, take input data from a data provider. A data provider is a collection of objects, similar to an array. For example, a Tree control reads data from the data provider to define the structure of the tree and any associated data assigned to each tree node.

The data provider creates a level of abstraction between Flex components and the data that you use to populate them. You can populate multiple components from the same data provider, switch data providers for a component at run time, and modify the data provider so that changes are reflected by all components that use the data provider.

Consider that the data provider is the model, and the Flex components are the view onto the model. By separating the model from the view, you can change one without changing the other.

Menu controls

Several Flex controls create or interact with menus, as the following table shows:

For information on menu controls, see Using Menu-Based Controls.

Flex controls

The following table lists all the controls available with Flex: