Flex中的titlewindow实现登陆功能

http://www.iteye.com/topic/352549

在这个应用里我将使用对话框来实现用户登录，采用Flex中TitleWindow控件来实现。

 

流程如下：显示输入用户名密码的登陆框——》输入用户名密码，点击确定按钮激活登录事件——》LoginCommand调用UserDelegate处理这个事件——》LoginCommand根据UserDelegate返回的结果修改AlbumModelLocater——》页面监听AlbumModelLocater，根据值的变化对页面进行调整

 

首先设计登录框LoginWindow.mxml的布局

 {info}为错误提示

 

应用第一次加载时显示对话框

main.mxml

Xml代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2.   
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
4.     ... ...  
5.       creationComplete="init()">  
6. <mx:Script>  
7.     <![CDATA[ 
8.         import net.sw.album.model.AlbumModelLocater; 
9.         import net.sw.album.view.tilteWindow.LoginWindow; 
10.         import mx.managers.PopUpManager; 
11.          
12.          
13.         [Bindable] 
14.         public var model:AlbumModelLocater=AlbumModelLocater.getInstance(); 
15.          
16.         public var login_win:LoginWindow; 
17.          
18.         private function init():void{ 
19.             if(model.ownerId==0){ 
20.                 login_win=LoginWindow(PopUpManager.createPopUp(this,LoginWindow,true)); 
21.                      
22.                     login_win.title="登录"; 
23.          
24.                     PopUpManager.centerPopUp(login_win); 
25.  
26.             } 
27.              
28.         } 
29.          
30. .... ....        
31.     ]]>  
32. </mx:Script>  
33.   
34. .... ....  
35. </mx:Application>  

 AlbumModelLocater中ownerId的初始值为0，

LoginWindow(PopUpManager.createPopUp(this,LoginWindow,true))创建LoginWindow对话框，父容器为this，这里就是Application

PopUpManager.centerPopUp(login_win)居中显示对话框，注意是相对它的父容器居中

确定按钮提交用户名密码，取消按钮清空数据

LoginWindow.mxml

Xml代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="262" height="198">  
3. <mx:Script>  
4.     <![CDATA[ 
5.         import net.sw.album.event.LoginEvent; 
6.         import com.adobe.cairngorm.control.CairngormEventDispatcher; 
7.         import net.sw.album.model.AlbumModelLocater; 
8.          
9.         [Bindable] 
10.         public var info:String=""; 
11.          
12.         public var model:AlbumModelLocater=AlbumModelLocater.getInstance(); 
13.          
14.         private function submit():void{ 
15.             var event:LoginEvent=new LoginEvent(); 
16.             event.username=username.text; 
17.             event.password=password.text; 
18.              
19.             CairngormEventDispatcher.getInstance().dispatchEvent(event); 
20.  
21.         } 
22.          
23.         private function cancle():void{ 
24.             username.text=""; 
25.             password.text=""; 
26.         } 
27.          
28.         public function loginfalse():void{ 
29.             info="用户名密码不匹配"; 
30.         } 
31.     ]]>  
32. </mx:Script>    
33.     <mx:Form x="10" y="10" width="212" height="92">  
34.         <mx:FormItem label="用户名">  
35.             <mx:TextInput id="username" width="124"/>  
36.         </mx:FormItem>  
37.         <mx:FormItem label="密码">  
38.             <mx:TextInput id="password" width="125"/>  
39.         </mx:FormItem>  
40.     </mx:Form>  
41.     <mx:Button x="109" y="110" label="确定" click="submit()"/>  
42.     <mx:Button x="165" y="110" label="取消" click="cancle()"/>  
43.     <mx:FormItem label="{info}"  color="#ff0000" width="173" x="26" y="94">  
44.     </mx:FormItem>  
45.       
46. </mx:TitleWindow>  

 单击确定按钮引发LoginEvent事件，注意Cairngorm中自定义事件的发送方式CairngormEventDispatcher.getInstance().dispatchEvent(event);

这里的取消按钮只有清空作用，不会关闭登录框，如果希望关闭登陆框可添加

PopUpManager.removePopUp(this);

 

LoginEvent.as

Java代码  

1. package net.sw.album.event  
2. {  
3.     import com.adobe.cairngorm.control.CairngormEvent;  
4.   
5.     public class LoginEvent extends CairngormEvent  
6.     {  
7.         public static var EVENT_LOGIN:String="login";  
8.           
9.         public var username:String;  
10.         public var password:String;  
11.                   
12.         public function LoginEvent()  
13.         {  
14.             super(EVENT_LOGIN);  
15.         }  
16.           
17.     }  
18. }  

 

事件映射命令

在AlbumController.as中添加

addCommand(LoginEvent.EVENT_LOGIN,LoginCommand);

 

LoginCommand.as

Java代码  

1. package net.sw.album.command  
2. {  
3.     import com.adobe.cairngorm.commands.ICommand;  
4.     import com.adobe.cairngorm.control.CairngormEvent;  
5.       
6.     import mx.rpc.IResponder;  
7.       
8.     import net.sw.album.business.UserDelegate;  
9.     import net.sw.album.event.LoginEvent;  
10.     import net.sw.album.model.AlbumModelLocater;  
11.   
12.     public class LoginCommand implements ICommand, IResponder  
13.     {  
14.         public function LoginCommand()  
15.         {  
16.         }  
17.   
18.         public function execute(event:CairngormEvent):void  
19.         {  
20.             var userDelegate:UserDelegate=new UserDelegate(this);  
21.             userDelegate.Login(LoginEvent(event).username,LoginEvent(event).password);  
22.         }  
23.           
24.         public function result(event:Object):void  
25.         {  
26.             var userid:Number= Number(event.result);  
27.             var albumModelLocater : AlbumModelLocater = AlbumModelLocater.getInstance();  
28.                
29.             albumModelLocater.ownerId=userid;  
30.         }  
31.           
32.         public function fault(info:Object):void  
33.         {  
34.         }  
35.           
36.     }  
37. }  

 不知道各位注意到没有，我这个应用的java部分没有关于用户的模块，这是因为用户管理我计划使用以往的一个成熟案例中的模块，还没有整合。这里我在java端写了一个简单的用户服务，提供给Flex远程调用，这个服务没有连接数据库，数据也是写死的，不值一提，就不拿出来了。

 

LoginCommand调用UserDlegate验证用户名密码，这里返回结果是用户的ID（和用户系统整合后返回用户对象），如果用户名密码错误放回-1。返回值将被附给albumModelLocater.ownerId

 

界面捕捉albumModelLocater.ownerId的改变

修改main.mxml

Xml代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2.   
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
4.     xmlns:view="net.sw.album.view.*"  
5.     xmlns:business="net.sw.album.business.*"  
6.     xmlns:controller="net.sw.album.controller.*"  
7.     xmlns:util="net.sw.album.util.*"  
8.      layout="absolute"  
9.      backgroundGradientColors="[#ffffff, #ffffff]"   
10.       creationComplete="init()">  
11. <mx:Script>  
12.     <![CDATA[ 
13.         import net.sw.album.model.AlbumModelLocater; 
14.         import net.sw.album.view.tilteWindow.LoginWindow; 
15.         import mx.managers.PopUpManager; 
16.          
17.         [Bindable] 
18.         public var model:AlbumModelLocater=AlbumModelLocater.getInstance(); 
19.          
20.         public var login_win:LoginWindow; 
21.          
22.         private function init():void{ 
23.             if(model.ownerId==0){ 
24.                 login_win=LoginWindow(PopUpManager.createPopUp(this,LoginWindow,true)); 
25.                      
26.                     login_win.title="登录"; 
27.          
28.                     PopUpManager.centerPopUp(login_win); 
29.  
30.             } 
31.              
32.         } 
33.          
34.         private function logined():void{ 
35.             trace(model.ownerId); 
36.             if(model.ownerId==-1){ 
37.                 login_win.loginfalse(); 
38.             }else if(model.ownerId!=0){ 
39.                 PopUpManager.removePopUp(login_win); CairngormEventDispatcher.getInstance().dispatchEvent( new CairngormEvent( DisplayMyAlbumEvent.EVENT_DISPLAY_MYALBUM ) ); 
40.             }else{ 
41.                 //login_win.loginfalse(); 
42.             } 
43.         } 
44.          
45.     ]]>  
46. </mx:Script>  
47.   
48.       
49.     <!-- ========================================================================== -->  
50.       
51.     <!-- the ServiceLocator where we specify the remote services -->  
52.     <business:Services id="services" />  
53.       
54.     <!-- the FrontController, containing Commands specific to this appliation -->  
55.     <controller:AlbumController id="controller" />  
56.       
57.       
58.      <util:Observe  
59.       source="{model.ownerId}"  
60.       handler="{logined}" />   
61.   
62. <!-- ========================================================================== -->  
63.       
64.     <mx:VBox x="10" y="0" height="600" width="100%">  
65.         <mx:HBox width="100%" height="5%" >  
66.             <view:Menu width="100%" height="100%"/>  
67.         </mx:HBox>  
68.         <mx:HBox width="100%" height="95%">  
69.             <view:LeftArea width="20%" height="100%"/>  
70.             <view:RightArea width="80%" height="100%"/>          
71.         </mx:HBox>  
72.     </mx:VBox>  
73.   
74.   
75. </mx:Application>  

 Observe.as

Java代码  

1. package net.sw.album.util  
2. {   
3.     public class Observe   
4.     {   
5.         public var handler : Function;   
6.           
7.         public function Observe() : void  
8.         {  
9.               
10.         }  
11.           
12.         public function set source( source : * ) : void   
13.         {   
14.                 handler.call();   
15.         }   
16.     }   
17. }  

  <util:Observe source="{model.ownerId}" handler="{logined}" />这个语句将监听model.ownerId值，如发生变化调用logined。model.ownerId等于-1登录失败，显示提示语句；model.ownerId等于其他值，登录成功，关闭登陆框PopUpManager.removePopUp(login_win);展示我的相册CairngormEventDispatcher.getInstance().dispatchEvent( new CairngormEvent( DisplayMyAlbumEvent.EVENT_DISPLAY_MYALBUM ) );

• 
• 大小: 17.5 KB