puremvc框架之hello world!

puremvc是一个可应用于多种语言、多种平台的mvc框架。根据官网上的描述,现在已经支持下列语言:

官方也推出了最佳实践的中文文档,当然,园子里也有兄弟说它烂的 :)

跟asp.net mvc框架有所不同,在asp.net mvc中,一个http请求过来,controller会自动去取得数据,最终转化为model,然后选取一个view进行呈现,同时把model传到view中,一切还算比较简单。

然而puremvc除mvc模式外,渗杂了更多的模式:比如facade(门面),observer(观察者),singleton(单件)等等

先不管其它,来一个flex版本的Hello World吧。(注:以下内容参考了Pure MVC第一步:最简PureMVC)

整个项目结构:

这个项目最终就是要在界面上显示一个文本框,一个按钮,点击按钮时,文本框内容发生改变。(注:该项目纯粹是为了puremvc而puremvc,不具实践意义,仅仅只是出于学习目的,刻意简化的一个示例) 另:因为这个项目不涉及具体的数据实体类,所以model这部分就省去了。

在puremvc中,model/view/controller统一是由Facade类的单件实例来统筹管理的。

大致流程可理解为:通过Facade类的单件实例(即:统一的门面) 启动 puremvc环境,启动同时注册Command对象(相当于asp.net mvc中的controller),然后Command通过与之关联的facade(即前面的单件实例)来注册Mediator(中介者:用于把View与Command联系起来)。

当UI界面(即View)上有动静时(比如按钮点击了之类),与之关联的Mediator(中介者)会发送通知给facade,然后facade会调用command对象执行相关的处理。(即:消息响应)

应该不难理解吧:

1、先在flash builder中创建一个flex项目,同时添加puremvc相关的swc引用,然后主界面main.mxml内容如下:

<?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="300" minHeight="200" height="42" width="300" >
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>

	<s:TextInput x="10" y="10" width="206" id="txtResult"/>
	<s:Button x="224" y="9" label="Button" id="btnSend"/>
</s:Application>

2、创建门面AppFacade类

package mvc
{
	import mvc.controller.AppCommand;
	
	import org.puremvc.as3.interfaces.IFacade;
	import org.puremvc.as3.patterns.facade.Facade;

	public class AppFacade extends Facade implements IFacade
	{
		public static const START_UP:String="start_up";
		public static const CHANGE_TEXT:String="change_text";

		public function AppFacade()
		{

		}

		public static function getInstance():AppFacade
		{
			if (instance == null)
			{
				instance=new AppFacade();
			}
			return instance as AppFacade;
		}

		protected override function initializeController():void
		{
			super.initializeController();
			this.registerCommand(START_UP, AppCommand);//入口:注册Command
		}

		//启动puremvc环境
		public function startup(_main:main):void
		{
			//注:这里的main即为UI界面main.mxml对应的类
			this.sendNotification(START_UP, _main);//启动时,发送通知
		}
	}
}

当然,这不是一个严格意义的单件(构造函数仍然可调用,不过这里不想把代码弄得太复杂,大家暂时把它当做一个单件来看待吧) 。

注:注意这里加注释的部分,在initializeController中,注册了一个Command对象(AppCommand在代码下面会贴出),这样就把门面Facade与命令Command联系起来了,另外在startup里,把主界面main.mxml对应的类实例使用_main传递进来,这样puremvc环境就跟程序主类联系起来了。

3、创建AppCommand类

package mvc.controller
{
	import mvc.view.ButtonMediator;
	import mvc.view.TextMediator;

	import org.puremvc.as3.interfaces.INotification;
	import org.puremvc.as3.patterns.command.SimpleCommand;

	public class AppCommand extends SimpleCommand
	{
		public function AppCommand()
		{
			super();
		}

		public override function execute(inote:INotification):void
		{
			var _main:main=inote.getBody() as main;
			//注册:中介者(用于连接view与command)
			facade.registerMediator(new TextMediator(_main.txtResult));
			facade.registerMediator(new ButtonMediator(_main.btnSend));
		}
	}
}

注:这里的execute方法中,通过facade引用,得到puremvc中的门面Facade唯一实例,然后注册Mediator中介者,把界面上的元素(即输入框与按钮)跟门面也关联起来了。

4、中介者(TextMediator与ButtonMediator)

这也是跟asp.net mvc不同的一个地方,puremvc并没有直接操作视图(View)上的元素,而是引入了中介者(Mediator)这个概念,它相当于“View上的具体元素”与Command之间的桥梁,这样的好处,就是进一步解耦,从一定程度上消除对具体界面的依赖。

ButtonMediator.as

package mvc.view
{
	import spark.components.Button;
	import flash.events.MouseEvent;
	import mvc.AppFacade;
	
	import org.puremvc.as3.interfaces.IMediator;
	import org.puremvc.as3.patterns.mediator.Mediator;
	
	public class ButtonMediator extends Mediator implements IMediator
	{
		public static const NAME:String = "ButtonMediator";
		
		public function ButtonMediator(viewComponent:Button)
		{
			super(NAME,viewComponent);
			this.btnInstance.addEventListener(MouseEvent.CLICK,btnClick);
			
		}
		
		private function btnClick(e:MouseEvent):void{
			this.sendNotification(AppFacade.CHANGE_TEXT,"Hello PureMVC !");
		}
		
		//获取UI界面上的“按钮实例"
		private function get btnInstance():Button{
			return viewComponent as Button;
		}
	}
}

可以看到,ButtonMediator通过调用sendNotification方法向puremvc环境发送消息CHANGE_TEXT就完事了,至于谁去接收消息,它不关心。

TextMediator.as

package mvc.view
{
	import spark.components.TextInput;
	import mvc.AppFacade;
	
	import org.puremvc.as3.interfaces.IMediator;
	import org.puremvc.as3.interfaces.INotification;
	import org.puremvc.as3.patterns.mediator.Mediator;

	public class TextMediator extends Mediator implements IMediator
	{
		public static const NAME:String = "TextMediator";
		
		public function TextMediator(viewComponent:TextInput)
		{
			super(NAME,viewComponent);
		}
		
		public override function listNotificationInterests():Array{
			return [AppFacade.CHANGE_TEXT];
		}
		
		//响应消息
		public override function handleNotification(notification:INotification):void
		{
			switch(notification.getName()){
				case AppFacade.CHANGE_TEXT:
					this.txtInstance.text = notification.getBody() as String;
					break;
			}
		}
		
		//获取与之关联的UI界面上的“文本输入框”
		private function get txtInstance():TextInput{
			return viewComponent as TextInput;
		}
	}
}

在这段代码中,TextMediator负责监听CHANGE_TEXT消息,同时得到消息后,会做出反应。这样跟上面的ButtonMediaor一唱一合,完成了整个消息的处理。

ok,代码准备得差不多了,回过头在main.mxml中正式启用puremvc环境吧: 

<?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="300" minHeight="200" height="42" width="300" creationComplete="application1_creationCompleteHandler(event)">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	
	<fx:Script>		
		<![CDATA[
			import mvc.AppFacade;				
			import mx.events.FlexEvent;		
		
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				//启动puremvc环境
				AppFacade.getInstance().startup(this);			
			}
		]]>
	</fx:Script>
	<s:TextInput x="10" y="10" width="206" id="txtResult"/>
	<s:Button x="224" y="9" label="Button" id="btnSend"/>
</s:Application>

示例源代码下载 (flash builder4环境)

最后再附上一张puremvc的结构图:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏自由而无用的灵魂的碎碎念

通过重建图标缓存文件来解决程序图标显示错误的问题

最近发现一两个程序的图标显示不太正确。很明显,上图在资源管理器与详细信息面板的图标不同。

13310
来自专栏大学生计算机视觉学习DeepLearning

VS下如何建立一个新的MFC程序 网络编程 课设 基于C++ MFC 连接数据库 小应用 小项目浅析展示

50630
来自专栏Golang语言社区

"LollipopGo/library/lollipop/common" 测试2

Golang语言社区 开源轻量级web应用框架,可以快速创建博客及商城等

39260
来自专栏Java帮帮-微信公众号-技术文章全总结

springboot 入门教程(5) 基于ssm框架的crud操作(前端部分-附源码)

springboot 入门教程(5) 基于ssm框架的crud操作(前端部分-附源码) 上一篇介绍了spring boot整合mybatis实现了后端的CRUD...

48280
来自专栏从零开始学自动化测试

Selenium2+python自动化58-读取Excel数据(xlrd)

前言 当登录的账号有多个的时候,我们一般用excel存放测试数据,本节课介绍,python读取excel方法,并保存为字典格式。 一、环境准备 1.先安装...

34460
来自专栏用户2442861的专栏

Qt数据库sqlite总结

第四:QSqlTableModel  继承QSqlQueryModel类  --该类提供了一个可读写单张SQL表的可编辑数据模型,功能:修改,插入,删除,查...

55920
来自专栏CaiRui

Python Flask-web表单

Flask-WTF扩展可以把处理web表单的过程变成一种愉悦的体验。 ? 一、跨站请求伪造保护 默认情况下,Flask-WTF能够保护所有表单免受跨站请求伪造的...

41990
来自专栏AILearning

Apache Zeppelin 中 Python 2&3解释器

配置 属性 默认 描述 zeppelin.python python 已经安装的Python二进制文件的路径(可以是p...

43470
来自专栏大学生计算机视觉学习DeepLearning

网络编程 课设 基于C++ MFC 连接数据库 小应用 小项目浅析展示

49860
来自专栏zcqshine's blog

springboot 获取form-data里的 file 文件小结

66560

扫码关注云+社区

领取腾讯云代金券