View states in Flex4
When you create a view state you will follow the following step:
When you create a view state you will follow the following step:View states in Flex4:
When you create a view state you will follow the
following step:
1. You will define a view state at the root of an application.
2. Now you will define state by using a component's states property. The tag is
<s:states>.
3. Populate the state property.
4. You will set the component's currentState property according the name
property of the state.
The structure of view state is following:
<s:Application>
<s:states>
<s:State name="State1"/>
<s:State name="State2"/>
<s:State name="State3"/>
.
.
</s:states>
<!-- Application definition. -->
.
.
</s:Application>
You can set the properties, styles and event for a view state by using following
format.
propertyOrStyleName.stateName
When you remove or add the new children you will use the following attributes:
1. includeIn: Specify the list of view state where the
component will appear.
2. excludeFrom: Specify the list of view state where the
component will omitted.
excludeFrom and includeIn are mutually exclusive. You can use these attribute on
any mxml object with in an mxml document. You can use the <fx:Reparent> tag wich
is hold a child component. The syntax of this tag is following:
<fx:Reparent target="targetComp" includeIn="stateName">
Example:
|
<?xml version="1.0" encoding="utf-8"?> <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" minWidth="955" minHeight="600"> <!-- Defines the view states.--> <s:states> <s:State name="default"/> <s:State name="Register"/> </s:states> <s:Panel title="View State Example"> <s:Panel title="Login Form" title.Register="Registration Form" chromeColor="#333333" color="#CCCCCC" backgroundColor="#555555" width="347" height="166"> <mx:Form> <mx:FormItem label="Email Id:"> <s:TextInput text="[email protected]" color="#000000"/> </mx:FormItem> <mx:FormItem label="Password:"> <s:TextInput displayAsPassword="true" text="password" color="#000000"/> </mx:FormItem> <mx:FormItem id="confirmPassword" label="Confirm Password:" includeIn="Register"> <s:TextInput displayAsPassword="true" text="password" color="#000000"/> </mx:FormItem> <mx:FormItem direction="horizontal"> <mx:Spacer width="100%"/> <mx:LinkButton id="registerlinkButton" label="GO for Registration?" label.Register="Return to Login" click="currentState='Register'" click.Register="currentState=''"/> <s:Button id="loginButton" label="Login" label.Register="Register"/> </mx:FormItem> </mx:Form> </s:Panel> </s:Panel> &</s:Application> |
Output:
Running Application:
To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.
