Define in states in Flex 4.

<?xml version=”1.0″ encoding=”utf-8″?>
<!– Simple example to demonstrate Spark Application component –>
<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243;
xmlns:mx=”library://ns.adobe.com/flex/mx”
xmlns:s=”library://ns.adobe.com/flex/spark” currentState=”Login”>
<fx:Script>
import mx.controls.Alert;
</fx:Script>
<s:layout>
<s:VerticalLayout horizontalAlign=”center” verticalAlign=”middle”/>
</s:layout>

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

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

<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>
<mx:FormItem label=”Last Name” includeIn=”Register”>
<s:TextInput id=”txtlastName” />
</mx:FormItem>
<mx:FormItem label=”Email” excludeFrom=”Register”>
<s:TextInput id=”txtEmail” />
</mx:FormItem>
<mx:FormItem label=”Password” excludeFrom=”Register”>
<s:TextInput id=”txtPassword”  displayAsPassword=”true”/>
</mx:FormItem>
<mx:FormItem label=”Confirm” includeIn=”Register”>
<s:TextInput id=”txtConfirm” displayAsPassword=”true” />
</mx:FormItem>
<mx:FormItem direction=”horizontal”>
<s:Button label=”Login” click=”Alert.show(‘Login.’)”/>
<mx:LinkButton label=”Need Register” textDecoration=”underline” click=”currentState=’Register'” />
<mx:LinkButton label=”Return to Login” textDecoration=”underline” click=”currentState=’Login'” />
</mx:FormItem>
</mx:Form>
</s:Panel>
</s:Application>

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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