Search Flex Components Free

Custom Search

December 25, 2007

Flex Using States and Transitions example Source Code

Flex Transitions Sample Source Code:
Create a file:
StatesandTransitions .mxml


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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="*" backgroundAlpha="0" currentState="Login" >

<!--States Code -->
<mx:states>
<mx:State name="Register">
<mx:AddChild relativeTo="{loginForm}" position="lastChild">
<mx:FormItem id="confirm" label="Confirm:" styleName="myStyle">
<mx:TextInput />
</mx:FormItem>
</mx:AddChild>

<mx:SetProperty target="{loginPanel}" name="title" value="Register"/>
<mx:SetProperty target="{loginButton}" name="label" value="Register"/>
<mx:RemoveChild target="{registerLink}"/>

<mx:AddChild relativeTo="{spacer1}" position="before">
<mx:LinkButton label="Return to Login" click="currentState='Login'"/>
</mx:AddChild>

</mx:State>

<mx:State name="Login">
<mx:SetProperty target="{loginPanel}" name="height" value="156"/>
</mx:State>

</mx:states>

<!-- Transitions Code -->
<mx:transitions>
<mx:Transition fromState="*" toState="Register">
<mx:Sequence>
<mx:Resize target="{loginPanel}" duration="200" />
<mx:SetPropertyAction target="{loginPanel}" name="title" />
<mx:SetPropertyAction target="{loginButton}" name="label" />

<mx:Sequence target="{confirm}">
<mx:AddChildAction />
<mx:Dissolve alphaFrom="0" alphaTo="1.0" duration="200" />
</mx:Sequence>
</mx:Sequence>
</mx:Transition>

<mx:Transition fromState="Register" toState="Login">
<mx:Sequence>
<mx:Sequence target="{confirm}">
<mx:Dissolve alphaFrom="1.0" alphaTo="0" duration="200" />
<mx:RemoveChildAction />
</mx:Sequence>

<mx:SetPropertyAction target="{loginPanel}" name="title" />
<mx:SetPropertyAction target="{loginButton}" name="label" />
<mx:Resize target="{loginPanel}" duration="200" />
</mx:Sequence>
</mx:Transition>
</mx:transitions>

<!-- UI Code -->

<mx:Text width="400" text="This is a login screen that can also be used to submit
registration info. Click the link to toggle between the two states. " />

<mx:Spacer height="40" />

<mx:Panel title="Login" id="loginPanel" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Form id="loginForm">
<mx:FormItem label="Username:">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="Password:">
<mx:TextInput/>
</mx:FormItem>
</mx:Form>
<mx:ControlBar>
<mx:LinkButton label="Need to Register?" id="registerLink"
click="currentState='Register'"/>
<mx:Spacer width="100%" id="spacer1"/>
<mx:Button label="Login" id="loginButton"/>
</mx:ControlBar>
</mx:Panel>

</mx:Application>

Related Flex Tutorials