The following example shows how you can create different view states in a Flex application by using the <mx:states /> and <mx:State /> tags.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/05/creating-view-states-in-a-flex-application/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:states>
<mx:State name="login">
<mx:AddChild>
<mx:Form id="loginForm">
<mx:FormHeading label="Login" />
<mx:FormItem label="Username:">
<mx:TextInput id="log_username" />
</mx:FormItem>
<mx:FormItem label="Password:">
<mx:TextInput id="log_password"
displayAsPassword="true" />
</mx:FormItem>
<mx:FormItem>
<mx:Button label="Login" />
</mx:FormItem>
</mx:Form>
</mx:AddChild>
</mx:State>
<mx:State name="register">
<mx:AddChild>
<mx:Form id="registerForm">
<mx:FormHeading label="Register" />
<mx:FormItem label="Username:">
<mx:TextInput id="reg_username" />
</mx:FormItem>
<mx:FormItem label="Password:">
<mx:TextInput id="reg_password1"
displayAsPassword="true" />
</mx:FormItem>
<mx:FormItem label="Confirm password:">
<mx:TextInput id="reg_password2"
displayAsPassword="true" />
</mx:FormItem>
<mx:FormItem>
<mx:Button label="Register" />
</mx:FormItem>
</mx:Form>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:transitions>
<mx:Transition id="loginTransition"
fromState="*"
toState="login">
<mx:WipeDown target="{loginForm}"/>
</mx:Transition>
<mx:Transition id="registerTransition"
fromState="*"
toState="register">
<mx:WipeDown target="{registerForm}"/>
</mx:Transition>
</mx:transitions>
<mx:Script>
<![CDATA[
import mx.events.ItemClickEvent;
private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
currentState = evt.item.data;
}
]]>
</mx:Script>
<mx:Array id="dp">
<mx:Object data="" label="Default state" />
<mx:Object data="login" label="Login" />
<mx:Object data="register" label="Register" />
</mx:Array>
<mx:ApplicationControlBar dock="true">
<mx:ToggleButtonBar id="toggleButtonBar"
dataProvider="{dp}"
itemClick="toggleButtonBar_itemClick(event);" />
</mx:ApplicationControlBar>
</mx:Application>
View source is enabled in the following example.

{ 15 comments… read them below or add one }
Hello,
Your example with differents view states is interesting. Is it possible using this method to do something more difficult with tree states and resizing each other like this example :
http://weblogs.macromedia.com/khoyt/files/f1040.swf
Thanks
Hello,
Is it possible to Change the states with the Combo Selection?
Thanks a lot
PSamanth
Is it possible to Change the states with the Combo Selection? so that I can show Different type of chart using same values
Prashanth Samanth,
I don’t think I understand the question. Are you asking whether it is possible to use a ComboBox instead of a ToggleButtonBar in the previous example?
If so, yes.
Peter
I tried this out with Flex 3, and I am getting the following message:
Type was not found or was not a compile-time constant: states.[Generated code (use -keep to save): Path: states-generated.as, Line:654, Column: 14]
Any suggestions?
I have the same error in Flex3:
Type was not found or was not a compile-time constant: states… :(
De Angela Duff / tyu,
Which version of the Flex 3 SDK are you using? I tried in the SDK that shipped with Flex Builder 3 (3.0.0.477) and the code above worked.
Peter
Hello – Is there any reason why the mx:script CDATA block is not at the top of the code? Does it matter – apart from making it easier to find?
P.s. The code runs fine for me in Flex Builder 3.
Hello again,
I am trying to load a gallery component – with images driven by xml – into one of the states, but Flash Player does not like it… Is it wrong to load something so complex inside a state?
I’m having the same problem using States with Flex 3
Error: Type was not found or was not a compile-time constant: states. [Generated code (use -keep to save): Path: states-generated.as, Line: 327, Column: 14]
Using Flex SDK 3.2
I’d like to return to the question Prashanth Samanth had about having a ComboBox to change states within an application. (I didn’t see an entry on this with a search of your site.)
How would this be done? It doesn’t appear to be as easy as with a LinkButton. I’m shaky with eventListeners if they are needed!
Hi, very interesting your example, and I like to ask’u if exists some example, about a complete applz? Well, I’m like to learn, how can develop a little application with flex.
Hallo,
i use Flex Builder 3, i’ve problems at make a continuous state change, i’d like to have a state change without being dependent on event, like button click.
How can i make it?
Many Thanks.
Gabriele
hi,
i understand how states and transitions work, but I just cannot apply them to a whole component. it just does not work n the component, which is in a separate MXML file.
<mx:transitions>
<mx:Transition fromState=”*” toState=”*”>
<mx:Resize duration=”400″/>
</mx:Transition>
</mx:transitions>
<mx:states>
<mx:State name=”sInitial”>
<mx:RemoveChild target=”{project}”/>
</mx:State>
</mx:states>
<:states />
…
<pf:Project id=”project” />
Hi,
try to use states in a derivated application class. Flex shows the following error:
“Could not resolve to a component implementation.”
How I can use states in this case?
For your help in advance thanks!
Klaus