About UI controls

UI controls are user-interface components, such as Button, TextArea, and CheckBox controls. You place UI 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 UI controls or other containers in it.

At the root of your MXML application is the <s:Application> tag. This tag 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 <s:Application> tag or in other containers. For more information on containers, see Introduction to containers.

Flex provides a set of UI controls built for the Spark architecture. To take advantage of the skinning architecture in Spark, use the Spark controls whenever possible. The MX controls are also supported. You can use a combination of MX and Spark controls in an application.

To use Spark controls, include the Spark namespace (default prefix: s) in your Application tag. To use MX controls, include the MX namespace (default prefix: mx) in your Application tag.

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

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 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" encoding="utf-8"?>
<!--controls\TextInputInForm.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">

    <mx:Form width="400" height="100"> 
        <mx:FormItem label="Card Name"> 
            <s:TextInput id="cardName"/> 
        </mx:FormItem> 
    </mx:Form> 
 
</s:Application>

The executing SWF file for the previous example is shown below:

Although you commonly use MXML as the language for building applications in Flex, 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" encoding="utf-8"?>
<!--controls\DataGridConfigAS.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">

    <fx: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} ]; 
        } 
        ]]> 
    </fx:Script> 
    
    <mx:DataGrid id="myGrid" 
        width="350" height="150" 
        color="#7B0974" 
        creationComplete="myGrid_initialize();"/> 
 
</s:Application>

The executing SWF file for the previous example is shown below:

Text controls

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

Type of text

Spark control

MX control

Editable, single-line text

TextInput

TextInput

Editable, multiline text

TextArea

TextArea

Noneditable, single-line text

Label

Label

Noneditable, multiline text

Label

Text

Noneditable, richly formatted text

RichText

n/a

Editable, richly formatted text

RichEditableText

n/a

Compound control that contains a multiline text field and controls that let you format text by selecting such characteristics as font, size, weight, and alignment

n/a

RichTextEditor

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 MX text controls.

Data provider controls

Several Flex components, such as the MX DataGrid and Tree controls, and the Spark ComboBox and List 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 runtime, 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 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 MX controls create or interact with menus, as the following table shows:

MX control (in mx.controls package)

Description

Menu

A visual menu that can have cascading submenus

MenuBar

A horizontal bar with multiple submenus

PopUpMenuButton

A Menu control that opens when you click a button

In Spark, you can create custom menu-type controls using the PopUpAnchor control.

For information on menu controls, see Menu-based controls.