Flex BOx Contailer example


/ Published in: ActionScript 3
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3. <!--
  4. This application has 2 states: the base state which shows a login dialog
  5. box and a 'registerState' which displays a registration dialog box.
  6. Transitions are used to provide friendly feedback between the two states.
  7. -->
  8. <mx:states>
  9. <mx:State name="registerState">
  10. <mx:RemoveChild target="{loginCanvas}"/>
  11. <mx:SetProperty target="{panel1}" name="width" value="340"/>
  12. <mx:SetProperty target="{panel1}" name="height" value="266"/>
  13. <mx:AddChild relativeTo="{panel1}" position="lastChild">
  14. <mx:Canvas id="registerCanvas" left="0" top="0" right="0" bottom="0">
  15. <mx:Label text="Please Register"
  16. fontWeight="bold" fontStyle="italic"
  17. horizontalCenter="0" top="5"/>
  18. <mx:Form id="registerForm" y="31" left="5" right="5">
  19. <mx:FormItem label="Name:" required="true">
  20. <mx:TextInput width="150"/>
  21. </mx:FormItem>
  22. <mx:FormItem label="User name:" required="true">
  23. <mx:TextInput width="150"/>
  24. </mx:FormItem>
  25. <mx:FormItem label="Password:" required="true">
  26. <mx:TextInput width="150"/>
  27. </mx:FormItem>
  28. <mx:FormItem label="Confirm Password:" required="true">
  29. <mx:TextInput width="150"/>
  30. </mx:FormItem>
  31. </mx:Form>
  32. <mx:Button label="Register"
  33. left="61" bottom="21" id="registerButton"/>
  34. <mx:LinkButton label="Login"
  35. right="65" bottom="21"
  36. fontStyle="italic" id="loginLink"
  37. click="currentState=''"/>
  38. </mx:Canvas>
  39. </mx:AddChild>
  40. </mx:State>
  41. </mx:states>
  42. <!--
  43. To understand what role transitions play, comment or delete the transitions block
  44. and then run the program. Switching between the states becomes sudden, abrupt.
  45. Without the transition, everything happens at once. The sequence of steps in a
  46. transition follows the change in state. For example, the registerState indicates
  47. that the panel changes size. The transition to the registerState first makes sure the
  48. loginCanvas is removed, THEN the panel is resized (using a Resize effect), then the
  49. registerCanvas is added).
  50. -->
  51. <mx:transitions>
  52. <mx:Transition fromState="" toState="registerState">
  53. <mx:Sequence>
  54. <mx:RemoveChildAction target="{loginCanvas}"/>
  55. <mx:Resize target="{panel1}"/>
  56. <mx:AddChildAction target="{registerCanvas}"/>
  57. </mx:Sequence>
  58. </mx:Transition>
  59. <mx:Transition fromState="registerState" toState="">
  60. <mx:Sequence>
  61. <mx:RemoveChildAction target="{registerCanvas}"/>
  62. <mx:Resize target="{panel1}"/>
  63. <mx:AddChildAction target="{loginCanvas}"/>
  64. </mx:Sequence>
  65. </mx:Transition>
  66. </mx:transitions>
  67. <mx:Panel width="294" height="208"
  68. layout="absolute" horizontalCenter="0" verticalCenter="0"
  69. title="The xyz Company" id="panel1">
  70. <mx:Canvas id="loginCanvas" left="0" top="0" right="0" bottom="0">
  71. <mx:Form id="loginForm" left="5" right="5" verticalCenter="-20">
  72. <mx:FormItem label="User name:" required="true">
  73. <mx:TextInput width="150"/>
  74. </mx:FormItem>
  75. <mx:FormItem label="Password:" required="true">
  76. <mx:TextInput width="150"/>
  77. </mx:FormItem>
  78. </mx:Form>
  79. <mx:Button label="Login" left="60" bottom="18" id="button1"/>
  80. <mx:LinkButton label="Register" fontStyle="italic"
  81. right="25" bottom="18" id="linkbutton1"
  82. click="currentState='registerState'"/>
  83. </mx:Canvas>
  84. </mx:Panel>
  85. </mx:Application>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.