View State in custom component in Flex4


 

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.

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="[email protected]"

0

color="#000000"/>

</mx:FormItem>

<mx:FormItem label="Password:">

1

<s:TextInput displayAsPassword="true"

text="password"

color="#000000"/>

2

</mx:FormItem>

<mx:FormItem id="confirmPassword"

label="Confirm Password:"

3

includeIn="Register">

<s:TextInput displayAsPassword="true"

text="password"

4

color="#000000"/>

</mx:FormItem>

<mx:FormItem direction="horizontal">

5

<mx:Spacer width="100%"/>

<mx:LinkButton id="registerlinkButton"

label="GO for Registration?"

6

label.Register="Return to Login"

click="currentState='Register'"

click.Register="currentState=''"/>

7

<s:Button id="loginButton"

label="Login" label.Register="Register"/>

</mx:FormItem>

8

</mx:Form>

</s:Panel>

Output:

9

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

Ads