Flex应用开发框架：PureMVC与Cairngorm深度解析

### Flex应用开发框架：PureMVC与Cairngorm深度解析 在Flex应用开发中，小型应用或许可以凭借基础功能获取外部数据源的数据，但构建企业级规模的应用时，就需要一套标准且一致的架构来避免组件间混乱的点对点连接。目前有多个Flex应用开发框架通过设计模式为开发提供解决方案，如Cairngorm、PureMVC、MVCS和Mate等。接下来我们将深入了解PureMVC和Cairngorm这两个框架，并通过构建联系人管理应用来展示它们的使用方法。 #### PureMVC框架 PureMVC由Cliff Hall创建，是基于ActionScript的框架，Flex借助它处理从视图组件到外部服务（如Spring服务）的数据传输。它基于MVC元模式，将模型、视图和控制器实现为单例，适合多开发者参与的项目。 ##### 1. PureMVC组件 - **值对象（Value object）**：是对Spring Bean的映射，用于匹配从Spring传入的领域对象，以便在Flex视图中使用。 - **事件（Events）**：使用核心的`flash.event`类在整个框架中分发事件。 - **外观（Facade）**：负责在内存缓存中持有模型、视图和控制器，初始化这三个主要单例，并提供访问它们公共方法的入口。 - **控制器（Controller）**：负责维护和注册应用中的命令。 - **命令（Command）**：是视图组件与模型交互的方式，可与代理、中介器和其他命令交互，常用于启动和关闭应用，以及实现业务逻辑。 - **模型（Model）**：通过创建代理提供访问和更改应用数据的层。 - **代理（Proxy）**：代表一层抽象，通过前端数据对象向应用暴露业务功能，用于与远程服务（如Spring服务）交互以检索数据，包含数据结果和故障处理程序。 - **中介器（Mediator）**：作为视图组件和视图数据之间的连接器，促进相关视图的状态更改和数据更新。 - **观察者（Observer）**：命令、代理和中介器通过通知相互通信，通知是映射到观察者列表的名称，当视图发送通知时，观察者会被通知。 ##### 2. PureMVC框架实现步骤 ```mermaid graph LR A[确保Java服务在委托中定义] --> B[创建委托类实现Spring服务方法存根] B --> C[创建数据代理处理结果和故障] C --> D[创建中介器展示和更新视图] D --> E[在控制器中创建命令并初始化应用] E --> F[设置具体外观处理模型、视图和控制器之间的通信] F --> G[向视图添加事件以调用服务] ``` 1. **确保Java服务在委托中定义**：在委托中定义服务，如创建`HTTPService`来读取`Contacts.xml`文件的数据。 ```actionscript private var responder : IResponder; private var contactService : HTTPService; public function ContactDelegate( responder : IResponder ) { this.contactService = new HTTPService(); this.contactService.url="assets/xml/Contacts.xml"; this.responder = responder; } ``` 2. **创建委托类实现Spring服务方法存根**：委托类存储对数据服务的引用，调用服务并通知响应者。 ```actionscript package com.af.cep.model.business { import mx.rpc.AsyncToken; import mx.rpc.IResponder; import mx.rpc.http.HTTPService; public class ContactDelegate { private var responder : IResponder; private var contactService : HTTPService; public function ContactDelegate( responder : IResponder ) { this.contactService = new HTTPService(); this.contactService.url="assets/xml/Contacts.xml"; this.responder = responder; } public function getContactsService() : void { var token:AsyncToken = contactService.send(); token.addResponder( responder ); } } } ``` 3. **创建数据代理处理结果和故障**：代理实现`IResponder`接口，处理数据服务的响应，包括结果和故障方法。 ```actionscript package com.af.cep.model { import com.af.cep.*; import com.af.cep.model.business.ContactDelegate; import com.af.cep.model.vo.ContactVO; import mx.collections.ArrayCollection; import mx.rpc.IResponder; import org.puremvc.as3.interfaces.*; import org.puremvc.as3.patterns.proxy.Proxy; public class ContactProxy extends Proxy implements IProxy, IResponder { public static const NAME:String = "ContactProxy"; public function ContactProxy ( data:Object = null ) { super ( NAME, data ); } public function getContacts():void { var delegate : ContactDelegate = new ContactDelegate( this ); delegate.getContactsService(); } public function result( rpcEvent : Object ) : void { data = rpcEvent.result.contacts.contact as ArrayCollection; sendNotification( ApplicationFacade.LOAD_CONTACTS_SUCCESS ); } public function fault( rpcEvent : Object ) : void { data = new ArrayCollection(); errorStatus = "Could Not Load Contact List!"; sendNotification( ApplicationFacade.LOAD_CONTACTS_FAILED ); } // 其他方法... } } ``` 4. **创建中介器展示和更新视图**：为每个视图组件创建中介器，监听视图分发的事件，根据事件发送通知，并直接通过视图的公共方法和属性维护视图状态。 ```actionscript package com.af.cep.view { import com.af.cep.ApplicationFacade; import com.af.cep.model.*; import com.af.cep.model.vo.ContactVO; import com.af.cep.view.viewcomponents.*; import org.puremvc.as3.interfaces.*; import org.puremvc.as3.patterns.mediator.Mediator; public class ApplicationMediator extends Mediator implements IMediator { public static const NAME:String = "ApplicationMediator"; public function ApplicationMediator(viewComponent:Object) { super(NAME, viewComponent); facade.registerMediator(new ContactsMediator( app.contactPanel)); contactProxy = ContactProxy(facade.retrieveProxy( ContactProxy.NAME)); } override public function listNotificationInterests():Array { return [ApplicationFacade.GET_CONTACTS]; } override public function handleNotification( notification:INotification):void { switch (notification.getName()) { case ApplicationFacade.GET_CONTACTS: contactProxy.contact = null; break; } } // 其他方法... } } `` ```