`
liaokang.java
  • 浏览: 152142 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
社区版块
存档分类
最新评论

Flex之数据模型代理

    博客分类:
  • Flex
阅读更多
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,代码如下
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容器中,运行项目
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics