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.
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.
Setting the view state of a component
If your application has multiple states, you can set the view state of a single component.
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:
If the view state is defined for a specific component, you must also specify the component name, as follows:
For more information, see Using View States.
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.
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
Specify that a component appears in multiple states
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
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.