Adding 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.

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.

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.

   

   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.

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.

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.

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.

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.

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.

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.

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.

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.

<s:Button label.State1="Button in State 1" label.State2="Same Button in State 2">

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.