Projects - Flex Builder - Creating States

.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" > <!-- 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>