Publishers of technology books, eBooks, and videos for creative people

Home > Blogs > View States in Flex 4

View States in Flex 4

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.

Before getting into how you create and manage view states, one has to be clear as to what a view state is. A view state is a defined combination of appearance and behavior that an application as a whole, or just an individual component, has. In different circumstances, the particulars—the visibility of components, what a label may say, the colors used, and so forth—will change, which constitutes a change of the state. For example, a Button in its default state looks one way; when it's being clicked, a Button will have a slightly different appearance to indicate the action taking place. By using view states, you can expand this concept to other components or to the entire application. For example, pieces of the application may be disabled until the user selects an option from a drop-down menu or a login form may disappear once the user has logged in. Or, as another way of looking at this, whereas an HTML Web site has multiple pages or you can use JavaScript to manipulate HTML elements, in Flex, you have view states.

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:

  1. Using includeIn
  2. Using excludeFrom
  3. Using the propertyName.stateName syntax

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.