pureMVC 之基本使用

  pureMVC是flex的轻量级框架。下面是实例。
一，视图组件页面
1，添加用户页面：UserForm.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel title="Registor" xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Metadata>
		[Event('add')]
	</mx:Metadata>
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import com.superwulei.model.vo.UserVO;
			public static const USER_ADD:String = "add";

			public var user:UserVO;
			/* 添加用户 */
			private function addUser():void {
				user = new UserVO(email.text, password.text);
				dispatchEvent(new Event(USER_ADD));
			}

			private function enableSubmit(u:String, p:String):Boolean {
				return u != '' && p != '';
			}
		]]>
	</mx:Script>
	<mx:Form>
		<mx:FormItem label="email" required="true">
			<mx:TextInput id="email"/>
		</mx:FormItem>
		<mx:FormItem label="password" required="true">
			<mx:TextInput id="password" displayAsPassword="true"/>
		</mx:FormItem>
	</mx:Form>
	
	<mx:ControlBar horizontalAlign="right">
		<mx:Button id="sbumitButton" label="添加"
			 enabled="{enableSubmit(email.text,password.text)}"
			 click="addUser();"/>
	</mx:ControlBar>
</mx:Panel>

2，用户用表页面UserList.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" title="已注册用户">
	<mx:Metadata>
	[Event('delete')]
</mx:Metadata>

	<mx:DataGrid id="userGrid" dataProvider="{users}">
		<mx:Script>
			<![CDATA[
				import mx.formatters.DateFormatter;
				import com.superwulei.model.vo.UserVO;
				import mx.collections.ArrayCollection;
				
				public static const USER_DELETE:String = "delete";
				
				[Bindable]
				public var users:ArrayCollection;
				
				public var selectUser:UserVO;

				private function deleteUser():void{
					selectUser = userGrid.selectedItem as UserVO;
					dispatchEvent(new Event(USER_DELETE));
				}
			]]>
		</mx:Script>
		<mx:columns>
			<mx:DataGridColumn dataField="email"/>
			<mx:DataGridColumn dataField="password"/>
			<mx:DataGridColumn dataField="regDate" width="200"/>
		</mx:columns>
	</mx:DataGrid>
	<mx:HBox textAlign="center">
		<mx:Button id="deleteButton" label="删除" click="deleteUser();"/>
	</mx:HBox>
</mx:Panel>

3,主页面（包含添加用户页面，和用户列表页面）MyPureMVCdemo.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
				xmlns:components="com.superwulei.view.components.*"
	creationComplete="facade.startup(this);">
	<mx:Script>
		<![CDATA[
			/*
			在页面各个组件初始化并渲染成功后调用 facade的 startup函数
			*/
			import com.superwulei.ApplicationFacade;
			//定义 私有变量 并且初始化
			private var facade:ApplicationFacade = ApplicationFacade.getInstance();
		]]>
	</mx:Script>
	<components:UserForm id="userForm" />
	<components:UserList id="userList" />
</mx:Application>

二：注册组件
1,总注册组件

package com.superwulei {
	import com.superwulei.controller.StartupCommand;
	
	import org.puremvc.as3.patterns.facade.Facade;

	public class ApplicationFacade extends Facade {
		public static const STARTUP:String      = "startup";
		public static const USER_ADD:String     = "user_added";
		public static const USER_DELETE:String  = "user_delete";

		//提供静态函数，供外界调用
		public static function getInstance():ApplicationFacade 
		{
			if (instance == null)
			{
				instance = new ApplicationFacade();
			}
			
			return instance as ApplicationFacade;
		}

		public function startup(app:Object):void 
		{
			sendNotification(STARTUP, app);
		}

		//该函数 是 该类的初始化函数，创建改类实例后会自动调用改函数
		//改函数主要是用来 注册控制器，代理等操作。
		override protected function initializeController():void 
		{
			super.initializeController();
			
			trace("呵呵，我是第一执行的函数，我很牛");
			registerCommand(STARTUP, StartupCommand);
		}
	}
}

2，启动时自动注册组件

package com.superwulei.controller
{
	import com.superwulei.ApplicationFacade;
	
	import org.puremvc.as3.patterns.command.MacroCommand;

	public class StartupCommand extends MacroCommand
	{
		override protected function initializeMacroCommand():void{
			/*
			添加子命令
			*/
			addSubCommand(ModelPrepCommand);
			addSubCommand(ViewPrepCommand);
			/* 注册添加、删除用户命令 */
			facade.registerCommand("user_added",AddUserCommand);
			facade.registerCommand("user_delete",DeleteUserCommand);
		}
	}
}

3,注册proxy组件

package com.superwulei.controller
{
	import com.superwulei.model.UserProxy;
	
	import org.puremvc.as3.interfaces.INotification;
	import org.puremvc.as3.patterns.command.SimpleCommand;

	public class ModelPrepCommand extends SimpleCommand
	{
		override public function execute(notification:INotification):void
		{
			/* 注册Model */
			facade.registerProxy(new UserProxy());
		}
	}
}

4,注册视图组件

package com.superwulei.controller
{
	import com.superwulei.view.UserFormMediator;
	import com.superwulei.view.UserListMediator;
	
	import org.puremvc.as3.interfaces.INotification;
	import org.puremvc.as3.patterns.command.SimpleCommand;

	public class ViewPrepCommand extends SimpleCommand
	{
		override public function execute(notification:INotification):void
		{
			//获取主页面 作为 app变量
			var app:MyPureMVCdemo = notification.getBody() as MyPureMVCdemo;
			/* 注册添加用户的视图 和 用户列表视图 */
			facade.registerMediator(new UserFormMediator(app.userForm));
			facade.registerMediator(new UserListMediator(app.userList));
		}
	}
}

三：控制器组件
1，添加用户控制器

package com.superwulei.controller
{
	import com.superwulei.model.UserProxy;
	import com.superwulei.model.vo.UserVO;
	
	import mx.controls.Alert;
	
	import org.puremvc.as3.interfaces.INotification;
	import org.puremvc.as3.patterns.command.SimpleCommand;

	/*
	此类是添加用户的处理类，对于此类的执行机制的理解是至关重要的。
	1，此类继承SimpleCommand，一旦facade接收到对应此类的通知名称时候会自动调用此类的execute函数
	2，execute函接受一个参数INotification，这个参数的getBody函数返回的是 发送通知时候传递的参数。
	*/
	public class AddUserCommand extends SimpleCommand
	{
		override public function execute(notification:INotification):void
		{
			//注意参数的getBody饭回来的是 调用者传递的参数。
			//回顾一下，这个肯定是UserFormMediator 中add方法中传递过来的参数 user，而这个user也就是页面上添加用户时候
			//封装的user
			var user:UserVO = notification.getBody() as UserVO;
			
			//此时调用facade中的proxy类处理添加用户
			//为什么facade能找到这个proxy类呢，对了，之前我们已经在StartupCommand 中已经注册了，是否还急的
			//addSubCommand(ModelPrepCommand);而ModelPrepCommand中自动执行函数中进行了proxy的注册，你看是不是
			//facade.registerProxy(new UserProxy());
			var userProxy:UserProxy = facade.retrieveProxy(UserProxy.NAME) as UserProxy;
			
			if(user.isValid){
				//代理类执行 添加用户操作
				//特别注意：也许你会问，就算UserProxy添加了一个用户，那么为什么下面的列表中就会显示这个用户了呢。
				//你是否还记得当年在facade中注册视图的时候初始化UserListMediator，初始化这个视图的时候有一句
				//userList.users = userProxy.users; 明白了吧。
				userProxy.addItem(user);
			}else{
				Alert.show("请检查用户名和密码");
			}
		}
		
	}
}

2,删除用户组件

package com.superwulei.controller
{
	import com.superwulei.model.UserProxy;
	import com.superwulei.model.vo.UserVO;
	
	import org.puremvc.as3.interfaces.INotification;
	import org.puremvc.as3.patterns.command.SimpleCommand;

	public class DeleteUserCommand extends SimpleCommand
	{
		override public function execute(notification:INotification):void
		{
			var user:UserVO = notification.getBody() as UserVO;
			var userProxy:UserProxy = facade.retrieveProxy(UserProxy.NAME) as UserProxy;
			userProxy.deleteItem(user);
		}
		 
	}
}

四：代理类
1，实体类：

package com.superwulei.model.vo {

	public class UserVO {

		public var email:String = '';            //电子邮件
		public var password:String = '';         //密码
		public var regDate:Date;                 //注册日期

		public function UserVO(email:String, password:String) {
			this.email = email;
			this.password = password;
			this.regDate = new Date();
		}

		/*
		验证用户信息
		email：以单词字符开始，以.cn结尾
		password：     长度大于等于6位
		*/
		public function get isValid():Boolean {
			var emailRegExp:RegExp = /^\w+[@]\w+(.com)$/;
			return (emailRegExp.test(this.email) && this.password.length >= 6);
		}
	}
}

2,代理类

package com.superwulei.model
{
	import com.superwulei.model.vo.UserVO;
	import mx.collections.ArrayCollection;
	import mx.rpc.remoting.RemoteObject;
	import org.puremvc.as3.patterns.proxy.Proxy;

	public class UserProxy extends Proxy
	{
		public static const NAME:String = 'UserProxy';
		
		public function UserProxy()
		{
			super(NAME,new ArrayCollection());
		}
		
		public function get users():ArrayCollection{
			return data as ArrayCollection;
		}
		
		/* 添加项 */
		public function addItem(item:Object):void{
			users.addItem(item);
		}
		
		/* 删除项 */
		public function deleteItem(item:Object):void{
			var user:UserVO = item as UserVO;
			for(var i:int = 0; i < users.length; i++){
				if(users[i].email == user.email){
					users.removeItemAt(i);
				}
			}
		}
	}
}