| Flex 2 Developer's Guide > Flex Programming Topics > Using View States > About view states | |||
|
|||
|
|||
|
|||
In many rich Internet applications, the interface changes based on the task 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 without requiring you to load multiple Macromedia Flash applications. The view states can simplify what would otherwise be complex event handling code.
View states also let you coherently structure your application to present a varying appearance and behavior by defining a base application or component (the base state) and sets of changes that modify the base, or alternatively, modify another state. Each set of changes defines a view state, which can add or remove children, set or change styles and properties, or define state-specific event listeners.
You can also define transitions between view states, which control how the application changes visually as it changes (transitions) from one view state to another. For information on how to use transitions, see Using Transitions.
At its simplest, a view state is 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.
You do not have to define view states to create an interactive rich Internet application; however, they provide a powerful tool for logically structuring a dynamic application.
The following examples show ways of using view states.
You can use view states to easily implement a login and registration form. In this case, the initial view state prompts the user to log in, and includes a link that lets them register, if necessary, as the following image shows:
If the user selects the Need to Register link, the form changes view state to display registration information, as the following image shows:
When the user clicks the Return to Login link, the view state changes back to the Login form.
You can see the code for this example in Example: Login form application.
A shopping application that displays multiple items on a page might have a custom thumbnail item renderer with two view states. In the base view state, the item cell might look the following image:
When the user rolls the mouse over the item, the view state changes: the thumbnail no longer has the availability and rating information, and now has buttons that let the user get more information or add the item to the wish list or cart. In the new state, the cell also has a border and a drop shadow, as the following image shows:
In this example, the application item renderer's two view states have different child components and have different component styles. The summary state, for example, includes an availability label and a star rating image, and has no border. The rolled-over state replaces the label and rating components with three buttons, and has an outset border.
You can see the code for an example similar to this in Example: Using view states with a custom item renderer. For information on item renderers, see Using Item Renderers and Item Editors.
Flex 2.01
