网络上目前流行的flex框架不少，包括地位资深出身名门的cariagorm ，当前走红的PureMVC,轻盈小巧的Model-Glue，Foundry ，ARP等。权衡了下利弊，选择了PureMVC。 主要因为PureMVC扩展性顶好，并且它与语言无关。
由于是hello word，个人懒得写例子，所以采用的是网上某位同僚的例子，略加改进，如图，点击上一张/下一张切换图片。例子很简单，没必要用框架。但主要为了学习框架。
目录的架构介绍如下：
整个框架运作可以看作订单流程如图：
根据AVM的执行顺序，来介绍整个框架的运转：
首先运行HelloPureMVC.xml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="initApp()"
xmlns:component="component.*"
fontSize="12">
<mx:Script>
<![CDATA[
import MyApp.MyAppFacade;
public function initApp():void{
var facade:MyAppFacade = MyAppFacade.getInstance();
facade.startup( this );
}
]]>
</mx:Script>
<mx:Box id="mainContainer" width="202" height="250">
<component:Mydisplay id="display" width="200" height="200"/>
<component:MyControlBar id="controlBar" x="0" y="200" height="50" width="200" />
</mx:Box>
</mx:Application>
这个界面很简单，在一个BOX组件中添加2个自制组件，这两个自制组件Mydisplay和MyControlBar,在启动该应用时，加载initApp方法，获得MyAppFacade实例，启动pureMVC框架。下面便是2个组件的代码：
Mydisplay.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Label id="nameLabel"/>
<mx:Image id="image" y="30"/>
</mx:VBox>
MyControlBar.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:ControlBar xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Button label="上一张" fontSize="12" id="btnPrev"/>
<mx:Button label="下一张" fontSize="12" id="btnNext"/>
</mx:ControlBar>
MyAppFacade.as就是流图中的接单者，总裁。该角色继承了Facade ，实现了IFacade，可以说是有权有势。
package myApp
{
import myApp.controller.GetUrlListCommand;
import myApp.controller.StartupCommand;
import org.puremvc.as3.interfaces.IFacade;
import org.puremvc.as3.patterns.facade.Facade;
/**
* 该类作为框架的掌控者,它所做的事情主要包括:
* 1.提供获取自身实例的getInstance()静态方法
* 2.initializeController()初始化Controller控制器
* 建立Notification与Command映射
* 在该例子中建立了程序启动,Puremvc启动结束的command映射
* 3.startup(obt:Object)该方法提供给界面调用,启动pureMVC
* 4.运行顺序为：initializeController()－>getInstance()－>startup(app:Object)
* */
public class MyAppFacade extends Facade implements IFacade
{
//建立两个常量信息,用于广播
public static const APP_STARTUP:String = "app_startup";
public static const APP_STARTUP_OVER:String = "app_startup_over";
public function MyAppFacade(){
super();
}
public static function getInstance():MyAppFacade{
if(instance==null) instance = new MyAppFacade();
trace("getInstance()");
return instance as MyAppFacade;
}
override protected function initializeController():void{
trace("initializeController()");
super.initializeController();
//register some Commands
registerCommand(APP_STARTUP,StartupCommand);
registerCommand(APP_STARTUP_OVER,GetUrlListCommand);
}
public function startup(app:Object):void{
trace("startup(app:Object)");
sendNotification(APP_STARTUP,app);
}
}
}
它任命了StartupCommand为总经理，StartupCommand继承了MacroCommand ，能够对下层经理发命令。这里下层的经理包括ModelPrepCommand和ViewPrepCommand
package myApp.controller{
import org.puremvc.as3.patterns.command.MacroCommand;
/**
*
* 该类继承了MacroCommand将会在单例modelController和viewsController启动前调用
* 当该类加载时执行初始化方法,initializeMacroCommand(),该方法中初始化2个控制器,初
* 始化的顺序按照代码的书写顺序.
*
*
* **/
public class StartupCommand extends MacroCommand {
// 程序开始时执行的 MacroCommand.
public function StartupCommand() {
return;
}
//添加子Command 初始化 MacroCommand.
override protected function initializeMacroCommand():void {
//以下两个命令按先进先出顺序执行;
trace("initializeMacroCommand()");
addSubCommand(ModelPrepCommand);
addSubCommand(ViewPrepCommand);
return;
}
}
}
ModelPrepCommand是管理model层的经理，也就是生产者经理。所有的材料，用品都要由这个部门负责。但ModelPrepCommand管理的是主管ImageUrlListProxy。
package myApp.controller{
import myapp.model.*;
import org.puremvc.as3.interfaces.ICommand;
import org.puremvc.as3.interfaces.INotification;
import org.puremvc.as3.patterns.command.SimpleCommand;
import myApp.model.ImageUrlListProxy;
/**
*
* ModelPrepCommand作为系统的model控制器,管理了所有的model对象,model在整个pureMVC中起到了
* 与数据交互的作用.这里需要注册一个proxy.该proxy的注册方式:
* facede获取proxy对象参数传递给proxy类对象,该类对象会将该proxy对象放置数组中,在系统调用
* retrieveProxy的时候,将获得该proxy实例.
*
*
* **/
public class ModelPrepCommand extends SimpleCommand implements ICommand {
public function ModelPrepCommand() {
return;
}
//注册代理(proxy)
public override function execute(sender:INotification):void {
trace("ModelPrepCommand");
facade.registerProxy( new ImageUrlListProxy(ImageUrlListProxy.NAME) );
}
}
}
主管ImageUrlListProxy就叫A准备生产A货物，B准备调用B材料。这里是在xml中，调用数据。但是还没收到上级的命令，他们没有调用数据的。XML数据如下：
**************************************
<persons>
<person name="卡莫" source="pic/km.jpg"/>
<person name="李时珍" source="pic/lsz.jpg"/>
<person name="姚明" source="pic/ym.jpg"/>
<person name="费德勒" source="pic/fdl.jpg"/>
<person name="伍兹" source="pic/wz.jpg"/>
<person name="科比" source="pic/kb.jpg"/>
</persons>
**************************************
package myApp.model
{
import myApp.model.vo.ImageUrlVO;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.rpc.http.HTTPService;
import org.puremvc.as3.interfaces.IProxy;
import org.puremvc.as3.patterns.proxy.Proxy;
/**
*
* 该类用作获得数据,还提供了一个loadUrlList方法.
*
* **/
public class ImageUrlListProxy extends Proxy implements IProxy
{
public static const NAME:String = "ImageUrlListProxy";
private var hs:HTTPService;
//定义一些Notification字符常量
public static const URL_LOAD_COMPLETE:String = "url_load_complete";
public function ImageUrlListProxy(proxyName:String=null, data:Object=null)
{
trace("ImageUrlListProxy(proxyName:String=null, data:Object=null)");
super(proxyName,data);
hs = new HTTPService();
hs.addEventListener(ResultEvent.RESULT,onResult);
hs.addEventListener(FaultEvent.FAULT,fault);
}
public function loadUrlList():void{
hs.url = "xml/person.xml";
hs.resultFormat ="e4x";
hs.send();
}
public function fault(event:FaultEvent):void{
trace(event.message);
}
public function onResult(event:ResultEvent):void{
data = new Array();
var personList:XML = event.result as XML;
for each(var p:XML in personList.person){
var personName:String = p.@name;
var personPic:String = p.@source;
data.push(new ImageUrlVO(personPic,personName));
}
if(data==null)Alert.show("数据为空");
sendNotification( URL_LOAD_COMPLETE,data );
}
}
}
*********调用的材料*********
package myApp.model.vo
{
public class ImageUrlVO
{
public var url:String;
public var name:String;
public function ImageUrlVO(url:String,name:String){
this.url = url;
this.name = name;
}
}
}
*********调用的材料*********
下层经理ViewPrepCommand在ModelPrepCommand做完后，立马开工，招来发货主管ImageMediator，ControlBtnsMediator把订货单列出
《var app:HelloPureMVC = notification.getBody() as HelloPureMVC;》
HelloPureMVC需要这些东西，你们开始准备吧。（生产者ModelPrepCommand不需要知道货是谁要的，只管生产）
package myApp.controller{
import org.puremvc.as3.interfaces.ICommand;
import org.puremvc.as3.interfaces.INotification;
import org.puremvc.as3.patterns.command.SimpleCommand;
import myApp.view.ImageMediator;
import myApp.MyAppFacade;
import myApp.view.ControlBtnsMediator;
public class ViewPrepCommand extends SimpleCommand implements ICommand {
public function ViewPrepCommand() {
return;
}
// 创建 Mediator, 并把它们注册到View;
public override function execute(notification:INotification):void {
//得到载体
var app:HelloPureMVC = notification.getBody() as HelloPureMVC;
trace("ViewPrepCommand");
//注册ImageMediator和ControlBtnsMediator
facade.registerMediator( new ImageMediator(app.display) );
facade.registerMediator( new ControlBtnsMediator(app.controlBar) );
//通知已经初始化完毕
sendNotification(MyAppFacade.APP_STARTUP_OVER,app);
}
}
}
ImageMediator主管首当其冲，弄清自己的任务艰巨（显示图片，显示名字，在点击按钮后作出反应），分清主次先super(NAME, viewComponent);再让专门请了个人去监听广播listNotificationInterests，得到信号组（可自己看框架源码）后，handleNotification，组成专案组，完成各自的任务。
package myApp.view
{
import myApp.model.ImageUrlListProxy;
import myApp.model.vo.ImageUrlVO;
import component.MyControlBar;
import mx.controls.Alert;
import mx.controls.Button;
import mx.controls.Image;
import mx.controls.Label;
import org.puremvc.as3.interfaces.IMediator;
import org.puremvc.as3.interfaces.INotification;
import org.puremvc.as3.patterns.mediator.Mediator;
public class ImageMediator extends Mediator implements IMediator
{
public static const NAME:String = "ImageMediator";
private var arrayOfImage:Array=null;
private var currentIndex:int=-1;
public function ImageMediator(viewComponent:Object)
{
trace("ImageMediator");
super(NAME, viewComponent);
}
override public function listNotificationInterests():Array{
//列出感兴趣的Notification
trace("listNotificationInterests()");
return [
ImageUrlListProxy.URL_LOAD_COMPLETE,
ControlBtnsMediator.NEXT_IMAGE,
ControlBtnsMediator.PREV_IMAGE
];
}
override public function handleNotification(notification:INotification):void{
trace("handleNotification(notification:INotification)");
switch(notification.getName()){
case ImageUrlListProxy.URL_LOAD_COMPLETE:
arrayOfImage = notification.getBody() as Array;
if(arrayOfImage){
(viewComponent.nameLabel as Label).text = (arrayOfImage[0] as ImageUrlVO).name;
(viewComponent.image as Image).source = (arrayOfImage[0] as ImageUrlVO).url;
currentIndex = 0;
}else{
Alert.show("没有得到图片链接","错误");
}
break;
case ControlBtnsMediator.NEXT_IMAGE:
if(currentIndex==-1)break;
if(currentIndex >= arrayOfImage.length-1 ){Alert.show("目前是最后一张图片","警告");}
else{
(viewComponent.nameLabel as Label).text = (arrayOfImage[currentIndex+1] as ImageUrlVO).name;
(viewComponent.image as Image).source = (arrayOfImage[currentIndex+1] as ImageUrlVO).url;
currentIndex++;
}
break;
case ControlBtnsMediator.PREV_IMAGE:
if(currentIndex==-1)break;
if(currentIndex <=0 ){Alert.show("目前是第一张图片","警告");}
else{
(viewComponent.nameLabel as Label).text = (arrayOfImage[currentIndex+-1] as ImageUrlVO).name;
(viewComponent.image as Image).source = (arrayOfImage[currentIndex-1] as ImageUrlVO).url;
currentIndex--;
}
break;
default:break;
}
}
}
}
ControlBtnsMediator主管比较闲，主要负责看看是不是有人按了按钮就行。如果有人按了按钮，就发广播通知各单位：按了按钮，按了那个按钮。
package myApp.view
{
import flash.events.MouseEvent;
import mx.controls.Button;
import org.puremvc.as3.interfaces.IMediator;
import org.puremvc.as3.patterns.mediator.Mediator;
public class ControlBtnsMediator extends Mediator implements IMediator
{
public static const NAME:String = "ControlBtnsMediator";
public static const NEXT_IMAGE:String = "next_image";
public static const PREV_IMAGE:String = "prev_image";
public function ControlBtnsMediator(viewComponent:Object)
{
super(NAME, viewComponent);
trace("ControlBtnsMediator");
(viewComponent.btnPrev as Button).addEventListener(MouseEvent.CLICK,onClickPrev);
(viewComponent.btnNext as Button).addEventListener(MouseEvent.CLICK,onClickNext);
}
private function onClickPrev(e:MouseEvent):void{
sendNotification(PREV_IMAGE);
}
private function onClickNext(e:MouseEvent):void{
sendNotification(NEXT_IMAGE);
}
}
}
ViewPrepCommand经理在主管工作都准备好了后，就广播
sendNotification(MyAppFacade.APP_STARTUP_OVER,app); ，
总裁的秘书1号监听
registerCommand(APP_STARTUP_OVER,GetUrlListCommand);
去把货物提了出来
package myApp.controller
{
import myApp.model.ImageUrlListProxy;
import org.puremvc.as3.interfaces.ICommand;
import org.puremvc.as3.interfaces.INotification;
import org.puremvc.as3.patterns.command.SimpleCommand;
public class GetUrlListCommand extends SimpleCommand implements ICommand
{
public function GetUrlListCommand()
{
super();
}
override public function execute(notification:INotification):void
{
//得到图片链接
trace("GetUrlListCommand");
(facade.retrieveProxy( ImageUrlListProxy.NAME ) as ImageUrlListProxy).loadUrlList();
}
}
}
秘书在调完货后，发送广播，货物准备好了sendNotification( URL_LOAD_COMPLETE,data );，ImageMediator主管一直在监听，听到URL_LOAD_COMPLETE消息后，立马handleNotification，看看是什么消息，然后就执行里面对应的方法。采用的是switch case ，有效执行命令。
下面附有整个demo的例子以及pureMVC的源码.供大家下载.
分享到：
相关推荐
标题 "PureMVC 中文版" 指的是 PureMVC 框架的一个中文版本，这是一款广泛应用的开源框架，特别设计用于构建富互联网应用程序（RIA），尤其是基于Adobe Flex和ActionScript 3的项目。PureMVC 提供了一种模块化、结构...
标题中的“可以运行的PureMVC的登陆实例”是指一个基于PureMVC框架的登录功能实现，这个实例已经经过验证可以在FlexBuilder3环境下正常运行。PureMVC是一种经典的多层应用架构模式，它为ActionScript、JavaScript、...
这个是一个根据AS3(ActionScript 3) pureMVC而转换过来的lua pureMVC。所有的接口完全跟AS3版本一致。 若是想使用，可以直接查看网上的pureMVC 文档，我并未对任何一个函数改名或者更换参数位置。 注意，这个PureMVC...
**PureMVC框架详解** PureMVC是一种轻量级、模型-视图-控制器（MVC）框架，最初是为ActionScript开发的，后来被移植到多种编程语言中，包括C++。它提供了一种组织代码结构的方式，使得开发者可以更高效地构建可维护...
**纯MVC（PureMVC）AS3版详解** PureMVC是一款轻量级的框架，主要用于实现Model-View-Controller（MVC）设计模式。它最初由Dan Varga创建，旨在提供一种跨平台的解决方案，使开发人员能够更有效地组织和管理应用...
PureMVC是面向对象的多层应用程序框架，它提供了一种模式来组织代码，使开发更加规范和高效。本篇文章将深入探讨Unity中如何使用PureMVC框架，以及它如何帮助实现UI和逻辑的分离。 PureMVC是一个轻量级的框架，其...
《深入理解PureMVC：基于五子棋游戏的源码分析》 PureMVC是一个流行的、开源的、轻量级的、跨平台的MVC框架，它为开发人员提供了一种结构化的编程模式，用于组织和管理应用程序的业务逻辑、用户界面和数据。在这个...
标题中的“一个很好的puremvc实例”表明我们即将探讨的是关于PureMVC框架的实际应用案例。PureMVC是一个轻量级的、跨平台的MVC（Model-View-Controller）设计模式实现，它主要应用于创建复杂但组织良好的应用程序...
PureMvc是一个开源的、轻量级的框架，用于构建多层结构的富客户端应用程序。它遵循Model-View-Controller（MVC）设计模式，并提供了一种标准化的方式来组织和协调应用程序的各个部分。在这个名为"MyFirstPureMvc"的...
PureMVC是一个开源的、轻量级的框架，主要用于构建多层应用程序，尤其适用于富互联网应用（RIA）的开发。这个框架是基于Model-View-Controller（MVC）设计模式的，它提供了一种结构化的解决方案，使得开发者可以更...
Qt版本的PureMVC是一个基于设计模式的框架，主要用于构建可维护性和可扩展性极高的应用程序。这个框架的实现是将经典的MVC（Model-View-Controller）模式应用于Qt编程环境，为Qt开发者提供了一种结构化的方法来组织...
标题“pureMVC初尝试”表明我们即将探讨的是PureMVC框架在实际应用中的初步体验。PureMVC是一个开源的、轻量级的、模型-视图-控制器（MVC）设计模式实现，主要应用于Flex、AS3以及其它编程语言的项目中。它提供了一...
纯MVC（PureMVC）是一个轻量级的框架，用于构建基于模型-视图-控制器（Model-View-Controller）设计模式的应用程序。这个框架最初是为ActionScript编程语言设计的，但后来被移植到了多种其他编程语言中，包括Java、...
PureMVC是一个开源的、轻量级的MVC（Model-View-Controller）框架，它最初是为ActionScript设计的，但后来发展出了多种语言版本，包括C#。本压缩包"PureMVC.rar"提供了PureMVC在C#平台上的实现，包括单线程版和多...
PureMVC是一个多范式、轻量级的框架，它主要设计用于构建应用程序的模型-视图-控制器（MVC）结构。这个框架的核心理念是将应用程序的不同部分解耦，以便于开发、维护和扩展。在C++版本的PureMVC中，它充分利用了面向...
如你下载后的存放的目录是D组：/下载，解压后将创建一个名为PureMVC_AS3_2_0_4的文件夹（注：其中的2_0_4是版本号） ; 打开PureMVC_AS3_2_0_4文件夹，您会发现里面有三个文件夹： asdoc ：对应于API的文档，它的首页...
【PureMVC学习指南】 PureMVC是一款轻量级的框架，主要应用于Flex和AS3开发，它基于经典的Model-View-Controller（MVC）设计模式，为开发者提供了一种组织代码、解耦组件的强大工具。PureMVC的核心理念是通过分离...
PureMVC C#框架是一种基于模型-视图-控制器（MVC）设计模式的轻量级应用框架，专为C#编程语言设计。这个框架旨在提高软件开发的组织性和可维护性，通过分离业务逻辑、用户界面和应用程序数据，使得开发者能够更高效...
PureMVC是一个开源的、轻量级的、跨平台的模型-视图-控制器（Model-View-Controller，MVC）框架，适用于构建各种类型的应用程序，尤其在富互联网应用程序（Rich Internet Applications，RIA）领域中表现突出。...
纯MVC（PureMVC）是一个轻量级的框架，主要设计用于构建应用程序的模型-视图-控制器架构。这个框架最初是为ActionScript 3编程语言开发的，但现在已经被移植到许多其他编程语言，包括Java、C#、Python、JavaScript等...