CELEBRATE EARTH WEEK
Save 40% on eBooks and Web Editions*—use code EARTH now through April 27. Shop now.
Publishers of technology books, eBooks, and videos for creative people
View states provide the Flex developer an easy way to adjust the look and behavior of a Flash application on the fly, normally in response to some user actions. How view states are created and used have changed in Flex 4, for the better. In this post, you'll learn everything you need to know to add view states to your Flex applications.
The first thing you'll need to do is declare which states should exist. You do so by adding State tags to a component's state property:
<s:State name="default" />
<s:State name="otherState" />
If this code is placed within the Application tag, you'll have created states for the entire application that can be applied to any of the application's components. If you place this code within an individual component's tag, you'll have created states for just that component and its children (like if you create states within a Form tag).
You can give the states any meaningful name and you can list them in any order, but the first listed state will be considered the default state, regardless of its name.
To make use of the declared view states, you customize the components involved in state changes. For example, if you have a Panel that will be unchanged from one view state to another, you do nothing to it, but if you have a Form that changes in different states, you'll need to customize its properties. There are three ways you can customize the state appearance and behavior for a component:
The includeIn and excludeFrom properties of a component dictate in which states the component does or does not exist. The includeIn property takes one or more states in which the component does exist; excludeFrom takes one or more states in which the component will not exist. As an example, if your application has three states--default, loggedIn, and loggedOut, you may want to only display the login form in the first and third. You could do so using either of these:
<mx:Form id="login" includeIn="default,loggedOut">
<mx:Form id="login" excludeFrom="loggedIn">
As you can see in that code, if you want to reference multiple states in includeIn or excludeFrom, just separate them using commas.
The propertyName.stateName syntax can be used to control not just if a component exists but how it looks and behaves. Say you start with this Button:
<s:Button label="Show Details" />
In every state, that Button has a label (the displayed text) of "Show Details". After clicking it, presumably dictating to the application that the user wants to see the details of something, the Button's label should logically change. Here's how you would do that using view states:
<s:Button label="Show Details" label.details="Hide Details" />
(Presumably the declared view states in this application would be details and maybe default or plain.) If you also wanted to change the event handler in each state, you could do that too:
<s:Button label="Show Details" label.details="Hide Details"
click="showDetails(event)" click.details="hideDetails(event)" />
So there are the fundamentals of using view states in Flex 4. Clearly, it's pretty easy stuff to learn and use. Also, if you are using Flash Builder, there are several ways you can manage view states in it. For example, there's a new States panel for adding and manipulating states (i.e., creating the States tags in the MXML). And in Design mode you can select states at the top of the editor window to see how the application appears in a given state.