技术开发 频道

一个Flex做的登陆控件

【IT168技术分析】最近在学习Flex,用Flex做了个简单的登陆控件。

frmLogin.mxml
 



 


代码:
1<?xml version="1.0" encoding="utf-8"?>
2<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="250" height="170">
3 <mx:Panel x="0" y="0" width="250" height="170" layout="absolute" title="登陆" fontSize="15" id="panel1" visible="true">
4 <mx:Label x="10" y="14" text="用户名" fontWeight="bold"/>
5 <mx:Label x="10" y="42" text="密码" fontWeight="bold"/>
6 <mx:TextInput x="71" y="12" width="149" height="21" fontSize="10" id="username"/>
7 <mx:TextInput x="71" y="40" width="149" height="21" displayAsPassword="true" fontSize="10" id="userpass"/>
8 <mx:ControlBar height="50" y="74" width="230" horizontalAlign="center" verticalAlign="top">
9 <mx:Button label="登陆" fontSize="12" id="button_login" click="button_login_click()"/>
10 <mx:Button label="注册" fontSize="12" id="button_reg" click="button_reg_click()"/>
11 </mx:ControlBar>
12 </mx:Panel>
13 <mx:Panel x="0" y="0" width="250" height="170" layout="absolute" title="已登陆" fontSize="15" id="panel2" visible="false">
14 <mx:Label x="11" y="25" text="欢迎你" fontSize="22" fontWeight="bold"/>
15 <mx:Label x="92" y="25" fontSize="22" fontWeight="bold" width="128" id="label_username" color="#F64617" text="Vincent"/>
16 <mx:ControlBar height="45" y="89" horizontalAlign="center" verticalAlign="top">
17 <mx:Button label="个人信息" fontSize="12" id="button_detail" click="button_detail_click()"/>
18 <mx:Button label="退出登陆" fontSize="12" fontWeight="bold" id="button_logout" click="button_logout_click()"/>
19 </mx:ControlBar>
20 </mx:Panel>
21 <mx:Metadata>
22 [Event(name="loginSucceed",type="vincent.flex.controls.login.events.LoginSucceedEvent")]
23 [Event(name="loginFail",type="flash.events.Event")]
24 [Event(name="logout",type="flash.events.Event")]
25 [Event(name="showUserDetail",type="flash.events.Event")]
26 [Event(name="doRegister",type="flash.events.Event")]
27 </mx:Metadata>
28 <mx:Script>
29 <![CDATA[
30 import vincent.flex.controls.login.events.LoginSucceedEvent;
31 import vincent.flex.controls.login.User;
32 import mx.controls.Text;
33 import mx.controls.Alert;
34 import com.adobe.serialization.json.JSON;
35
36 private const ACTION_LOGIN:String = "login";
37 private const ACTION_LOGOUT:String = "logout"
38
39 private var action:String;
40 public var currentUser:User;
41
42 private function button_reg_click():void
43 {
44 this.dispatchEvent(new Event("doRegister"));
45 }
46
47 private function button_login_click():void
48 {
49 if(username.text==""||userpass.text=="")
50 {
51 Alert.show("请填写用户名和密码!","登陆");
52 return;
53 }
54 action = this.ACTION_LOGIN;
55 var data:String = "un="+encodeURI(username.text)+"&up="+encodeURI(userpass.text);
56 userpass.text = "";
57 doRequest("Authorization","UserLogin",data);
58 }
59
60 private function button_logout_click():void
61 {
62 action = this.ACTION_LOGOUT;
63 var data:String = "";
64 doRequest("Authorization","UserLogout",data);
65 }
66
67 private function button_detail_click():void
68 {
69 this.dispatchEvent(new Event("showUserDetail"));
70 }
71
72 private function doRequest(am:String,at:String,data:String):void
73 {
74 var request:URLRequest = new URLRequest("/index.php?am="+am+"&at="+at+"&dm=2&IsPosted=1");
75 var uLoader:URLLoader = new URLLoader();
76 request.method = URLRequestMethod.POST;
77 request.data = data;
78
79 uLoader.addEventListener(Event.COMPLETE,doEvent);
80 uLoader.addEventListener(HTTPStatusEvent.HTTP_STATUS,doEvent);
81 uLoader.addEventListener(Event.OPEN,doEvent);
82 uLoader.addEventListener(ProgressEvent.PROGRESS,doEvent);
83 uLoader.addEventListener(IOErrorEvent.IO_ERROR,doEvent);
84 uLoader.addEventListener(SecurityErrorEvent.SECURITY_ERROR,doEvent);
85
86 uLoader.load(request);
87 }
88
89 private function doEvent(e:Event):void
90 {
91 switch(e.type)
92 {
93 case Event.COMPLETE:
94 {
95 var uLoader:URLLoader = e.currentTarget as URLLoader;
96 var result:Object = (JSON.decode(uLoader.data));
97 doResult(result);
98 }
99 default:
100 {
101
102 }
103 }
104 }
105
106 private function doResult(result:Object):void
107 {
108 var state:Object = result.state;
109 var data:Object = result.data;
110 var am:String = result.state.moduleName;
111 var event:Event;
112 if(am=="AuthorizationAction_UserLogin")
113 {
114 event = new Event("loginFail");
115 this.dispatchEvent(event);
116 }
117 else if(am=="ActionResult")
118 {
119 if(this.action==this.ACTION_LOGIN)
120 {
121 var user:User = new User;
122 user.userId = result.current_user.user_id;
123 user.userName = result.current_user.user_name;
124 user.userLevel = result.current_user.user_level;
125 this.currentUser = user;
126 event = new LoginSucceedEvent("loginSucceed");
127 (LoginSucceedEvent(event)).user = user;
128 panel1.visible = false;
129 panel2.visible = true;
130 this.label_username.text = user.userName;
131 this.dispatchEvent(event);
132 }
133 else if(this.action==this.ACTION_LOGOUT)
134 {
135 panel1.visible = true;
136 panel2.visible = false;
137 this.currentUser = null;
138 event = new Event("logout");
139 this.dispatchEvent(event);
140 }
141 }
142 }
143
144 ]]>
145 </mx:Script>
146</mx:Canvas>

登陆成功事件 LoginSucceedEvent.as


1package vincent.flex.controls.login.events
2{
3 import flash.events.Event;
4
5 import vincent.flex.controls.login.User;
6
7 public class LoginSucceedEvent extends flash.events.Event
8 {
9 public function LoginSucceedEvent(type:String,
10 bubbles:Boolean = false,
11 cancelable:Boolean = false,
12 oldX:Number = NaN, oldY:Number = NaN)
13 {
14 super(type, bubbles, cancelable);
15 }
16 public var user:User;
17 }
18}


User.as:
1package vincent.flex.controls.login
2{
3 public class User
4 {
5 public function User()
6 {
7 }
8 public var userId:int;
9 public var userName:String;
10 public var userLevel:String;
11
12 }
13}

FlexTest01.mxml:
1<?xml version="1.0" encoding="utf-8"?>
2<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="488" width="746" xmlns:ns1="*">
3 <mx:Script>
4 <![CDATA[
5 import mx.controls.Alert;
6
7 import vincent.flex.controls.login.events.*;
8
9 public function doLoginSucceed(e:LoginSucceedEvent):void
10 {
11 Alert.show("Welcome!");
12 }
13
14 ]]>
15 </mx:Script>
16 <ns1:frmLogin x="248" y="100" id="winlogin" loginSucceed="doLoginSucceed(event)">
17 </ns1:frmLogin>
18</mx:Application>
0
相关文章