[size=medium]
最近工作中需要用到FLASH,开发框架中又是以PureMVC为主。MVC是有了解,但是PureMVC这个之前则是从没接触过。那就学呗~~
说学就学,可是第一步就让我感觉很费事~~(哎~菜鸟当久了)。要开始学,得先下个PureMVC框架装上吧。找了半天PureMVC 框架,下载下来后,发现是一个压缩包,大小只有几百K(心存怀疑,怎么这么小呀)。解压之后,根据惯性开始寻找一个类似Setup的东东。狂汗,就是找不到这个东西。这下我认定刚才下错东西了。于是,在网上又是一阵狂搜,结果证明自己没下错。-_-!!!
下载链接:http://trac.puremvc.org/PureMVC_AS3/
第二步,开始安装PureMVC。没有setup,怎么装呢?是不是添加引用就可以了呢?可是又该怎么添加呢?(我用得是 FlashDevelop这个编辑AS的软件)网上又是一阵狂搜,可搜到的都是谈论PureMVC的架构怎么样或者pureMVC具体应用怎么写,就是没有介绍刚开始该怎么配置的。“最危险的地方就是最安全的地方”,结果在PureMVC的下载页内找到了“Installation ”字样。其中的大概做法,就是解压,然后将 “PureMVC_AS3_2_0_4.swc ”添加到项目的库中。因为,我用的是FlashDevelop,所以添加方法如下:选中项目的lib文件夹-》右键添加存在的文件-》选择PureMVC_AS3_2_0_4.swc-》右键单击添加进来的这个文件-》选择添加到库中(Add To Library)。这样便可以算前期工作全部结束了。
第三步,查找关于PureMVC的介绍,补一下理论知识。这些东西,网上超多,我就不介绍了。提供几个链接,供大家学习。
最佳实践[中文版]:http://puremvc.org/component/option,com_wrapper/Itemid,183/
PureMVC教程[英文]:http://www.actionscriptdeveloper.co.uk/puremvc-tutorial-flex-puremvc-jabber-and-xiff-3-introduction/
简单的说,PureMVC源于MVC模式,主要就是Model、View、Controller这三层次。但在PureMVC中上述三个都被封装成了三个核心层,并通过单例模式提供给应用程序。开发人员不需要直接使用这三个核心层。PureMVC为了简化开发复杂度,提供了一个Facade类,该类提供了与核心层通信的唯一接口,可以初始化上述三个核心层,并可以访问它们的public方法,同时该类也是以单例模式提供给应用程序。开发人员只需要继承一个 Facade类并创建具体的Facade类就可以实现整个MVC模式。除了知道Facade类之外,还需要了解与三个核心层相辅助的三个类:Proxy、 Mediator、Command。
Proxy,可以理解为代理,负责操作数据的存取。
Mediator,可以理解为媒介,负责UI层与控制层之间的沟通。
Command,则是用来操作具体的业务逻辑。
为了对这三个核心层尽量的解耦,PureMVC中采用了消息机制,层与层之间的通信通过发送消息(notification)来实现。消息发送者只需要实现发送,不需要知道谁会接收这些消息。消息接收者如果需要接收消息,只需要注册一下对应的消息就可以了。如:registerCommand(START_UP, StartUpCommand);这句话产意思就是注册了一个对应关系,其中START_UP是消息的名称,StartUpCommand则是一个 Command,这样当有人发送了START_UP名称的消息后,就会由StartUpCommand进行处理。
第四步,动手写自己的Demo(在我的这个Demo中,实现功能很简单:记录每次鼠标单击时在X方向上的偏移量)。
1)创建一个新的项目,就叫做 "MyFirstPureMvc” 吧。新创建的项目,应该可以看到bin、lib、src这三个文件夹,在src下有一个main.as文件,bin下有一些用于呈现网页的文件(项目中基本不需要用到)。
2)在lib文件夹中添加PureMVC_AS3_2_0_4.swc,并添加到库中。
3)在src文件夹中添加三个子文件夹:Model、View、Controller。Model文件中放置MouseClickProxy.as文件。View中放置 StageMediator.as文件。Controller中放置StartUpCommand.as和MouseClickCommand.as这两个文件。具体内容,请看下面。
4)在src文件夹中接着添加ApplicationFacade.as文件,名称可以不一样。这个主要是用来继承Facade类的。如果你了解了基本的PureMVC框架结构之后,应该明白Facade这个类的重要性。
[/size]
[size=medium]
上述语句中的initializeController方法中首先初始化了Controller控制器,并建立了Command与消息之间的映射关系。然后调用startup启动整个程序。在sendNotification中,发送了一个名为START_UP的消息。并传递了一个app对象。
根据注册的关系,StartUpCommand类会接收到这个消息。[/size]
在这个类中,主要实现了父类的execute方法。在该方法中注册了一个代理和媒介。这两个东东,在随后的程序运行中需要使用,所以要进行一下注册。注册了之后,接下去如果要使用则直接可以从facade中获取。
接着来看下 StageMediator.as,这个东东关系到我们的View视图,与我们可以看得到的UI密切相关。我们在UI上触发的一些事件会由这个 StageMediator类接收(并进行简单的封装)后发送给控制层去处理。
在mouseClick事件中,又发送了一个通知,通知的消息为MOUSE_CLICK。另一个是鼠标的单击时的X方向上偏移量。看一下 ApplicationFacade类中注册的信息,可以找到与消息对应的类是MouseClickCommand。
最近工作中需要用到FLASH,开发框架中又是以PureMVC为主。MVC是有了解,但是PureMVC这个之前则是从没接触过。那就学呗~~
说学就学,可是第一步就让我感觉很费事~~(哎~菜鸟当久了)。要开始学,得先下个PureMVC框架装上吧。找了半天PureMVC 框架,下载下来后,发现是一个压缩包,大小只有几百K(心存怀疑,怎么这么小呀)。解压之后,根据惯性开始寻找一个类似Setup的东东。狂汗,就是找不到这个东西。这下我认定刚才下错东西了。于是,在网上又是一阵狂搜,结果证明自己没下错。-_-!!!
下载链接:http://trac.puremvc.org/PureMVC_AS3/
第二步,开始安装PureMVC。没有setup,怎么装呢?是不是添加引用就可以了呢?可是又该怎么添加呢?(我用得是 FlashDevelop这个编辑AS的软件)网上又是一阵狂搜,可搜到的都是谈论PureMVC的架构怎么样或者pureMVC具体应用怎么写,就是没有介绍刚开始该怎么配置的。“最危险的地方就是最安全的地方”,结果在PureMVC的下载页内找到了“Installation ”字样。其中的大概做法,就是解压,然后将 “PureMVC_AS3_2_0_4.swc ”添加到项目的库中。因为,我用的是FlashDevelop,所以添加方法如下:选中项目的lib文件夹-》右键添加存在的文件-》选择PureMVC_AS3_2_0_4.swc-》右键单击添加进来的这个文件-》选择添加到库中(Add To Library)。这样便可以算前期工作全部结束了。
第三步,查找关于PureMVC的介绍,补一下理论知识。这些东西,网上超多,我就不介绍了。提供几个链接,供大家学习。
最佳实践[中文版]:http://puremvc.org/component/option,com_wrapper/Itemid,183/
PureMVC教程[英文]:http://www.actionscriptdeveloper.co.uk/puremvc-tutorial-flex-puremvc-jabber-and-xiff-3-introduction/
简单的说,PureMVC源于MVC模式,主要就是Model、View、Controller这三层次。但在PureMVC中上述三个都被封装成了三个核心层,并通过单例模式提供给应用程序。开发人员不需要直接使用这三个核心层。PureMVC为了简化开发复杂度,提供了一个Facade类,该类提供了与核心层通信的唯一接口,可以初始化上述三个核心层,并可以访问它们的public方法,同时该类也是以单例模式提供给应用程序。开发人员只需要继承一个 Facade类并创建具体的Facade类就可以实现整个MVC模式。除了知道Facade类之外,还需要了解与三个核心层相辅助的三个类:Proxy、 Mediator、Command。
Proxy,可以理解为代理,负责操作数据的存取。
Mediator,可以理解为媒介,负责UI层与控制层之间的沟通。
Command,则是用来操作具体的业务逻辑。
为了对这三个核心层尽量的解耦,PureMVC中采用了消息机制,层与层之间的通信通过发送消息(notification)来实现。消息发送者只需要实现发送,不需要知道谁会接收这些消息。消息接收者如果需要接收消息,只需要注册一下对应的消息就可以了。如:registerCommand(START_UP, StartUpCommand);这句话产意思就是注册了一个对应关系,其中START_UP是消息的名称,StartUpCommand则是一个 Command,这样当有人发送了START_UP名称的消息后,就会由StartUpCommand进行处理。
第四步,动手写自己的Demo(在我的这个Demo中,实现功能很简单:记录每次鼠标单击时在X方向上的偏移量)。
1)创建一个新的项目,就叫做 "MyFirstPureMvc” 吧。新创建的项目,应该可以看到bin、lib、src这三个文件夹,在src下有一个main.as文件,bin下有一些用于呈现网页的文件(项目中基本不需要用到)。
2)在lib文件夹中添加PureMVC_AS3_2_0_4.swc,并添加到库中。
3)在src文件夹中添加三个子文件夹:Model、View、Controller。Model文件中放置MouseClickProxy.as文件。View中放置 StageMediator.as文件。Controller中放置StartUpCommand.as和MouseClickCommand.as这两个文件。具体内容,请看下面。
4)在src文件夹中接着添加ApplicationFacade.as文件,名称可以不一样。这个主要是用来继承Facade类的。如果你了解了基本的PureMVC框架结构之后,应该明白Facade这个类的重要性。
[/size]
package
{
import org.puremvc.as3.patterns.facade.Facade;
import controller.*
/**
* Facade模式来实现统一的接口,对外只提供了startup方法用于启动
* 在该类被创建的时候会自动调用initializeController方法,需要在该方法中对Command进行注册
* 接着,调用startup 方法启动(也就是发送一个消息,因为之前已经注册了Command,所以相应的方法会去执行execute进行响应)。
* @author
*/
public class ApplicationFacade extends Facade
{
public static const START_UP:String = "START_UP";
public static const MOUSE_CLICK:String = "MOUSE_CLICK";
public static function getInstance(): ApplicationFacade {
if (instance == null) {
instance = new ApplicationFacade();
}
return instance as ApplicationFacade;
}
public function startup(app:Object):void
{
sendNotification(START_UP, app);
}
override protected function initializeController():void {
super.initializeController();
registerCommand(START_UP, StartUpCommand);
registerCommand(MOUSE_CLICK, MouseClickCommand);
}
}
}
[size=medium]
上述语句中的initializeController方法中首先初始化了Controller控制器,并建立了Command与消息之间的映射关系。然后调用startup启动整个程序。在sendNotification中,发送了一个名为START_UP的消息。并传递了一个app对象。
根据注册的关系,StartUpCommand类会接收到这个消息。[/size]
package controller
{
import flash.display.Stage;
import model.MouseClickProxy;
import org.puremvc.as3.interfaces.INotification;
import org.puremvc.as3.patterns.command.SimpleCommand;
import view.StageMediator;
/**
* 这个类中主要就是需要重写父类中的execute方法
* 在这个方法中进行主要的业务逻辑处理
* @author
*/
public class StartUpCommand extends SimpleCommand
{
override public function execute(notification:org.puremvc.as3.interfaces.INotification):void
{
//startupCommand有一些特殊,这个command主要是用于启动这个项目,所以在这个项目中主要是注册一些此后会用于的proxy和mediator
//注册一个代理,主要用于操作数据,比如获取数据,写入数据等
//注册一个mediator,主要是用做与UI通信的媒介,即从UI接收用户事件,和向用户呈现数据
facade.registerProxy(new MouseClickProxy());
var stage:Stage = notification.getBody() as Stage;
facade.registerMediator(new StageMediator(stage));
}
}
}
在这个类中,主要实现了父类的execute方法。在该方法中注册了一个代理和媒介。这两个东东,在随后的程序运行中需要使用,所以要进行一下注册。注册了之后,接下去如果要使用则直接可以从facade中获取。
接着来看下 StageMediator.as,这个东东关系到我们的View视图,与我们可以看得到的UI密切相关。我们在UI上触发的一些事件会由这个 StageMediator类接收(并进行简单的封装)后发送给控制层去处理。
package view
{
import flash.display.Stage;
import flash.events.MouseEvent;
import org.puremvc.as3.patterns.mediator.Mediator;
/**
* 媒介,主要用于监听用户在UI上触发的事件,然后传递消息给controller或proxy。
* 同时也负责向UI上呈现数据
* @author
*/
public class StageMediator extends Mediator
{
public static const NAME:String = "STAGE_MEDIATOR";
public function StageMediator(viewComponent:Stage)
{
//注册监听,从而获取UI上的事件
viewComponent.addEventListener(MouseEvent.CLICK, mouseClick);
}
private function mouseClick(event:MouseEvent):void
{
sendNotification(ApplicationFacade.MOUSE_CLICK, event.localX);
}
}
}
在mouseClick事件中,又发送了一个通知,通知的消息为MOUSE_CLICK。另一个是鼠标的单击时的X方向上偏移量。看一下 ApplicationFacade类中注册的信息,可以找到与消息对应的类是MouseClickCommand。
package controller
{
import org.puremvc.as3.interfaces.INotification;
import org.puremvc.as3.patterns.command.SimpleCommand;
public class MouseClickCommand extends SimpleCommand
{
override public function execute(notification:org.puremvc.as3.interfaces.INotification):void
{
var localX :Number = notification.getBody() as Number;//获取之前传的参数
trace(localX);
}
}
}
在这个类中,就输出了X方向上偏移量。
接下来,你只需要ctrl+enter测试就可以了。
是不是很奇怪,从头到尾都没有用过Model层,是的,这可能是我这个DEMO的缺陷,因为我这个Demo中不需要查询数据库或其它数据存储区来获取或写入数据,因此并没有使用到。
上面的整个过程,只起到一个简单的演示作用。如果大家需要深入学习,建议大家参考网上达人们的文章。