Flex 3 与 Flex 4 之间的区别(2)

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

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

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

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

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

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

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

Flex 4 中的命名空间与包

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

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

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

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

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

以下是使用 MXML 2009、Spark 和 Halo 命名空间创建一个简单的 Flex 4 beta 应用程序的简明示例。它使用一个 MX 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/mx">
    
    <mx:DateChooser id="main_calendar" x="20" y="20"/>
    <s:Button label="submit" x="220" y="20"/>
 
</s:Application>

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

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

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

默认 Property 和 Declarations 标签

在 Flex 4 SDK 发布之前，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>

上一篇 | 下一篇