Flex中如何利用mx:states和mx:State创建不同状态应用的例子

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3.         layout="vertical"
4.         verticalAlign="middle"
5.         backgroundColor="white">
6.  
7.     <mx:states>
8.         <mx:State name="login">
9.             <mx:AddChild>
10.                 <mx:Form id="loginForm">
11.                     <mx:FormHeading label="Login" />
12.                     <mx:FormItem label="Username:">
13.                         <mx:TextInput id="log_username" />
14.                     </mx:FormItem>
15.                     <mx:FormItem label="Password:">
16.                         <mx:TextInput id="log_password"
17.                                 displayAsPassword="true" />
18.                     </mx:FormItem>
19.                     <mx:FormItem>
20.                         <mx:Button label="Login" />
21.                     </mx:FormItem>
22.                 </mx:Form>
23.             </mx:AddChild>
24.         </mx:State>
25.         <mx:State name="register">
26.             <mx:AddChild>
27.                 <mx:Form id="registerForm">
28.                     <mx:FormHeading label="Register" />
29.                     <mx:FormItem label="Username:">
30.                         <mx:TextInput id="reg_username" />
31.                     </mx:FormItem>
32.                     <mx:FormItem label="Password:">
33.                         <mx:TextInput id="reg_password1"
34.                                 displayAsPassword="true" />
35.                     </mx:FormItem>
36.                     <mx:FormItem label="Confirm password:">
37.                         <mx:TextInput id="reg_password2"
38.                                 displayAsPassword="true" />
39.                     </mx:FormItem>
40.                     <mx:FormItem>
41.                         <mx:Button label="Register" />
42.                     </mx:FormItem>
43.                 </mx:Form>
44.             </mx:AddChild>
45.         </mx:State>
46.     </mx:states>
47.  
48.     <mx:transitions>
49.         <mx:Transition id="loginTransition"
50.                 fromState="*"
51.                 toState="login">
52.             <mx:WipeDown target="{loginForm}"/>
53.         </mx:Transition>
54.         <mx:Transition id="registerTransition"
55.                 fromState="*"
56.                 toState="register">
57.             <mx:WipeDown target="{registerForm}"/>
58.         </mx:Transition>
59.     </mx:transitions>
60.  
61.     <mx:Script>
62.         <![CDATA[
63.             import mx.events.ItemClickEvent;
64.  
65.             private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
66.                 currentState = evt.item.data;
67.             }
68.         ]]>
69.     </mx:Script>
70.  
71.     <mx:Array id="dp">
72.         <mx:Object data="" label="Default state" />
73.         <mx:Object data="login" label="Login" />
74.         <mx:Object data="register" label="Register" />
75.     </mx:Array>
76.  
77.     <mx:ApplicationControlBar dock="true">
78.         <mx:ToggleButtonBar id="toggleButtonBar"
79.                 dataProvider="{dp}"
80.                 itemClick="toggleButtonBar_itemClick(event);" />
81.     </mx:ApplicationControlBar>
82.  
83. </mx:Application>