初探PureMVC：使用PHP+MySQL+Flex结合PureMVC框架做了个Flex留言本

PureMVC框架听也听得多了，但自己一直没有着手去弄过。最近有必要学习它了，于是在各种搜索引擎找了一些资料，现在总算对这个框架有所了解。眼高手低是不行的，所以自己动手去实践一下了。OK！弄一个留言本试试看，然后自己再详细地分析了一下，希望对PureMVC框架有更深的一层了解。我写的不是教程哦，是总结。所以哪里写得不好，请原谅，也恳请您能指出哪里不好。下面只介绍了这个留言本在开始时从服务端获取数据的工作流程，先看下面那个流程图，接着奉上详细的代码以及注释，最后提供源文件下载。

 

 

Main.mxml

 

1. <?xml version="1.0" encoding="utf-8"?>
2. <!--
3.    
4.     初探PureMVC, 学习理论后, 实践最重要. 如果发现一些不恰当的地方, 请到以下地方指出来:
5.    
6.          My Blog : http://wwwflex.iteye.com/
7.           My QQ       :404441027
8.  
9.    
10.     谢谢!
11.    
12.     注意: 本例子使用了 PHP + MySQL, 为了测试成功, 请在虚拟环境下测试. 测试前, 请先创建数据库, 需要创建的数据库在 "sql" 文件夹里了.
13.           欢迎交流!
14.    
15. -->
16. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
17.     xmlns:UI="cn.riahome.guestbook.puremvc.view.UI.*"
18.     creationComplete="facade.startup( this )" fontSize="12">
19.    
20.     <!--
21.        
22.         目前分析途径: Main.mxml
23.         完整分析途径: Main.mxml -> ApplicationFacade.as -> StartupCommand.as -> ListTopicProxy.as -> ListPanelMediator.as
24.        
25.         整个pureMVC框架就是从上面那个 startup() 函数开始了, 正如其名, 它启动了整个框架.
26.         请按着 Ctrl 键点击这个函数, 进入去看代码.
27.      -->
28.    
29.     <mx:Style>
30.         .errorTip{
31.             fontSize:12;
32.         }
33.     </mx:Style>
34.    
35.     <mx:Script>
36.         <![CDATA[
37.            
38.             import cn.riahome.guestbook.puremvc.ApplicationFacade;
39.            
40.             private var facade:ApplicationFacade = ApplicationFacade.getInstance();
41.            
42.         ]]>
43.     </mx:Script>
44.    
45.     <UI:ListPanel id="listPanel" x="71" y="10" width="555" height="498"/>
46.    
47.     <UI:InsertPanel id="insertPanel" x="634" y="318" width="400" height="190"/>
48.    
49.     <UI:DetailPanel id="detailPanel" x="634" y="10" width="400" height="300"/>
50.    
51. </mx:Application>

 

ApplicationFacade.as

 

1. package cn.riahome.guestbook.puremvc
2. {
3.     import cn.riahome.guestbook.puremvc.controller.StartupCommand;
4.    
5.     import org.puremvc.as3.interfaces.IFacade;
6.     import org.puremvc.as3.patterns.facade.Facade;
7.  
8.     public class ApplicationFacade extends Facade implements IFacade
9.     {
10.         /**
11.          *
12.          * 目前分析途径: Main.mxml -> ApplicationFacade.as
13.          * 完整分析途径: Main.mxml -> ApplicationFacade.as -> StartupCommand.as -> ListTopicProxy.as -> ListPanelMediator.as
14.          *
15.          * 来到这里, 有必要说一下 MVC, 即 Model, View, Controller:
16.          *
17.          * Model:
18.          *     model => 数据! 本人觉得在 pureMVC 里, model 里有两个主角: VO(Value Object) 和 Proxy(代理).
19.          *     VO 是数据的结构, 存储数据的容器. 一条留言(TopicVO)就有ID值(id), 留言时间(addTime), 昵称(username), 内容(content)
20.          *     Proxy 是负责获得数据的. 获得数据的方式有很多种, 可以获得本地数据(swf本身里的数据), 也可以从互联网上获得数据, 当然从服务器上获得数据也是常发生的事情.
21.          *           而从非本地获得数据可以是: http, remote...
22.          *
23.          * View:
24.          *     view => 显示! 顾名思义, view 就是显示的东西. 一切要显示的东西都在这里了. 通常, 它也会有两个主角: UI 和 Mediator(中介器)
25.          *     UI 就是那些要显示的东西, 例如一个显示留言的界面(就是一个component), 一个填写留言的界面(也是一个component)
26.          *     Mediator 最最最重要的任务是处理有关 UI 的逻辑. 比如说更新 UI 上显示的数据, 或者是提交数据, 又或者是验证用户输入的数据
27.          *
28.          * Controller:
29.          *     controller => 逻辑! controller, 里头都是一个命令(Command), 一些算法, 一些逻辑就在这里头完成.
30.          *     Model 的 Proxy 获得数据后, 可能需要把这些数据进行一些处理, 那就交由 Controller 里的那些 Command 处理吧.
31.          *     Model 的 Proxy 只负责着获得数据, 具体的数据处理交给 Controller 的 Command 吧
32.          *     例如: Proxy 获得的数据可能是 变量/值 配对格式的数据, 而我需要的是 xml 格式的, 那就需要实现转化了. 转化过程就交给 command 了.
33.          *
34.          * 总的来说:
35.          *     View 用于显示东西给用户看的, 显示的数据由 Model 提供. 有时候 Model 获得的数据不一定就合 View 的胃口,
36.          *     那么 Model 先把数据交给 Controller 处理好, 处理好后再交给 View 显示出来.