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

flex 之 pruMVC 基础例子

    博客分类:
  • Flex
阅读更多
1,添加页面
<?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>


添加页面的包装类
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{
			trace("chenchaoyang");
			sendNotification("user_added",userForm.user);
		}
	}
}


2,列表删除页面
<?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);
		}
		
	}
}


3,实体类
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);
		}
	}
}


实体类的代理类:
package com.superwulei.model
{
	import com.superwulei.model.vo.UserVO;
	
	import mx.collections.ArrayCollection;
	
	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);
				}
			}
		}
	}
}


4,添加Action
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;

	public class AddUserCommand 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;
			
			if(user.isValid){
				userProxy.addItem(user);
			}else{
				Alert.show("请检查用户名和密码");
			}
		}
		
	}
}


5,删除Action
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);
		}
		 
	}
}


6,注册代理action
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());
		}
	}
}


7,注册视图action
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
		{
			var app:MyPureMVCdemo = notification.getBody() as MyPureMVCdemo;
			/* 注册View */
			facade.registerMediator(new UserFormMediator(app.userForm));
			facade.registerMediator(new UserListMediator(app.userList));
		}
	}
}


8,总注册类
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);
		}
	}
}


分享到:
评论

相关推荐

    Flex 两个小例子 Flex两个小例子

    这个库可能扩展了Flex的基础功能,例如提供了额外的UI组件、数据处理模块或者网络通信支持。 通过分析这两个例子,我们可以学习到如何在Flex中创建和管理项目结构,理解MXML和ActionScript的交互,以及如何使用或...

    Flex + Java简单例子

    【Flex + Java简单例子】是关于使用Flex与Java进行跨域数据交互的一个基础教程,主要涉及Flex客户端和Java服务器端的配置与开发。这个例子旨在展示如何通过BlazeDS库在Flex前端和Java后端之间建立通信。 首先,我们...

    flex/bison c++的例子

    flex bison使用c++方式实现的例子 flex bison使用c++方式实现的例子

    一个Flex例子自动补全

    Flex例子Flex例子Flex例子Flex例子Flex例子Flex例子

    flex加密解密小例子

    1. **Flex基础**:Flex使用MXML和ActionScript 3.0进行开发,提供了丰富的组件库和强大的图形渲染能力。MXML是一种声明式语言,用于构建用户界面,而ActionScript 3.0则负责程序逻辑。 2. **加密需求**:在Flex应用...

    flex blazeds的入门例子

    Flex BlazDS是一个强大的数据集成框架,用于在Adobe Flex客户端和Java服务器之间建立实时的双向通信...通过这个简单的例子,你可以掌握Flex与BlazDS的基础,为进一步深入学习Flex应用开发和Java后端集成打下坚实基础。

    Flex MenuBar小例子

    FLex MenuBar的小例子,可以实现下拉菜单的效果,可直接拷贝使用

    flex_oralce小例子 - flex4.rar

    1. Flex4基础:Flex4,也称为Spark架构,是Flex框架的一个重大升级,它引入了全新的组件模型和皮肤设计,使得开发者可以更加灵活地定制UI组件。主要改进包括更强大的MXML语法、更丰富的组件库以及分离视觉表现和行为...

    flex整合spring的例子

    这个例子旨在展示如何在Flex前端与Spring后端之间建立通信,以便利用Spring框架的强大功能,如依赖注入、事务管理等。 首先,Flex是一个基于ActionScript和Flash Player的开源框架,用于创建交互式的、基于Web的富...

    flex源代码资料,一些flex源代码的例子

    这些源代码例子可能是针对Flex SDK的不同版本,包括了第9、10、11、12和13章的内容,这通常意味着它们涵盖了从基础到进阶的各种主题。 在Flex开发中,ActionScript是主要的后端编程语言,它是一种面向对象的语言,...

    FLEX 平移,缩放例子

    FFLEX 平移,缩放例子FLEX 平移,缩放例子FLEX 平移,缩放例子FLEX 平移,缩放例子FLEX 平移,缩放例子FLEX 平移,缩放例子FLEX 平移,缩放例子FLEX 平移,缩放例子FLEX 平移,缩放例子LEX 平移,缩放例子

    Flex图书系统小例子

    通过深入研究这个Flex图书系统小例子,你可以进一步提升在RIA开发中的技能,为未来构建更复杂、功能更丰富的Web应用打下坚实基础。同时,它也鼓励你与其他Flex开发者交流,分享经验,共同提高。

    FLEX4控件学习例子

    在本文中,我们将深入探讨"FLEX4控件学习例子"这一资源,它是针对Adobe Flex 4开发中的控件使用的精彩示例集合。Flex是用于构建富互联网应用程序(RIA)的开源框架,它允许开发者创建交互性强、用户体验丰富的Web...

    flex和javascript交互例子

    标题"flex和javascript交互例子"指向了这个主题的核心——如何在Flex应用中调用JavaScript函数,以及反过来在JavaScript中调用Flex的方法。这种技术通常被称为“Bridge”或“跨域通信”。 在Flex中,我们可以使用`...

    flex在eclipse的例子

    这将帮助你掌握Flex开发的基础知识,例如组件使用、数据绑定、事件处理、样式定义等。同时,也可以通过调试和修改代码,进一步提高你的Flex编程技巧。记住,实践是检验和巩固知识的最好方式,所以不要怕动手尝试。

    flex HttpService 入门例子

    简单的 flex HttpService例子,可供初学者参考

    FLEX设计师基础(图文案例教学)

    《Foundation Flex for Designers》 FLEX设计师基础一书是对FLEX设计操作的入门书籍,通读本书你可以对FLEX设计有一个全面的认识并掌握一些常用技巧。本书并没有用大量篇幅描述设计细节,但本书基本涵盖了大部分常见...

    flex 关于事件的例子

    Flex是Adobe公司开发的一种用于构建富互联网应用程序(RIA)的框架,主要基于...通过理解和实践这个“flex 关于事件的例子”,初学者能够掌握Flex中事件处理的基本原理和用法,为构建交互式Flex应用打下坚实基础。

    flex拓扑展示的例子1

    在这个例子1中,我们将深入探讨Flex如何被用来创建动态、交互式的拓扑图表,以及它在IT行业中的实际应用。 Flex,全称Adobe Flex,是一种用于构建富互联网应用程序(RIA)的开源框架,基于ActionScript和Flash ...

    flex4.5.1登陆的例子

    Flex 4.5.1 是 Adobe 引入的一个版本,它是 Flex SDK 的一部分,用于构建富互联网应用程序(RIA)。...这个例子为初学者提供了学习 Flex 开发的基础,同时也可以帮助有经验的开发者快速搭建登录功能。

Global site tag (gtag.js) - Google Analytics