Define in states in Flex 4.

<?xml version=”1.0″ encoding=”utf-8″?>
<!– Simple example to demonstrate Spark Application component –>
<s:Application xmlns:fx=”;
xmlns:s=”library://” currentState=”Login”>
import mx.controls.Alert;
<s:VerticalLayout horizontalAlign=”center” verticalAlign=”middle”/>

<mx:State name=”Register”/>
<mx:State name=”Login” />

<s:Transition toState=”Register” autoReverse=”true”>
<s:Fade targets=”{[txtFirstName,txtlastName,txtConfirm]}” alphaFrom=”0.1″ alphaTo=”1″ duration=”1000″/>
<s:Transition toState=”Login” autoReverse=”true”>
<s:Fade targets=”{[txtEmail,txtPassword]}” alphaFrom=”0.1″ alphaTo=”1″ duration=”1000″/>

<s:Panel title=”States” width=”300″ height=”260″>
<mx:Form >
<mx:FormHeading label=”Testing States” />
<mx:FormItem label=”First Name” includeIn=”Register”>
<s:TextInput id=”txtFirstName” />
<mx:FormItem label=”Last Name” includeIn=”Register”>
<s:TextInput id=”txtlastName” />
<mx:FormItem label=”Email” excludeFrom=”Register”>
<s:TextInput id=”txtEmail” />
<mx:FormItem label=”Password” excludeFrom=”Register”>
<s:TextInput id=”txtPassword”  displayAsPassword=”true”/>
<mx:FormItem label=”Confirm” includeIn=”Register”>
<s:TextInput id=”txtConfirm” displayAsPassword=”true” />
<mx:FormItem direction=”horizontal”>
<s:Button label=”Login” click=”‘Login.’)”/>
<mx:LinkButton label=”Need Register” textDecoration=”underline” click=”currentState=’Register'” />
<mx:LinkButton label=”Return to Login” textDecoration=”underline” click=”currentState=’Login'” />


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s