网络相册开发（9）——使用Flex的TitleWindow制作登录框

vyyv

浏览: 17593 次
性别:
来自: 北京

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Flex

网络应用 Flex .net Adobe XML

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

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

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

{info}为错误提示

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

main.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	... ...
	  creationComplete="init()">
<mx:Script>
	<![CDATA[
		import net.sw.album.model.AlbumModelLocater;
		import net.sw.album.view.tilteWindow.LoginWindow;
		import mx.managers.PopUpManager;
		
		
		[Bindable]
		public var model:AlbumModelLocater=AlbumModelLocater.getInstance();
		
		public var login_win:LoginWindow;
		
		private function init():void{
			if(model.ownerId==0){
				login_win=LoginWindow(PopUpManager.createPopUp(this,LoginWindow,true));
			 		
			 		login_win.title="登录";
 		
			 		PopUpManager.centerPopUp(login_win);

			}
			
		}
		
.... ....		
	]]>
</mx:Script>

.... ....
</mx:Application>

AlbumModelLocater中ownerId的初始值为0，

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

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

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

LoginWindow.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="262" height="198">
<mx:Script>
	<![CDATA[
		import net.sw.album.event.LoginEvent;
		import com.adobe.cairngorm.control.CairngormEventDispatcher;
		import net.sw.album.model.AlbumModelLocater;
		
		[Bindable]
		public var info:String="";
		
		public var model:AlbumModelLocater=AlbumModelLocater.getInstance();
		
		private function submit():void{
			var event:LoginEvent=new LoginEvent();
			event.username=username.text;
			event.password=password.text;
			
			CairngormEventDispatcher.getInstance().dispatchEvent(event);

		}
		
		private function cancle():void{
			username.text="";
			password.text="";
		}
		
		public function loginfalse():void{
			info="用户名密码不匹配";
		}
	]]>
</mx:Script>	
	<mx:Form x="10" y="10" width="212" height="92">
		<mx:FormItem label="用户名">
			<mx:TextInput id="username" width="124"/>
		</mx:FormItem>
		<mx:FormItem label="密码">
			<mx:TextInput id="password" width="125"/>
		</mx:FormItem>
	</mx:Form>
	<mx:Button x="109" y="110" label="确定" click="submit()"/>
	<mx:Button x="165" y="110" label="取消" click="cancle()"/>
	<mx:FormItem label="{info}"  color="#ff0000" width="173" x="26" y="94">
	</mx:FormItem>
	
</mx:TitleWindow>

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

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

PopUpManager.removePopUp(this);

LoginEvent.as

package net.sw.album.event
{
	import com.adobe.cairngorm.control.CairngormEvent;

	public class LoginEvent extends CairngormEvent
	{
		public static var EVENT_LOGIN:String="login";
		
		public var username:String;
		public var password:String;
				
		public function LoginEvent()
		{
			super(EVENT_LOGIN);
		}
		
	}
}

事件映射命令

在AlbumController.as中添加

addCommand(LoginEvent.EVENT_LOGIN,LoginCommand);

LoginCommand.as

package net.sw.album.command
{
	import com.adobe.cairngorm.commands.ICommand;
	import com.adobe.cairngorm.control.CairngormEvent;
	
	import mx.rpc.IResponder;
	
	import net.sw.album.business.UserDelegate;
	import net.sw.album.event.LoginEvent;
	import net.sw.album.model.AlbumModelLocater;

	public class LoginCommand implements ICommand, IResponder
	{
		public function LoginCommand()
		{
		}

		public function execute(event:CairngormEvent):void
		{
			var userDelegate:UserDelegate=new UserDelegate(this);
			userDelegate.Login(LoginEvent(event).username,LoginEvent(event).password);
		}
		
		public function result(event:Object):void
		{
			var userid:Number= Number(event.result);
			var albumModelLocater : AlbumModelLocater = AlbumModelLocater.getInstance();
             
			albumModelLocater.ownerId=userid;
		}
		
		public function fault(info:Object):void
		{
		}
		
	}
}

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

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

界面捕捉albumModelLocater.ownerId的改变

修改main.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:view="net.sw.album.view.*"
	xmlns:business="net.sw.album.business.*"
	xmlns:controller="net.sw.album.controller.*"
	xmlns:util="net.sw.album.util.*"
	 layout="absolute"
	 backgroundGradientColors="[#ffffff, #ffffff]" 
	  creationComplete="init()">
<mx:Script>
	<![CDATA[
		import net.sw.album.model.AlbumModelLocater;
		import net.sw.album.view.tilteWindow.LoginWindow;
		import mx.managers.PopUpManager;
		
		[Bindable]
		public var model:AlbumModelLocater=AlbumModelLocater.getInstance();
		
		public var login_win:LoginWindow;
		
		private function init():void{
			if(model.ownerId==0){
				login_win=LoginWindow(PopUpManager.createPopUp(this,LoginWindow,true));
			 		
			 		login_win.title="登录";
 		
			 		PopUpManager.centerPopUp(login_win);

			}
			
		}
		
		private function logined():void{
			trace(model.ownerId);
			if(model.ownerId==-1){
				login_win.loginfalse();
			}else if(model.ownerId!=0){
				PopUpManager.removePopUp(login_win); CairngormEventDispatcher.getInstance().dispatchEvent( new CairngormEvent( DisplayMyAlbumEvent.EVENT_DISPLAY_MYALBUM ) );
			}else{
				//login_win.loginfalse();
			}
		}
		
	]]>
</mx:Script>

	
	<!-- ========================================================================== -->
	
	<!-- the ServiceLocator where we specify the remote services -->
	<business:Services id="services" />
	
	<!-- the FrontController, containing Commands specific to this appliation -->
	<controller:AlbumController id="controller" />
	
	
	 <util:Observe
      source="{model.ownerId}"
      handler="{logined}" />	

<!-- ========================================================================== -->
	
	<mx:VBox x="10" y="0" height="600" width="100%">
		<mx:HBox width="100%" height="5%" >
			<view:Menu width="100%" height="100%"/>
		</mx:HBox>
		<mx:HBox width="100%" height="95%">
			<view:LeftArea width="20%" height="100%"/>
			<view:RightArea width="80%" height="100%"/>		 
		</mx:HBox>
	</mx:VBox>


</mx:Application>

Observe.as

package net.sw.album.util
{ 
	public class Observe 
	{ 
		public var handler : Function; 
	 	
	 	public function Observe() : void
	 	{
	 		
	 	}
	 	
		public function set source( source : * ) : void 
	  	{ 
	        	handler.call(); 
	  	} 
	} 
}

<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 ) );