很漂亮的Flex 用户登录界面

Java代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientColors="[0x000000,0x323232]" fontSize="12">  
3.     <mx:Script>  
4.         <![CDATA[  
5.             // Import easing classes if you use them only in MXML.  
6.             import mx.effects.easing.Bounce;  
7.         ]]>  
8.     </mx:Script>  
9.   
10.     <!-- Define the transition to animate the change of view state. -->  
11.     <mx:transitions>  
12.        <mx:Transition>  
13.             <mx:Parallel   
14.               targets="{[loginPanel, registerLink, loginButton, confirm,realname,tel,email,areaname,realnameL,telL,emailL,areanameL]}">  
15.                 <mx:Resize duration="500" easingFunction="Bounce.easeOut"/>  
16.                 <mx:Sequence targets="{[confirm,realname,tel,email,areaname,realnameL,telL,emailL,areanameL]}">  
17.                    <mx:Blur duration="200" blurYFrom="1.0" blurYTo="20.0"/>  
18.                    <mx:Blur duration="200" blurYFrom="20.0" blurYTo="1"/>  
19.                 </mx:Sequence>  
20.             </mx:Parallel>  
21.         </mx:Transition>  
22.     </mx:transitions>  
23.           
24.     <mx:states>  
25.         <mx:State name="Register">  
26.             <mx:AddChild relativeTo="{loginForm}"   
27.                 position="lastChild">  
28.                 <mx:FormItem id="confirm" label="确   认:">  
29.                     <mx:TextInput/>  
30.                 </mx:FormItem>  
31.             </mx:AddChild>   
32.             <mx:AddChild relativeTo="{loginForm}"   
33.                 position="lastChild">  
34.             <mx:FormItem id="realnameL" label="真实姓名：">  
35.                 <mx:TextInput id="realname"/>  
36.             </mx:FormItem>  
37.             </mx:AddChild>   
38.             <mx:AddChild relativeTo="{loginForm}"   
39.                 position="lastChild">  
40.             <mx:FormItem id="telL" label="电话：">  
41.                 <mx:TextInput id="tel"/>  
42.             </mx:FormItem>  
43.             </mx:AddChild>  
44.             <mx:AddChild relativeTo="{loginForm}"   
45.                 position="lastChild">  
46.             <mx:FormItem id="emailL" label="Email：">  
47.                 <mx:TextInput id="email"/>  
48.             </mx:FormItem>  
49.             </mx:AddChild>  
50.             <mx:AddChild relativeTo="{loginForm}"   
51.                 position="lastChild">  
52.             <mx:FormItem id="areanameL" label="所在区域：">  
53.                 <mx:TextInput id="areaname"/>  
54.             </mx:FormItem>  
55.             </mx:AddChild>                                                                
56.             <mx:SetProperty target="{loginPanel}"  
57.                 name="title" value="用户注册"/>              
58.             <mx:SetProperty target="{loginButton}"  
59.                name="label" value="注册"/>  
60.             <mx:RemoveChild target="{registerLink}"/>  
61.             <mx:AddChild relativeTo="{spacer1}" position="before">  
62.                 <mx:LinkButton label="返回登录"   
63.                     click="currentState=''"/>  
64.             </mx:AddChild>  
65.         </mx:State>  
66.     </mx:states>  
67.   
68.     <mx:Panel id="loginPanel"   
69.         title="用户登录" color="0xffffff" borderAlpha="0.15"  
70.         horizontalScrollPolicy="off" verticalScrollPolicy="off" horizontalCenter="0" verticalCenter="022">  
71.   
72.         <mx:Form id="loginForm" color="0x323232">  
73.         <mx:FormItem label="用户名:">  
74.             <mx:TextInput/>  
75.         </mx:FormItem>  
76.         <mx:FormItem label="密   码:">  
77.             <mx:TextInput/>  
78.         </mx:FormItem>  
79.     </mx:Form>  
80.       
81.     <mx:ControlBar>  
82.         <mx:LinkButton id="registerLink"  
83.             label="新用户注册"   
84.             click="currentState='Register'"/>  
85.         <mx:Spacer width="100%" id="spacer1"/>  
86.         <mx:Button label="登录" id="loginButton"/>  
87.     </mx:ControlBar>  
88.     </mx:Panel>  
89.   
90. </mx:Application>