Flex Tutorials 7-Handling different viewstate in Adobe Flex

Adobe flex is a RIA applictaion,so our primary goal is to show different form in a single page rather than creating new pages and navigating them.To achive this,we should maintain different view state in a single page,each viewstate contain different form that will be shown in different event.

Create an Flex application with the following code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
backgroundColor="#aaaaaa"
backgroundAlpha="0">
<mx:states>
<mx:State name="forms">
<mx:AddChild position="lastChild">
<mx:HBox>
<mx:Form>
<mx:FormHeading label="Contact Us by E-mail"/>
<mx:FormItem label="First Name:">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="Last Name:">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="E-mail Address:" required="true">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="Message:">
<mx:TextArea width="160"/>
<mx:Button label="Send Message" click="currentState=''"/>
</mx:FormItem>
</mx:Form>
<mx:Form>
<mx:FormHeading label="Request Menu or Brochure"/>
<mx:FormItem required="true">
<mx:CheckBox label="Menu"/>
<mx:CheckBox label="Special Events Brochure"/>
</mx:FormItem>
<mx:FormItem label="First Name:" required="true">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="Last Name:" required="true">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="Address:" required="true">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem>
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="City & State:" direction="horizontal" required="true">
<mx:TextInput width="109"/>
<mx:ComboBox width="50">
<mx:dataProvider>
<mx:ArrayCollection>
<mx:source>
<mx:Object label="AL" />
<mx:Object label="AK" />
<mx:Object label="AR" />
<mx:Object label="AZ" />

</mx:source>
</mx:ArrayCollection>
</mx:dataProvider>
</mx:ComboBox>
</mx:FormItem>
<mx:FormItem label="Zip Code:" required="true">
<mx:TextInput width="62"/>
</mx:FormItem>
<mx:FormItem>
<mx:Button label="Send Request" click="currentState=''"/>
</mx:FormItem>
</mx:Form>
</mx:HBox>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Panel
title="Contact Cafe Townsend" backgroundColor="#ffffff" paddingBottom="15" paddingLeft="15" paddingRight="15" paddingTop="15" id="panel1">
<mx:Text width="100%" text="How to Find Us" color="#dd7142" fontWeight="bold" />
<mx:Text width="100%">
<mx:text>
We are easy to find. If you are taking public transportation, we are 2 blocks south of the bullet train stop. Located across from the famous gigantic galaxy structure.
</mx:text>
</mx:Text>
<mx:Text width="100%">
<mx:text>
If you are driving, take route 66 all the way to the coast, turn south onto Spectacular Drive, proceed 1 mile. We are pleased to provide you with complimentary valet parking.
</mx:text>
</mx:Text>
<mx:LinkButton label="Send an e-mail or request a brochure" color="#0000ff" click="currentState='forms'"/>

</mx:Panel>
</mx:Application>

Base state is a state which is not in the portion of <States>
When you run you can see the following screen

There are 2 state Base State & Form State.Clickin in “Send an e-mail…” buton form state will be visible with the content of Base State.An clicking on “send message” or “send request” in the form state,form state will be invisible & only the content of base state will be visible.if we don’t want to show the panel of base state when we are in form stare then we need to add the lines
<mx:RemoveChild target="{panel1}"/>
under the form state In the following position
</mx:Form>
</mx:HBox>
</mx:AddChild>
<mx:RemoveChild target="{panel1}"/>
</mx:State>
</mx:states>


Change the rollover image using View States
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="#ffffff" backgroundAlpha="0">
<mx:states>
<mx:State name="details">
<mx:SetEventHandler target="{soup}" name="rollOut" handler="currentState=''"/>
<mx:SetProperty target="{soup}" name="scaleX" value="1.25"/>
<mx:SetProperty target="{soup}" name="scaleY" value="1.25"/>
<mx:AddChild position="lastChild">
<mx:Text text="Roasted butternut squash soup" width="200" fontWeight="bold"/>
</mx:AddChild>
<mx:AddChild position="lastChild">
<mx:Text text="Creamy, rich and silky finished with a touch of fresh basil and smoked walnuts" width="200"/>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Image id="soup" source="assets/app_butternut_soup.JPG" rollOver="currentState='details'"/>
</mx:Application>



On rollover the output will be as follows