Accessibility

Flex Quick Start: Building a simple user interface

Table of contents

Using containers

A container defines a rectangular region of the drawing surface of the Adobe® Flash® Player. Within a container, you define the components, both controls and containers, that you want to appear within the container. Components defined within a container are called children of the container. Adobe Flex provides a wide variety of containers, ranging from simple boxes through panels and forms, to elements such as accordions or tabbed navigators that provide built-in navigation among child containers.

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.

At the root of a Flex application is a single container, called the Application container, that represents the entire Flash Player drawing surface. This Application container holds all other containers and components.

Tip: Different containers support different layout rules, including automatic and absolute positioning. For more information on this, see Positioning and Laying Out Flex Components.

Using layout containers

You use layout containers for laying out a user interface. The following table describes the layout containers that the following example uses:

  Name Description
Panel

Panel

The Panel container displays a title bar, a caption, a border, and its children. By default, the Panel container lays out the child components vertically and you can override this by setting the layout property to either "absolute" or "horizontal".
HDividedBox

HDividedBox

The HDividedBox container lays out the child components horizontally, much like a HBox container, except that it inserts an adjustable divider between the children. The VDividedBox container lays out the child components vertically, and also inserts an adjustable divider between the children.
Tile

Tile

The Tile container arranges its children in multiple rows or columns.
Form Icon

Form

The Form container arranges its children in a standard form format.
ApplicationControlBar

ApplicationControlBar

The ApplicationControlBar container holds components that provide global navigation and application commands and can be docked at the upper edge of an Application container.
ControlBar

ControlBar

The ControlBar container places controls at the lower edge of a Panel or TitleWindow container.

Additionally, the example uses the Spacer control, which is not a container, to aid in the layout of the interface.

Tip: The Spacer control is an invisible control that is used for precise positioning of elements inside automatically positioned containers. In this example, the Spacer control is the only percentage-based component in the ApplicationControlBar container. Flex sizes the Spacer control to occupy all available space in the container that is not required for other components. By expanding the Spacer control, Flex pushes the Button control to the right edge of the container.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="525" height="400"
    viewSourceURL="src/LayoutContainers/index.html"
>
    <mx:ApplicationControlBar dock="true">
        <mx:Label 
            text="ApplicationControlBar" 
            fontFamily="Verdana" fontWeight="bold" fontSize="12"
        />
        <mx:Spacer width="100%"/>
        <mx:Button label="Log out"/>
    </mx:ApplicationControlBar>

    <mx:Panel 
        layout="horizontal" title="Panel"
        width="100%" height="100%"
    >
        <mx:HDividedBox width="100%" height="100%">
            <mx:Panel 
                width="100%" height="100%" 
                headerHeight="0" borderStyle="solid" shadowDistance="0"
            >
                <mx:Label text="Panel (without header)" fontWeight="bold" />                 
                <mx:Form>
                    <mx:FormHeading label="First form" />    
                    <mx:FormItem label="Name:">
                        <mx:TextInput width="100"/>
                    </mx:FormItem>
                    <mx:FormItem label="Email:">
                        <mx:TextInput width="100"/>
                    </mx:FormItem>
                </mx:Form>
            </mx:Panel>

            <mx:Panel 
                width="100%" height="100%" 
                headerHeight="0" borderStyle="solid" shadowDistance="0"
            >                
                <mx:Label text="Panel (without header)" fontWeight="bold" />
                <mx:Form>
                    <mx:FormHeading label="Second form" />    
                    <mx:FormItem label="Name:">
                        <mx:TextInput width="100"/>
                    </mx:FormItem>
                    <mx:FormItem label="Email:">
                        <mx:TextInput width="100"/>
                    </mx:FormItem>
                </mx:Form>
            </mx:Panel>
        </mx:HDividedBox>
        
        <mx:ControlBar horizontalAlign="center">
            <mx:Label text="ControlBar in Panel" fontWeight="bold"/>
            <mx:Spacer width="100%"/>
            <mx:Button label="Prev"/>
            <mx:Button label="Finish"/>    
        </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 navigation containers

Navigator containers control user movement, or navigation, among multiple children where the children are other containers.

The direct children of a navigator container must be containers, either layout or navigator containers. You cannot directly nest a control within a navigator; controls must be children of a child container of the navigator container.

The following table describes the navigator containers that the following example uses:

  Name Description
Panel

Accordion

The Accordion container defines a sequence of child panels, but displays only one panel at a time. To navigate a container, the user clicks the navigation button that corresponds to the child panel that they want to access. Accordion containers let users access the child panels in any order to move back and forth through the form.
HDividedBox

TabNavigator

A TabNavigator container creates and manages a set of tabs, which you use to navigate among its children. The children of a TabNavigator container are other containers. The TabNavigator container creates one tab for each child. When the user selects a tab, the TabNavigator container displays the associated child.
Tile

ViewStack

A ViewStack navigator container is made up of a collection of child containers that are stacked on top of each other, with only one container visible, or active, at a time. The ViewStack container does not define a built-in mechanism for users to switch the currently active container; you must use a LinkBar, TabBar, ButtonBar, or ToggleButtonBar control or build the logic yourself in ActionScript to let users change the currently active child.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    width="550" height="550"
    viewSourceURL="src/NavigationContainers/index.html"
>
    <mx:Panel 
        layout="absolute" 
        left="10" top="10" right="10" bottom="10" title="Navigators"
    >
        <mx:Accordion width="47.5%" height="200" top="36" left="10">
            <mx:Canvas label="Navigation button 1" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 1"/>
            </mx:Canvas>
            <mx:Canvas label="Navigation button 2" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 2"/>
            </mx:Canvas>
            <mx:Canvas label="Navigation button 3" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 3"/>
            </mx:Canvas>
        </mx:Accordion>
        
        <mx:TabNavigator right="10" width="47.5%" height="200" y="36">
            <mx:Canvas label="Tab 1" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 1"/>
            </mx:Canvas>
            <mx:Canvas label="Tab 2" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 2"/>
            </mx:Canvas>
            <mx:Canvas label="Tab 3" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 3"/>
            </mx:Canvas>
        </mx:TabNavigator>

        <mx:ViewStack 
            id="myViewStack" 
            width="47.5%" height="200" right="10" bottom="10"
            borderColor="#000000" borderStyle="solid" 
        >
            <mx:Canvas label="View 1" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 1"/>
            </mx:Canvas>
            <mx:Canvas label="View 2" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 2"/>
            </mx:Canvas>
            <mx:Canvas label="View 3" width="100%" height="100%">
                <mx:Label x="10" y="10" text="Contents 3"/>
            </mx:Canvas>
        </mx:ViewStack>
        
        <!-- Labels for the various controls -->
        <mx:Label x="10" y="252" text="ButtonBar"/>
        <mx:Label x="10" y="10" text="Accordion"/>
        <mx:Label x="262.5" y="10" text="TabNavigator"/>
        <mx:Label x="262.5" y="252" text="ViewStack"/>
        <mx:Label x="10" y="308" text="ToggleButtonBar"/>
        <mx:Label x="10" y="364" text="LinkBar"/>
        <mx:Label x="10" y="424" text="TabBar"/>

        <!-- 
            All these navigators use the same dataProvider,
            namely, the myViewStack ViewStack instance.
            Changing the selected view in one will affect
            all the others also.  
        -->        
        <mx:ButtonBar x="10" y="278" dataProvider="{myViewStack}" />
        <mx:ToggleButtonBar x="10" y="334" dataProvider="{myViewStack}" />
        <mx:LinkBar x="10" y="390" dataProvider="{myViewStack}" />
        <mx:TabBar x="10" y="444" dataProvider="{myViewStack}" />

    </mx:Panel>
    
</mx:Application>

Result


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 IBM 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