FlashBuilder 和 PureMVC(一)

这是关于在Flash Builder  里面使用PureMVC(纯MVC)系列帖子里的第一篇。我正在为某客户端作品重温关于PureMVC的东西，所以我想，从Flash Builder的角度来讨论PureMVC， 再在其间穿插些Spark/Halo  组件 的相关知识的话，或许比写一个单纯讲PureMVC使用指南的 教程 要更有用些。
与其从零开始，我决定在现存教程的基础上进行FlashBuilder式的改进。Ahmed Nuaman 在这个网站上有个 无懈可击的教程 。其中对PureMVC的阐释可谓详尽至极。那个 应用 程序 的用途是装载并缩略显示Flickr上的 图片 。为了把教程的体积控制在合理的范围内，这个应用程序将只在一个没有滚动条的容器里显示这些图片的一个子集。

为了该系列教程的需要，Ahmed的教程内容被使用了少量Flex组件的FlashBulider重新做了一个版本。为了表现一些改动的部分，使用了Spark和Halo的混合组件。教程的每一部分都讨论了 代码 的构建过程以及它如何的不同于原教程里的内容。教程的最后我将提供除了 数据 xml以外(那是需要如前所述的你自己的Flicker  API  key才成)的每一个 文件 的压缩包。
我在此指出这个不是所谓的PureMVC教程，因此我不会重新解释PureMVC的相关概念。那也是我为什么从已经很好的涵盖了那些概念的现成教程出发来讲的原因。我将着重讨论如何在FlashBuilder环境下使用PureMVC。
就解释这么多，让我们从安装开始吧。原教程建立的是一个AS 项目 。而我的是一个连接着PureMVC .swc的Flex项目。接下来的图表显示了这个项目的文件夹。
 
建立这样一个目录的项目没什么特别的地方，虽然我经常倾向于在PureMVC项目里使用model(数据模型)，view（视图）和controller(控制器)三种文件夹(即MVC的各个部分分别建立文件夹——译者注)。对于更大型的项目，我也可能增加value-object文件夹和把mediator文件夹从views独立出来。如果有很多命令和宏命令，那就需要再进一步细分进特别文件夹里。
当我展示诸如Degrafa可用性之类例子的时候，在有限的布局元素中包含了足够多的逻辑实现。把两者都放在同一个文件夹下展示更容易让人们解构。但是对于现实中的客户端项目，我更喜欢尽可能的把布局和逻辑实现分开。出于这个原因，我倾向于用后代码模式(code-behind pattern)写Flex apps。既然 设计 师总是喜欢定制应用程序的preloader部分，那我也总是使用他们的设计。
在Flex4里定制preloaders并没有变化(我还是准备打电话问问 Adobe 到底是否还是喜欢那样的)，而这个在 另一篇帖子 里讨论过了。这里是相对于原教程第一个主要的变化——用PureMVC监视程序的loading。这个教程同样使用stage作为核心viewComponent。在这个教程里，核心viewComponent的角色将由一个Spark组件扮演。
这个Flex应用在这个教程里的布局展示如下(PureMVC1.mxml)：

1. <?xml version=”1.0″ encoding=”utf-8″?>
   
2. <s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009″
   
3. xmlns:s=”library://ns.adobe.com/flex/spark”
   
4. xmlns:mx=”library://ns.adobe.com/flex/mx” minWidth=”700″ minHeight=”500″
   
5. xmlns:comp=”components.*”
   
6. preloader=”preloader.CustomPreloader” >
   
7. <fx:Declarations>
   
8. </fx:Declarations>
   
9. <fx:Style>
   
10. @namespace s “library://ns.adobe.com/flex/spark”;
    
11. @namespace mx “library://ns.adobe.com/flex/mx”;
    
12. @namespace views “view.*”;
    
13. @font-face {
    
14. src: url(“/Library/Fonts/Arial.ttf”);
    
15. fontFamily: arialEmbedded;
    
16. fontWeight: normal;
    
17. embedAsCFF: false;
    
18. }
    
19. @font-face {
    
20. src: url(“/Library/Fonts/Arial.ttf”);
    
21. fontFamily: arialSpark;
    
22. fontWeight: normal;
    
23. embedAsCFF: true;
    
24. }
    
25. @font-face {
    
26. src: url(“/Library/Fonts/Arial Bold.ttf”);
    
27. fontFamily: arialBoldEmbedded;
    
28. fontWeight: normal;
    
29. embedAsCFF: false;
    
30. }
    
31. s|BorderContainer
    
32. {
    
33. backgroundColor: #ddddff;
    
34. borderColor: #0000ff;
    
35. borderWeight: 3;
    
36. borderStyle: “inset”
    
37. }
    
38. s|Button
    
39. {
    
40. fontFamily: arialSpark;
    
41. fontSize: 14
    
42. }
    
43. .titleStyle
    
44. {
    
45. fontFamily: arialBoldEmbedded;
    
46. fontSize: 16
    
47. }
    
48. </fx:Style>
    
49. <comp:PureMVCLayout id=”App” />
    
50. </s:Application>

复制代码

不算很多吧  
定制的preloader继续它的功能，剩下的就交给整合在component.PureMVCLayout.mxml里的PureMVC应用来做吧。我喜欢把应用前置并置于中心位置，因为那样容易定位和修改。在接下来的部分，我们将会更细致地探讨风格化和PureMVC布局等问题。