随笔档案

最近在学习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>
147

登陆成功事件 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>