`
superwulei
  • 浏览: 107928 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

pureMVC简单示例及其原理讲解——View层

阅读更多

pureMVC简单示例及其原理讲解

——View层

pureMVC是一个MVC框架,目的是为了将Model、View、Controller严格的划分出来。pureMVC可以用户Java、C#、ActionScript等多种编程语言。

上一篇《pureMVC简单示例及其原理讲解——Model层 》中我们讲解了Model层,非常简单。包含一个UserVO和一个UserProxy,只要记住Proxy中的data的含义就OK了。

本篇说的是View层,即视图层,在本示例中包括两个部分:MXML文件,即可视控件;Mediator。

可视控件

可视控件由UserForm.mxml(图1)和UserList.mxml(图2)两个文件组成。UserForm.mxml用于添加用户,UserList.mxml显示用户和删除已添加用户。

【图1】

【图2】

 

先看UserForm.mxml,既然要添加用户,就一定会要一个方法。你还记得么,在上一篇《pureMVC简单示例及其原理讲解——Model层 》中我们提到的UserProxy中有一个ArrayCollection类型的users属性和无返回值的addItem方法,其中users中存储UserVO,addItem方法用来向users中添加UserVO。现在我们既然要在界面通过添加按钮添加用户,我们必然要用到这个方法,但是我们不会在View层直接使用这个方法。因为pureMVC的追求是将MVC分离,而这些逻辑操作我们都会将其放入Command中,即Controller才层。但是在View层,我们也不是没有作为的。我先调一调你的胃口,不要着急,这个作为我们会在本篇接下来的部分讲。先看看userForm.mxml的代码。

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel title="Registor" xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Metadata>
		[Event('add')]
	</mx:Metadata>

	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import com.superwulei.model.vo.UserVO;
			public static const USER_ADD:String = "add";

			public var user:UserVO;
			/* 添加用户 */
			private function addUser():void {
				user = new UserVO(email.text, password.text);
				dispatchEvent(new Event(USER_ADD));
			}

			private function enableSubmit(u:String, p:String):Boolean {
				return u != '' && p != '';
			}
		]]>
	</mx:Script>

	<mx:Form>
		<mx:FormItem label="email" required="true">
			<mx:TextInput id="email"/>
		</mx:FormItem>
		<mx:FormItem label="password" required="true">
			<mx:TextInput id="password" displayAsPassword="true"/>
		</mx:FormItem>
	</mx:Form>
	
	<mx:ControlBar horizontalAlign="right">
		<mx:Button id="sbumitButton" label="添加"
			 enabled="{enableSubmit(email.text,password.text)}"
			 click="addUser();"/>
	</mx:ControlBar>
</mx:Panel>

 在UserForm.mxml中定义一个Event,并对应的定义一个USER_ADD常量。来看看点击添加按钮后会怎么样?找到submitButton按钮的click事件对应的方法addUser。在addUser方法中,首先要生成一个UserVO对象user,这个user存储的信息就是你在界面上输入的email和密码;此外还要注意,这个UserVO的对象user事先已经声明,且是public的访问修饰符。之所以将user的访问限制设定为公有的,是由于这个user会在其他地方用到,这个其他地方请您关注。

一般的,一个可视控件会对应一个Mediator;但有时候多个可视控件也会对应一个Mediator。本示例中,可视控件和Mediator的关系是前者,即一对一。来看看UserForm.mxml对应的UserFormMediator.as代码。

package com.superwulei.view
{
	import com.superwulei.ApplicationFacade;
	import com.superwulei.view.components.UserForm;
	
	import flash.events.Event;
	
	import org.puremvc.as3.patterns.mediator.Mediator;

	public class UserFormMediator extends Mediator
	{
		public static const NAME:String = "UserFormMediator";
				
		public function UserFormMediator(viewComponent:Object)
		{
			super(NAME, viewComponent);
			userForm.addEventListener(UserForm.USER_ADD,onAdd);
		}
		
		private function get userForm():UserForm{
			return viewComponent as UserForm;
		}
		
		/* 添加用户监听器 */
		private function onAdd(event:Event):void{
			add();
		}
		/* 添加用户方法 */
		private function add():void{
			sendNotification(ApplicationFacade.USER_ADDED,userForm.user);
		}
	}
}

 在View层,Mediator是pureMVC的核心,其私有变量viewComponent表示一个可视控件,上例中viewComponent表示UserForm,通过userForm属性实现。

看构造器UserFromMediator(...)。首先调用了父类的构造方法;然后给userForm属性加上onAdd监听器,这个userFrom属性是通过getter方法实现的,见get userForm():UserForm。来看onAdd监听器,调用add方法,在add方法中使用了sendNotification方法。刚才我们所说的添加用户的方法不是没有作为,这就是我所谓的有所作为,即“发送通知”。pureMVC中将逻辑控制放在了Controller层,因此在View层就不会有添加用户的代码,但是我们将“添加用户”这个命令以通知的方式发送出去。注意sendNotification方法中携带了两个参数,第一个参数是一个常量,第二个参数是一个UserVO对象。这个常量表示会调用与之对应的Command,这个UserVO对象表示的就是要添加的用户。这个在Controller层会讲到。

UserList.mxml和UserListMediator.as和上面的道理是类似的,在此不多言。以下是UserList.mxml和UserListMediator.as的代码。

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" title="已注册用户">
	<mx:Metadata>
	[Event('delete')]
</mx:Metadata>

	<mx:DataGrid id="userGrid" dataProvider="{users}">
		<mx:Script>
			<![CDATA[
				import mx.formatters.DateFormatter;
				import com.superwulei.model.vo.UserVO;
				import mx.collections.ArrayCollection;
				
				public static const USER_DELETE:String = "delete";
				
				[Bindable]
				public var users:ArrayCollection;
				
				public var selectUser:UserVO;

				private function deleteUser():void{
					selectUser = userGrid.selectedItem as UserVO;
					dispatchEvent(new Event(USER_DELETE));
				}
			]]>
		</mx:Script>
		<mx:columns>
			<mx:DataGridColumn dataField="email"/>
			<mx:DataGridColumn dataField="password"/>
			<mx:DataGridColumn dataField="regDate" width="200"/>
		</mx:columns>
	</mx:DataGrid>
	<mx:HBox textAlign="center">
		<mx:Button id="deleteButton" label="删除" click="deleteUser();"/>
	</mx:HBox>
</mx:Panel>
 
package com.superwulei.view
{
	import com.superwulei.ApplicationFacade;
	import com.superwulei.model.UserProxy;
	import com.superwulei.view.components.UserList;
	
	import flash.events.Event;
	
	import org.puremvc.as3.patterns.mediator.Mediator;

	public class UserListMediator extends Mediator
	{
		private var userProxy:UserProxy;
		
		public static const NAME:String = "UserListMediator";
		
		public function UserListMediator(viewComponent:Object)
		{
			super(NAME, viewComponent);
			userList.addEventListener(UserList.USER_DELETE,onDelete);
			userProxy = facade.retrieveProxy(UserProxy.NAME) as UserProxy;
			userList.users = userProxy.users;
		}
		
		private function get userList():UserList{
			return viewComponent as UserList;
		}
		/* 删除用户监听器 */
		private function onDelete(event:Event):void{
			deleteUser();
		}
		/*删除用户方法*/
		private function deleteUser():void{
			sendNotification(ApplicationFacade.USER_DELETE,userList.selectUser);
		}
		
	}
}

 关于Mediator再补充一下,在每个Mediator中会看到有一个公有的静态的常量字符串,这个字符串用来表示Mediator的类名。同样的在Proxy和Command中你也会看到,这样就可以通过facade的retrieveMediator、retrieveProxy和retieveCommand来检索对象。

 

关于Model层要记住:一个MXML可视控件对应一个Mediator,Mediator本身不处理操作但它会发送Notification(发送出去的Notification会自动被执行),关于界面上的操作采用监听的方式即addEventLisentner。


上一篇

下一篇

分享到:
评论

相关推荐

    [转]pureMVC简单示例及其原理讲解

    【标题】"PureMVC简单示例及其原理讲解"涉及的是一个开源的、跨平台的MVC(Model-View-Controller)框架——PureMVC。PureMVC以其轻量级和高度可扩展性,在开发中得到了广泛应用。这篇博客文章通过一个简单的示例,...

    可以运行的puremvc的登陆实例.

    通过学习这个实例,开发者可以更好地理解PureMVC框架的工作原理,以及如何在实际项目中应用它来组织代码和实现业务逻辑。这对于提升ActionScript或Flex开发者的技能和提高代码复用性非常有帮助。

    PureMvc实例 PureMvc第一个实例

    5. **通知(Notifications)**:PureMvc使用`Notification`对象作为不同层间通信的载体,例如`LOGIN_REQUEST`和`LOGIN_SUCCESS`通知分别用于触发登录和通知登录结果。 6. **门面(Facade)**:作为全局的单一访问点...

    PureMVC框架实例

    **PureMVC框架详解** PureMVC是一种轻量级、模型-视图-控制器(Model-View-...通过学习和实践"PureMVCExample"中的示例,你可以深入理解PureMVC的工作原理,并将其应用到自己的项目中,提升开发效率和代码质量。

    PureMVC 中文版

    标题 "PureMVC 中文版" 指的是 PureMVC 框架的一个中文版本,这是一款广泛应用的开源框架,特别设计用于构建富互联网应用程序(RIA),尤其是基于Adobe Flex和ActionScript 3的项目。PureMVC 提供了一种模块化、结构...

    pureMVC架构详细讲解

    6. **Larena2.0与3.0APP框架差异——pureMVC架构的解析与仿制.ppt**:这个文件可能详细分析了Larena应用程序框架在2.0和3.0版本中如何采用PureMVC架构,并可能讨论了它们之间的差异和改进之处。 7. **pureMVC类成员...

    PureMVC简单例子

    这个“PureMVC简单例子”是为了帮助初学者理解PureMVC框架的基本原理和实际操作流程。在这个例子中,我们将深入探讨各层的职责以及它们之间的通信机制。 首先,我们来了解一下MVC模式。MVC模式是一种软件设计模式,...

    puremvc实例+中文文档

    压缩包内的中文文档提供了PureMVC框架的详细解释,包括基本概念、使用方法、示例代码和最佳实践,对于初学者来说是非常有价值的参考资料。 通过学习和使用这个PureMVC实例及中文文档,开发者能够更好地理解如何在...

    pureMVC源代码

    纯MVC(PureMVC)是一个轻量级的框架,用于构建基于模型-视图-控制器(Model-View-Controller)设计模式的应用程序。...通过研究这个示例,你可以更好地理解PureMVC的工作原理和如何在实际项目中应用。

    Unity3D客户端PureMVC框架视屏讲解

    Unity3D客户端PureMVC框架视屏讲解是一个深入解析如何在Unity3D环境中应用PureMVC框架的教学资源。PureMVC是一种轻量级、模块化的前端框架,它为游戏开发提供了一种组织代码的结构,使得项目更易于维护和扩展。在...

    PureMVC登陆例子

    《PureMVC登录示例详解》 在软件开发中,框架的选择往往对项目的架构和可维护性起到关键作用。PureMVC,一个轻量级、跨平台的MVC(Model-View-Controller)框架,因其简洁的设计和强大的组织能力,受到了许多开发者...

    PureMVC_CSharp.zip_csharp_pureMVC_pureMVC C_pureMVC C#_疯铮铮

    PureMVC是一个开源的、轻量级的框架,主要用于构建多层应用架构,它遵循了经典的Model-View-Controller(MVC)设计模式。在C#版本中,PureMVC为开发者提供了一种规范化的、可扩展的方式来组织代码,使得项目更易于...

    PureMVC总结(附Hello World含PureMVC源码代码和文档)

    6. **Hello World示例**:通常会通过一个简单的“Hello World”程序来演示PureMVC的基本工作流程,展示如何创建并运行一个完整的MVC循环。 7. **源码分析**:可能对PureMVC的源码进行解析,帮助理解其内部机制和...

    pureMVC_AS3

    - 示例代码:PureMVC官方仓库包含不同语言版本的示例项目。 - 开发者社区:加入PureMVC开发者社区,与其他开发者交流经验。 通过理解和实践PureMVC AS3,开发者能够构建出高效、模块化的ActionScript 3应用程序,...

    Unity 专用 pureMVC

    PureMVC是一个轻量级的框架,其核心概念包括模型(Model)、视图(View)和控制器(Controller)。在Unity中,这些概念被转化为具体的类和接口,使得开发者可以遵循MVC设计模式来编写代码。 1. 模型(Model)层:这...

    PureMVC中文教程

    1. **MVC模式介绍**:讲解MVC模式的基本思想,为何选择MVC以及PureMVC是如何实现这一模式的。 2. **PureMVC架构**:详细介绍PureMVC的四个核心组成部分:Model(模型)、View(视图)、Controller(控制器)以及...

    PureMVC_study

    PureMVC是一款轻量级的框架,主要应用于Flex和AS3开发,它基于经典的Model-View-Controller(MVC)设计模式,为开发者提供了一种组织代码、解耦组件的强大工具。PureMVC的核心理念是通过分离业务逻辑、用户界面和...

    Lua实现PureMVC

    这个是一个根据AS3(ActionScript 3) pureMVC而转换过来的lua pureMVC。所有的接口完全跟AS3版本一致。 若是想使用,可以直接查看网上的pureMVC 文档,我并未对任何一个函数改名或者更换参数位置。 注意,这个PureMVC...

    PureMVC 各种例子以及中文文档

    PureMVC是一个开源的、轻量级的、跨平台的模型-视图-控制器(Model-View-Controller,MVC)框架,适用于构建各种类型的应用程序,尤其在富互联网应用程序(Rich Internet Applications,RIA)领域中表现突出。...

Global site tag (gtag.js) - Google Analytics