Products

Technologies

A–C

D–H

I–Z

Developer services

Project centers

Developer resources

Community resources

Integration

Product documentation

Downloads

Samples

Training and books

Newsletters

Blogs

ADC program

Additional resources

Flex Quick Start: Building a simple user interface

Table of contents

Creating states

In many rich Internet applications, the interface changes based on the task that the user is performing. A simple example is an image that changes when the user rolls the mouse over it. More complex examples include user interfaces whose contents change depending on the user’s progress through a task, such as changing from a browse view to a detail view. These interfaces can use a smooth open-close effect to transition between views.

View states let you easily implement such behaviors, and can simplify what would otherwise be complex event handling code.

info icon To learn how to define transitions between view states, see Defining state transitions.

At its simplest, a view state defines a particular view of a component. For example, a product thumbnail could have two view states; a base state with minimal information, and a rich state with additional information. Similarly, an application could have multiple view states that correspond to different application conditions, such as a login state, an overview state, or a search results state.

The following example uses view states to easily implement a login and registration form. In this example, the initial view state prompts the user to log in, and includes a link that lets them register, if necessary. If the user selects the Need to Register link, the form changes the view state to display registration information. When the user clicks the Return to Login link, the view state changes back to the login form.

Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle"
    width="340" height="250"
>
    <!-- The states property of the Application class 
         defines the view states. -->
    <mx:states>
        
        <!-- 
            The "Register" state is based on the base state. 
            All states are based on the base state by default
            so you can leave out the basedOn property. 
        -->
        <mx:State name="Register" basedOn="">

            <!-- Add a FormItem component to the form. -->
            <mx:AddChild 
                relativeTo="{loginForm}" 
                position="lastChild" 
                creationPolicy="all"
            >

                <mx:FormItem id="confirm" label="Confirm:">
                    <mx:TextInput/>
                </mx:FormItem>
            </mx:AddChild>

            
            <!-- Set properties on the Panel container and Button control. -->
            <mx:SetProperty target="{loginPanel}"
            name="title" value="Register"/>

            
            <mx:SetProperty target="{loginButton}"
            name="label" value="Register"/>
            
            <!-- Remove the existing LinkButton control. -->

            <mx:RemoveChild target="{registerLink}"/>
            
            <!-- 
                Add a new LinkButton control to change
                view state back to the login form. 
            -->
            <mx:AddChild relativeTo="{spacer1}" position="before">

                <mx:LinkButton label="Return to Login" click="currentState=''"/>
            </mx:AddChild>

        </mx:State>

    </mx:states>

    <mx:Panel 
        title="Login" id="loginPanel"
        horizontalScrollPolicy="off" verticalScrollPolicy="off"
    >

    <mx:Form id="loginForm">
        <mx:FormItem label="Username:">
            <mx:TextInput/>

        </mx:FormItem>
        <mx:FormItem label="Password:">
            <mx:TextInput/>
        </mx:FormItem>
    </mx:Form>

    
    <mx:ControlBar>
        <!-- 
            Use the LinkButton control to change to
            the Register view state. 
        -->
        <mx:LinkButton 
            label="Need to Register?" id="registerLink"
            click="currentState='Register'"
        />

        <mx:Spacer width="100%" id="spacer1"/>
        <mx:Button label="Login" id="loginButton"/>
    </mx:ControlBar>
  </mx:Panel>
</mx:Application>

Result

This content requires Flash

Download the free Flash Player now!

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

For more information

Using View States in the Adobe Flex 3 Help

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.

A–C

D–H

I–Z