PureMVC是一个定位于高性能RIA客户端的基于模式的框架,现在已经被移植到大多数流行的开发平台,包括Flash,PHP,java,C#等
PureMVC模式简介
控制中心--Facade类
通信机制--广播式的通信机制,接受者只要注册标识与广播消息的标识一致,就会接收消息
逻辑命令处理--Command类
视图控制--Mediator类
数据模型代理--Proxy类
Proxy类封装了数据模型,管理Data Object及对Data Object的访问,不管数据来自哪里,什么类型,在PureMVC中,Proxy是个被Model注册的简单的数据持有者,虽然Proxy类已经完全可用的了,但是对于具体的应用应该编写Proxy的子类,增加操作方法
下面这个例子是针对Proxy类,创建一个显示部门信息的网格列表
首先新建一个Flex project,并将PureMVC框架的相关类文件拷贝到flex_src目录下,我是直接将PureMVC中的org文件夹拷贝到flex_src目录下
1.新建一个ApplicationFacade类,并继承Facade,代码如下
2.新建一个StartupCommand类,继承自SimpleCommand类,代码如下
3.新建一个DeptProxy,继承自Proxy类并实现IProxy接口,在类中填充数据到数据模型中,代码如下
4.新建一个DeptVO类,创建两个字段,代码如下
5.新建一个DeptListMediator类,继承自Mediator类,代码如下
6.创建一个DeptList组件文件,代码如下
7.在程序入口文件main.xml中引入ApplicationFacade类,并调用其startup()方法,代码如下
最后将项目部署到tomcat容器中,运行项目
PureMVC模式简介
控制中心--Facade类
通信机制--广播式的通信机制,接受者只要注册标识与广播消息的标识一致,就会接收消息
逻辑命令处理--Command类
视图控制--Mediator类
数据模型代理--Proxy类
Proxy类封装了数据模型,管理Data Object及对Data Object的访问,不管数据来自哪里,什么类型,在PureMVC中,Proxy是个被Model注册的简单的数据持有者,虽然Proxy类已经完全可用的了,但是对于具体的应用应该编写Proxy的子类,增加操作方法
下面这个例子是针对Proxy类,创建一个显示部门信息的网格列表
首先新建一个Flex project,并将PureMVC框架的相关类文件拷贝到flex_src目录下,我是直接将PureMVC中的org文件夹拷贝到flex_src目录下
1.新建一个ApplicationFacade类,并继承Facade,代码如下
package lalo
{
import org.puremvc.as3.patterns.facade.Facade;
import lalo.controller.StartupCommand;
public class ApplicationFacade extends Facade
{
public static const STARTUP:String = "startup";
public static function getInstance():ApplicationFacade
{
if(instance == null)
{
instance = new ApplicationFacade();
}
return instance as ApplicationFacade;
}
override protected function initializeController():void
{
super.initializeController();
//注册控制器StartupCommand类
//使得常量STARTUP与StartupCommand类关联在一起
registerCommand(STARTUP,StartupCommand);
}
public function startup(app:Object):void
{
//由于常量STARTUP与StartupCommand类关联在一起了
//此时会调用StartupCommand类的execute方法
sendNotification(STARTUP,app);
}
}
}
2.新建一个StartupCommand类,继承自SimpleCommand类,代码如下
package lalo.controller
{
import org.puremvc.as3.interfaces.INotification;
import org.puremvc.as3.patterns.command.SimpleCommand;
import lalo.model.DeptProxy;
import lalo.view.DeptListMediator;
public class StartupCommand extends SimpleCommand
{
public function StartupCommand()
{
super();
}
override public function execute(notification:INotification):void
{
//注册代理类
facade.registerProxy(new DeptProxy());
//获取main实例
var app:main = notification.getBody() as main;
//注册数据模型类
facade.registerMediator(new DeptListMediator(app.deptList));
}
}
}
3.新建一个DeptProxy,继承自Proxy类并实现IProxy接口,在类中填充数据到数据模型中,代码如下
package lalo.model
{
import lalo.model.vo.DeptVO;
import mx.collections.ArrayCollection;
import org.puremvc.as3.interfaces.IProxy;
import org.puremvc.as3.patterns.proxy.Proxy;
public class DeptProxy extends Proxy implements IProxy
{
public static const NAME:String = "Dept";
public function DeptProxy()
{
super(NAME, new ArrayCollection());
addItem(new DeptVO("01","人事部"));
addItem(new DeptVO("02","财政部"));
addItem(new DeptVO("03","开发部"));
addItem(new DeptVO("04","网络部"));
}
public function get depts():ArrayCollection
{
return data as ArrayCollection;
}
public function addItem(item:Object):void
{
depts.addItem(item);
}
}
}
4.新建一个DeptVO类,创建两个字段,代码如下
package lalo.model.vo
{
[Bindable]
public class DeptVO
{
public var deptID:String = '';
public var deptName:String = '';
public function DeptVO(_deptID:String=null, _deptName:String=null)
{
if(_deptID != null)
{
this.deptID = _deptID;
}
if(_deptName != null)
{
this.deptName = _deptName;
}
}
}
}
5.新建一个DeptListMediator类,继承自Mediator类,代码如下
package lalo.view
{
import lalo.model.DeptProxy;
import org.puremvc.as3.patterns.mediator.Mediator;
public class DeptListMediator extends Mediator
{
private var deptProxy:DeptProxy;
public static const NAME:String = 'DeptListMediator';
public function DeptListMediator(viewComponent:Object=null)
{
super(NAME, viewComponent);
//注册获得代理对象
deptProxy = facade.retrieveProxy(DeptProxy.NAME) as DeptProxy;
//设置用户列表
userList.depts = deptProxy.depts;
}
private function get userList():DeptList
{
return viewComponent as DeptList;
}
}
}
6.创建一个DeptList组件文件,代码如下
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var depts:ArrayCollection;
]]>
</mx:Script>
<mx:DataGrid dataProvider="{depts}" fontSize="15">
<mx:columns>
<mx:DataGridColumn headerText="部门编号" dataField="deptID"/>
<mx:DataGridColumn headerText="部门名称" dataField="deptName"/>
</mx:columns>
</mx:DataGrid>
</mx:Canvas>
7.在程序入口文件main.xml中引入ApplicationFacade类,并调用其startup()方法,代码如下
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="facade.startup(this)" xmlns:local="*">
<mx:Script>
<![CDATA[
import lalo.ApplicationFacade;
private var facade:ApplicationFacade = ApplicationFacade.getInstance();
]]>
</mx:Script>
<local:DeptList id="deptList" x="99" y="52"/>
</mx:Application>
最后将项目部署到tomcat容器中,运行项目