利用Flex 4.5 SDK和Flash Builder 4.5开发web和移动参考应用程序

其它附加要求的产品

• Android 2.2+ 或Android 3.0+ 设备

在Flash Builder 4 和Flex 4 SDK发布仅仅一年之后，相应的新版本Flash Builder 4.5和Flex 4.5 SDK已经推出！ Flex 4.5 SDK和Flash Builder 4.5的关键功能是提供构建满足Google Android、Blackberry Tablet OS以及Apple iOS操作系统要求的移动应用程序的能力。 此外，Flex 4.5 SDK还引入用于大型应用程序开发的新Spark组件和改进功能，而Flash Builder 4.5引入数十个用于更快速开发ActionScript和MXML的、可提升编码效率的新功能。 如需了解关于Flex 4.5 SDK的新功能和改进功能的更多信息，请查阅Deepa Subramaniam的文章。 此外，如需了解Flex 4.5 SDK的新功能，其中包括面向开发人员的新功能，以及使用 Flash Catalyst CS 5.5的新工作流程等，请查阅Andrew Shorten的文章。 如果你还想详细了解Flex 4.5 SDK和Flash Builder 4.5的新移动功能，请查阅Narciso Jaramillo的概述文章。

在本文中，我们将讨论如何构建同时能够满足传统web和移动部署要求的应用程序。 我们将讨论我们所构建的三个参考应用程序，它们均能够以传统的web应用程序方式在浏览器上运行，同时也能够在移动设备上运行。 上述三个应用程序分别是Shopping Cart、Expense Tracker以及Sales Dashboard 应用程序。 当我们为移动、平板电脑设备以及web构建Flex应用程序时，我们还将讨论特定的注意事项。 此外，我们将讨论我的团队是如何构建这些应用程序以便能够在web和设备项目之间共享相关代码。 最后，当为所有形状因素（form factor）构建应用程序时，我们还将讨论设计人员需要考虑的性能注意事项。

尽管Flash Builder 4.5支持Flash Builder 4支持的所有项目类型，然而它还引入额外的Flex项目类型，其中包括Flex Mobile项目和ActionScript Mobile项目。 这些移动项目非常切合移动应用程序开发的需求。 Flex Mobile项目支持能够在移动设备上使用的移动“安全”Flex组件。 此外，Flash Builder 4.5在你创建一个新的移动项目时，无论它是Flex Mobile项目还是ActionScript Mobile项目，它均能够为你提供帮助。 如需创建一个新的Flex Mobile项目，请选中File > New > Flex Mobile Project。 你将看到Flash Builder将协助引导你创建和配置一个新的移动项目，其中包括你希望创建的移动应用程序的名称和类型。 Shopping Cart、Expense Tracker和Sales Dashboard 移动应用程序均使用基于View的应用程序类型。 这意味着应用程序的每个视图均由其自己的View类进行管理，并且所有视图均由一个ViewNavigatorApplication进行控制。 此外，Shopping Cart和Expense Tracker平板电脑应用程序也可以由ViewNavigatorApplication控制。 但是，Dashboard平板电脑应用程序是一个标准的AIR应用程序，它使用SplitViewNavigator来管理它的视图。

Flash Builder 4.5将帮助为你的基于视图的应用程序创建stub视图。 然后，你可以为你的应用程序添加后续的视图。 每个stub视图均源自spark.components.View类。 视图能够知道如何显示数据以及将信息注入到相应的Action Bar中。 Action Bar 是位于每个应用程序顶部的导航UI。 它能够提供关于当前视图的相关信息（contextual information），其中包括当前视图的标题和能够将用户导航到应用程序中特定位置的操作按钮。

Shopping Cart 移动项目将其所有的子视图放置于com.adobe.mobileshoppingcart.view包中。 在此你可以看到在Shopping Cart移动应用程序中为每个后续视图创建的UI的MXML类。 例如，一旦用户选中一个购买条目，CartView.mxml就是相应的checkout视图，或 ItemDetailsView 是个体条目的detail视图（参见图1）。

Flash Builder 4.5 为你提供你需要的所有工作流程，以便你能够开发各种项目目标需要的应用程序，其中包括部署Adobe Flash Player的web，或部署Adobe AIR的桌面或移动设备。 对于我们开发团队来说，我们决定使用一个应用程序架构来创建Shopping Cart、Expense Tracker和Sales Dashboard应用程序的web和移动设备版本。 就在开发团队中进行代码安排以及将UI代码与服务层代码进行分离来说，该应用程序的架构设计非常合理。 此外，该架构允许我们在我们的web和移动设备项目之间共享代码。 （注：不一定必须使用一个应用程序架构在web和移动项目之间共享代码，但在我们的范例中，由于开发团队采用分散的方式，因此采用应用程序架构实际上是有益的）。

我们选择的架构以松散地方式基于一种传统的模型视图表示器（Model View Presenter (MVP)）架构。 MVP使用被动视图（passive view）并且利用一个正规的控制器在视图之间传递状态和UI信息。 通过将所有逻辑代码放置于视图文件之外，我的团队和我本人均能够在多个项目中重新使用核心应用程序代码。

FXP与FXPL的比较

在多个项目之间（在我们的范例中，为web项目和移动项目之间）共享的核心应用程序代码全部包含于一个Flex Library Project (FXPL)。 例如， MobileShoppingCart.fxp、ShoppingCartTablet.fxp以及ShoppingCartWeb.fxp 均在ShoppingCartLib.fxpl中进行链接。 ShoppingCartLib.fxpl 包含所有在web和移动设备版本之间相关的共享代码，其中包括服务层和utility类。 相似地， DashboardMobile.fxp、DashboardTablet.fxp以及DashboardWeb.fxp均在DashboardLib.fxpl和DashboardChartLib.fxpl中进行链接。 这些FXPL文件包含用于在Sales Dashboard web和设备应用程序中处理绘图组件和数据管理的共享代码。 最后，CRUDMobile.fxp、CRUDTablet.fxp和CRUDWeb.fxp均链接到共享的库项目CRUDLib.fxpl。

当使用一个Flex Library Project时，一般的规则是应该包含所有的数据模型、控制器、服务、事件和utility类。 通常，库项目不应该包含任何UI特定的代码，除非它能够跨不同形状因素共享该UI。 Flex Mobile项目的任务是像MobileShoppingCart.fxp一样添加移动特定的UI代码，而Flex项目的任务是像ShoppingCartWeb.fxp一样添加浏览器（或桌面）特定的UI代码。 这一方法能够帮助确保获得良好的封装性能以及在跨不同形状因素的情形下重新使用共用代码。

表示器

表示器（presenter）是应用程序架构的摇滚明星。 应用程序的每个功能状态均具有一个presenter类。 表示器的实例可以注入到视图文件中，采用的方法是通过带有Swiz等框架的元数据注入操作、源自Singleton模型的引用或通过构造器传递表示器。 在上面列出的范例项目中，main类的表示器的实例引自一个Singleton模型，而条目渲染器的表示器是利用controller类联机创建的。 例如，MobileShoppingCart.fxp的ItemDetailsView.mxml类在第36行包含一个至presenter变量的引用。 视图正是通过该presenter对象对该应用程序的业务逻辑（business logic）进行引用。 类似地，每个web和移动应用程序的List组件可以显示一个presenter对象列表。 而MobileShoppingCart.fxp的MainView.mxml的List控件可以显示一个用户正在查看的条目列表。 这些数据条目均是由视图显示的presenter对象。

视图显示的所有属性可以由相应的presenter保存。 Presenter通过事件与视图进行通信。 这是为什么每个presenter类可以对EventDispatcher进行扩展的原因。 请查看包含于ShoppingCartLib.fxpl 项目中的ItemPresenter类(com.adobe.shoppingcart.presenter)。 请留意ItemPresenter 是如何对EventDispatcher进行扩展，以及当改变某些设置时，它是如何派发事件的。 利用这一方式，presenter 可以暴露一个视图能够调用的方法的全局API，以便正确地显示该UI。

该 presenter 可以保存 IEventDispatcher 对象的实例，在本例中，它是控制器的实例，可以用于派发事件。 这是presenter与应用程序的业务逻辑部分进行通信的方法。 Presenter从来不保存控制器的实例，或沿着该链向上进行函数调用。 为了遵循封装规则，presenter只派发事件。 事件是presenter和controller之间的契约。

控制器

控制器能够控制应用程序不同部分之间的通信。 应用程序的状态判决是在控制器中完成的。 在应用程序启动阶段，系统将创建一个控制器的实例。 在该范例项目中，请检查WebShoppingCart.mxml和MobileShoppingCart.mxml中的preinitalizeHandler。 这是为Shopping Cart应用程序的web和移动版本所创建的controller的位置。 该控制器可以创建presenter对象的实例并且将它们保存于相应的模型中。 此外，该控制器可以在该模型中设置所有属性。

另外，控制器还能够侦听来自presenter的事件。 例如，当一个presenter发出一个事件以改变当前屏幕时，正是控制器处理该事件。 然后，控制器将进行如何处理presenter的请求的逻辑判决。 控制器可以在服务层执行一个调用或在presenter中直接设置属性。

需要在多个presenter中保持同步的属性有时候可以缓存于相应的模型中，但在大部分情形下，每个presenter能够保持其自己的状态和属性。 你无法让模型保持状态并且根据MVP命令将状态变化信息广播到presenter是没有道理的，但根据我的经验，这仅仅添加另一层的复杂性而没有带来多少益处。

有时候，我发现依据项目目标，控制器的行为需要有所不同。 在这些情况下，我会扩展控制器的功能并且覆盖需要定制实现的方法。 这一扩展功能的控制器是我在针对特定项目类型的主初始化期间例示的类。

视图

视图代码通常不能在项目类型之间共享。 或者说，Flex移动项目包含移动特定的UI，而Flex项目包含非移动特定的UI 这样，用户界面可以对应用程序正在运行的特定形状因素进行精心地调试。

为你的应用程序需要支持的每个屏幕目标，创建一个新的Flex或 ActionScript项目。 相似的屏幕目标，例如移动手机和平板电脑，能够根据你的应用程序的需求使用相同项目，尽管Flex的确能够支持特别为智能手机及平板电脑创建的UI。

视图特定的UI代码（MXML 文件、CSS 式样表、图像和字体等组件）应该在每个项目中创建。 尽管大多数视图代码均是为项目的目标形状因素特别创建的，但所有的核心应用程序代码均能够共享。 每个你在你的项目中创建的新视图均能够通过presenter与应用程序的其它部分进行通信。 于在视图中没有保存逻辑代码，因此在项目之间利用视图复制代码的需求很少。 相反，你可以与presenter的属性进行绑定并且在presenter进行方法调用以响应用户的手势操作（gesture）。

模型

模型可以用于存储presenter的实例。 在控制器和视图中均可引用presenter的实例。 模型能够保存presenter的实例，这样控制器和视图均能够访问相同实例。

图绝不能在模型中引用属性。 相反，视图只应该知道其自己的presenter（也许还知道状态枚举或相应的声明）。 对直接来自视图的模型对象的引用将会打破封装的模式。 简而言之，一个视图应该知道的唯一契约（contract）是相应的presenter的契约。

如果你正在使用Swiz等框架，你可以将相应的presenter注入到你的视图中，然后在相应的模型中先行保存它们。 Swiz框架能够为你创建和管理presenter的实例。

服务层

我强烈建议使用由接口定义的服务委托（service delegate）。 这样可以方便地变换到不同的服务实现方式，而无需改变任何其它应用程序代码。 如果你在应用程序开发的初期正在开发模拟的或当前未完成的服务，这一方式特别有用。

在我们使用过的架构环境中，控制器能够保存服务对象的实例。 控制器能够调用服务对象并且侦听响应。 我们使用一个AsyncToken作为侦听结果的服务契约（service contract）。在本例中，很容易发现各种故障。 在CRUDTablet.fxp中，如果你查看一下ExpenseItemsSQLLiteService.as，那么你能够看到该方法是如何让我们轻松地切换到使用SQLLite来存储我们的数据的。

你应该与设计人员配合为你的应用程序的UI找到外观和互动模式，不论它是否是目标的web、移动、平板电脑或桌面应用程序 我们的团队已经与设计人员协作设计每个视图，特别是为移动和平板电脑项目提供视图设计。 我们的设计人员已经花费时间认真思考用户与应用程序运行的移动或平板电脑设备互动的方式、各种不同设备的屏幕尺寸和每英寸像素密度以及在使用移动或平板电脑设备时用户习惯的导航模式。 利用所有这些信息以及Flex提供的便利工具，我们能够选定一个视觉愉悦、易于使用Flex实现的设计方案。

与设计人员协同工作

一个优秀的用户体验设计人员和视觉设计人员能够将应用程序的功能从表现一般转变为令人惊奇。 设计人员和开发人员之间的良好沟通要求形式和功能之间的平衡，这样将会使得应用程序不仅易于使用而且外观和性能均出类拔萃。 依据我们的经验，许多组织机构将用户体验设计与视觉设计混为一谈。 常常用户体验设计人员的角色被忽视，因此这样的任务落到了视觉设计人员或开发人员的肩上。 用户体验设计人员应该花费时间分析如何与应用程序互动，其中包括数据和应用程序状态的显示和导航方式等。 依据我的经验，具有专门负责用户体验的设计人员或专家的项目能够开发出性能更好的应用程序。

在我们项目中，web项目均具有由视觉设计人员利用Adobe Illustrator CS5 或Adobe Fireworks CS5创建的线框（wireframe）。 然后，通过使用Flash Catalyst CS 5.5或开发人员基于视觉设计人员提供的线框为Flex组件手工创建的Spark皮肤，可以将线框转换为Flex的功能代码。 此外，Flash Builder Wireframe主题特别适合用于为处于早期阶段的应用程序画出一个简单的UI。 如需了解关于如何使用Flash Builder 4.5和Flash Catalyst CS 5.5 为你的项目开发皮肤和组件的更多信息，请查阅Jacob Surber撰写的相关文章。

植皮

Flex 4引入的植皮架构使得创建自定义视图易如反掌，无论这些视图用于你的移动项目或web项目。 如需了解关于这一新的植皮架构（名称为Spark）的信息，请参阅相关的概述文章。

Flex 4.5 SDK的所有移动组件和功能均基于Spark建立的。 所有为Flex SDK 4.5的移动用途而优化的组件均包含特定的移动皮肤。 基于性能方面的原因，这些皮肤均使用ActionScript创建。 这些移动皮肤是轻量级的并且没有默认的Flex 4皮肤一样多的暴露式样。 对于大多数移动项目，我们使用ActionScript 3创建了新的皮肤，不过，我们还能够在某些位置使用MXML皮肤。 根据一般经验，基于MXML的Flex Mobile 项目的皮肤的性能还算可以，特别是在不经常使用的情形下。 但是，如果你开始关注性能问题，则需要更换为基于ActionScript的皮肤以便获得更多的性能增益。 由于平板电脑通常具有较快的处理器，因此，相比于手机应用程序来说，我们能够使用更多的皮肤MXML。 对于大多数Shopping Cart、Expense Tracker和Dashboard移动项目，当为移动组件创建新的皮肤时，我们会扩展默认的ActionScript皮肤而不是默认的MXML 皮肤。

通常在皮肤文件中编写编程式的绘图代码是将视觉设计转换为Flex的最佳方式。 这在开始时似乎单调乏味，但不久之后它将成为习惯。 这也意味着你已经获得更好的性能！ 在大多数情形下，在皮肤文件中人工绘制代码将会比嵌入组件生成更为悦目的外观皮肤。 即使你不希望使用纯ActionScript 编写相应代码，你也可以使用FXG。 一般来说，在Flex移动项目中推荐使用FXG。 注意，在Shopping Cart移动项目中，大多数的皮肤是利用FXG创建的。 在应用程序的生命周期中，利用这一方式创建的皮肤面积较小并且更易于维护。

对于不能通过FXG轻易重新创建的式样，使用外部组件是必要的。 尽管Flex支持加载和嵌入各种类型的组件，但某些格式常常比其它格式表现更好。 对于静态矢量组件，FXG是最佳选择。 对于静态位图图形，JPG文件通常是最小和最易于使用的文件。 如果可能，透明的位图图形应该重建为矢量工艺图。 这是一个促进性能改善的好方法。 一般来说，鼓励视觉设计人员较少使用位图图形是一个好主意。

数据感知控件非常重要并且经常用于Flex项目。 在所有的移动参考项目中，List可以用于显示数据并且用户能够与List互动以便更深入地研究应用程序。 类似地，web项目可以使用List和其它可以显示数据和最终用户的相关信息的类似List组件。

Spark List 组件已经在Flex 4.5 SDK中针对移动用途进行了优化。 此外，Spark DataGrid通过Flex 4.5 SDK首次推向市场。 在两种情形下，你必须了解如何创建组件用来显示数据的高性能条目渲染器。 条目渲染器通常是降低List和基于List的组件的互动性和平顺性的罪魁祸首。 除此之外，你可能还希望避免为列表添加DropShadow等过滤器，因为当整个列表滚动时，它必须以位图的格式进行高速缓存。 下面章节将为你提供如何创建与Spark Lists和Spark DataGrids一起使用的高性能条目渲染器的技巧。

在Web Shopping Cart 应用程序中编写快速渲染器

条目渲染器是一个定义用于显示与一个基于List的组件绑定的数据的类。 当滚动一个Spark List时，条目渲染器需要频繁地重新绘图。 这一重新绘图操作有时候可能会降低你的应用程序的感觉速度。 花费精力编写高效和智能的条目渲染器能够极大地改善你的移动或非移动应用程序的List的滚动体验。

在Shopping Cart web项目中，我们使用了几款定制的条目渲染器。 让我们看一下ShoppingCartWeb.fxp项目中的ItemPreviewListRenderer.mxml。 注意，该条目渲染器不含外部的FXG元素，没有使用过多的数据绑定并且没有嵌套太多的容器或Group。 这些均是创建高性能的条目渲染器的良方，无论它们是否用于移动或非移动List。

在默认情形下，Spark List 组件将属性useVirtualLayout 设置为true。 这意味着当新的数据条目滚动到视图时，条目渲染器将被重新使用。 当显示和浏览一个很长的数据列表时，这是非常有用的功能。

当创建或重新使用一个条目渲染器时，可以利用需要被显示的新条目对相应的数据属性进行设置。 为了管理该数据设置，你需要覆盖该数据属性的setter。 在ItemPreviewListRenderer.mxml中，你将注意到相应的数据属性实际上是一个presenter 对象的实例。 当进行设置时，该数据属性扮演的角色是一个ItemPresenter并且被设置为相应presenter类的属性。 反过来，视觉组件与presenter的属性进行绑定并且在presenter中进行方法调用。 这是一个关于如何使用presenter进行逻辑封装的功能强大的范例。

在Mobile Shopping Cart 应用程序中编写快速渲染器

当开发Shopping Cart移动项目时，必须十分关注对条目渲染器的优化，这些渲染器可以用于包含一个Spark List 组件的每个视图。 但是，不推荐在Flex移动项目中使用你熟悉的、在web和桌面Flex项目中使用的默认Flex ItemRenderer类。 取而代之的是，引入了新的条目渲染器类，它们特别用于移动应用程序的优化。 其中包含一个用于显示文本的默认移动渲染器LabelItemRenderer，以及一个用于显示文本和图像的默认移动渲染器IconItemRenderer（参见图2）。

LabelItemRenderer

当你为用于一个Flex Mobile项目的List组件创建一个简单文本条目渲染器时，你应该使用的base类是LabelItemRenderer。 LabelItemRenderer从UIComponent扩展而来并且比ItemRenderer小得多，因为ItemRenderer 从Group扩展而来，因此承担更多份量。 LabelItemRenderer是用于Mobile Flex Project的List组件的默认条目渲染器。 它可以渲染一个如上面截屏显示的单一文本元素。 LabelItemRenderer继承了在父List组件中设置的labelField属性并且在一个名称为label的文本元素中显示了相应的文本。 该标记是一个StyleableTextField的实例。 StyleableTextField扩展了TextField的功能，并且顾名思义，提供了将CCS式样应用于控制文本显示的机制。 尽管TLF文本在web和桌面应用程序中用途很大，但TextField在移动场景中表现更佳。 在移动应用程序中，当进行大量文本滚动操作时，TextField尤其有用。

为获得创新的最快滚动性能，请选择LabelItemRenderer。 当编写你自己的条目渲染器时，从LabelItemRenderer生成子类。 一般而言，你应该模仿在LabelItemRenderer中使用的方法和原则，例如用于处理测量和布局的程序代码以及解决过分使用数据绑定的灵敏度等。

IconItemRenderer

IconItemRenderer由LabelItemRenderer扩展而来。 除了由LabelItemRenderer提供的文本显示功能之外，IconItemRenderer 还能够提供附加的元素显示功能，例如：

• 标签（label）
• 消息（message）
• 图标（icon）
• 装饰者（decorator）
• iconPlaceholder

label元素与在LabelItemRenderer中的元素相同，它能够显示与渲染器绑定的文本。 message显示元素是一个二级（并且是可选的）文本显示元素并且也是一个StyleableTextField的实例。

icon显示元素是一个BitmapImage组件的实例。BitmapImage是在Flex 4.5 SDK中添加的元素，它的性能更强，因为它能够高速缓存正在显示的可视组件。icon元素是图像，在默认情形下它在条目渲染器的左侧显示，如上图所示（参见图3）。

此外，decorator元素也是BitmapImage的一个实例。 它通常被设置为人字形图标（chevron icon），并且在默认情形下，在条目渲染器的右侧显示。 推荐将decorator设置为一个嵌入图像组件以便获得最佳性能。

iconPlaceholder也是BitmapImage的一个实例。 当icon图像正在加载或icon图像丢失时，显示的正是该图像。 与decorator一样，推荐对iconPlaceholder的组件进行嵌入以便获得最佳的性能。

当你需要对Mobile List的条目渲染器进行定制操作时，你拥有三个选项：扩展UIComponent，扩展LabelItemRender或扩展IconItemRenderer。 在Shopping Cart 移动项目中，查看com.adobe.mobileshoppingcart.view.renderer 包中的 ItemPreviewImageRenderer.as。 该条目渲染器从IconItemRenderer扩展而来，它可以充分利用现有定义的显示元素。 我仅仅设置了必要的属性，然后我获得了一个运行平顺的滚动List。

使用Spark DataGrid

在Expense Tracker web 项目中，我们使用了Flex 4.5 SDK新增的Spark DataGrid功能。 park DataGrid对MX DataGrid功能进行了许多改进。 它通过一个富Spark植皮契约（rich Spark skinning contract）完全支持视觉定制功能。 此外，Spark DataGrid同时支持页眉渲染器和条目渲染器，它完全支持缩放和排序等高级栏功能，并且完全可访问和可编辑。 通过查看CRUDWeb.fxp的DataGridView.mxml，你可以看到运行中的DataGrid。

为DataGrid定义栏（columns）

Spark DataGrid 具有一个类型IList的columns属性。 该columns列表应该包含GridColumn对象。 在Expense Tracker web 应用程序中，用户能够通过一个settings控件打开和关闭栏。

在上述的架构中，presenter可以保存视图的使用状态。 在本例中，presenter能够保存当前处于打开状态（用户可见的状态）的栏的列表。 由于GridColumn属于一个视图对象类别，因此GridColumn不能满足被放置到共享的 CRUDLib库项目中的标准以便与Expense Tracker移动项目共享。

为了应对这一情形，我制作了一个新的界面和模型对象：

IGridColumnModel和GridColumnModel。 IGridColumnModel是一个只包含数据的GridColumn视图对象的呈现。 主presenter类能够在columnList ArrayCollection中保存GridColumnModel对象的一个列表。 该视图依次侦听columnList ArrayCollection的变更，然后使用一个自定义factory类创建GridColumn视图对象的实例。 该factory类的名称为GridColumnFactory并且它具有一个名称为 buildGridColumn()的静态方法，该方法收到一个IGridColumnModel对象并且返回一个GridColumn。 这样所有视图代码均能够保留在合适的项目中并且相应的状态仍然能够保存在共享的presenter代码中。

与其它条目渲染器一样，当创建DataGrid条目渲染器时应该关注相应的效率。 下面是若干创建高性能DataGrid条目渲染器的技巧：

• 在GridColumn中创建formatter对象，而不是在条目渲染器中直接创建它。 这将会减少需要创建的formatter对象的数量，此外，GridColumn本身具有支持应用formatter的功能。 利用这一支持功能，GridColumn能够对条目渲染器的label属性进行格式化。
• GridItemRenderers应该使用prepare()方法，而不是设置数据以便对渲染器进行初始化并且对更新进行处理。
• 不要过多地对容器进行嵌套操作或将不必要的显示元素添加到一个DataGrid的条目渲染器中。 为修整完好的条目渲染器保留相应的显示列表是改善性能的关键所在。

尽管Flex Mobile项目需要Spark组件，但有一个例外，就是允许使用 ColumnChart, BarChart, PieChart等MX绘图组件。 当你在Flash Builder 4.5中创建一个新的Flex Mobile项目时，绘图组件已经包含于该项目的库路径，因此这些组件能够利用代码提示功能在设计视图中立即显示出来。 Sales Dashboard web和移动项目均使用绘图组件显示金融信息。 共享数据层以及共享UI 绘图组件均包含于DashboardChartLib.fxpl中。 这是一个范例，其中UI代码是通过一个单一的 Flex Library项目在一个web项目和一个移动项目之间共享的。 DashboardMobile.fxp和 DashboardWeb.fxp包含除了绘图组件之外的所有UI 代码，它们是web或移动形状因素（form-factor ）特定的组件（就像移动特定的条目渲染器）。

平板电脑应用程序的一个通用布局模式是Master/Detail布局。 如果你查看一下DashboardTablet.fxp项目，那么你会看到处于运行状态的该布局。 当该应用程序处于横向模式时，左侧会出现一些小视图。 单击其中一个小视图能够在右边打开一个较大的详细视图。 当该试图处于纵向模式时，左边的栏会消失并且较大的详细视图会填满整个屏幕。 现在，通过屏幕左上角的CalloutButton，你能够对该小master视图栏进行访问。 利用SplitViewNavigator容器能够很容易实现该布局。

通过查看DashboardTablet.mxml，你会看到根mxml标签是一个Application标签，而不是在其它的平板电脑项目中所见的ViewNavigatorApplication标签。 这是因为并不存在SplitViewNavigator应用程序类型。 然而，我们仍能够通过使用NavigatorContent容器保存我们的顶部导航元素来使用ViewNavigatorApplication的元素。 在NavigatorContent容器的后面，你会看到SplitViewNavigator容器。

在SplitViewNavigator属性内部，我们能够指定我们的布局是纵向还是横向模式，以及当布局处于纵向模式时，我们是否希望自动隐藏第一个视图浏览器。 该SplitViewNavigator 的内容是两个ViewNavigator。 一个用于主视图，另一个用于详细视图。 这些ViewNavigator能够获得它们的指派的第一个视图，以及像传统的移动应用程序那样能够获得推入和弹进它们之中的视图。 你可以在 DashboardTablet MXML文件顶部的goStateHandler中看到一个相应范例。

在CRUDMobile.fxp和DashboardMobile.fxp应用程序中，我们创建了一个自定义MultiSelectList组件，它能够扩展SkinnablePopUpContainer以便创建一个允许用户进行选项选择操作的模式全屏菜单（modal full screen menu）。 尽管该方法非常适用于手机设备，然而它不太适合平板电脑。 对于平板电脑来说，实际上我们具有更多的资源，因此带有许多选项的全屏模式列表并不是理想的解决方案。

为了解决该问题，我在我们的自定义MultiSelectComponent中使用了新的CalloutButton组件，你可以在DashboardTablet.fxp和CRUDTablet.fxp中找到该组件。 尽管从它的名称可以看出CalloutButton是一个控件，但实际上它是一个容器。 无论你在CalloutButton的开始和结尾标签之间放了什么，当按下相应的按钮时，它均会在Callout中显示出来。

本文仅仅给出Adobe Flash Builder 4.5和Flex 4.5 SDK的所有新功能的简介。 希望你对利用这一新版本的框架和工具能够实现的任务找到一些感觉，特别是关于创建适用于移动智能手机和平板电脑的内容。 我们感到非常高兴，因为大家安装了适用于web和移动项目的所有三个参考应用程序，梳理和分析了相关代码并且学会了用于编写快速美观的Flex代码的最佳方法和技巧！