Home Tutorial Flex Flex4 Components View states in Flex4

 
 

Share on Google+Share on Google+
View states in Flex4
Posted on: July 9, 2010 at 12:00 AM
Advertisement
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="abc@xyz.com"

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.

Download this code

Advertisement

Related Tags for View states in Flex4:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: July 9, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com