注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

我的博客

 
 
 

日志

 
 
关于我

风流茶说合,酒是色媒人,古往今来,浪涛依旧,我辈今朝,叱咤风云,

网易考拉推荐

菜鸟学PureMVC记  

2010-06-09 10:28:55|  分类: flex |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

      最近工作中需要用到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这个类的重要性。


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);
        }
    }
}

      上述语句中的initializeController方法中首先初始化了Controller控制器,并建立了Command与消息之间的映射关系。然后调用startup启动整个程序。在sendNotification中,发送了一个名为START_UP的消息。并传递了一个app对象。
      根据注册的关系,StartUpCommand类会接收到这个消息。


菜鸟学PureMVC记 - 大将军 - 我的博客菜鸟学PureMVC记 - 大将军 - 我的博客
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类接收(并进行简单的封装)后发送给控制层去处理。


菜鸟学PureMVC记 - 大将军 - 我的博客菜鸟学PureMVC记 - 大将军 - 我的博客
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。


菜鸟学PureMVC记 - 大将军 - 我的博客菜鸟学PureMVC记 - 大将军 - 我的博客
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中不需要查询数据库或其它数据存储区来获取或写入数据,因此并没有使用到。

      上面的整个过程,只起到一个简单的演示作用。如果大家需要深入学习,建议大家参考网上达人们的文章。

      Demo下载


作者:stg609
出处:http://stg609.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

 

  评论这张
 
阅读(158)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017