Spark 架构和组件集的简要概述

最新推荐文章于 2025-01-01 08:56:37 发布

sunix

最新推荐文章于 2025-01-01 08:56:37 发布

阅读量5.5k

点赞数

分类专栏： Flex 4 文章标签： flex actionscript adobe flash 图形 button

Flex 4 专栏收录该内容

2 篇文章

订阅专栏

原文地址：http://www.adobe.com/cn/devnet/flex/articles/flex4_sparkintro.html

Flex 4 的推出为 Flex 用户界面组件带来了新的外观设计和组件架构，它称为 Spark。Spark 为设计人员和开发人员提供了一种无缝方式，使他们能以更直接、轻松的方式自定义 Flex 组件的可视部分和行为。在之前版本的 Flex 中，开发人员和设计人员可能需要将大量精力用于设置应用程序样式，或是放入编程式或图形外观设计中才能获得所需的外观，而 Spark 为用户提供了一个更直接、声明性、强大的外观设计模型，为作品注入真正的生机。在本文中，我将介绍 Flex 4 随附的 Spark 架构和组件集令人兴奋的部分新功能。我还精选了 Spark 的其他一些出色功能，如可指定的布局、新的图形库、增强的状态模型以及一个全新的效果引擎。此外，我还会说明 how Spark 组件如何与 MX（Flex 3 及先前版本）组件交互并和睦共处。

要求

为了充分利用本文，您需要以下软件和文件：

Flex4

必备知识

本文假设您对 Flex 有所了解。

什么是 Spark？

Spark 是 Flex 4 随附的新组件外观设计架构和组件集的名字。Spark 架构的主要原则得到一个外观设计模型的支持，该模型将组件的可视元素与其逻辑划分开。这样，设计人员和开发人员将获得更大的自由，因为他们能摆脱为组件提供动力的逻辑实施，无拘无束地设计 Flex 组件的可视元素。学习 Spark 外观设计模型后，您可以在很短的时间内构建出强大而具有表现力的 Flex 组件。

在深入探索 Spark 架构的更多细节之前，您可能想了解为 Flex 4 引入新的外观设计和组件架构的灵感来自何处。这一灵感主要是因为我们希望支持 Adobe Flash Catalyst* 实现的丰富工作流程。Flash Catalyst 是一款设计人员友好的工具，它的外观与任何其他 Adobe Creative Suite 工具很相似，可用于构建具有表现力的 Flex 内容。Flash Catalyst（以及跨 Illustrator、Photoshop 和 Flash Professional 等其他 Adobe Creative Suite 工具的集成工作流程）提供的强大工作流程要求我们重新审视 Flex 框架，以实现强大的修补性。这正是 Spark 的源头。

Spark 架构鸟瞰图

推动 Spark 架构的核心原则是将构成组件可视部分的代码与控制组件逻辑的代码划分开。由于这一划分，每个 Spark 组件包含两个类：一个是外观类，它使用声明性 MXML 编写，另一个是组件类，它使用 ActionScript 编写。以下详细说明了外观类和组件类分别应该如何编写，以及如何将这两个类关联在一起。

Spark 与 MX

在开始详细说明 Spark 架构之前，我应当简要描述一下 Flex 4 之前的组件架构和组件集，它称为 MX（有时又称为 Halo）。MX 组件架构和组件集在 Flex 4 和 Flash Builder 4 中依然可用。并且，Spark 和 MX 组件可以互操作。这是因为，在外表之下，Spark 组件扩展了与 MX 组件相同的基类：mx.core.UIComponent。由于基础相同，所以 Spark 组件可以存在于 MX 容器中，Spark 容器可以包含 MX 组件，Spark 和 MX 组件可以共存于一个 Flex 应用程序中。

由于 Spark 和 MX 组件共享同一个基类，所以 MX 组件中的组件生命周期方法、属性和事件同样适用于 Spark 组件。因此，Spark 外观设计功能加在 MX 组件生命周期之上，并且只针对支持 Spark 样式外观设计的 Spark 类。例如，MX 组件遵循一个包含三个主要方法的验证模型：commitProperties()、measure() 和 updateDisplayList() 。Spark 组件依然使用这些方法，但使用方式不同，并且外观设计相关方法和属性位于这个 MX 组件生命周期之上。要进一步了解 MX 组件生命周期以及它与 Spark 组件生命周期的差异，请观看我的 Adobe MAX 视频在 Flex 3 及更高版本中新建组件* 。

Spark 中的外观设计

每个 Spark 组件包含两个类：一个基于 MXML 的声明性外观类以及一个 ActionScript 组件类。外观类包含与 Spark 组件的可视外观相关的一切内容，而 ActionScript 类包含与组件的功能逻辑相关的一切内容。这两个类通过样式机制关联在一起，自从 Flex 诞生以来该机制一直存在于这个框架中。但是，组件类中具体定义了什么内容以及外观类如何对这些定义做出反应是 Spark 如此具有魔力的关键所在。

每个 Spark 组件类定义三个十分重要的元素：组件期望的数据、组件的构成部分以及组件可以进入和退出的状态。在相应的外观类中，外观定义了如何可视显示该数据、如何放置和可视化部件以及组件在进入和退出不同状态时的外观。这三个主要元素，即数据、部件和状态，定义了作为 Spark 基础的外观设计合同。

外观部件实质上是较小的组件块，将它们装配在一起就构成了一个功能完整的组件。例如，Spark NumericStepper 的外观部件实质上是一个 Spark TextInput 控件连接到两个 Spark Button，它们的操作与传统 NumericStepper 控件中的向上和向下按钮相同。ActionScript 组件类定义 Spark 控件可能需要哪些外观部件，相应的外观类负责实例化和放置任何必需外观部件。Spark 组件定义、外观类实例化的部件之间的这种相互作用是 Spark 外观设计合同的一个基石。

同样，外观状态在 Spark 组件与外观类之间的合同中也扮演着重要角色。外观状态定义了 Spark 组件根据交互进入和退出的视图。例如，Spark Button 有向上、滑过、向下和禁用状态。ActionScript 组件类负责确定状态更改时间所需的所有事件处理，并确保将组件置于正确的状态中。外观类定义了组件在进入和退出那些状态时的外观和行为。Spark 组件定义、外观类显示的状态之间的这种相互作用是 Spark 外观设计合同的另一个基石。

值得注意的是，在 Flex 2 时期为 Flex 引入了状态的概念。但是，为了使 Spark 通过一种自然方式变得更强大，Flex 4 发行版对状态语法进行了改头换面。要进一步了解对 Flex 4 中的状态模型做出的增强，请参阅增强的状态语法文档* 。

同样，要进一步了解外观部件、状态和数据的定义方式，以及浏览各个概念的代码示例，请阅读 Ryan Frishberg 的介绍 Flex 4 中的外观设计。

Spark 架构的新功能

进一步了解新的外观设计架构时，您会发现 Flex 4 中新增了一些十分宝贵的功能，它们为 Spark 简单、直观的开发和设计目标提供了支持。在这一部分中，我将重点介绍其中三个功能：直接构建到 Spark 基础中并得到增强的效果引擎，允许组件重用和重新指定布局且功能强大的新隐喻以及捕获绘图基元作为简单的 MXML 标签的图形库。

Spark 中的效果

Flex 4 中新增了一个增强的动画引擎，它提供了 Spark 组件可以使用并经过改进的效果和过渡。借助这个新的动画引擎，Flex 4 效果可以针对任意对象或属性类型，并使用新的 Flash Player 10 功能。它实质上是重新编写而成的，旨在提供比之前的 Flex 效果类更出色的保真度和性能。用户可以通过基于状态的过渡从 Spark 外观类中直接调用这个动画引擎。也可以将效果直接应用于组件部件。Chet Haase 撰写了一系列文章，帮助您逐步创建基本效果、连接起更复杂的效果、调用展现 Flash Player 出众功能的效果，如 3D 效果和 Pixel Bender 着色器。有关更多信息，请参阅 Flex 4 中的效果，第 1 部分、Flex 4 中的效果，第 2 部分* 以及新动画引擎的 Flex 文档* 。

经过改进的新布局功能

布局由外观类控制，这似乎是理所当然的，因为布局实质上是任何组件的可视部分。Flex 4 中新增的出色功能之一是更灵活、亲切的布局系统。Spark 布局系统构建在 MX 布局系统奠定的基础之上。Flex 4 布局中依然可以找到宽度和高度、基于限制的布局以及基于百分比的大小等 MX 概念。但是，除了这些概念，Flex 4 布局还提供一套全新的功能，包括（但不限于）针对更强大的 2D 和 3D 变形的 API，轻松实施自定义布局的能力，最重要的是，可指定布局的概念。

可指定布局说到底就是将特定布局指定到不同容器和控件的能力（而不是将布局直接嵌入容器或控件的定义中）。例如，MX List 控件实际上是垂直的。要获取一个水平放置或平铺数据元素的 MX List，您必须将一个 MX HorizontalList 或 MX TileList 实例化。借助 Flex 4 可指定布局，您可以使用 Spark List 控件并将它指定到任何本地 Flex 4 布局（如垂直、水平或平铺布局）或任何实施少量特定接口的自定义布局。这个选项十分灵活，您只需修改组件的某个属性即可创建布局截然不同的组件。您可以阅读 Evtim Georgiev 的文章 Flex 4 中的 Spark 布局并参考 Flex 4 布局* 相关的 Flex 文档，进一步了解 Flex 4 中的新布局功能并查看代码示例。

FXG 和 MXML Graphics

Flex 4 中的新增功能之一是引入了一个图形库，经常被称为 MXML Graphics，它包括图形基元、分组容器以及复杂变形支持。图形基元包括矩形、椭圆和路径等形状以及文本基元。您可以实例化这些使用 MXML 的基元，设置属性或定义子代元素（您可以执行 Flash Player 绘图功能允许的任何操作）。例如，您可以定义一个使用 MXML 的矩形（它使用线性渐变笔触，径向渐变填充），在它上面设置 Alpha 或过滤器并使用不透明蒙版。由于这些 MXML 图形标签的声明性质，它们常用于外观文件中定义 Spark 组件的可视元素。

一种名为 FXG 的交换格式定义了 MXML Graphics 库的功能。这种交换格式出现在许多 Adobe Creative Suite 工具中，包括 Adobe Flash Catalyst、Adobe Illustrator 和 Adobe Photoshop，它用于将绘制的内容保留在屏幕上，以便导入您的首选设计工具并在其中进行编辑。您可以阅读 FXG 2.0* 技术规范以及 MXML Graphics* 和 FXG 交换格式* 的 Flex 文档，进一步了解 FXG 交换格式的技术细节（实质上是 MXML Graphics 的一个子集）。

Flex 4 提供的 Spark 组件

Flex 4 目前提供各种 Spark 组件。Flex 的后续版本将提供更多 Spark 控件，与 MX 组件集并驾齐驱。要进一步了解各个 Spark 组件或控件的外观部件、状态和基类，请参阅 Adobe Flash Platform 的 ActionScript 3.0 参考* 文档或 Flex 文档的 Spark 容器* 和基于 Spark 列表的控件* 章节。

Spark 容器

所有 Spark 容器都支持可指定布局。

Group－Flex 4 中的一个不可设计外观的容器类，它可以包含 UIComponents 等可视子代、Adobe Flash Professional 中创建的 Flex 组件或图形元素。
DataGroup－Flex 4 中的一个不可设计外观的容器类，它只能包含子代等非可视数据项。DataGroup 容器支持生成项呈示器（这是一种可视元素，它将数据项转换为可显示项）及其元素的虚拟化。
SkinnableContainer－Group 的可设计外观的版本。
SkinnableDataContainer－DataGroup 的可设计外观的版本。
Application－针对基于浏览器的 Flex 应用程序、可设计外观的顶级容器（与 AIR 应用程序相反，后者使用下述 Spark WindowedApplication 容器）。
BorderContainer－支持边框和背景填充的 CSS 样式的一个可设计外观的容器（与 MX 容器支持的边框和背景样式类似）。
Panel－支持标题栏、题注和边框的一个可设计外观的容器。
TitleWindow－与 Panel 类似、支持关闭按钮和可移动区域的一个可设计外观的容器。TitleWindow 将通过 PopUpManager 以弹出窗口形式弹出。
Window－可用作 Adobe AIR 应用程序中的顶级应用程序窗口的一个可设计外观的组件。
WindowedApplication－定义 Adobe AIR 应用程序中的应用程序容器的一个可设计外观的组件。

按钮组件

Button－可设计外观的矩形按钮。
Button－可设计外观的矩形按钮。
CheckBox－包含标签和支持复选标记的框、可设计外观的组件。
RadioButton－用于跨一组相互排斥的单选按钮识别一个选择、可设计外观的组件。

范围组件

ScrollBar－用于控制给定内容区域中的数据显示量、可设计外观的组件。
Slider－允许通过在一个滑块轨迹的两个端点之间拖动缩略图选择值、可设计外观的组件。
Spinner－包含用于从一个有序集中选择值的向上和向下按钮、可设计外观的组件。
NumericStepper－可设计外观的组件，它实质上是一个连接到 Spark TextInput 控件的 Spark Spinner 控件，允许选择和编辑数值。

文本组件

Label－显示单行统一格式文本、不可设计外观的控件。
RichText－可显示多行富格式文本并支持嵌入图像、不可设计外观的控件。
RichEditableText－可用于显示、滚动、编辑和选择多行富格式文本、不可设计外观的控件。
TextArea－允许显示和编辑多行富格式文本、可设计外观的控件。
TextInput－允许显示和编辑单行统一格式文本、可设计外观的控件。

基于列表的组件

List－显示数据项、可设计外观的组件。它支持生成项呈示器、单项和多项选择、拖放操作、虚拟化和可指定布局。
DropDownList－允许用户从拖放打开的列表中选择值、可设计外观的组件。
ComboBox－可设计外观的组件，实质上是一个带有可编辑功能的 Spark DropDownList。

导航器组件

ButtonBar－支持从类似于导航器的一组按钮中选择一个按钮、可设计外观的组件。
TabBar－支持从类似于导航器的一组选项卡中选择一个选项卡、可设计外观的组件。

Spark 滚动组件

Scroller－定义可滚动视图、可设计外观的组件，可支持垂直和水平滚动栏。

Spark 媒体组件

VideoPlayer－支持回放视频媒体、可设计外观的组件，它构建在开放源媒体框架* 之上。

后续工作

您已经进一步了解 Flex 4 提供的功能强大的新 Spark 外观设计架构和组件集，现在可以自定义一个现有 Spark 组件或从头开始构建自己的 Spark 组件了。Spark 架构的丰富功能使您能轻松构建出与 Flex 4 先前版本中的 Flex 内容截然不同的 Flex 应用程序和组件。

如果需要更多信息，可参阅 Spark 组件架构* 的相关技术白皮书，它具体说明了 Spark 外观设计合同、Spark 基类以及组件和容器类。您还可以在 Flex 4 文档* 中找到个别 Flex 4 功能的详细信息，它提供非常实用的技术信息和代码样本，可以帮助您更好地理解这些功能的实际使用方法。最后，Tour de Flex* 参考应用程序展示了许多 Flex 功能并提供大量可运行的示例和代码片段，可将它们轻松粘贴到 Flash Builder 中。现在您就可以开始随心所欲地设计和开发 Flex 组件及应用程序了！