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的代码。

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. <mx:Script>
7. <![CDATA[
8. import mx.controls.Alert;
9. import com.superwulei.model.vo.UserVO;
10. public static const USER_ADD:String = "add";
11. public var user:UserVO;
12. /* 添加用户 */
13. private function addUser():void {
14. user = new UserVO(email.text, password.text);
15. dispatchEvent(new Event(USER_ADD));
16. }
17. private function enableSubmit(u:String, p:String):Boolean {
18. return u != '' && p != '';
19. }
20. ]]>
21. </mx:Script>
22. <mx:Form>
23. <mx:FormItem label="email" required="true">
24. <mx:TextInput id="email"/>
25. </mx:FormItem>
26. <mx:FormItem label="password" required="true">
27. <mx:TextInput id="password" displayAsPassword="true"/>
28. </mx:FormItem>
29. </mx:Form>
30. <mx:ControlBar horizontalAlign="right">
31. <mx:Button id="sbumitButton" label="添加"
32. enabled="{enableSubmit(email.text,password.text)}"
33. click="addUser();"/>
34. </mx:ControlBar>
35. </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代码。

1. package com.superwulei.view
2. {
3. import com.superwulei.ApplicationFacade;
4. import com.superwulei.view.components.UserForm;
5. import flash.events.Event;
6. import org.puremvc.as3.patterns.mediator.Mediator;
7. public class UserFormMediator extends Mediator
8. {
9. public static const NAME:String = "UserFormMediator";
10. public function UserFormMediator(viewComponent:Object)
11. {
12. super(NAME, viewComponent);
13. userForm.addEventListener(UserForm.USER_ADD,onAdd);
14. }
15. private function get userForm():UserForm{
16. return viewComponent as UserForm;
17. }
18. /* 添加用户监听器 */
19. private function onAdd(event:Event):void{
20. add();
21. }
22. /* 添加用户方法 */
23. private function add():void{
24. sendNotification(ApplicationFacade.USER_ADDED,userForm.user);
25. }
26. }
27. }

在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的代码。

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. <mx:DataGrid id="userGrid" dataProvider="{users}">
7. <mx:Script>
8. <![CDATA[
9. import mx.formatters.DateFormatter;
10. import com.superwulei.model.vo.UserVO;
11. import mx.collections.ArrayCollection;
12. public static const USER_DELETE:String = "delete";
13. [Bindable]
14. public var users:ArrayCollection;
15. public var selectUser:UserVO;
16. private function deleteUser():void{
17. selectUser = userGrid.selectedItem as UserVO;
18. dispatchEvent(new Event(USER_DELETE));
19. }
20. ]]>
21. </mx:Script>
22. <mx:columns>
23. <mx:DataGridColumn dataField="email"/>
24. <mx:DataGridColumn dataField="password"/>
25. <mx:DataGridColumn dataField="regDate" width="200"/>
26. </mx:columns>
27. </mx:DataGrid>
28. <mx:HBox textAlign="center">
29. <mx:Button id="deleteButton" label="删除" click="deleteUser();"/>
30. </mx:HBox>
31. </mx:Panel>

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. import flash.events.Event;
7. import org.puremvc.as3.patterns.mediator.Mediator;
8. public class UserListMediator extends Mediator
9. {
10. private var userProxy:UserProxy;
11. public static const NAME:String = "UserListMediator";
12. public function UserListMediator(viewComponent:Object)
13. {
14. super(NAME, viewComponent);
15. userList.addEventListener(UserList.USER_DELETE,onDelete);
16. userProxy = facade.retrieveProxy(UserProxy.NAME) as UserProxy;
17. userList.users = userProxy.users;
18. }
19. private function get userList():UserList{
20. return viewComponent as UserList;
21. }
22. /* 删除用户监听器 */
23. private function onDelete(event:Event):void{
24. deleteUser();
25. }
26. /*删除用户方法*/
27. private function deleteUser():void{
28. sendNotification(ApplicationFacade.USER_DELETE,userList.selectUser);
29. }
30. }
31. }

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

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