pureMVC简单示例及其原理讲解三(View层)
2014-03-29 18:20
525 查看
本篇说的是View层,即视图层,在本示例中包括两个部分:MXML文件,即可视控件;Mediator。
【图1】
【图2】
先看UserForm.mxml,既然要添加用户,就一定会要一个方法。你还记得么,在上一篇《pureMVC简单示例及其原理讲解——Model层 》中我们提到的UserProxy中有一个ArrayCollection类型的users属性和无返回值的addItem方法,其中users中存储UserVO,addItem方法用来向users中添加UserVO。现在我们既然要在界面通过添加按钮添加用户,我们必然要用到这个方法,但是我们不会在View层直接使用这个方法。因为pureMVC的追求是将MVC分离,而这些逻辑操作我们都会将其放入Command中,即Controller才层。但是在View层,我们也不是没有作为的。我先调一调你的胃口,不要着急,这个作为我们会在本篇接下来的部分讲。先看看userForm.mxml的代码。
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代码。
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的代码。
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>
Userlistmediator.as代码
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。
可视控件
可视控件由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的代码。
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代码。
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的代码。
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>
Userlistmediator.as代码
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简单示例及其原理讲解二(Model层)
- pureMVC简单示例及其原理讲解四(Controller层)
- pureMVC简单示例及其原理讲解五(Facade)
- 一个简单的示例讲解游戏游戏编程原理。附示例源码(转)
- 一个简单的示例讲解游戏游戏编程原理。附示例源码
- ORM,ASP.NET中ORM学习,ASP.NET中ORM学习心得,WEB2.0中ORM实现原理,Asp.net简单ORM示例源码详细讲解,Asp.net2.0:如何使用ObjectDataSource(配合ORM )
- ORM,ASP.NET中ORM学习,ASP.NET中ORM学习心得,WEB2.0中ORM实现原理,Asp.net简单ORM示例源码详细讲解,Asp.net2.0:如何使用ObjectDataSource(配合ORM )(二)
- Java swing(awt):事件监听机制的实现原理+简单示例
- Android仿百度谷歌搜索自动提示框AutoCompleteTextView简单应用示例
- Ajax -- 原理及简单示例
- Skinned Mesh原理解析和一个最简单的实现示例
- UITableView最简单的高度自适应原理
- spring事务-说说Propagation及其实现原理(传播属性示例分析)
- kmp算法实现原理及简单示例
- 一个简单的makefile示例及其注释
- IOS UIScrollView——简单示例
- JavaScript设计模式之缓存代理模式原理与简单用法示例
- 安卓WebView与H5互调的简单实现讲解(一)
- silverlight2实现播放器的简单原理及其mediaelement的属性介绍