Posted By

copyleft on 12/08/07


Tagged

box 2 Flex contailer


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

oamaxa
THEPWN3R


Flex BOx Contailer example


 / Published in: ActionScript 3
 

  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  

You need to login to post a comment.