<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
     <!--       
     This application has 2 states: the base state which shows a login dialog
     box and a 'registerState' which displays a registration dialog box.
     Transitions are used to provide friendly feedback between the two states.      
     -->
     <mx:states>
          <mx:State name="registerState">
               <mx:RemoveChild target="{loginCanvas}"/>
               <mx:SetProperty target="{panel1}" name="width" value="340"/>
               <mx:SetProperty target="{panel1}" name="height" value="266"/>
               <mx:AddChild relativeTo="{panel1}" position="lastChild">
                    <mx:Canvas id="registerCanvas" left="0" top="0" right="0" bottom="0">
                         <mx:Label text="Please Register" 
                              fontWeight="bold" fontStyle="italic" 
                              horizontalCenter="0" top="5"/>
                         <mx:Form id="registerForm" y="31" left="5" right="5">
                              <mx:FormItem label="Name:" required="true">
                                   <mx:TextInput width="150"/>
                              </mx:FormItem>
                              <mx:FormItem label="User name:" required="true">
                                   <mx:TextInput width="150"/>
                              </mx:FormItem>
                              <mx:FormItem label="Password:" required="true">
                                   <mx:TextInput width="150"/>
                              </mx:FormItem>
                              <mx:FormItem label="Confirm Password:" required="true">
                                   <mx:TextInput width="150"/>
                              </mx:FormItem>
                         </mx:Form>
                         <mx:Button label="Register" 
                              left="61" bottom="21" id="registerButton"/>
                         <mx:LinkButton label="Login" 
                              right="65" bottom="21" 
                              fontStyle="italic" id="loginLink" 
                              click="currentState=''"/>
                    </mx:Canvas>
               </mx:AddChild>
          </mx:State>
     </mx:states>
     <!--       
     To understand what role transitions play, comment or delete the transitions  block
     and then run the program. Switching between the states becomes sudden,  abrupt.
     Without the transition, everything happens at once. The sequence of steps  in a
     transition follows the change in state. For example, the registerState  indicates
      that the panel changes size. The transition to the registerState first makes sure the
     loginCanvas is removed, THEN the panel is resized (using a Resize effect),  then the
      registerCanvas is added).      
     -->
     <mx:transitions>
          <mx:Transition fromState="" toState="registerState">
               <mx:Sequence>
                    <mx:RemoveChildAction target="{loginCanvas}"/>
                    <mx:Resize target="{panel1}"/>
                    <mx:AddChildAction target="{registerCanvas}"/>
               </mx:Sequence>
          </mx:Transition>
          <mx:Transition fromState="registerState" toState="">
               <mx:Sequence>
                    <mx:RemoveChildAction target="{registerCanvas}"/>
                    <mx:Resize target="{panel1}"/>
                    <mx:AddChildAction target="{loginCanvas}"/>
               </mx:Sequence>
          </mx:Transition>
     </mx:transitions>
     <mx:Panel width="294" height="208" 
          layout="absolute" horizontalCenter="0" verticalCenter="0" 
          title="The xyz Company" id="panel1">
          <mx:Canvas id="loginCanvas" left="0" top="0" right="0" bottom="0">
               <mx:Form id="loginForm" left="5" right="5" verticalCenter="-20">
                    <mx:FormItem label="User name:" required="true">
                         <mx:TextInput width="150"/>
                    </mx:FormItem>
                    <mx:FormItem label="Password:" required="true">
                         <mx:TextInput width="150"/>
                    </mx:FormItem>
               </mx:Form>
               <mx:Button label="Login" left="60" bottom="18" id="button1"/>
               <mx:LinkButton label="Register" fontStyle="italic" 
                    right="25" bottom="18" id="linkbutton1" 
                    click="currentState='registerState'"/>
          </mx:Canvas>
     </mx:Panel>
</mx:Application>