Accessibility

Flex Quick Start: Building a simple user interface

Table of contents

Using controls

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

While there are many types of Flex controls, this QuickStart describes the three most common ones: Text-based controls, Button-based controls, and List-based controls.

Using text-based controls

Text-based controls are used for displaying text and/or receiving text input from users.

The text-based controls available in Flex are the Label, Text, TextArea, TextInput, and RichTextEditor controls. The TextInput and TextArea components can both display text and accept user input, while the Label and Text controls are used only for displaying text.

The Text and TextArea controls can display text that spans multiple lines whereas the Label and TextInput controls are used to display single-line text.

The RichTextEditor control lets users enter, edit, and format text. Users apply text formatting and URL links using subcontrols that are located at the bottom of the RichTextEditor control.

All text-based components have a text property that you can use to set the text to be displayed.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/ControlsTextBased/index.html" 
    layout="horizontal" width="380" height="320"
    horizontalAlign="center" verticalAlign="middle" 
>
    <mx:Panel 
        title="Leave a comment" 
        paddingBottom="10" paddingTop="10" 
        paddingLeft="10" paddingRight="10"
    >
        <mx:Text 
            text="Fill out this form to leave us a comment:" 
            width="100%" 
        />            
        <mx:Label text="Name:" />
        <mx:TextInput id="userName" />
        <mx:Label text="Email:" />
        <mx:TextInput id="userEmail" />
        <mx:Label text="Comment:" />
        <mx:TextArea id="userComment" width="100%" />
    </mx:Panel>
</mx:Application>

Result

AlertThis content requires Flash

Download the free Flash Player now!

Get Adobe Flash Player

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

Back to top

Using button-based controls

The Button family of components includes the Button, LinkButton, CheckBox, RadioButton and PopupButton controls.

The Button control is a commonly used rectangular button. Button controls look like they can be pressed, and have a text label, an icon, or both on their face. You can optionally specify graphic skins for each of several Button states. You can create a normal Button control or a toggle Button control. A normal Button control stays in its pressed state for as long as the mouse button is down after you select it. A toggle Button controls stays in the pressed state until you select it a second time.

Buttons typically use event listeners to perform an action when the user selects the control. When a user clicks the mouse on a Button control, and the Button control is enabled, it dispatches a click event and a buttonDown event.

The LinkButton control creates a single-line hypertext link that supports an optional icon. It is basically a Button control without a border. You can use a LinkButton control to open a URL in a web browser.

The CheckBox control is a commonly used graphical control that can contain a check mark or be unchecked (empty). You can use CheckBox controls wherever you need to gather a set of true or false values that aren’t mutually exclusive. You can add a text label to a CheckBox control and place it to the left, right, top, or bottom of the check box. Flex clips the label of a CheckBox control to fit the boundaries of the control.

The RadioButton control lets the user make a single choice within a set of mutually exclusive choices. A RadioButtonGroup control is composed of two or more RadioButton controls with the same groupName. The group can refer to a group created by the <mx:RadioButtonGroup> tag. The user selects only one member of the group at a time. Selecting an unselected group member deselects the currently selected RadioButton control within the group.

The PopUpButton control adds a flexible pop-up control interface to a Button control. It contains a main button and a secondary button, called the pop-up button, which pops up any UIComponent object when a user clicks the pop-up button. One common use for the PopUpButton control is to have the pop-up button open a List control or a Menu control that changes the function and label of the main button.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/ControlsButtonBased/index.html"
    layout="absolute" width="460" height="400"
>
    <mx:Script>
        <![CDATA[
            import flash.events.MouseEvent;
            import mx.controls.Alert;
            
            private const NL:String = "\r";
            
            private function submitButtonClickHandler (event:MouseEvent):void
            {
                var userDetails:String = "You submitted the following details:" + NL + NL;
                userDetails += "Name: " + userName.text + NL;
                userDetails += "Email: " + userEmail.text + NL;
                userDetails += "Hide email? " + (hideEmail.selected ? "Yes" : "No") + NL + NL;
                userDetails += "Comment:" + NL + NL + userComment.text;
                
                Alert.show (userDetails);    
            }
            
            private function emailButtonClickHandler (event:MouseEvent):void
            {
                var msg:String = "You can use the navigateToURL() method to open a URL"
                msg += " using a call similar to the following:\r\r";
                msg += "navigateToURL (new URLRequest ('mailto:comments@somewhere.com'));";
                
                Alert.show (msg);
            }
                    
        ]]>
    </mx:Script>
    
    <mx:Panel 
        title="Leave a comment" 
        left="10" top="10" right="10" bottom="10" 
        layout="absolute"
    >
        <mx:Text 
            text="Fill out this form to leave us a comment:" 
            width="250" x="10" y="10" fontWeight="bold"
        />            
        <mx:Label text="Name:"  x="10" y="38"/>
        <mx:TextInput id="userName" y="36" right="10" left="90"/>
        <mx:Label text="Email:"  x="10" y="68"/>
        <mx:TextInput id="userEmail" y="66" right="10" left="90"/>
        <mx:Label text="Comment:"  x="10" y="129"/>
        <mx:TextArea id="userComment" left="10" right="10" height="109" bottom="40"/>
        
        <mx:CheckBox 
            id="hideEmail" 
            y="103" left="90"
            label="Hide my email address" 
            selected="true" 
        />
        
        <mx:LinkButton 
            id="emailButton" 
            y="272" horizontalCenter="0"
            label="Having trouble? Email us!" 
            click="emailButtonClickHandler(event);" 
        />
        
        <mx:ControlBar x="120" y="258" horizontalAlign="center">
            <mx:Button 
                id="submitButton" label="Submit" 
                click="submitButtonClickHandler(event);"
            />
        </mx:ControlBar>
    
    </mx:Panel>
</mx:Application>

Result

AlertThis content requires Flash

Download the free Flash Player now!

Get Adobe Flash Player

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

Back to top

Using list-based controls

List-based controls are those that extend the ListBase class at some point in their inheritance hierarchy. They include the ComboBox, List, HorizontalList, DataGrid, Tile, Menu, and Tree controls.

Several Flex framework components, including all List-based controls, represent data from a data provider, an object that contains data required by the control. For example, a Tree control’s data provider determines the structure of the tree and any associated data assigned to each tree node, and a ComboBox control’s data provider determines the items in the control’s drop-down list.

Note: Many standard controls, including the ColorPicker and MenuBar controls also get data from a data provider. Controls that display application data are sometimes referred to as data provider controls. For more information on using data providers, see "Using Data Providers and Collections" in the Flex 3 Developer's Guide.

You can set a component's data provider in in two ways: The first way is to define the data provider inline in the MXML by defining an Array or Collection as a child tag of a control that takes a data provider. This approach has the benefit of being quick to implement and is suitable for use with static data and for prototyping. The second method is to use data binding to bind a control to an existing Array or Collection that is defined using ActionScript. This latter approach is used to display data resulting from server-side calls and to bind to data structures created in ActionScript. It is also the more scalable of the two.

The following example demonstrates both methods.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/ControlsListBased/index.html"
    layout="horizontal" width="460" height="360"
>

    <mx:Script>
        <![CDATA[
            import flash.events.MouseEvent;
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;
            
            private const NL:String = "\r";

            // A data provider created by using ActionScript
            [Bindable]
            private var subscriptions:ArrayCollection = 
                new ArrayCollection 
                (
                    [
                        {data:0, label:"Print"},
                        {data:1, label:"Website"},
                        {data:2, label:"RSS (text)"},
                        {data:3, label:"Podcast"} 
                    ]
                ); 

            private function submitButtonClickHandler(event:MouseEvent):void
            {
                var userDetails:String = "You submitted the following details:" + NL + NL;
                userDetails += "Name: " + userName.text + NL;
                userDetails += "Email: " + userEmail.text + NL;
                userDetails += "Site rating: " + userRating.selectedItem.label + NL + NL;
                userDetails += "Subscriptions:";
                
                var selectedSubscriptionItems:Array = userSubscriptions.selectedItems;
                for ( var i:String in selectedSubscriptionItems)
                {
                    // Display the selected subscriptions, separated by commas
                    userDetails += selectedSubscriptionItems[i].label + ", ";
                }
                // Remove the last comma and space from the string we're displaying
                userDetails = userDetails.substring(0, userDetails.length-2);                 
                
                Alert.show ( userDetails );    
            }
            
        ]]>
    </mx:Script>
    
    <mx:Panel 
        title="Feedback form" width="99%"
        paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10" 
        layout="vertical"
    >
        <mx:Text 
            text="Thank you for giving us feedback:" 
            width="100%" fontWeight="bold"
        />            
        <mx:Form width="100%">
            <mx:FormItem label="Name:" width="100%">
                <mx:TextInput id="userName" />
            </mx:FormItem>
            <mx:FormItem label="Email:" width="100%">
                <mx:TextInput id="userEmail" />
            </mx:FormItem>
            <mx:FormItem label="Site rating:" width="100%">
                <mx:ComboBox id="userRating" width="100%">
                    <!-- An inline data provider -->
                    <mx:Array>
                        <mx:Object data="0" label="Zero" />
                        <mx:Object data="1" label="One" />
                        <mx:Object data="2" label="Two" />
                        <mx:Object data="3" label="Three" />
                        <mx:Object data="4" label="Four" />
                    </mx:Array>
                </mx:ComboBox>        
            </mx:FormItem>
            <mx:FormItem label="Subscriptions:" width="100%">
                <mx:List 
                    id="userSubscriptions" rowCount="3"
                    allowMultipleSelection="true" width="100%"
                    dataProvider="{subscriptions}"
                />
            </mx:FormItem>
        </mx:Form>
        
        <mx:ControlBar x="120" y="258" horizontalAlign="center">
            <mx:Button 
                id="submitButton" label="Submit" 
                click="submitButtonClickHandler(event);"
            />
        </mx:ControlBar>
    
    </mx:Panel>
</mx:Application>

Result

AlertThis content requires Flash

Download the free Flash Player now!

Get Adobe Flash Player

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

Back to top

For more information

About the author

Aral Balkan acts and sings, leads development teams, designs user experiences, architects rich Internet applications, and runs OSFlash.org, the London Macromedia User Group, and his company, Ariaware. He loves talking design patterns and writing for books and magazines. He also authored Arp, the open-source RIA framework for the Flash platform. Aral is generally quite opinionated, animated, and passionate. He loves to smile, and can even chew gum and walk at the same time.

Next Steps

Flex Developer Center
Home
Architecture
Technology
Learn Flex
Getting started
Learning Paths
Flex in a Week video training
Integrate Flex
Flex and ColdFusion
Flex and Java
Flex and .NET
Flex and PHP
Design and components
Components
Security, testing, and deployment
UI design & RIA workflows
Partners
Flex and Facebook
Flex and ILOG
Flex and Intuit
Flex and Salesforce.com
Flex and SAP
Services and toolkits
Data services
Documentation
Flex 3.3 Language Reference
Flex 3 Developer's Guide (web)
Flex 3 Developer's Guide (PDF)
More documentation
Related resources
Flex Help and Support
Flex bug base
Flex SDK (Open Source)
Adobe Labs
Adobe TV