Share on Google+Share on Google+

View State in custom component in Flex4

Advertisement
If your custom component has a more then one state then you will specify the view state in custom component not in your main application.

View State in custom component in Flex4:

If your custom component has a more then one state then you will specify the view state in custom component not in your main application. In this example you can see how can to declare view states in custom component.

Example:

mainapplication.mxml

<?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"

xmlns:LoginComp="mycomponent.*">

<s:Panel title="View Sate in custom component" width="380" height="231">

<LoginComp:logincomponent currentState="Login" x="15" y="15"/>

</s:Panel>

</s:Application>

customcomponent.mxml

<?xml version="1.0" encoding="utf-8"?>

<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

title="Login Form"

title.Register="Registration Form"

chromeColor="#333333"

color="#CCCCCC"

backgroundColor="#555555"

width="347"

height="166">

<!-- Defines the view states.-->

<s:states>

<s:State name="Login"/>

<s:State name="Register"/>

</s:states>

<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>

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download mainapplication.mxml file code

Download customcomponent.mxml file code

Advertisements

Advertisement

Posted on: July 9, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial 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.