About view states and transitions

A view state is one of several layouts that you define for a single MXML application or component. You can 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. Modifications can include editing, moving, adding, or removing components. The modified layout is what the user sees when he or she switches state.

For a full conceptual overview of view states as well as examples, see Using View States in Flex 2 Developer's Guide.

Generally, you don't 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. For more information, see Using Navigator Containers in Flex 2 Developer's Guide.

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. For more information on transitions, see Using Transitions in Flex 2 Developer's Guide.

Related topics


Flex 2.01

Take a survey