Flex系列--7--整合PureMVC

?

PureMVC? 概述

1. PureMVC 是什么？
   PureMVC 是一个定位于设计高性能 RIA 客户端的基于模式的框架。目前已经被移植到多种语言（AS2、AS3、C#、ColdFusion、Haxe、JavaScript、Java、Objective C、PHP、Python、Ruby）和平台，包括服务器端环境。
2. PureMVC 原理图示
   
3. 在 sampleApp 中引入 EmployeesDataGrid 组件
   

   <?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"               xmlns:s="library://ns.adobe.com/flex/spark"               xmlns:mx="library://ns.adobe.com/flex/mx"               minWidth="955" minHeight="600"               xmlns:view="employees.view.components.*">    <view:EmployeesDataGrid id="employeesDataGrid"/></s:Application>

4. 在 employees 下创建 ApplicationFacade，作为此应用程序的 Facade
   

   package employees{    import org.puremvc.as3.multicore.patterns.facade.Facade;    import employees.controller.*;    public class ApplicationFacade extends Facade    {        public static const STARTUP:String = 'startup';        public function ApplicationFacade(key:String) {            super(key);        }        public static function getInstance(key:String):ApplicationFacade {            if (instanceMap[key] == null)                instanceMap[key] = new ApplicationFacade(key);            return instanceMap[key] as ApplicationFacade;        }        override protected function initializeController():void {            super.initializeController();            registerCommand(STARTUP, StartupCommand);        }        public function startup(app:sampleApp):void {            sendNotification(STARTUP, app);        }    }}

   [注：]看到上面的 StartupCommand 了吧，我们稍候创建它，该 Command 主要用于注册 Proxy 和 Mediator。

5. 在主应用中初始化 Facade，并调用 startup 方法（应该能理解调用此方法的意图吧？）
   

   <?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"               xmlns:s="library://ns.adobe.com/flex/spark"               xmlns:mx="library://ns.adobe.com/flex/mx"               minWidth="955" minHeight="600"               xmlns:view="employees.view.components.*"               initialize="facade.startup(this);">    <fx:Script>    <![CDATA[        import employees.ApplicationFacade;        public static const NAME:String = 'sampleApp';        private var facade:ApplicationFacade = ApplicationFacade.getInstance(NAME);    ]]>    </fx:Script>    <view:EmployeesDataGrid id="employeesDataGrid"/></s:Application>

6. 是时候创建 StartupCommand 了
   

   package employees.controller{    import org.puremvc.as3.multicore.patterns.command.SimpleCommand;    import org.puremvc.as3.multicore.interfaces.INotification;    public class StartupCommand extends SimpleCommand    {        override public function execute(note:INotification):void {            // @TODO        }    }}

7. 至此 pureMVC 已经整合完毕，是不是很简洁？:) 接下来实现雇员信息输出。
8. 首先在 model 下创建 LoadEmployeesProxy，调用远程对象返回雇员信息
   

   package employees.model{    import org.puremvc.as3.multicore.patterns.proxy.Proxy;    import mx.rpc.remoting.RemoteObject;    import mx.rpc.events.ResultEvent;    import mx.rpc.events.FaultEvent;    public class LoadEmployeesProxy extends Proxy {        public static const NAME:String = 'LoadEmployeesProxy';        public static const LOAD_EMPLOYEES_SUCCESS:String = 'loadEmployeesSuccess';        public static const LOAD_EMPLOYEES_FAILED:String  = 'loadEmployeesFailed';        private var employeeServiceRO:RemoteObject;        public function LoadEmployeesProxy() {            super(NAME);            employeeServiceRO = new RemoteObject();            employeeServiceRO.destination = "employeeServiceDest";            employeeServiceRO.addEventListener(ResultEvent.RESULT, onResult);            employeeServiceRO.addEventListener(FaultEvent.FAULT, onFault);        }        public function load():void {            employeeServiceRO.getList();        }        private function onResult(event:ResultEvent):void {            sendNotification(LOAD_EMPLOYEES_SUCCESS, event.result);        }        private function onFault(event:FaultEvent):void {            sendNotification(LOAD_EMPLOYEES_FAILED, event.fault.faultString);        }    }}

9. 其次在 view 下创建管理 EmployeesDataGrid 的 Mediator — EmployeesDataGridMediator
   

   package employees.view{    import org.puremvc.as3.multicore.patterns.mediator.Mediator;    import org.puremvc.as3.multicore.interfaces.INotification;    import flash.events.Event;    import mx.controls.Alert;    import employees.ApplicationFacade;    import employees.model.LoadEmployeesProxy;    import employees.view.components.EmployeesDataGrid;    public class EmployeesDataGridMediator extends Mediator    {        public static const NAME:String = 'EmployeesListMediator';        public function EmployeesDataGridMediator(viewComponent:EmployeesDataGrid) {            super(NAME, viewComponent);            employeesDataGrid.addEventListener(EmployeesDataGrid.LOAD_EMPLOYEES,                                               onGetEmployees);        }        protected function onGetEmployees(event:Event):void {            sendNotification(ApplicationFacade.LOAD_EMPLOYEES);        }        override public function listNotificationInterests():Array {            return [                LoadEmployeesProxy.LOAD_EMPLOYEES_SUCCESS,                LoadEmployeesProxy.LOAD_EMPLOYEES_FAILED            ];        }        override public function handleNotification(note:INotification):void {            switch (note.getName()) {                case LoadEmployeesProxy.LOAD_EMPLOYEES_SUCCESS:                     employeesDataGrid.employeesList.dataProvider = note.getBody();                     break;                case LoadEmployeesProxy.LOAD_EMPLOYEES_FAILED:                     Alert.show(note.getBody().toString(), 'Error');                     break;            }        }        protected function get employeesDataGrid():EmployeesDataGrid {            return viewComponent as EmployeesDataGrid;        }    }}

10. 把上面创建的 Proxy 和 Mediator 注册到 Model 和 View 中
    

    package employees.controller{    import org.puremvc.as3.multicore.patterns.command.SimpleCommand;    import org.puremvc.as3.multicore.interfaces.INotification;    import employees.model.LoadEmployeesProxy;    import employees.view.EmployeesDataGridMediator;    public class StartupCommand extends SimpleCommand    {        override public function execute(note:INotification):void {            facade.registerProxy(new LoadEmployeesProxy());            var app:sampleApp = note.getBody() as sampleApp;            facade.registerMediator(new EmployeesDataGridMediator(app.employeesDataGrid));        }    }}

    [注：]在注册 Mediator 的时候也就确定了它所管理的 Mxml 文件

11. 在 controller 中创建 LoadEmployeesCommand，用于调用 LoadEmployeesProxy
    

    package employees.controller{    import org.puremvc.as3.multicore.patterns.command.SimpleCommand;    import org.puremvc.as3.multicore.interfaces.INotification;    import employees.model.LoadEmployeesProxy;    public class LoadEmployeesCommand extends SimpleCommand    {        override public function execute(note:INotification):void {            var loadEmployeesProxy:LoadEmployeesProxy =                facade.retrieveProxy(LoadEmployeesProxy.NAME) as LoadEmployeesProxy;            loadEmployeesProxy.load();        }    }}

12. 把 LoadEmployeesCommand 与事件的对应关系追加到 ApplicationFacade 中
    

    package employees{    import org.puremvc.as3.multicore.patterns.facade.Facade;    import employees.controller.*;    public class ApplicationFacade extends Facade    {        public static const STARTUP:String = 'startup';        public static const LOAD_EMPLOYEES:String = 'loadEmployees';        public function ApplicationFacade(key:String) {            super(key);        }        public static function getInstance(key:String):ApplicationFacade {            if (instanceMap[key] == null)            instanceMap[key] = new ApplicationFacade(key);            return instanceMap[key] as ApplicationFacade;        }        override protected function initializeController():void {            super.initializeController();            registerCommand(STARTUP, StartupCommand);            registerCommand(LOAD_EMPLOYEES, LOADEmployeesCommand);        }        public function startup(app:sampleApp):void {            sendNotification(STARTUP, app);        }    }}

13. 万事俱备，只需要在 EmployeesDataGrid 创建完毕时触发相应事件
    

    <?xml version="1.0" encoding="utf-8"?><s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"          xmlns:s="library://ns.adobe.com/flex/spark"          xmlns:mx="library://ns.adobe.com/flex/mx"          width="400" x="32" y="25"          creationComplete="init();">    <fx:Metadata>        [Event('loadEmployees')]    </fx:Metadata>    <fx:Script>    <![CDATA[        public static const LOAD_EMPLOYEES:String = 'loadEmployees';        public function init():void {            dispatchEvent(new Event(LOAD_EMPLOYEES, true));        }    ]]>    </fx:Script>    <mx:DataGrid id="employeesList" width="400">        <mx:columns>            <mx:DataGridColumn headerText="Name"  dataField="name"/>            <mx:DataGridColumn headerText="Age"   dataField="age"/>            <mx:DataGridColumn headerText="Email" dataField="email"/>        </mx:columns>    </mx:DataGrid></s:VGroup>

14. 运行试试吧 ：）