21 March 2010
In many rich Internet applications, the interface changes based on the task that 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, and can simplify what would otherwise be complex event handling code.
Note: To learn how to define transitions between view states, see Defining state transitions.
At its simplest, a view state defines 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.
The following example uses view states to easily implement a login and registration form. In this example, the initial view state prompts the user to log in, and includes a link that lets them register, if necessary. If the user selects the Need to Register link, the form changes the view state to display registration information. When the user clicks the Return to Login link, the view state changes back to the login form.
Adobe Flash Builder provides tools and assistance when creating view states. In Design mode of the MXML editor, Flash Builder provides a States panel that allows you to easily create view states and view the active components in each state. In Source mode of the MXML editor, content assist helps you specify which components are active in a view state. The editor provides shading of the code to help you see which code is active for each state.
<?xml version="1.0" encoding="utf-8"?> <!-- CreatingStates.mxml --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="340" height="250"> <s:layout> <s:VerticalLayout paddingTop="20" horizontalAlign="center"/> </s:layout> <!-- Define the view states --> <!-- The LoginState is the default state --> <s:states> <s:State name="LoginState"/> <s:State name="RegisterState"/> </s:states> <!-- Define titles for each state of the Panel --> <s:Panel title.LoginState="Login" title.RegisterState="Register" id="loginPanel"> <s:VGroup id="loginForm" left="10" top="10" bottom="10" width="250"> <s:Group> <s:Label text="Username:" baseline="15"/> <s:TextInput x="80" baseline="15"/> </s:Group> <s:Group> <s:Label text="Password" baseline="15"/> <s:TextInput x="80" baseline="15"/> </s:Group> <!-- Confirm FormItem is only in the RestigerState --> <s:Group includeIn="RegisterState" id="confirm"> <s:Label text="Confirm:" baseline="15"/> <s:TextInput x="80" baseline="15"/> </s:Group> </s:VGroup> <s:controlBarContent> <!-- Labels for the Buttons change, depending on the state --> <mx:LinkButton label="Need to Register?" includeIn="LoginState" click="currentState='RegisterState'" id="registerLink" /> <mx:LinkButton label="Return to Login" includeIn="RegisterState" click="currentState='LoginState'"/> <mx:Spacer width="100%"/> <s:Button label="Login" id="registerBtn" includeIn="RegisterState"/> <s:Button label="Register" id="loginButton" includeIn="LoginState"/> </s:controlBarContent> </s:Panel> </s:Application>