Flex 4 的十大变化

本周 Adobe 发布了 Flex 4（Gumbo）的首个官方 beta 版。该版本包含了众多的变化。本文从较高层次审视了这个流行 RIA 框架的最新版，讨论了其所发生的主要变化。

1. 集成 Adobe Catalyst

Flex 4 的一个主要特性就是提供了对 Adobe Catalyst（Adobe 新的设计工具，用于创建富 Internet 应用而无需编写代码）集成的支持。Catalyst 改变了开发者与设计者协作的方式，因为它清楚地知道应用开发者与设计者之间工作方式的显著差异。这样开发者与设计者都能专注于自己所擅长的领域，凭借 Catalyst，无论开发者还是设计者都能按照自己所习惯的方式进行工作。Flex 4 中的很多变化都是围绕着 Flex 与 Catalyst 的集成进行的。请查看 Adobe Catalyst 站点以了解其详细信息。

2. Spark 组件架构

Flex 的每个版本都包含了完整的组件库，其中含有用于构建应用的通用组件，如数据表格、按钮及布局容器等等。Flex 4 的底层组件架构名为 Spark，而在 Flex 3 中则叫做 Halo。为了支持 Catalyst，Flex 4 更新了底层的组件模型以达到松耦合的目的。

在新的 Spark 组件模型中，核心逻辑、皮肤以及布局都被分开了，这样我们就能单独处理其中任意一部分而又不会影响到其他部分。Spark 组件模型构建于 Halo 组件模型之上，这意味着 Spark 扩展了 Halo 的核心基类 UIComponent，这样我们就能以增量的方式使用 Flex 4，同时还能将 Flex 3 组件应用在 Flex 4 应用中。

除此以外，Flex 4 还对效果（effect）进行了增强。现在可以将效果应用在任意的对象和类型上，这么做提升了其灵活性。Flex 4 的效果由新的“spark.effects”包实现。就像新的组件库一样，Flex 4 的效果也被重新实现了，但却并没有对 Flex 3 的效果进行任何变更，这么做的目的是为了保持向后兼容。请查看 Chet Haase 所写的关于Flex 4 效果的文章或是其博客以更多地了解Gumbo Effect。

请阅读白皮书以更多地了解Spark 架构。

3. MXML 2009

MXML 基于 XML，构建于 Flash Player 所用的编程语言——ActionScript 3 之上。MXML 用于对用户界面和支持工具（比如说 IDE，现在是 Catalyst 了）的视图区域进行布局。MXML 2009 包含了大量更新以对不同的行为（核心、皮肤和布局）进行解耦，同时还提供了新的组件库。现在 Flex 4 的组件在其自己的包中（spark.components）得以实现，同时又没有对 Flex 3 的组件进行任何变更，为此 MXML 2009 专门提供了一个新的命名空间以提供支持。

下面的应用声明示例展示了如何使用该命名空间以及如何为 Spark 和 Halo 组件定义命名空间：

<s:Application
xmlns:fx=“ http://ns.adobe.com/mxml/2009 ”
xmlns:s=“library://ns.adobe.com/flex/spark”
xmlns:mx=“library://ns.adobe.com/flex/halo”>

这样，我们就可以通过下面的代码声明 Flex 4 的 Button：

<s:Button label=“My Flex 4 Button” />

下面的代码声明了 Flex 3 的 Button：

<mx:Button label=“My Flex 3 Button” />

请浏览 MXML 2009 规范以深入了解其变化。

4. 对 View States 的改进

Flex 2 将状态（states）概念引入到了 Flex 框架中，这样我们就可以通过简单的状态改变来管理视图组件的变化。Flex 4 改进了视图状态（view states）以简化其语法，这样我们就能更轻松地使用他们了。新语言属性 includeIn 和 excludeFrom 就是简化语法的一个例子，我们可以设定组件的这两个属性值以响应状态变化（参见下面的代码示例）。

<m:states>
<m:State name=“A”/>
<m:State name=“B”/>
<m:State name=“C”/>
</m:states> <!-- This button will appear in only states A and B -->

<!-- This button will appear in states A and B -->

请点击这里以进一步了解View States 的变化。

5. FXG 支持

Flash Player 的核心是个绘图引擎。Adobe 在 Flash Player 10 中引入了 FXG，现在又将其引入到了 Flex 中。FXG 是个声明式的图形格式，可以在工具间传递内容，这意味着设计者可以在 Catalyst 或 CS4 Illustrator 中创建内容，接下来 Flex 应用开发者就可以将其导入并使用而无需修改任何内容。

请阅读 FXG 规范以了解更多细节信息。

6. 皮肤增强

Spark 组件模型最大的变化在于对皮肤的颠覆性改造，现在皮肤可以控制组件的所有可视化部分，同时还将逻辑封装到了组件核心之外。这样我们就可以对组件的可视化部分进行独立修改而不会影响到底层的核心逻辑。

来看看 PanelSkin.mxml 皮肤文件吧，Panel 容器的默认皮肤代码如下：

<s:SparkSkin xmlns:fx=“ http://ns.adobe.com/mxml/2009 ” xmlns:s=“library://ns.adobe.com/flex/spark” alpha.disabled=“0.5”> fx:Metadata

<![CDATA[
/**
* @copy spark.skins.default.ApplicationSkin#hostComponent
*/
[HostComponent(“spark.components.Panel”)]
]]>
</fx:Metadata> fx:Script

/* Define the skin elements that should not be colorized.
For panel, border and title backround are skinned, but the content area and title text are not. */
static private const exclusions:Array = [“background”, “titleField”, “contentGroup”]; /**

* @copy spark.skins.SparkSkin#colorizeExclusions
*/
override public function get colorizeExclusions():Array {return exclusions;} /* Define the content fill items that should be colored by the “contentBackgroundColor” style. */

static private const contentFill:Array = [“bgFill”]; /**

* @inheritDoc
*/
override public function get contentItems():Array {return contentFill};
</fx:Script> <s:states>

<s:State name=“normal” />
<s:State name=“disabled” />
</s:states> . . . . .

<s:Rect left=“1” right=“1” top=“31” height=“1”>

<s:fill>
<s:SolidColor color=“0xC0C0C0” />
</s:fill>
</s:Rect> <!-- layer 5: text -->

<s:SimpleText id=“titleField” lineBreak=“explicit”
left=“10” right=“4” top=“2” height=“30”
verticalAlign=“middle” fontWeight=“bold”>
</s:SimpleText> <s:Group id=“contentGroup” left=“1” right=“1” top=“32” bottom=“1”>

</s:Group> </s:SparkSkin>

由于该皮肤文件唯一的作用就是控制 Panel 容器的可视化外观，因此设计者可以修改组件的样式而无需编辑其源代码，也不必了解组件的内部行为。更为重要的是，设计者可以按照自己熟悉的方式来使用 Catalyst。

请点击这里深入了解Gumbo 的皮肤组件。

7. 更新的布局组件

熟悉 Flex 开发的人可能会注意到 Flex 3 中的大多数容器都已经不在 Gumbo 组件库中了。这是由于布局已经被解耦了，现在我们需要通过代理（delegtion）来处理他们。因为大多数 Flex 3 容器仅仅就是为了提供不同的布局样式（比如说用于水平布局的 HBox，用于垂直布局的 VBox 等等），因此现在他们已经没什么用了。

下面的示例表明 Flex 开发者现在也可以定义布局了。该示例利用 Group 类来管理按钮，Group 是个新的 Spark 类，用于管理其中的内容条目。布局的结果就是两个并排放置的按钮，就像是使用 Flex 3 中的 HBox 的结果一样。

<s:Group width=“400” height=“400”>
<s:layout>
<s:HorizontalLayout paddingLeft=“5” paddingTop=“5” />
</s:layout> <s:Button label=“Button 1” />

<s:Button label=“Button 2” />
</s:Group>

来自 Adobe 的 Ryan Stewart 对新的布局机制进行了深入分析。

8. Flash Builder 4

Flash Builder 4（之前叫做 Flex Builder）是面向应用开发者的最新的 Eclipse IDE。该新版本带有众多更新，包括条件调试断点、更多的重构工具并支持 FlexUnit 4。一如往常，它还包括 MXML、ActionScript 3、可视化设计器以及 Flex 性能与内存分析器（只有专业版才有该性能分析器）。

除此之外，该最新版还提供了高级的数据管理特性以简化数据为中心应用的开发。这包括客户端的数据管理特性，它可以处理 CRUD 操作以及在大集合中进行滚动。

请点击这里来深入了解该IDE。

9. 编译器性能

几乎每个 Flex 3 开发者心中都有一个痛——糟糕的编译器性能。基于此，Gumbo 的一个主要目标就是改进 Flex 4 中的编译器性能。虽然官方尚未发布性能基准，但来自 Adobe 的 Peter Donovan 根据自己所作的一些试验对其进行了测试，结果表明新的编译器性能提升了 25%。他说要想将性能提升 3 到 4 倍只能进行重新设计。当然了，每个企业级 Flex 应用的开发者都希望今年底 Flex 4 正式发布时能实现这一点。

请阅读 Peter Donovan 的文章来深入了解相关信息。

10. 新的文本功能

Flash 应用（无论是 Flex 还是非 Flex 应用）的一个主要议题就是高效处理文本的能力。在 Flash Player 10 中，Adobe 引入了全新的文本引擎以支持 RIA 的需要（多语言、打印以及键盘快捷键等等）。Gumbo 引入了大量新的文本类（RichText、 SimpleText 等等）以在 Flex 框架中提供更健壮的文本支持。除此以外，Adobe 正在全力开发新的 Text Layout Framework 以赋予 ActionScript 3 开发者利用 Flash Player 文本引擎的能力。请点击这里以深入了解Text Layout Framework。

如你所见，Flex 4 代表了该流行的RIA 平台的巨大进步。请查看Matt Chotin 的文章《What’s new in Flex 4 SDK beta》来深入了解Flex 4 SDK 的变化。

作者简介

Jon Rose 是 Gorilla Logic, Inc. （位于科罗拉多州的博尔德）的一名企业软件咨询师和 Flex 业务主管。他还是知名的企业软件社区 InfoQ.com 的编辑。另外，他是 DrunkOnSoftware.com 的主办人之一，这是一个面向那些爱豪饮的朋友的视频网站。他的客户有小公司，也有政府部门。爱解决难题的天性使其致力于开发高质量的软件。你可以通过其博客了解他。

感谢宋玮对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作，请邮件至 editors@cn.infoq.com 。也欢迎大家加入到 InfoQ 中文站用户讨论组中与我们的编辑和其他读者朋友交流。