pureMVC 之基本使用
pureMVC是flex的轻量级框架。下面是实例。
一，视图组件页面
1，添加用户页面：UserForm.mxml
2，用户用表页面UserList.mxml
3,主页面（包含添加用户页面，和用户列表页面）MyPureMVCdemo.mxml
二：注册组件
1,总注册组件
2，启动时自动注册组件
3,注册proxy组件
4,注册视图组件
三：控制器组件
1，添加用户控制器
2,删除用户组件
四：代理类
1，实体类：
2,代理类
一，视图组件页面
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);
}
}
}
}
}