Flex 4 中有哪些出色的新特性?

距离发布 Flex 4 beta 1 已有一段时间。自 2008 年 8 月 Adobe 在其开源网站上发布早期的 Flex 4 版本(以前的代号为 Gumbo)以来,它就具有一个非常开放的开发流程。尽管期间一些 Flex 4 特性集仍处于修改和改进之中,但大多数早期特性仍然存在。本文中将介绍 Flex 4 中的一些比较重要的更改。
在文末,我们提供了一个测验来测试您的 Flex 4 知识,完成测试后,您将有机会获得 Flex Builder 3 Standard 的一个副本,并可以免费升级至 Flash Builder 4!
名称空间
Flex 使用名称空间来实现以下功能:标识正在使用的语言版本,提供我们可以将一个 XML 标记映射到一个特定 ActionScript 类的范围,以及告诉编译器自定义组件的位置。Flex 4 已更新为最新的 MXML 2009 名称空间,该名称空间现在包含新的语言标记。现在组件在自己的名称空间中声明,Flex 3 (Halo) 和 Flex 4 (Spark) 组件都具有自己的名称空间。
这意味着应用程序文件现在将可能在 Application 标记中具有 3 个名称空间声明:

细心的读者可能已经注意到,新的 MXML 2009 名称空间添加了前缀 fx。它用于特殊的语言实体,一些实体是您所熟悉的,但另一些实体是 Flex 4 中新引入的。
许多 Flex 3 标记都具有等效的 Flex 4 标记,但此名称空间中引入了一些新的语言标记。这些标记包括:
fx:Declarations
fx:Private
fx:Library
fx:Declarations 用于定义应用程序的非可视子对象,以表示属性声明,这些子对象不再局限于在应用程序根目录下独立使用。一个例子是服务调用(比如 RemoteObject、WebService 和 HTTPService)的声明。
fx:Private 用于存储将被编译器忽略的信息,比如开发人员细节和版本编号。它还用于存储 Flash Builder 或编译器操作不需要的设计相关信息。此标记可能包含特定于一个能够导出设计内容的工具(比如 Illustrator)的其他信息,各种 Adobe 工具可以在 Flash Catalyst 工作流中使用这些信息,稍后将对此进行详细介绍。
fx:Library 用于定义和存储图形 fx:Definition 子对象,这些子对象可以在应用程序中重用。在 fx:Library 中创建的图形对象只有在使用时才初始化。
我们在一个例子中将所有这些内容结合起来。清单 1 中的代码演示了 fx:Library、fx:Definition 和 fx:Private 标记的使用:它呈现两个黄色的五角星,五角星之间为一个正方形,其中填充了从黑色到透明的渐变。
清单 1 中的五角星和正方形(单击查看图像)

说明性图形
Flex 4 能够很好地利用 FXG,后者是 CS4 图形应用程序中使用的一种新的图形交换格式。Flex 4 和 Flash Player 10 相结合,可以呈现 FXG 图形元素。这些元素包括:
图形和文本原语
填充、描边、渐变和位图
滤镜、蒙版、alpha 和混合模式支持。
FXG 图形元素可通过多种方式用于 Flex 4。上面的示例代码包含两种 FXG 元素:一个正方形和一个五角星。可以在 MXML 文件或组件中使用 FXG 元素,也可以把它保存为 .fxg 文件格式。CS4 工具通常使用 FXG 2008 名称空间导出 FXG。由于这些文件专用于在图形应用程序之间共享,您将发现对于 Flex 中使用的格式具有更严格的要求,Flex 编译器将仅使用特定于 FXG 的标记。Adobe 的新应用程序 Flash Catalyst 简化了兼容 Flex 4 的 FXG 图形的创建,可以使用这些图形来完善应用程序的用户界面和外观。
Flex 4 中新增的效果也适用于 FXG 图形元素。这些新效果可同时用于新的和旧的组件。独立效果现在必须在 fx:Declarations 标记内部而不是在应用程序主体中声明。同样,Flash Catalyst 有一些附加工具能够简化这些效果的使用过程。
新版本同样改进了 CSS 处理。一个原因在于 CSS 在为组件添加皮肤时扮演着更重要的角色。添加了其他选择器,包括 id 选择器和适用于组件的后代选择器(descendant selector),这支持您根据组件是否继承自一个特定的组件(比如 Button 是 HBox 的后代)来为这些组件应用样式。如果熟悉后代 CSS 选择器,您应该会发现这是一种处理组件的直观方式。
 
布局
在 Flex 中构建组件时,根据它们的布局属性进行选择:Canvas 将提供绝对的 x、y 定位,VBox 的内容在一个垂直栈中列出,HBox 以水平方式安排其内容,而 Application 标记支持选择所有 3 个布局选项。Flex 4 中新的 layout 标记也支持选择所有 3 个布局选项,它的目的是将布局规则从各个组件解耦出来,使开发人员能够控制组件的子组件的定位。layout 标记的一个优势在于,可以在运行时定义、更改或删除组件的布局。
下面的示例代码指定一个垂直布局,将会在应用程序中显示两个垂直堆叠的按钮:

状态
大部分 Flex 开发人员会认为最好使用 Flex Builder 创建视图状态。在 Flex 3 中,状态描述如何以编程方式从可视层添加或删除可视元素,可以采用类似的标记来修改样式、属性和事件。状态意味着可以通过有效地重用可视元素,在 Flex 中有效地更改 UI。
使用 Flex Builder 更容易完成此过程的原因在于,该 IDE 能够记录更改状态和将更改转换为必要代码所需的各个步骤。它生成的这些代码您也可以自己编写,但是为什么要自己编写呢?要弄明白将要发生的事件的顺序,需要花大量时间。
现在,Flex 4 已经更新了状态:以前使用的标记已经不受支持,各种状态必需进行的更改现在是您使用的可视组件的元素。组件现在始终存在,而不是在切换到特定状态时再以编程方式添加。这意味着再也不会因为缺少变量而出现错误。虽然可视化地管理状态速度可能更快,但在代码中应用更改的方式更符合逻辑。
状态本身的创建方式与 Flex 3 相似,每个状态都使用嵌套在两个 states 标记之间的一个 State 标记来定义。在过去,基视图状态必须通过设置 currentState 属性来显式地定义;现在,第一个状态将被当作默认状态。
Flex 3 中的 AddChild 和 RemoveChild 类已被 includeIn 和 excludeFrom MXML 标记属性取代,如果需要,这两个属性都可以是多个状态的逗号分隔列表。可视的 SetProperty 和 SetStyle 类,以及 SetEventHandler 类,都被一种新的 propertyName.stateName 语法所替代。
我们来看一个例子,其完整代码如清单 2 所示。注意,代码中两个状态的定义——一个是默认状态定义,另一个定义将在提交表单时显示:

我们还可以看到,Label 组件具有一个为 defaultState 定义的文本值:
<mx:Label id="formLabel" x="20" y="16" text.defaultState="Your name:"/>
另外请注意 TextInput 上的 includeIn 属性——它被设置为只有当我们处于 defaultState 状态时才显示:

Button 的属性会根据不同状态而更改:其 formSubmit 状态的 x 和 y 属性更改为使用点表示法,也即 x.formSubmit="20"。该按钮还有两个单击事件处理程序,一个处理程序对应于每个状态,另一个用于更改为 defaultState:

以上只是在 Flex 4 中进行开发时经常会用到的一些特性。此 beta 版本是对 Flex 的一个重大升级,大量更改将简化在 Flex 中开发的过程,支持更有创意地控制项目。随着 Flex 爱好者逐渐熟悉这些出色的新特性,我们一定会看到开发人员以充满吸引力的全新方式对该技术进行应用。您可以在 Adobe Labs 上随时关注 Flex 4 信息并获取 Flex 4 beta SDK。

本文来自:http://www.sitepoint.com/article/whats-new-flex-4/

没有更多推荐了,返回首页