网络相册开发（9）——使用Flex的TitleWindow制作登录框
在这个应用里我将使用对话框来实现用户登录，采用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 ) );