在这个应用里我将使用对话框来实现用户登录,采用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 ) );
- 大小: 17.5 KB
分享到:
相关推荐
flex TitleWindow自定义最大最小化
Flex TitleWindow父子页面的事件派发
flex TitleWindow 放大、缩小、可缩放 弹出窗口 直接把mytest项目导入flexBuilder可直接运行mytest.mxml看效果。
flex4.6 可以拉伸的TitleWindow。自由缩放。
flex主页面与弹出窗口之间数据传输的示例
Flex-TitleWindow的弹出窗口中播放一段影像.zip Flex-TitleWindow的弹出窗口中播放一段影像.zip Flex-TitleWindow的弹出窗口中播放一段影像.zip
NULL 博文链接:https://176170847.iteye.com/blog/774691
Flex自定义组件,带最大化、最小化、还原及关闭按钮。
这是一个flex4的项目,可以下载下来单独运行,项目中是一个自定义的TitleWindow,TitleWindow中存放了一个dataGrid,它可以根据dataGrid中数据行增加而改变自身高度,直至要最大高度。此组件使用mxml定义,重写了...
主要介绍了Flex中TitleWindow传值思路及实现,需要的朋友可以参考下
flex中为titlewindow添加更多按钮,使其显示在标题栏右方
在Flex里,一般的弹出窗口(除了Alert以外)都可以用TitleWindow组件完成,主窗口和TitleWindow的数据传输可以用以下方法
重写titlewindow,带最小化、最大化、关闭按钮,方便前端使用
Flex特效_可拖动弹出窗口布局容器TitleWindow.zip )
Flex带最大化最小化按钮可拖动调整窗口大小的TitleWindow
NULL 博文链接:https://sunshineyao.iteye.com/blog/827432
flex 项目开发(仅限本人下载,加经加密) 解决TitleWindow传值,模块角色分配
flex监听浏览器关闭事件,完成对于浏览器关闭事件的监听。以及弹出相应的关闭提示
可以自由改变大小的TitleWindow 的学习项目