pureMVC简单示例及其原理讲解三(View层)

本篇说的是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的代码。

Userform.mxml代码   
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Panel title="Registor" xmlns:mx="http://www.adobe.com/2006/mxml">  
  3.     <mx:Metadata>  
  4.         [Event(‘add‘)]  
  5.     </mx:Metadata>  
  6.   
  7.     <mx:Script>  
  8.         <![CDATA[  
  9.             import mx.controls.Alert;  
  10.             import com.superwulei.model.vo.UserVO;  
  11.             public static const USER_ADD:String = "add";  
  12.   
  13.             public var user:UserVO;  
  14.             /* 添加用户 */  
  15.             private function addUser():void {  
  16.                 user = new UserVO(email.text, password.text);  
  17.                 dispatchEvent(new Event(USER_ADD));  
  18.             }  
  19.   
  20.             private function enableSubmit(u:String, p:String):Boolean {  
  21.                 return u != ‘‘ && p != ‘‘;  
  22.             }  
  23.         ]]>  
  24.     </mx:Script>  
  25.   
  26.     <mx:Form>  
  27.         <mx:FormItem label="email" required="true">  
  28.             <mx:TextInput id="email"/>  
  29.         </mx:FormItem>  
  30.         <mx:FormItem label="password" required="true">  
  31.             <mx:TextInput id="password" displayAsPassword="true"/>  
  32.         </mx:FormItem>  
  33.     </mx:Form>  
  34.       
  35.     <mx:ControlBar horizontalAlign="right">  
  36.         <mx:Button id="sbumitButton" label="添加"  
  37.              enabled="{enableSubmit(email.text,password.text)}"  
  38.              click="addUser();"/>  
  39.     </mx:ControlBar>  
  40. </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代码   
  1. package com.superwulei.view  
  2. {  
  3.     import com.superwulei.ApplicationFacade;  
  4.     import com.superwulei.view.components.UserForm;  
  5.       
  6.     import flash.events.Event;  
  7.       
  8.     import org.puremvc.as3.patterns.mediator.Mediator;  
  9.   
  10.     public class UserFormMediator extends Mediator  
  11.     {  
  12.         public static const NAME:String = "UserFormMediator";  
  13.                   
  14.         public function UserFormMediator(viewComponent:Object)  
  15.         {  
  16.             super(NAME, viewComponent);  
  17.             userForm.addEventListener(UserForm.USER_ADD,onAdd);  
  18.         }  
  19.           
  20.         private function get userForm():UserForm{  
  21.             return viewComponent as UserForm;  
  22.         }  
  23.           
  24.         /* 添加用户监听器 */  
  25.         private function onAdd(event:Event):void{  
  26.             add();  
  27.         }  
  28.         /* 添加用户方法 */  
  29.         private function add():void{  
  30.             sendNotification(ApplicationFacade.USER_ADDED,userForm.user);  
  31.         }  
  32.     }  
  33. }  

 在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代码   
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" title="已注册用户">  
  3.     <mx:Metadata>  
  4.     [Event(‘delete‘)]  
  5. </mx:Metadata>  
  6.   
  7.     <mx:DataGrid id="userGrid" dataProvider="{users}">  
  8.         <mx:Script>  
  9.             <![CDATA[  
  10.                 import mx.formatters.DateFormatter;  
  11.                 import com.superwulei.model.vo.UserVO;  
  12.                 import mx.collections.ArrayCollection;  
  13.                   
  14.                 public static const USER_DELETE:String = "delete";  
  15.                   
  16.                 [Bindable]  
  17.                 public var users:ArrayCollection;  
  18.                   
  19.                 public var selectUser:UserVO;  
  20.   
  21.                 private function deleteUser():void{  
  22.                     selectUser = userGrid.selectedItem as UserVO;  
  23.                     dispatchEvent(new Event(USER_DELETE));  
  24.                 }  
  25.             ]]>  
  26.         </mx:Script>  
  27.         <mx:columns>  
  28.             <mx:DataGridColumn dataField="email"/>  
  29.             <mx:DataGridColumn dataField="password"/>  
  30.             <mx:DataGridColumn dataField="regDate" width="200"/>  
  31.         </mx:columns>  
  32.     </mx:DataGrid>  
  33.     <mx:HBox textAlign="center">  
  34.         <mx:Button id="deleteButton" label="删除" click="deleteUser();"/>  
  35.     </mx:HBox>  
  36. </mx:Panel>  

 

Userlistmediator.as代码   
  1. package com.superwulei.view  
  2. {  
  3.     import com.superwulei.ApplicationFacade;  
  4.     import com.superwulei.model.UserProxy;  
  5.     import com.superwulei.view.components.UserList;  
  6.       
  7.     import flash.events.Event;  
  8.       
  9.     import org.puremvc.as3.patterns.mediator.Mediator;  
  10.   
  11.     public class UserListMediator extends Mediator  
  12.     {  
  13.         private var userProxy:UserProxy;  
  14.           
  15.         public static const NAME:String = "UserListMediator";  
  16.           
  17.         public function UserListMediator(viewComponent:Object)  
  18.         {  
  19.             super(NAME, viewComponent);  
  20.             userList.addEventListener(UserList.USER_DELETE,onDelete);  
  21.             userProxy = facade.retrieveProxy(UserProxy.NAME) as UserProxy;  
  22.             userList.users = userProxy.users;  
  23.         }  
  24.           
  25.         private function get userList():UserList{  
  26.             return viewComponent as UserList;  
  27.         }  
  28.         /* 删除用户监听器 */  
  29.         private function onDelete(event:Event):void{  
  30.             deleteUser();  
  31.         }  
  32.         /*删除用户方法*/  
  33.         private function deleteUser():void{  
  34.             sendNotification(ApplicationFacade.USER_DELETE,userList.selectUser);  
  35.         }  
  36.           
  37.     }  
  38. }  

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

 

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

pureMVC简单示例及其原理讲解三(View层),古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。