使用 Flex 4.5 SDK 和 Flash Builder 4.5 构建 Web 和移动参考应用程序

目录

• 创建新 Flex Mobile 项目
• 专为在多个屏幕间实现最高代码重用率而设计
• 设计和实现您的应用程序 UI
• 为 Web 和设备项目创建快速列表
• 在 Web 和移动项目中使用 MX 图表
• 将 SplitViewNavigator 用于平板应用程序
• 为平板设备上的菜单使用 CalloutButton
• 延伸阅读

需求

预备知识

本文以 Flash Builder 4、Flex SDK 4 和 Spark 组件集的基本知识为基础。理解经典的 MCV（模型 - 控制器 - 视图）或 MVP（模型 - 视图 - 演示器）设计模式将很有用。

用户水平

中级

需要的产品

• Flash Builder（下载试用版）

示例文件

• Shopping Cart
• Sales Dashboard
• Expense Tracker

需要的其他产品

• 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 的文章。此外，要了解 Flash Builder 4.5 中的新功能，包括新的面向开发人员的功能以及使用 Flash Catalyst CS 5.5 的新工作流，请查阅 Andrew Shorten 的文章。如果您希望具体了解 Flex 4.5 SDK 和 Flash Builder 4.5 中新的移动功能，请查阅 Narciso Jaramillo 的概述文章。

在本文中，我将介绍如何构建同时适合传统 Web 和移动部署的应用程序。我们将探讨我们所构建的 3 个参考应用程序，其中每个应用程序既可在浏览器中作为传统的 Web 应用程序运行，又可以在移动设备上运行。这 3 个应用程序是 Shopping Cart 、 Expense Tracker 和 Sales Dashboard 应用程序。我们将介绍在为移动和平板设备以及 Web 构建 Flex 应用程序时的具体考虑因素。此外，我们还将介绍我的团队如何搭建应用程序，以在 Web 和设备项目之间共享代码。最后，我们将探讨在为所有形式的环境构建应用程序时应该考虑的性能因素。

创建新Flex Mobile 项目

除了支持Flash Builder 4 中可用的所有项目类型，Flash Builder 4.5 还引入了其他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 类控制，所有视图都由一个ViewNavigatorApplication控制。Shopping Cart 和 Expense Tracker 平板应用程序也由 ViewNavigatorApplication 控制。但是，Dashboard 平板应用程序是一个标准的 AIR 应用程序，使用一个 SplitViewNavigator 来管理它的视图。

Flash Builder 4.5 将帮助为您基于视图的应用程序创建存根视图。您然后可以添加您应用程序的后续视图。每个存根视图从 spark.components.View 类派生而来。视图可理解如何显示数据并将信息注入到动作栏（Action Bar）。动作栏是每个应用程序顶部的导航 UI。这提供了当前视图的上下文信息，包括当前视图的标题和可将用户导航到应用程序内的特定位置的动作按钮。

Shopping Cart 移动项目将其所有子视图组织到com.adobe.mobileshoppingcart.view包中。您可在其中看到为 Shopping Cart 移动应用程序内的每个后续视图创建 UI 的 MXML 类。例如，CartView.mxml是用户选择了要购买的商品后的结算视图，或者 ItemDetailsView 是各个商品的细节视图（参见图 1）。

图 1. 各个商品的细节视图由 ItemDetailsView.mxml 类控制。该视图知道如何将上下文信息注入到顶部的动作栏导航栏中。在本例中，动作栏中显示了当前商品的名称。

专为在多个屏幕间实现最高代码重用率而设计

Flash Builder 4.5 为您提供了为各种不同的项目目标（包括针对使用 Adobe Flash Player 部署的 Web，或针对使用 Adobe AIR 部署的桌面、平板设备或移动设备）开发应用程序所需的所有工作流。针对我们的团队，我们决定在构建 Shopping Cart、Expense Tracker 和 Sales Dashboard 应用程序的 Web 和设备版本时使用一种应用程序体系结构。此应用程序体系结构非常适合跨开发团队组织代码，以及保持 UI 代码与服务层代码分离。此外，此体系结构还允许我们在 Web 和移动项目之间共享代码。（注意：没有必要使用一种应用程序体系结构来在 Web 和移动项目之间共享代码，但对于我们这样的分布式开发团队，事实证明应用程序体系结构很有用）。

我们选择的体系结构比较松散，基于一种经典的模型 - 视图 - 演示器（MVP）体系结构。MVP 使用被动视图，利用一种正式的控制器来在视图之间传递状态和 UI 信息。通过将所有逻辑代码保存在视图文件外部，我和我的团队能够在多个项目中重用核心应用程序代码。

FXP 与 FXPL 对比

将在多个项目之间（在我们的示例中，在 Web 项目与移动项目之间）共享的核心应用程序代码全部包含在一个 Flex Library Project（FXLP）中。例如，MobileShoppingCart.fxp、ShoppingCartTablet.fxp 和 ShoppingCartWeb.fxp 都链接到 ShoppingCartLib.fxpl 中。ShoppingCartLib.fxpl 包含所有在 Web 和设备版本之间共享的相关代码，包括服务层和实用程序类。类似地，DashboardMobile.fxp、DashboardTablet.fxp 和 DashboardWeb.fxp 都链接到 DashboardLib.fxpl 和 DashboardChartLib.fxpl 中。这些 FXPL 包含在 Sales Dashboard Web 和设备应用程序中处理图表组件和数据管理的共享代码。最后，CRUDMobile.fxp、CRUDTablet.fxp 和 CRUDWeb.fxp 链接到共享库项目 CRUDLib.fxpl 中。

当使用一个 Flex Library 项目时，一般的经验规则是，数据模型、控制器、服务、事件和实用程序类都应包含在内。一般而言，库项目不应包含任何特定于 UI 的代码，除非可以在不同类型的环境中共享该 UI。像 MobileShoppingCart.fxp 这样添加特定于移动的 UI 代码是 Flex Mobile 项目的责任，像 ShoppingCartWeb.fxp 这样添加特定于浏览器（或桌面）的 UI 的代码是 Flex 项目的责任。这一实践有助于确保跨不同的环境出色地封装和重用通用代码。

演示器

演示器是应用程序体系结构中的重要部分。应用程序的每个功能状态都有一个 presenter 类。演示器的实例注入到视图文件中，既可通过使用 Swiz 等框架进行元数据注入，从一个单一实例模型引用，也可以通过构造函数传入演示器。在上面列出的示例项目中，主要类的演示器实例从一种单一实例模型引用，而项目呈现器的演示器在控制器类中动态创建。例如，MobileShoppingCart.fxp 中的ItemDetailsView.mxml类在第 36 行具有对一个presenter变量的引用。视图正是从这个 presenter 对象引用了应用程序的业务逻辑。类似地，每个 Web 和移动应用程序的 List 组件显示了一组 presenter 对象。MobileShoppingCart.fxp 的MainView.mxml中的 List 控件显示了用户正在查看的一组项。这些数据项是视图显示的 presenter 对象。

视图显示的所有属性由演示器持有。演示器通过事件与视图通信。这就是每个 presenter 类都扩展EventDispatcher的原因。请查阅 ShoppingCartLib.fxpl 项目中包含的ItemPresenter类（com.adobe.shoppingcart.presenter）。请注意，ItemPresenter扩展了EventDispatcher，并在有内容发生更改时分派事件。通过这种方式，演示器公开一个公共方法 API，视图可调用该 API 来适当地显示 UI。

演示器持有它用于分派事件的IEventDispatcher对象的实例，在本例中为控制器实例。这是演示器与应用程序的业务逻辑部分通信的方式。演示器从不持有控制器的实例，或者在此过程中执行函数调用。为了保持封装，演示器仅分派事件。事件是演示器与控制器之间的契约。

控制器

控制器控制应用程序的不同部分之间的通信。应用程序状态决策在控制器内制定。在应用程序启动时，会创建控制器的一个实例。在示例项目中，请查阅WebShoppingCart.mxml和MobileShoppingCart.mxml中的preinitalizeHandler。这是为 Shopping Cart 应用程序的 Web 和移动版本创建控制器的地方。控制器创建 presenter 对象的实例并将它们存储在模型中。此外，控制器还设置模型上的所有属性。

控制器还监听来自演示器的事件。例如，当演示器触发一个事件来更改当前屏幕时，控制器会处理该事件。控制器然后就应该如何处理演示器的请求而指定逻辑决策。控制器可以调用服务层或直接在演示器上设置属性。

需要在多个演示器之间保持同步的属性有时缓存在模型中，但在大多数情况下，每个演示器持有自己的状态和属性。如 MVP 所述，您完全可以让模型来持有状态并能够向演示器广播状态更改，但就我的经验来讲，这只会增加复杂性，而没有任何好处。

在少数情况，我会发现控制器的行为需要因项目目标不同而不同。在这些情况下，我扩展控制器并改写需要自定义实现的方法。这个扩展的控制器是我在对特定项目类型进行主要初始化期间实例化的类。

视图

视图代码常常不会在不同类型项目之间共享。但是，Flex Mobile 项目可以包含特定于移动的 UI，Flex 项目包含非特定于移动的 UI。这样，用户界面可针对运行应用程序的具体环境而调节。

为您的应用程序需要支持的每种目标屏幕创建一个新 FLex 或 ActionScript 项目。类似的目标屏幕，比如移动电话和平板电脑，可能能够使用相同的项目，具体取决于您应用程序的需要，但 Flex 确实支持专门针对智能电话和平板电脑创建 UI。

特定于视图的 UI 代码（MXML 文件、CSS 样式表、图像和字体等资产）应该在每个项目中创建。尽管大部分视图代码都是专门针对项目的目标环境而创建的，但所有核心应用程序代码都可以共享。您在项目中创建的每个新视图将能够通过演示器与应用程序的剩余部分通信。因为视图中没有保存逻辑代码，所以在项目之间复制视图中的代码的需要极少。相反，您可以绑定到演示器上的属性，在演示器上调用方法来响应用户手势。

模型

模型用于存储演示器的实例。演示器的实例同时从控制器和视图引用。模型持有演示器的实例，所以控制器和视图都可以访问相同实例。

视图绝不应该引用模型中的属性。相反，视图仅应了解此演示器（以及可能一个状态枚举或某种类似声明）。直接从视图引用模型对象会破坏封装模式。简单来讲，视图应该知道的唯一的契约就是演示器的契约。

如果您在使用 Swiz 等框架，您可以将演示器注入到您的视图中，而放弃在模型中持有它。Swiz 框架会为您创建和管理演示器的实例。

服务层

我强烈建议使用由一个接口定义的服务委托。这支持轻松切换到不同的服务实现，而不更改任何其他应用程序代码。如果您在应用程序开发的初始阶段开发模拟或还未完成的服务，这种方法将特别有用。

在我使用的体系结构上下文中，控制器持有服务对象的实例。控制器在服务对象上进行调用并监听响应。我们使用 AsyncToken 作为监听结果的服务契约；在这种情况下很容易获得故障。在 CRUDTablet.fxp 中，如果您查看 ExpenseItemsSQLLiteService.as，可以看到此方法允许我们轻松切换到使用 SQLLite 存储我们的数据。

设计和实现您的应用程序UI

您可以与设计者合作实现您应用程序的UI 的观感和交互模式，无论它针对的是Web、移动、平板还是桌面。我们的团队与设计者合作设计了每个视图，尤其是针对移动和平板项目。我们的设计者深入考虑了用户将如何与运行应用程序的移动或平板设备交互、各种不同设备的屏幕大小和每英寸密度，以及用户在使用移动或平板设备时熟悉的导航模式。有了所有这些信息，以及Flex 提供的便利性，我们能够完成既在视觉上富有吸引力，又易于通过Flex 实现的设计。

与设计者合作

优秀的用户体验设计者和视觉设计者可将应用程序从“不错”提升到“惊艳”。设计者和开发者之间的良好沟通需要在形式和功能上实现平衡，这可能带来不仅易于使用，而且具有漂亮外观和功能的应用程序！在我的经验中，许多组织将用户体验设计与视觉设计混淆在一起。在许多时候，用户体验设计者的角色被忽略了，这一任务落在视觉设计者或开发者头上。用户体验设计者将时间用于分析应该如何与应用程序交互，包括数据和应用程序状态的显示和导航。在我的经验中，有专门的设计者或负责用户体验的专家的项目会实现更优秀的软件。

在我们的项目中，Web 项目都拥有由视觉设计者在Adobe Illustrator CS5 或Adobe Fireworks CS5 中创建的线框图。线框图然后转换为功能性的Flex 代码，这通过使用Flash Catalyst CS 5.5 来完成，或者使用开发人员基于视觉设计者提供的线框图为Flex 组件亲自设计的Spark 皮肤来完成。此外，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 Mobile 项目中使用 FXG。请注意，Shopping Cart 项目中的大部分皮肤都是使用 FXG 创建的。以这种方式创建的皮肤更小且更容易在整个应用程序生命周期内维护。

对于无法通过 FXG 轻松地重新创建的作品，有必要使用外部资源。尽管 Flex 支持加载和嵌入许多类型的资产，但一些格式可能比其他格式更适合。对于静态矢量资产，FXG 是最佳的选择。对于静态位图，JPG 文件可能是最小且最容易使用的图形。在可能时，具有透明度的位图应该重新创建为矢量图。这是一条不错的性能提升技巧。一般而言，鼓励视觉设计者使用更少位图是种不错的做法。

为Web 和设备项目创建快速列表

数据感知的控件很重要，常常用在Flex 项目中。在所有移动参考项目中。列表用于显示数据，用户与列表交互来深入操作应用程序。类似地，Web 项目使用列表和其他类似列表的组件来向最终用户显示数据和上下文信息。

Spark List 组件针对 Flex 4.5 SDK 中的移动用途进行了优化。此外，Flex 4.5 SDK 中首次推出了一种 Spark DataGrid。在两种情况下，都需要理解如何创建高性能的项目呈现器供组件用于显示数据。项目呈现器常常是影响交互性及列表和基于列表的组件的平滑性的主要罪魁祸首。此外，您可能希望避免向列表中添加 DropShadow 等滤镜，因为整个列表在滚动时必须缓存为位图。以下各节将介绍创建高性能项目呈现器供 Spark Lists 和 Spark DataGrids 使用的技巧。

在 Web Shopping Cart 应用程序中编写快速的呈现器

项目迭代器是一个类，它定义来显示绑定到基于列表的组件的数据。当滚动 Spark 列表时，项目呈现器会非常频繁地重新绘制。这种重新绘制有时可能延缓您应用程序的速度。如果花时间编写有效且智能的项目呈现器，将显著改善您的移动或非移动应用程序中的列表的滚动体验。

在 Shopping Cart Web 项目中，我们使用多个自定义项目呈现器。看一下 ShoppingCartWeb.fxp 项目中的 ItemPreviewListRenderer.mxml。请注意，这个项目呈现器没有无关的 FXG 的元素，它没有过度使用数据绑定，而且它也没有嵌套太多容器或组。这些都是创建高性能项目呈现器的不错技巧，无论用于移动还是非移动列表。

Spark List 组件默认将属性 useVirtualLayout 设置为 true。这意味着项目呈现器将在将新数据项滚入视图中时得到重用。这在显示和导航较长的数据列表时非常有用。

当创建或回收一个项目呈现器时，该数据属性设置为需要显示的新项。为了管理这一数据设置，您需要改写数据属性的 setter。在ItemPreviewListRenderer.mxml中，您将会注意到，该数据属性实际上是一个 presenter 对象的实例。当设置时，该数据属性转换为一个 ItemPresenter，然后设置为 presenter 类属性。这个视觉组件进而绑定到演示器中的属性，并在该演示器上执行方法调用。这是将演示器用于封装逻辑的一个非常不错的例子。

在 Mobile Shopping Cart 应用程序中编写快速呈现器

当开发 Shopping Cart 移动项目时，我们在优化每个包含 Spark List 组件的视图中使用的项目呈现器上投入了大量精力。不建议将默认 Flex ItemRenderer 类（您可能习惯于在 Web 和桌面 Flex 项目中使用它）用于 Flex Mobile 项目中。相反，引入了新的项目呈现器类，它们专门针对移动领域进行了优化。这包括 LabelItemRenderer（一个用于显示一行文本的默认移动呈现器）和 IconItemRenderer（一个用于显示文本和图像的默认移动呈现器）（参见图 2）。

LabelItemRenderer

图 2：一个使用新 LabelItemRenderer 类的简单的 Spark 列表

您在为用于Flex Mobile 项目中的列表组件创建简单的文本项呈现器时使用的基类是 LabelItemRenderer。LableItemRenderer扩展了 UIComponent 并比ItemRenderer小得多，因为ItemRenderer扩展自Group，因此更加复杂。LabelItemRenderer是移动 Flex 项目中的列表组件的默认项目呈现器。它呈现单个文本元素，如上面的屏幕截图所示。LabelItemRenderer继承了在父 List 组件上设置的 labelField 属性，在一个名为标签的文本元素中显示文本。该标签是StyleableTextField的一个实例。StyleableTextField扩展了 TextField，从名称可以看出，它提供了一种应用 CSS 样式来控制文本显示的机制。尽管 TLF 文本非常适合在 Web 和桌面应用程序中使用，但TextField的执行性能在移动场景中好得多。TextField在移动应用程序中滚动包含大量文本的元素时特别有用。

选择 LabelItemRenderer 可开箱即用的实现最快的滚动性能。当编写您自己的项目呈现器时，可以从LabelItemRenderer派生子类。一般而言，可以复制在LabelItemRenderer中使用的实践和原则（比如编程代码），以处理度量和布局以及对数据绑定的过量使用的敏感性。

IconItemRenderer

图 3：一个使用新 IconItemRenderer 类的简单 Spark 列表

IconItemRenderer 扩展自 LabelItemRenderer。除了 LabelItemRenderer 提供的文本显示，IconItemRenderer 还提供了其他显示元素，比如：

• 标签
• 消息
• 图标
• 修饰符
• 图标占位符

标签元素与LabelItemRenderer中相同，显示绑定到呈现器的文本。消息显示元素是一个辅助（和可选的）文本显示元素，也是StyleableTextField的一个实例。

图标显示元素是BitmapImage组件的一个实例。BitmapImage已在 Flex 4.5 SDK 中得到了改进，具有更高的性能，因为它可缓存它所显示的视觉资产。图标元素是默认显示在项目呈现器左侧的图像，如上图所示（参见图 3）。

修饰符元素也是BitmapImage的一个实例。它常常设置为 V 形图标，默认显示在呈现器的右侧。建议将修饰符设置为嵌入式图像资产，以实现最高的性能。

图标占位符也是BitmapImage的一个实例。它是在加载图标图像或丢失图标图像时显示的图像。像修饰符一样，建议嵌入图标占位符资产以实现最优性能。

当您需要为移动列表自定义项目呈现器时，您有 3 个选项：扩展UIComponent、扩展LabelItemRender或扩展IconItemRenderer。在 Shopping Cart 移动项目中，请查阅com.adobe.mobileshoppingcart.view.renderer包中的ItemPreviewImageRenderer.as。这个项目呈现器扩展自IconItemRenderer，利用了所定义的现有的显示元素。我仅设置了必要的属性，具有平滑的滚动列表。

使用 Spark DataGrid

在 Expense Tracker Web 项目中，我们使用了 Flex 4.5 SDK 中新增的 Spark DataGrid。Spark DataGrid 相对于 MX DataGrid 拥有多项改进。它通过一个内容丰富的 Spark 皮肤协议全面支持视觉自定义。此外，Spark DataGrid 还支持针对同时适合页眉和项目的呈现器，全面支持高级的列功能，比如大小调整和排序，即可全面访问又可编辑。您可查阅 CRUDWeb.fxp 中的DataGridView.mxml，了解 DataGrid 的实际应用。

定义DataGrid 的列

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

在上面提及的体系结构中，演示器持有视图的所有状态。在这种情况下，演示器持有当前由用户“打开”（可见）的列列表。因为GridColumn归为视图对象类别，所以 GridColumn 不满足添加到共享的 CRUDLib 库项目来与 Expense Tracker 移动项目共享的标准。

为了解决此问题，我创建了一种新接口和模型对象：

IGridColumnModel和GridColumnModel。IGridColumnModel是一种仅包含数据的GridColumn视图对象表示，主要的演示器类持有columnList ArrayCollection中的一组GridColumnModel对象。该视图进而监听对columnList ArrayCollection的更改，然后使用一个自定义工厂类来构建GridColumn视图对象的实例。这个工厂类名为GridColumnFactory，有一个名为buildGridColumn()的静态方法，该方法获取一个IGridColumnModel对象并返回一个GridColumn。这允许所有视图代码保留在合适的项目中，状态仍然保存在共享的演示器代码中。

与其他项目呈现器一样，在创建 DataGrid 项目呈现器时应该考虑效率。以下是创建高性能 DataGrid 项目呈现器的一些技巧：

• 在GridColumn内构建任何格式化器对象，而不直接在项目呈现器中构建它。这将减少需要创建的格式化器对象的数量，此外，GridColumn拥有对应用格式化器的原生支持。借助该支持，项目呈现器的标签属性将由GridColumn格式化。
• GridItemRenderers应该使用prepare()方法，而不设置数据来初始化呈现器和处理更新。
• 不要过度嵌套容器或向 DataGrid 的项目呈现器中添加不必要的显示元素。精减保持针对任何项目呈现器的显示列表是改善性能的关键。

在Web 和移动项目中使用MX 图表

Flex Mobile 项目需要 Spark 组件，不过有一个例外，那就是允许使用 MX 图表组件，比如ColumnChart、BarChart、PieChart等。当在 Flash Builder 4.5 中创建新 Flex Mobile 项目时，图表组件已包含在项目的库路径中，所以这些组件可直接用于代码提示和设计视图中。Sales Dashboard Web 和移动项目都使用了图表组件来显示财务信息。共享的数据层以及共享的 UI 图表组件都包含在 DashboardChartLib.fxpl 中。这是在 Web 和移动项目之间通过单一 Flex Library 项目共享 UI 代码的示例。除了图表组件，DashboardMobile.fxp 和 DashboardWeb.fxp 包含所有特定于 Web 或移动环境的 UI 代码（比如特定于移动环境的项目呈现器）。

将SplitViewNavigator 用于平板应用程序

平板应用程序的一种通用布局模式是大纲/ 细节布局。如果查看DashboardTablet.fxp 项目，您将看到此布局的实际应用。当应用程序处于横向模式时，左侧有一列小视图。单击一个小视图会在右侧打开较大的细节视图。当应用程序出于纵向模式时，左侧列会消失，较大的细节视图将填满整个屏幕。较小的大纲视图的列现在可通过屏幕左上角的CalloutButton 访问。此布局可轻松地实现为SplitViewNavigator 容器。

查看DashboardTablet.mxml，您将看到根mxml 标记是一个Application 标记，而不是在其他平板项目中看到的ViewNavigatorApplication 标签。这是因为没有SplitViewNavigator 应用程序类型。我们仍然能够使用ViewNavigatorApplication 的元素，使用NavigatorContent 容器来持有我们的顶部导航元素。除了NavigatorContent 容器，您还将看到SplitViewNavigator 容器。

在SplitViewNavigator 的属性内，我们可以指定纵向和横向状态下的布局，以及我们是否希望自动在纵向模式下自动隐藏第一个视图导航程序。这个SplitViewNavigator 的内容是两个ViewNavigators。一个用于大纲视图，一个用于细节视图。这些ViewNavigator 可能分配了第一个视图，以及将视图推送到其中或在其中弹出，就像传统的移动应用程序一样。您可在DashboardTablet MXML 文件顶部的goStateHandler 中看到一个相关示例。

为平板设备上的菜单使用CalloutButton

在CRUDMobile.fxp 和DashboardMobile.fxp 应用程序中，我们创建了一个扩展SkinnablePopUpContainer 的自定义MultiSelectList 组件，以创建一个模态的全屏菜单，以允许用户选择一个选项。尽管此方法非常适合电话设备，但它不是很适合平板设备。使用平板设备，我们拥有多得多的空间，所以一个具有少量选项的全屏模态列表不是理想的选择。

为了解决此问题，我在我们的自定义MultiSelectComponent 中使用了新的CalloutButton 组件，可在DashboardTablet.fxp 和CRUDTablet.fxp 中找到它们。尽管从名称看来CalloutButton 可能是个控件，但它其实是容器。当按下按钮时，您在CalloutButton 的开始和结束标记之间添加的任何内容都会在一个Callout 中显示。

延伸阅读

本文仅触及了Adobe Flash Builder 4.5 和Flex 4.5 SDK 中的所有新功能的皮毛。希望您对在这个新版的框架和工具中可完成的操作有所了解，尤其是围绕为移动智能电话和平板设备创建内容方面。您可以安装所有3 个针对Web 和移动环境的参考应用程序，掌握其中的代码，并学习编写快速且漂亮的Flex 代码的最佳实践和技巧。

.

本文依据 Creative Commons Attribution-Noncommercial 3.0 Unported License 授权。

查看原文： Web and mobile reference applications with Flex 4.5 SDK and Flash Builder 4.5