一个flex的登录界面

 MyCssStyle.css 参照flex组件的一些样式。

^_^

Code:

1. <?xml version="1.0" encoding="utf-8"?>  
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
3.                xmlns:s="library://ns.adobe.com/flex/spark"   
4.                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"  
5.                creationComplete="init();">  
6.     <fx:Style source="MyCssStyle.css"/>  
7.     <s:layout>  
8.         <s:BasicLayout/>  
9.     </s:layout>  
10.     <s:states>  
11.         <s:State name="State1"/>  
12.         <s:State name="index"/>  
13.     </s:states>  
14.     <fx:Declarations>  
15.         <!-- 将非可视元素（例如服务、值对象）放在此处 -->  
16.     </fx:Declarations>  
17.       
18.     <fx:Script>  
19.         <![CDATA[ 
20.             import mx.controls.Alert; 
21.              
22.             private function generateCheckCode():String { 
23.                 var ran:Number; 
24.                 var number:Number; 
25.                 var code:String; 
26.                 var checkCode:String =  ""; 
27.                  
28.                 for(var i:int=0; i<4; i++) { 
29.                     ran = Math.random(); 
30.                     number = Math.round(ran * 10000); 
31.                     if(number % 2 == 0) { 
32.                         code = String.fromCharCode(48 + (number % 10)); 
33.                     } 
34.                     else { 
35.                         code = String.fromCharCode(65 + (number % 26)); 
36.                     } 
37.                     checkCode += code; 
38.                 } 
39.                 return checkCode; 
40.             } 
41.              
42.             private function init():void { 
43.                 lbl.text = generateCheckCode(); 
44.             } 
45.              
46.             private function clickHandler(event:MouseEvent):void { 
47.                 if(username.text=="" || password.text=="" || txt.text=="") { 
48.                     Alert.show("请填入完整信息！"); 
49.                 } 
50.                 else { 
51.                     if(txt.text != lbl.text) { 
52.                         Alert.show("验证码有误！"); 
53.                     } 
54.                     else if(username.text=="gray" && password.text=="gray") { 
55.                         Alert.show("登录成功！"); 
56.                         currentState = "index"; 
57.                     } 
58.                     else { 
59.                         Alert.show("用户名或密码有误！"); 
60.                     } 
61.                 } 
62.             } 
63.              
64.             private function clear(event:MouseEvent):void { 
65.                 username.text = ""; 
66.                 password.text = ""; 
67.                 txt.text = ""; 
68.             } 
69.              
70.         ]]>  
71.     </fx:Script>  
72.     <s:Panel x="256" y="123" width="360" height="277" title="登录" fontSize="16" includeIn="State1">  
73.         <s:Label x="10" y="45" text="用户名：" width="77" height="22"/>  
74.         <s:TextInput x="129" y="41" id="username"/>  
75.         <s:Label x="7" y="103" text="密     码：" width="81" height="25"/>  
76.         <s:TextInput x="129" y="98" id="password"/>  
77.         <s:Button x="177" y="201" label="登录" id="login" click="clickHandler(event);generateCheckCode();"/>  
78.         <s:Button x="278" y="201" label="重置" id="reset" click="clear(event)"/>  
79.         <s:Label x="7" y="156" text="验证码：" width="81" height="26"/>  
80.         <s:Label x="96" y="156" width="136" height="26" id="lbl"/>  
81.         <s:TextInput x="255" y="156" width="97" id="txt"/>  
82.     </s:Panel>  
83.     <s:Label includeIn="index" x="356" y="224" text="Welcome!!" width="155" height="37" fontSize="20"/>  
84. </s:Application>