Flex 3 与 Flex 4 beta 之间的区别

图 1. 设置其他编译器参数

如果您选择使用新的 Spark 主题，请注意许多可用于 Halo 主题的样式无法用于 Spark 主题。Spark 主题只支持数量有限的样式，包括 baseColor 、 color 、 contentBackgroundColor 、 focusColor 、 symbolColor 、 selectionColor 和 rollOverColor 。要使用 Spark 主题更改组件上的边框或圆角等可视部分，您需要创建一个自定义外观。Flex 4 beta 还加入了一种设计用于快速模型的线框外观。

除了主题更改外，Flex 4 beta 应用程序的默认预下载器也已经改为 mx.preloaders.SparkDownloadProgressBar。这个更轻量级的预下载器可以缩短一些启动时间。如果要使用 Flex 3 预下载器，您只需更改一行代码。在 Application 标签中添加以下内容： preloader="mx.preloaders.DownloadProgressBar" 。

如 果要将应用程序从 Flex 3 迁移到 Flex 4 beta，我不建议将各个 Flex 3 Halo 组件替换为它们对应的 Flex 4 beta 组件。这样投入时间可能并不是一个好方法。您应当为新的应用程序转而使用 Flex 4 beta 组件架构。

Flex 4 beta 架构变化概述

Flex 4 beta 的重要主题之一是“用心设计”。这个目标涉及在设计人员和开发人员之间创造一个更顺畅的工作流程。为了帮助实现这一点，该框架将组件可视部分与其剩余行为 明确划分开。在 Flex 3 中，组件的代码包括以其行为、布局和可视变化为中心的逻辑。在 Flex 4 beta 中，组件被划分为不同的类，各个类负责处理特定的行为。

Gumbo 架构文档* 中的说明如下：

“ 主组件类，即类名与组件的 MXML 标签名匹配的那个类封装了组件的核心行为。这包括定义组件调度的事件、组件表示的数据、接通作为主组件组成部分的任何子组件以及管理和跟踪内部组件状态（稍后我们将详细讨论状态）。

与 之相应的组件类是一个外观类，它负责管理与组件的可视外观相关的一切内容，包括图形、布局、表示数据、更改不同状态中的外观以及从一个状态过渡到另一个状 态。在 Halo 模型中，Flex 组件外观是只负责组件的某个图形部分的资源。更改组件外观的任何其他方面，如布局或状态可视化，需要将组件子类化并直接编辑 ActionScript 代码。在 Gumbo 模型中，所有这一切都在外观类中以声明方式进行定义，并且主要通过名为 FXG 标签的新图形标签进行定义。”

要进一步了解 Flex 4 beta 中新的图形标签，您可以阅读 FXG 1.0 规范* 。

作为上述架构的示例，您可以参考 spark.components.Button 类的代码。这个类只包含以组件行为为中心的逻辑。在外观类 spark.skins.default.ButtonSkin 中定义这个恶组件的所有可视部分。

考虑到性能，Flex 4 beta 为开发人员提供了构造块，可供他们根据需要选择功能。默认情况下，关闭并非所有应用程序都需要的重量级功能，如滚动和虚拟化。

Flex 4 beta 中的名称空间与包

在将 Flex 3 类原封不动地保留在同一 mx.* 包中的同时，Flex 4 beta 为组件、核心类、效果、滤镜、布局、基元、外观和 utils 引入了 spark.* 包。

Flex 4 beta 提供一套新的组件和效果，它们与 Flex 3 组件共享许多相同类名。为了避免 MXML 中出现名称冲突，Flex 4 beta 随附四个独特的名称空间：MXML 2006、MXML 2009、Spark 和 Halo。

MXML 2006： 之前版本的 Flex 中使用的旧版 MXML 语言名称空间。使用 Flex 4 beta 编译的 Flex 3 应用程序可以继续使用这个名称空间。

URI：http://www.adobe.com/2006/mxml

默认前缀：mx

MXML 2009： 新的 MXML 语言名称空间。这纯粹是一个语言名称空间， 不 包含组件标签。

URI：http://ns.adobe.com/mxml/2009
默认前缀：fx

Spark： 这个名称空间包含所有新的 Spark 组件。它应当与 MXML 2009 语言名称空间一起使用。

URI：library://ns.adobe.com/flex/spark
默认前缀：s

Halo： 这个名称空间包含所有 Halo 组件。它应当与 MXML 2009 语言名称空间一起使用。

URI：library://ns.adobe.com/flex/halo
默认前缀：mx

以下是使用 MXML 2009、Spark 和 Halo 名称空间创建一个简单的 Flex 4 beta 应用程序的简明示例。它使用一个 Halo DateChooser 和一个 Spark Button。

      
        <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
      
      "
      
        >
      
      
        <mx:DateChooser
      
       id="
      
        main_calendar
      
      " x="
      
        20
      
      " y="
      
        20
      
      "
      
        />
      
      
        <s:Button
      
       label="
      
        submit
      
      " x="
      
        220
      
      " y="
      
        20
      
      "
      
        />
      
      
      
      
        </s:Application>
      
    

Flex 4 beta 还在 CSS 中加入了多名称空间支持。如果将 MXML 2009、Spark 和 Halo 名称空间与字体选择器一起使用，您需要在 CSS 定义中定义一组名称空间以避免名称冲突。

以下是一个将字体选择器用于 Halo 和 Spark 组件的 CSS 示例：

      <fx:Style>
 
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/halo";
 
    s|Button {
        color: #FF0000;
    }
 
    mx|DateChooser {
        color: #FF0000;
    }
 
</fx:Style>
    

默认 Property 和 Declarations 标签

在 Flex 4 beta 发布之前，Flex 语言允许 Application 根标签包含可视子代和非可视子代。可视子代与 addChild() 一起添加到 Application ，非可视子代则作为属性声明。随后，表示新属性声明的非可视子代不可以作为 Application 的直接子代。您可以将这些非可视子代添加到 <fx:Declarations> 标签下。这包括效果、验证程序、格式化程序、数据声明和 RPC 类等非可视子代。以下是一个简短的示例：

      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
  xmlns:s="library://ns.adobe.com/flex/spark">
    <fx:Declarations>
        <s:Fade id="fadeEffect" target="{targetButton}" alphaFrom="1" alphaTo="0" />       
    </fx:Declarations>
    <s:Button id="targetButton" />
    <s:Button label="play effect" click="fadeEffect.play()" x="80" />
</s:Application>
    

新增组件和容器

如前所述，Flex 4 beta 引入了许多使用新架构的新组件类，它们应当可以令外观和其他自定义操作更简单。下表列出了 Flex 3 Halo 组件及其 Flex 4 beta Spark 对应组件：

Adobe 鼓励您与 Spark 组件一起使用 Halo 组件和容器。由于 Adobe 在同一基类 (UIComponent) 上构建组件，Spark 与 Halo 之间应当可以实现全面的可互操作性。下表列出了目前没有 Spark 直接等效类的组件和容器。

状态语法中的变化

Flex 4 beta 将状态功能升级为一个全面的 MXML 语言功能。因此，您可能会发现状态更灵活、更直接。新的状态语法 内联 程度更高，允许在上下文中指定状态特定变化。以下是 Flex 4 beta 语法中的主要区别：

• 只有状态是在状态阵列中定义的。
• 在新的状态语法中，不能使用 AddChild 和 RemoveChild 。您必须使用 includeIn 和 excludeFrom 属性在组件上定义组件在特定状态中的角色。

在以下 Flex 3 示例中，仅当文档的 currentState 为 submitState 时，才使用状态包含一个 Button 并删除一个 TextInput。对于较复杂的状态，这种方法可以做到十分详细。

      <mx:states>
    <mx:State name="submitState" basedOn="">
        <mx:AddChild relativeTo="{loginForm}" >
           <mx:Button label="submit" bottom="10" right="10"/>
        </mx:AddChild>
        <mx:RemoveChild target="{firstTextInput}"/>
    </mx:State>
</mx:states>
 
<mx:TextInput id="firstTextInput" />
<mx:Canvas id="loginForm" />
    

以下是一段使用 includeIn 和 excludeFrom 、更简单的 Flex 4 beta 代码。

      <s:states>
    <s:State name="submitState" />
</s:states>
<s:TextInput id="firstTextInput" excludeFrom="submitState" />
<s:Group id="loginForm" >
    <s:Button label="submit" bottom="10" right="10" includeIn="submitState"/>
</s:Group>
    

• SetProperty 、 SetStyle 和 SetEventHandler 已替换为新的 点 语法，它允许您限定具备特定状态标识符的 MXML 属性值。

在以下 Flex 3 示例中，代码为 submitState 中的一个 Button 定义了属性、样式和事件。

      <mx:states>
    <mx:State name="submitState" basedOn="">
        <mx:SetProperty target="{submitButton}" name="label" value="submit" />
        <mx:SetStyle target="{submitButton}" name="textDecoration" value="underline"/>
        <mx:SetEventHandler target="{submitButton}" name="click" handler="trace('done');"/>
    </mx:State>
    <mx:State name="clearState" basedOn="">
        <mx:SetProperty target="{submitButton}" name="label" value="clear" />
        
      
        <mx:SetEventHandler target="{submitButton}" name="click" 
      
      handler="emptyDocument()" />
    </mx:State>
</mx:states>
 
<mx:Button id="submitButton" />
    

在 Flex 4 beta 中，代码如下：

      <s:states>
    <s:State name="submitState" />
    <s:State name="clearState" />
</s:states>
 
<s:Button label.submitState="submit" textDecoration.submitState="underline"
   click.submitState="trace('done')" click.clearState="emptyDocument()"
   label.clearState="clear" textDecoration.clearState="none"/>
    

• 组件不能再处于未定义状态或空状态。默认情况下，声明的第一个状态是组件的初始状态。
  当文档使用 MXML 2009 语言名称空间时，可以使用新语法。可以混合使用旧版语法和新版状态语法。只有 MXML 2006 名称空间中可以使用旧版语法。

此外，各个组件现在支持外观类中定义的一组状态，这使得根据组件状态应用可视变化更加简单。例如，如果查看 Spark Button 的外观，您会发现已定义以下状态：

      <s:states>
    <s:State name="up" />
    <s:State name="over" />
    <s:State name="down" />
    <s:State name="disabled" />
</s:states> 
    

ButtonSkin 类定义了各个状态中 Spark Button 在可视方面的变化。

以上只是简要介绍了新的 Flex 4 beta 状态语法。有关更多详细信息，请参阅 增强的状态语法规范* 。

效果中的变化

Flex 4 beta 的效果架构改进显著。虽然 Halo 效果只能用于不基于 UIComponent 的控件，Spark 效果可用于任何目标，包括框架中的新图形基元。所有这些效果类都包含在 spark.effects.* package 中。由于 Spark 效果可用于 Halo 组件、Spark 组件和图形基元，Adobe 建议您在今后的应用程序中使用 Spark 效果类。

我并未赘述这一问题，因为您可以通过 Chet Haase 的 Adobe Flex 4 SDK beta 中的效果 一文了解效果类中新增功能的更多详细信息。

布局中的变化

之 前的 Flex 版本在各个控件中定义组件和容器布局。因此，List、TileList 和 HorizontalList 等组件都共享布局以外的相同功能。而它们的布局逻辑仍在这些组件类中进行定义。在 Flex 4 beta 中，布局已与组件剥离开来。现在，Application、List、ButtonBar 和 Panel 等 Spark 组件可以通过声明方式定义布局。在所有组件中，Group 类负责管理包含，而 Group 的子代的布局则委派到相关的布局对象。布局除了 FXG 图形基元，还支持 Spark 和 Halo 组件。甚至可以在运行时更改布局。

作为开发人员，您可以轻松编写自定义布局并将它们切入或切出个别组件。以下是定义垂直 List、水平 List 和拼贴 List 的一个示例。

垂直 List（Spark List 的默认布局是 VerticalLayout）：

      <s:List />
    

水平 List：

      <s:List>
    <s:layout>
        <s:HorizontalLayout />
    </s:layout>
</s:List>
    

拼贴 List：

      <s:List>
    <s:layout>
        <s:TileLayout />
    </s:layout>
</s:List>
    

如前所述，Flex 4 beta 架构旨在为开发人员提供构造块，供他们根据需要选择功能。默认情况下，关闭虚拟化和滚动。要增加 Group 上的滚动栏选项并开启虚拟化，您需要：

以下是对 Spark Panel 使用虚拟化和滚动的一个示例：

      <s:Panel title="Horizontal Panel" width="300" height="220" left="20" top="20">
    <s:Scroller width="100%" height="100%">
        <s:Group>
           <s:layout>
               <s:HorizontalLayout useVirtualLayout="true" />
           </s:layout>
           <s:TextInput />
           <s:Button label="clear" />
           <mx:DateChooser />
           <s:Button label="submit" />
        </s:Group>
    </s:Scroller>
</s:Panel>
    

有关 Flex 4 beta 中的所有布局增强（包括对变换的更好支持）的更多信息，请参阅 Spark 布局规范* 。

使用文本

所有 Spark 组件都使用 Flash Player 10 中的新文本引擎。这些新类为控制文本度量标准、垂直文本以及连字、双向文本等字形元素提供了低级支持。并且，设备字体现在具备嵌入字体的大部分功能，可以 对这些字体消除锯齿、旋转和设置样式。Flex 4 beta 在使用文本的所有 Spark 组件中用到了这一功能。有关 Flex 4 beta 提供的文本基元和文本组件的更多信息，请参阅 Flex 4 功能和迁移指南* 中的“文本基元”部分。

Spark 组件现在还使用 Flash Player 10 和 AIR 1.5 中的 DefineFont4 嵌入字体格式。从最新的 beta 版开始，Halo 组件无法再使用 DefineFont4 格式。将 Spark 和 Halo 组件混合在一个 应用程序 中并嵌入字体时，这会造成一些开销。就目前而言，如果要对所有组件使用同一种嵌入字体，您需要嵌入字体两次，即使用针对 Spark 组件的 DefineFont4 和针对 Halo 组件的 DefineFont3 各嵌入一次。

以下是一个为使用 Spark TextInput 和 Halo DataGrid 的 Flex 4 beta 应用程序嵌入字体 Arial 的示例。

      <fx:Style>
 
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/halo";
 
    @font-face {
        src: url("arial.ttf");
        fontFamily: "ArialDF3";
    }
 
    @font-face {
        src: url("arial.ttf");
        fontFamily: "ArialDF4";
        cff: 
      
        true
      
      ;
    }
 
    s|TextInput {
        fontFamily: "ArialDF4";
        fontAntiAliasType: "normal";
    }
    mx|DataGrid {
        fontFamily: "ArialDF3";
        fontAntiAliasType: "normal";
    }
</fx:Style>
    

请注意，为 Spark 组件嵌入字体时，您需要在字体定义中指定 cff: true。

为 Spark 和 Halo 组件嵌入字体的解决方案仍处于开发阶段，因此今后这个过程应该会更简单。

与 Flex 3 的向后兼容性

与 Flex 3 一样，您可以使用其他编译参数编译应用程序：

      -compatibility-version=3.0.0. 
    

这个编译器参数允许应用程序使用某些 Flex 3 行为，而不是新的 Flex 4 beta 行为。要获得 Flex 4 beta 中支持使用 -compatibility-version 参数的向后兼容性变化的完整列表，请参阅 向后兼容性文档* 。

注意： 调用 Flex 3 兼容性时，无法选择性地保留一个 Flex 4 beta 行为变化子集。如果使用参数 -compatibility-version=3.0.0 进行编译，您将获得文档中描述的所有 Flex 3 行为。

后续工作

从 Flex 3 迁移到 Flex 4 beta 有可能没那么痛苦。这个框架旨在尽可能地向后兼容。并且，当您熟悉新架构后，您会发现它其实更“ 灵活 ”！有关 Flex 4 beta 功能的更多信息，请访问 Web 帮助* 。