`
Supanccy2013
  • 浏览: 224938 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

pureMVC 之基本使用

    博客分类:
  • Flex
阅读更多
  pureMVC是flex的轻量级框架。下面是实例。
一,视图组件页面
1,添加用户页面: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>


2,用户用表页面UserList.mxml
<?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>


3,主页面(包含添加用户页面,和用户列表页面)MyPureMVCdemo.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
				xmlns:components="com.superwulei.view.components.*"
	creationComplete="facade.startup(this);">
	<mx:Script>
		<![CDATA[
			/*
			在页面各个组件初始化并渲染成功后调用 facade的 startup函数
			*/
			import com.superwulei.ApplicationFacade;
			//定义 私有变量 并且初始化
			private var facade:ApplicationFacade = ApplicationFacade.getInstance();
		]]>
	</mx:Script>
	<components:UserForm id="userForm" />
	<components:UserList id="userList" />
</mx:Application>


二:注册组件
1,总注册组件
package com.superwulei {
	import com.superwulei.controller.StartupCommand;
	
	import org.puremvc.as3.patterns.facade.Facade;

	public class ApplicationFacade extends Facade {
		public static const STARTUP:String      = "startup";
		public static const USER_ADD:String     = "user_added";
		public static const USER_DELETE:String  = "user_delete";

		//提供静态函数,供外界调用
		public static function getInstance():ApplicationFacade 
		{
			if (instance == null)
			{
				instance = new ApplicationFacade();
			}
			
			return instance as ApplicationFacade;
		}

		public function startup(app:Object):void 
		{
			sendNotification(STARTUP, app);
		}

		//该函数 是 该类的初始化函数,创建改类实例后会自动调用改函数
		//改函数主要是用来 注册控制器,代理等操作。
		override protected function initializeController():void 
		{
			super.initializeController();
			
			trace("呵呵,我是第一执行的函数,我很牛");
			registerCommand(STARTUP, StartupCommand);
		}
	}
}


2,启动时自动注册组件
package com.superwulei.controller
{
	import com.superwulei.ApplicationFacade;
	
	import org.puremvc.as3.patterns.command.MacroCommand;

	public class StartupCommand extends MacroCommand
	{
		override protected function initializeMacroCommand():void{
			/*
			添加子命令
			*/
			addSubCommand(ModelPrepCommand);
			addSubCommand(ViewPrepCommand);
			/* 注册添加、删除用户命令 */
			facade.registerCommand("user_added",AddUserCommand);
			facade.registerCommand("user_delete",DeleteUserCommand);
		}
	}
}


3,注册proxy组件
package com.superwulei.controller
{
	import com.superwulei.model.UserProxy;
	
	import org.puremvc.as3.interfaces.INotification;
	import org.puremvc.as3.patterns.command.SimpleCommand;

	public class ModelPrepCommand extends SimpleCommand
	{
		override public function execute(notification:INotification):void
		{
			/* 注册Model */
			facade.registerProxy(new UserProxy());
		}
	}
}


4,注册视图组件
package com.superwulei.controller
{
	import com.superwulei.view.UserFormMediator;
	import com.superwulei.view.UserListMediator;
	
	import org.puremvc.as3.interfaces.INotification;
	import org.puremvc.as3.patterns.command.SimpleCommand;

	public class ViewPrepCommand extends SimpleCommand
	{
		override public function execute(notification:INotification):void
		{
			//获取主页面 作为 app变量
			var app:MyPureMVCdemo = notification.getBody() as MyPureMVCdemo;
			/* 注册添加用户的视图 和 用户列表视图 */
			facade.registerMediator(new UserFormMediator(app.userForm));
			facade.registerMediator(new UserListMediator(app.userList));
		}
	}
}


三:控制器组件
1,添加用户控制器
package com.superwulei.controller
{
	import com.superwulei.model.UserProxy;
	import com.superwulei.model.vo.UserVO;
	
	import mx.controls.Alert;
	
	import org.puremvc.as3.interfaces.INotification;
	import org.puremvc.as3.patterns.command.SimpleCommand;

	/*
	此类是添加用户的处理类,对于此类的执行机制的理解是至关重要的。
	1,此类继承SimpleCommand,一旦facade接收到对应此类的通知名称时候会自动调用此类的execute函数
	2,execute函接受一个参数INotification,这个参数的getBody函数返回的是 发送通知时候传递的参数。
	*/
	public class AddUserCommand extends SimpleCommand
	{
		override public function execute(notification:INotification):void
		{
			//注意参数的getBody饭回来的是 调用者传递的参数。
			//回顾一下,这个肯定是UserFormMediator 中add方法中传递过来的参数 user,而这个user也就是页面上添加用户时候
			//封装的user
			var user:UserVO = notification.getBody() as UserVO;
			
			//此时调用facade中的proxy类处理添加用户
			//为什么facade能找到这个proxy类呢,对了,之前我们已经在StartupCommand 中已经注册了,是否还急的
			//addSubCommand(ModelPrepCommand);而ModelPrepCommand中自动执行函数中进行了proxy的注册,你看是不是
			//facade.registerProxy(new UserProxy());
			var userProxy:UserProxy = facade.retrieveProxy(UserProxy.NAME) as UserProxy;
			
			if(user.isValid){
				//代理类执行 添加用户操作
				//特别注意:也许你会问,就算UserProxy添加了一个用户,那么为什么下面的列表中就会显示这个用户了呢。
				//你是否还记得当年在facade中注册视图的时候初始化UserListMediator,初始化这个视图的时候有一句
				//userList.users = userProxy.users; 明白了吧。
				userProxy.addItem(user);
			}else{
				Alert.show("请检查用户名和密码");
			}
		}
		
	}
}


2,删除用户组件
package com.superwulei.controller
{
	import com.superwulei.model.UserProxy;
	import com.superwulei.model.vo.UserVO;
	
	import org.puremvc.as3.interfaces.INotification;
	import org.puremvc.as3.patterns.command.SimpleCommand;

	public class DeleteUserCommand extends SimpleCommand
	{
		override public function execute(notification:INotification):void
		{
			var user:UserVO = notification.getBody() as UserVO;
			var userProxy:UserProxy = facade.retrieveProxy(UserProxy.NAME) as UserProxy;
			userProxy.deleteItem(user);
		}
		 
	}
}


四:代理类
1,实体类:
package com.superwulei.model.vo {

	public class UserVO {

		public var email:String = '';            //电子邮件
		public var password:String = '';         //密码
		public var regDate:Date;                 //注册日期

		public function UserVO(email:String, password:String) {
			this.email = email;
			this.password = password;
			this.regDate = new Date();
		}

		/*
		验证用户信息
		email:以单词字符开始,以.cn结尾
		password:     长度大于等于6位
		*/
		public function get isValid():Boolean {
			var emailRegExp:RegExp = /^\w+[@]\w+(.com)$/;
			return (emailRegExp.test(this.email) && this.password.length >= 6);
		}
	}
}


2,代理类
package com.superwulei.model
{
	import com.superwulei.model.vo.UserVO;
	import mx.collections.ArrayCollection;
	import mx.rpc.remoting.RemoteObject;
	import org.puremvc.as3.patterns.proxy.Proxy;

	public class UserProxy extends Proxy
	{
		public static const NAME:String = 'UserProxy';
		
		public function UserProxy()
		{
			super(NAME,new ArrayCollection());
		}
		
		public function get users():ArrayCollection{
			return data as ArrayCollection;
		}
		
		/* 添加项 */
		public function addItem(item:Object):void{
			users.addItem(item);
		}
		
		/* 删除项 */
		public function deleteItem(item:Object):void{
			var user:UserVO = item as UserVO;
			for(var i:int = 0; i < users.length; i++){
				if(users[i].email == user.email){
					users.removeItemAt(i);
				}
			}
		}
	}
}
分享到:
评论

相关推荐

    PureMVC中文教程

    在压缩包内的文件“PureMVC中文教程.pdf”,我们可以期待它是一个详细的教程文档,涵盖了PureMVC的基本概念、架构、组件、使用方法以及一些实际案例。通常这样的教程会包括以下几个方面: 1. **MVC模式介绍**:讲解...

    puremvc实例+中文文档

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

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

    1. **PureMVC的安装与基本使用**:如何下载和引入PureMVC库,创建第一个PureMVC项目,设置框架的初始化。 2. **PureMVC的核心组件**:深入理解`Proxy`、`Mediator`、`Command`和`Notification`的职责和使用方法。 ...

    PureMVC 各种例子以及中文文档

    通过阅读这些文档,你可以了解到PureMVC的基本架构,包括MacroCommand、Mediator、Proxy、Notification、SimpleCommand等核心类的职责和使用方法。 标签中的"PureMVC"表明这是关于PureMVC框架的主题;"flex"和"mvc...

    基于PureMVC框架实现的Qt的一个例子

    理解PureMVC框架的基本概念并将其应用于Qt项目,可以帮助开发者更好地组织代码,降低复杂性,提高团队协作效率。通过阅读和分析PureMVC_Qt_example中的代码,你可以深入理解如何在C++环境中运用PureMVC,从而提升...

    puremvc源码分析

    例如,`org.puremvc.java.multicore.interfaces`包下的`IMediator`、`IModel`、`INotification`、`IProxy`等接口定义了PureMVC的基本组件接口。`org.puremvc.java.multicore.patterns.observer`包包含了Observer模式...

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

    这篇博客文章通过一个简单的示例,帮助读者理解PureMVC的基本结构和工作原理。 【描述】虽然描述为空,但可以推测博主Jorny Guo在文章中可能详细介绍了如何创建一个PureMVC项目,从创建模型、视图到控制器的各个...

    PureMVC简单例子

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

    pureMVC 实例

    本实例采用了一个强大的组合:PureMVC作为前端框架,BlazeDS作为通信服务器,Spring和Hibernate作为后端框架,以及MySQL作为数据库系统,构建了一个完整的应用程序,实现了基本的数据操作功能,如增删改查。...

    PureMVC客户端代码

    描述中提到,“PureMVC框架实用案例,利用PureMVC框架搭建的一个基本功能框架,可以在此基础上加以完善功能。”这意味着压缩包中的代码是一个基础的、可扩展的应用模板。开发者可以在这个基础上添加自己的业务逻辑和...

    pureMVC中英文版API附带一个简单例子

    通过阅读和理解这个例子,你可以快速掌握PureMVC的基本用法。 6. **API文档**:提供的`PureMvcHelp中文.CHM`和`pureMVC_APIen.chm`是PureMVC的API参考文档,分别有中文和英文版本。这些文档详细介绍了框架的类、...

    pureMVC开源框架,一个使用该框架的测试程序

    **PureMVC 开源框架详解** PureMVC 是一个轻量级、跨平台的框架,设计用于构建模型-视图-控制器(Model-View-Controller,MVC)结构的应用程序。它采用简单而强大的概念,使得开发者能够更高效地组织和管理代码,...

    pureMVC java版框架搭建例子

    标签"pureMVC java 框架搭建 登录"进一步明确了主题,强调了这是关于使用Java语言实现PureMVC框架,并且关注于框架的构建和一个实际的登录功能。 在"pureMVC例子"这个压缩包中,可能包含的文件有: 1. **Model** -...

    pureMVC code

    PureMVC的源码组织结构清晰,遵循MVC模式,使得初学者可以快速上手并了解软件设计的基本原则。 标签"pureMVC for objective-c源码"进一步明确了这是针对Objective-C开发者的资源。Objective-C是苹果平台上的主要...

    PureMVC教程(清晰版).doc

    **PureMVC简介** PureMVC是一个轻量级的MVC框架,它的主要目标是减少模型(Model)、视图(View)和控制器(Controller)之间的耦合性,从而提高代码的可维护性和可扩展性。该框架适用于多种编程语言,包括...

    最新PureMVC框架中文文档[官方教程]

    标题"最新PureMVC框架中文文档[官方教程]"表明这是一个关于PureMVC的最新中文参考资料,可能是由官方提供的,旨在帮助中国开发者更好地理解和使用PureMVC。官方教程通常会涵盖框架的基本概念、核心组件、最佳实践...

    pureMVC资料大全

    1. **PureMVC.doc**:这可能是官方文档的一部分,提供了PureMVC的基本概念、设计原则和使用方法。官方文档通常包含详尽的API参考、示例代码以及如何在项目中集成PureMVC的指导。 2. **PureMVC教程(清晰版).doc**:...

    pureMVC 中文框架手册

    PureMVC中文手册介绍的开发框架是一个基本的结构,允许开发者根据需求添加自定义的组件。框架基于PureMVC框架构建,旨在帮助开发出更稳定、可维护、可扩展且可重用的应用程序。为了达到这一目标,关键在于降低不同...

    项目框架Ant_PureMVC_Project.rar

    然而,由于无法直接访问该链接,我们将根据Ant和PureMVC的基本概念来探讨相关知识点。 1. **Ant**:Ant是一个Java构建工具,它的主要任务包括编译、打包、测试和部署。它使用XML格式的构建文件(build.xml)来定义...

    puremvc-js-multicore-framework-master

    除了基本的PureMVC框架,开发者还可以根据需要扩展功能,例如实现缓存机制、提供更高级别的服务层,或者利用现有的JavaScript库和框架进行集成。 总结,"puremvc-js-multicore-framework-master"项目提供了PureMVC...

Global site tag (gtag.js) - Google Analytics