Projects - Flex Builder - Defining State Transitions
.mxml code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle"
width="340" height="250"
>
<mx:Script>
<![CDATA[
// You need to import easing classes even if
// you're going to use them only in MXML.
import mx.effects.easing.Bounce;
]]>
</mx:Script>
<!--
Use the transitions property (array) of
the Application class to store your transitions.
-->
<mx:transitions>
<!--
The "*" indicates that the transition should be applied
to any changes in the view state. You can set either
property to "" to refer to the base view state.
-->
<mx:Transition fromState="*" toState="*">
<!-- Parallel effects execute in unison -->
<mx:Parallel targets="{[loginPanel, registerLink, loginButton, confirm]}">
<mx:Resize duration="500" easingFunction="Bounce.easeOut"/>
<!--
Sequence effects execute in turn. The effects
in this sequence will only affect the confirm FormItem.
-->
<mx:Sequence target="{confirm}">
<mx:Blur duration="200" blurYFrom="1.0" blurYTo="20.0" />
<mx:Blur duration="200" blurYFrom="20.0" blurYTo="1" />
</mx:Sequence>
</mx:Parallel>
</mx:Transition>
</mx:transitions>
<!-- The states property of the Application class
defines the view states. -->
<mx:states>
<!--
The "Register" state is based on the base state.
All states are based on the base state by default
so you can leave out the basedOn property.
-->
<mx:State name="Register" basedOn="">
<!-- Add a FormItem component to the form. -->
<mx:AddChild
relativeTo="{loginForm}"
position="lastChild"
creationPolicy="all"
>
<mx:FormItem id="confirm" label="Confirm:">
<mx:TextInput/>
</mx:FormItem>
</mx:AddChild>
<!-- Set properties on the Panel container and Button control. -->
<mx:SetProperty target="{loginPanel}"
name="title" value="Register"/>
<mx:SetProperty target="{loginButton}"
name="label" value="Register"/>
<!-- Remove the existing LinkButton control. -->
<mx:RemoveChild target="{registerLink}"/>
<!--
Add a new LinkButton control to change
view state back to the login form.
-->
<mx:AddChild relativeTo="{spacer1}" position="before">
<mx:LinkButton label="Return to Login" click="currentState=''"/>
</mx:AddChild>
</mx:State>
</mx:states>
<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>
<!--
Use the LinkButton control to change to
the Register view state.
-->
<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>
