Adding View States and Transitions

You can use Adobe® Flash® Builder™ to create applications that change their appearance depending on tasks performed by the user. For example, the base state of the application could be the home page and include a logo, sidebar, and welcome content. When the user clicks a button in the sidebar, the application dynamically changes its appearance (its state), replacing the main content area with a purchase order form but leaving the logo and sidebar in place.

In Flex, you can add this kind of interaction with view states and transitions. A view state is one of several views that you define for an application or a custom component. A transition is one or more effects grouped together to play when a view state changes. The purpose of a transition is to smooth the visual change from one state to the next.

About view states and transitions

A view state is one of several layouts that you define for a single MXML application or component. You create an application or component that switches from one view state to another, depending on the user’s actions. You can use view states to build a user interface that the user can customize or that progressively reveals more information as the user completes specific tasks.

Each application or component defined in an MXML file always has at least one state, the base state, which is represented by the default layout of the file. You can use a base state as a repository for content such as navigation bars or logos shared by all the views in an application or component to maintain a consistent look and feel.

You create a view state by modifying the layout of an existing state or by creating a completely new layout. Modifications to an existing state can include editing, moving, adding, or removing components. The new layout is what users see when they switch states.

For a full conceptual overview of view states, including examples, see View states.

Generally, you do not add pages to a Flex application as you do in an HTML-based application. You create a single MXML application file and then add different layouts that can be switched when the application runs. While you can use view states for these layouts, you can also use the ViewStack navigator container with other navigator containers.

When you change the view states in your application, the appearance of the user interface also changes. By default, the components appear to jump from one view state to the next. You can eliminate this abruptness by using transitions.

A transition is one or more visual effects that play sequentially or simultaneously when a change in view state occurs. For example, suppose you want to resize a component to make room for a new component when the application changes from one state to another. You can define a transition that gradually minimizes the first component while a new component slowly appears on the screen.

Support for Flex 3 view states

Flash Builder provides support for view states as implemented in Flex 3. If you create a project that uses the Flex 3 SDK, the MXML editor in both Design and Source mode reverts to the Flex Builder 3 implementation. For information on editing states for the Flex 3 SDK, refer to the Flex Builder 3 documentation.

Creating a view state

By default, an application has a single view state, which you typically use as the base state. Use the Flash Builder States View to add additional states and to edit the layout and components for each state.

  1. Using the layout tools in Flash Builder, design the layout of the base state of your application or component.

    For more information, see Building a user interface with Flash Builder.

  2. In the States view (Window > Other Views > Flash Builder > States), click the New State button in the toolbar.

    New State button

    The New State dialog box appears.

  3. Enter a name for the new state.

  4. Specify whether to create a state that is a duplicate of an existing state or to create a new, blank state. Click OK.

  5. Use the layout tools in Flash Builder to modify the appearance of the state.

    You can edit, move, add, or delete components. As you make changes, the changes defining the new state become part of the MXML code.

  6. Define an event handler that lets the user switch to the new state.

    For more information, see Switching view states at run time.

Setting a non-base state as the starting view state

By default, an application displays the base state when it starts. However, you can set another view state to be the state that displays when the application starts.

  1. In States View (Window > States), double-click the view state that you want to use as the starting state.

  2. In the Edit State Properties dialog box that appears, select the Set As Start State option and click OK.

Setting the view state of a component

If your application has multiple states, you can set the view state of a single component.

  1. In Design View of the MXML editor, select a component in your layout.

  2. In Properties View, use the In States field to select the states in which the component is visible.

Switching view states at run time

When your application is running, users need to switch from one view state to another. You can define event handlers for user controls so that users can switch states at run time.

The simplest method is to assign the currentState property to the click event of a control such as a button or a link. The currentState property takes the name of the view state you want to display when the click event occurs. In the code, you specify the currentState property as follows:

click="currentState='viewstatename'"

If the view state is defined for a specific component, you must also specify the component name, as follows:

click="currentState='componentID.viewstatename'"

For more information, see Using View States.

  1. Ensure that the initial state has a clickable control, such as a Button control.

    In Design mode of the MXML editor, select the control and enter the following value in the On Click field in the Properties view:

    currentState='viewstatename'

    viewstatename is the name for the state.

  2. If you want to switch to the base state, enter:

    currentState=''

    '' is an empty string, represented by two single quotes.

  3. To test that the states switch correctly in the application when the button is clicked, click the Run button in the Flash Builder toolbar.

You can define a transition so that the change between view states is smoother visually. For more information, see Creating a transition.

Creating view state groups

Flex provides support for view state groups. The stateGroups attribute of the <States> tag lets you group one or more states together. For example, if multiple components appear in the same set of view states, you can create a view state group that contains all these view states. Then, when you set the currentState property to any view state in the group, the components appears. For more information, with examples, see Defining view state groups.

Design mode of the MXML editor does not support editing state groups. Use Source mode to create and edit state groups. Source mode provides code hinting and a Show State pop-up menu to assist you in creating and editing state groups.

If you create view state group, be careful using Design View. If you delete a state using Design View, you can inadvertently leave a reference to a deleted component in a state group.

Deleting a view state

You can delete view states from an application using Design View of the MXML editor. However, if you have created a state group then use Source View to delete a state. This avoids inadvertently leaving a reference to a component in a deleted state.

  1. In the Design View of the MXML editor, select the view state that you want to delete from the States View (Window > States).

  2. Click the Delete State button on the States View toolbar.

Working with multiple states in an application

If you have an application that contains more than one state, Design mode of the MXML editor allows you to switch the view for each state, displaying only the components that defined for a specific state. For each component, you can specify the state in which it is visible.

Edit the component of a specific state

  1. In Design View of the source editor, use the States View to add one or more additional states to an application.

  2. Use the State drop-down menu to switch the view to the selected state.

  3. Add, move, delete, or modify the components in the state.

    Changes you make to a specific state do not appear in other states unless you specify that the component appears in more than one state.

Specify that a component appears in multiple states

  1. In Design View of the source editor, use the States View to add one or more additional states to an application.

  2. For any component in a state, select the component.

  3. In the Properties View, select which states the component appears.

    You can specify that the component appear in all states, or select one or more states in which the component appears.

    If you specify a specific state for a component, the component does not display in the editor when editing another state.

Be careful when editing applications that contain multiple states. Components might seem to “disappear” when you switch the editor to a state that doesn’t contain a component visible in another state.

Creating and editing view states in source code

Source mode of the MXML editor contains several features to help you edit source code for view states.

When an application declares view states, the MXML editor provides a Show State pop-up menu. When you select a specific view state in the Show State menu, components that do not appear in that state are de-emphasized in the editor.

The includeIn and excludeFrom properties for MXML components specify the view state or state group in which a component appears. Code hinting in the MXML editor assists you in selecting a view state or state group for these properties.

You can also use dot notation with component attributes to specify a view state in which the attribute applies. For example, if you want a Button component to appear in two view states, but also have the label change according to the view state, use the dot operator with the label property. Code hinting in the MXML editor assists you in selecting the view state. For example:
<s:Button label.State1="Button in State 1" label.State2="Same Button in State 2">

Example working with view states in source code

  1. Create an application that contains more than one view state.

    In Source mode of the MXML editor, add the following code after the <s:Application> tag.

        <s:states> 
            <s:State name="State1" /> 
            <s:State name="State2" /> 
            <s:State name="State3" />                 
        </s:states>

    Notice that the MXML editor adds a Show State pop-up menu after you define states in the application.

  2. In Source mode, add the following Button components:

        <s:Button includeIn="State1" label="Show State 2" 
            click="currentState='State2'" /> 
        <s:Button includeIn="State2" label="Show State 3" 
            click="currentState='State3'" /> 
        <s:Button includeIn="State3" label="Show State 1" 
            click="currentState='State1'" /> 
     
        <s:Button 
            label.State1="All States: State 1 Label" 
            label.State2="All States: State 2 Label" 
            label.State3="All States: State 3 Label" 
            x="0" y="30"/>

    By default, the editor displays code for all states.

    Note: The click event handlers for the first three buttons cycle through the view states.
  3. Still in Source mode, select different view states from the Show State pop-up menu.

    For components that are not visible in the selected state, the editor displays the code as light grey.

    All the code is editable, but de-emphasizing components that do not appear in the selected view state assists in maintaining code for each view state.

  4. Switch to Design mode for the MXML editor.

    Using either the States View or the States pop-up menu, select different view states. The editor displays the components according to properties defined for the selected view state.

  5. Run the application. Click the top button to cycle through the view states.

For more information on creating and editing states in source code, see Create and apply view states.

Creating a transition

When you change the view states in your application, the components appear to jump from one view state to the next. You can make the change visually smoother for users by using transitions. A transition is one or more effects grouped together to play when a view state changes. For example, you can define a transition that uses a Resize effect to gradually minimize a component in the original view state, and a Fade effect to gradually display a component in the new view state.

  1. Make sure you create at least one view state in addition to the base state.

  2. In Source View of the MXML editor, define a Transition object by writing a <s:transitions> tag and then a <s:Transition> child tag, as shown in the following example:

    <s:transitions> 
        <mx:Transition id="myTransition"> 
        </mx:Transition> 
    </s:transitions>

    To define multiple transitions, insert additional <s:Transition> child tags in the <s:transitions> tag.

  3. In the <s:Transition> tag, define the change in view state that triggers the transition by setting the tag’s fromState and toState properties, as in the following example (in bold):

    <s:transitions> 
        <mx:Transition id="myTransition" fromState="*" toState="checkout"> 
        </mx:Transition> 
    </s:transitions>

    In the example, you specify that you want the transition to be performed when the application changes from any view state (fromState="*") to the view state called checkout (toState="checkout"). The value "*" is a wildcard character specifying any view state.

  4. In the <mx:Transition> tag, specify whether you want the effects to play in parallel or in sequence by writing a <mx:Parallel> or <mx:Sequence> child tag, as in the following example (in bold):

    <mx:Transition id="myTransition" fromState="*" toState="checkout"> 
        <mx:Parallel> 
        </mx:Parallel> 
    </mx:Transition>

    If you want the effects to play simultaneously, use the <mx:Parallel> tag. If you want them to play one after the other, use the <mx:Sequence> tag.

  5. In the <mx:Parallel> or <mx:Sequence> tag, specify the targeted component or components for the transition by setting the property called target (for one target component) or targets (for more than one target component) to the ID of the target component or components, as shown in the following example:

    <mx:Parallel targets="{[myVGroup1,myVGroup2,myVGroup3]}"> 
    </mx:Parallel>

    In this example, three VGroup containers are targeted. The targets property takes an array of IDs.

  6. In the <mx:Parallel> or <mx:Sequence> tag, specify the effects to play when the view state changes by writing effect child tags, as shown in the following example (in bold):

    <mx:Parallel targets="{[myVBox1,myVBox2,myVBox3]}"> 
        <mx:Move duration="400"/> 
        <mx:Resize duration="400"/> 
    </mx:Parallel>

    For a list of possible effects and how to set their properties, see Introduction to effects.

  7. To test the transition, click the Run button in the Flash Builder toolbar, then switch states after the application starts.