Flex Chaos-All-in-one这一节中所提到的,在大型项目中,将所有的代码放在一起并非明智之举,确切的讲:正确的方法是将商业逻辑层与UI层分离开来。
中央管理的理念是使用一个远程对象管理器来控制Flex与后端的通讯。其构建体系如下图所示
图中每一个UI组件都将调用一个服务(Service),服务类将调用中央管理器(Central Manager),中央管理器类将调用服务器端的解决方案。而图中全局对象管理器(Global Object Manager)将用来在UI之间传递数据。
现在来看看简单密友列表应用的实现。
首先是LoginView.xml
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Panel xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”300″ height=”200″ horizontalAlign=”center” verticalAlign=”middle” title=”Flex Central Manager Login”>
<mx:Script>
<![CDATA[
import com.ny.flex.centralManagement.service.LoginService;
import mx.validators.Validator;
import mx.containers.ViewStack;
import mx.rpc.events.ResultEvent;
private function login():void{
if(Validator.validateAll(validators).length == 0){
LoginService.getInstance().login(username.text,password.text);
}
}
]]>
</mx:Script>
<!– Validators–>
<mx:Array id=”validators”>
<mx:StringValidator id=”userNameValidator” source=”{username}” property=”text” required=”true”/>
<mx:StringValidator id=”passwordValidator” source=”{password}” property=”text” required=”true” />
</mx:Array>
<mx:Form id=”loginForm” x=”0″ y=”0″>
<mx:FormItem label=”Username:” >
<mx:TextInput id=”username” />
</mx:FormItem>
<mx:FormItem label=”Password:” >
<mx:TextInput id=”password” displayAsPassword=”true” />
</mx:FormItem>
<mx:FormItem direction=”horizontal” verticalGap=”15″ paddingTop=”5″ width=”170″>
<mx:Button id=”loginBtn” label=”Login” click=”login()”/>
</mx:FormItem>
</mx:Form>
</mx:Panel>
其功能的核心是:
LoginService.getInstance().login(username.text,password.text);
它的作用是有效的分离了商务逻辑层和视图组件。在此服务类程序不需支持任何状态,因此我们保持其单件模式(singleton)。
LoginService类文件如下:
import com.ny.flex.centralManagement.event.DataManagerResultEvent;
import com.ny.flex.centralManagement.manager.GlobalObjectManager;
import com.ny.flex.centralManagement.manager.RemoteObjectManager;
public class LoginService
{
public var roManager:RemoteObjectManager = null;
public var gom:GlobalObjectManager = GlobalObjectManager.getInstance();
private static var _instance:LoginService =null;
public static function getInstance():LoginService{
if(_instance == null){
_instance = new LoginService(new PrivateClass)
}
return _instance;
}
public function LoginService(privateclass:PrivateClass)
{
if(LoginService._instance == null){
LoginService._instance = this;
}
}
public function login(userName:String,password:String):void{
roManager = RemoteObjectManager.getRemoteObjectManager(”flexmvcRO”);
roManager.addEventListener(”getLoginUser”,loginHandler);
var params:Array = new Array(userName,password);
roManager.makeRemoteCall(”getLoginUserName”,”getLoginUser”,params);
}
private function loginHandler(event:DataManagerResultEvent):void {
var userName:String = event.result as String;
if(userName){
gom.loginUserName = userName;
gom.viewStackSelectedIndex=1;
}
}
}
代码中有两个特别的对象:
RemoteObjectManager
GlobalObjectManager
RemoteObjectManager是一个单件的类,用来实现中央管理所有的远程对象通讯。原始的代码来自于Jeff Tapper的博客:
Creating a Remote Object DataManager in ActionScript 3.0 for Flex 2.0
RemoteObjectManager.as:
package com.ny.flex.centralManagement.manager
{
import com.ny.flex.centralManagement.event.DataManagerResultEvent;
import flash.events.EventDispatcher;
import mx.core.Application;
import mx.resources.ResourceManager;
import mx.rpc.AbstractOperation;
import mx.rpc.AsyncToken;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.rpc.remoting.mxml.RemoteObject;
public class RemoteObjectManager extends EventDispatcher {
public var ro:RemoteObject;
private var eventName:String;
private static var instanceMap:Object = new Object();
public function RemoteObjectManager(pri:PrivateClass,dest:String){
this.ro = new RemoteObject();
ro.destination = dest;
}
public static function getRemoteObjectManager(dest:String):RemoteObjectManager{
if(RemoteObjectManager.instanceMap[dest] == null){
RemoteObjectManager.instanceMap[dest] = new RemoteObjectManager(new PrivateClass(),dest);
}
var dm:RemoteObjectManager= RemoteObjectManager.instanceMap[dest];
return dm;
}
public function makeRemoteCall(methodName:String,eventName:String,args:Array=null):void{
this.eventName = eventName;
var op:mx.rpc.AbstractOperation = ro[methodName];
ro.addEventListener("result", doResults);
ro.addEventListener("fault", doFault);
var token:AsyncToken = null;
if(args && args.length >0){
token = op.send.apply(null,args);
}
else {
token = op.send();
}
token.eventName = eventName;
}
private function doResults(event:ResultEvent):void{
var e:DataManagerResultEvent = new DataManagerResultEvent(event.token.eventName, event.result);
this.dispatchEvent(e);
}
private function doFault(fault:FaultEvent):void{
this.dispatchEvent(fault);
}
public override function toString():String{
return "RemoteObjectDataManager";
}
}
}
/** PrivateClass is used to make DataManager constructor private */
class PrivateClass{
public function PrivateClass() {}
}
“GlobalObjectManager”用来在UI之间传递信息,例如,我们使用ViewStack的selectedIndex来决定显示ViewStack中的哪一个视图,则使用全局对象viewStackSelectedIndex ,其代码如下面的黑体部分:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml“ xmlns:views=”com.ny.flex.centralManagement.views.*” layout=”absolute” width=”100%” height=”100%”>
<mx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import com.ny.flex.centralManagement.manager.GlobalObjectManager;
[Bindable]
public var gom:GlobalObjectManager=GlobalObjectManager.getInstance();
]]>
</mx:Script>
<mx:HBox horizontalAlign=”center” verticalAlign=”top” width=”100%” height=”100%” y=”0″ x=”0″>
<mx:ViewStack id=”viewStack” resizeToContent=”true” selectedIndex=”{gom.viewStackSelectedIndex}” >
<views:LoginView />
<views:BuddyListView/>
</mx:ViewStack>
</mx:HBox>
</mx:Application>
再回头看看在
LoginService 代码中的loginHandler方法,在此viewStackSelectedIndex 全局对象被更新。
LoginService
代码中的loginHandler方法,在此viewStackSelectedIndex 全局对象被更新。
private function loginHandler(event:DataManagerResultEvent):void {
var userName:String = event.result as String;
if(userName){
gom.loginUserName = userName;
gom.viewStackSelectedIndex=1;
}
}
[Bindable]元标签使得其值的改变立刻生效。
BuddyList.mxml代码:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Panel xmlns:mx=”http://www.adobe.com/2006/mxml” title=”Buddy List of {gom.loginUserName}” creationComplete=”init()” width=”500″ height=”320″>
<mx:Script>
<![CDATA[
import com.ny.flex.centralManagement.service.BuddyService;
import com.ny.flex.centralManagement.manager.GlobalObjectManager;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
[Bindable]
public var gom:GlobalObjectManager = GlobalObjectManager.getInstance();
private function init():void{
BuddyService.getInstance().getBuddyList();
}
]]>
</mx:Script>
<mx:DataGrid id=”buddyList” dataProvider=”{gom.mybuddyList}” borderStyle=”none” width=”100%” height=”100%” >
<mx:columns>
<mx:DataGridColumn dataField=”firstName” headerText=”First Name”/>
<mx:DataGridColumn dataField=”lastName” headerText=”Last Name”/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
BuddyService是另一个服务类代码用来和远程对象通讯。
这是最符合本人喜好的Flex程序的框架结构。它的优点是非常的清晰,没有累赘的发送和监听事件的工作,并且代码非常容易维护。遗憾的是,在此还没有获得足够的理论支持这一框架理论。
再来看看MVC框架的代表:MVC-Cairngorm。
分享到:
相关推荐
7-Zip MANAGERMENT 7-Zip 9.20 7-Zip is a file archiver for Windows 95/98/ME/NT/2000/2003/2008/XP/Vista/7.
入门首先,运行开发服务器: npm run dev# oryarn dev 用浏览器打开以查看结果。 您可以通过修改pages/index.js来开始编辑页面。 页面在您编辑文件时自动更新。学到更多要了解有关Next.js的更多信息,请查看以下资源...
如上图所示 Linux 也包括 RedHat Enterprise Linux 在内,其存储模式由 5 个部分组 ,自底向上的顺序是:物理卷、内核块设备驱动、内核文件系统驱动、虚拟文件系统和应 程序数据结构组成。系统中所有的文件均被按此...
Exon_Managerment:PhầnHệTrungTâm
图书管理系统基础代码 界面比较简单 有多种扩展可能 为winform风格 VS2008编写
f-admin基础权限后台是一套基于Laravel框架开发的系统,不需要开发者重复重复的工作,就可以实现后台功能的快速开发,其主要特点包括:集成作曲家,安装使用方便。用户管理可以配置自己的权限。角色管理可以配置...
可设置问卷开始以及结束日期 智能表单验证 问卷明细数据列表查看 柱状图分析 采用AJAX,更强的用户体验 支持问卷截断、跳转 兼容Firefox,IE6.0,IeE7.0等主流浏览器 …… 后台登入地址:Managerment/AdminLogin.asp ...
这是学习色彩管理的一本非常好的书,值得学习
Ajax-hotel_managerment_final.zip,操作,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的情况下更改。
1. 有完善的用户登录界面,用户管理界面及用户权限检查界面; 2. 本模块是我从项目上直接打包的,因此有个别无关紧要的地方没有修改,需要作一些修改方能正确编译通过, 但绝对可用, 【请有能力修改的再下载】。 3....
Fizz Gateway是一个基于Java开发的微服务网关,能够实现热服务编排,自动授权选择,在线服务脚本编码,在线测试,高性能路由,API审核管理等目的,拥有强大的自定义插件系统可以自行扩展,并提供友好的图形化配置...
之后我们打开Eclipse: 选择项目->new->folder 原创文章 3获赞 4访问量 92 关注 私信 展开阅读全文 作者:何亚告
项目管理方案,详细介绍项目管理内容,相信会有你想要的资源!
易问卷(原东旭网络问卷调查系统)是一套方便你将调查问卷、民意调查、投票海选转移到...同时由于时间的关系,很多用户提出的实用功能未能在此版本中实现,请大家见谅,我们一定加紧开发。 legal 22:20 2010-01-10
HTML+XML+VC CHtmlView响应网页中按钮的事件
user managerment system
采用DAO模式开发此系统,需要定义如下类 实体类(Student) id name password age description sex 数据库连接和关闭类工具类(BaseDao) DAO接口(StudentDao) DAO实现类(StudentDaoImpl) b、具体要求...
这是我写的一个简单的密码管理系统,其中使用了hibernate 和spring技术。是B/S 模式的。
数据库架构。 请逐步阅读应用程序的完整功能。 管理员可以在其中添加、删除和更新新员工。 管理员可以管理员工的休假,工作。 项目需求配置(员工管理系统) 数据库:MySQL 工作台服务器:Tomcat 8.5 IDE:Spring ...
VDA汽车网络安全管理体系指南 Automotive Cybersecurity Management System Aduit