目录
要求
预备知识
Flex 3 SDK 和 Flex Builder 3 的实践知识将帮助您最大限度地从本文中受益。
用户级别
中级
必需的产品
自 Flex 3 和 Flex Builder 3 于 2008 年 2 月发布以来，世界已经发生了翻天覆地的变化。Adobe 将 Flex Builder 重新命名为 Flash Builder——部分目的在于强调它的价值不仅仅是一种有用的 Flex 开发工具，而且还是最高级的 ActionScript 开发环境。除此之外，Flash Player 和 AIR 运行时已经实现了显著的进步，新框架也已经出现，包括文本布局框架 (TLF) 和开源媒体框架 (OSMF)。所有这些新增内容使开发人员现可轻松创建多种不同类型的应用程序，包括移动应用程序在内。利用 Flex 4.5 SDK 和 Flash Builder 4.5，开发人员可以创建独立、跨平台的 AIR 应用程序，其外观和操作就像安卓手机和平板电脑、RIM Blackberry Playbook 甚至苹果 iPhone 和 iPad 设备上的本机应用程序一样。
如果您亲自尝试过 Flex 3 SDK 风格的编码，那么了解 Flex SDK 以及开发环境中存在变化的一切方面可能有些困难。在这篇文章中，我将填补这一空缺，简要介绍 SDK 和 Flash Builder 中的新增内容。本文中还包含一个代码示例，同时也提供了各主题其他参考资料的链接。如果您是一名 Flex 3 开发人员，这篇文章将帮助您理解 Flex 3 与 Flex 4.5 之间存在着怎样的差别，以及在使用 Flex 4.5 SDK 开发移动应用程序时需要学习哪些知识。
利用 Flex 开发移动应用程序
最引人注目的新功能就是使用 Flex SDK 编写移动应用程序的能力。为每种尺寸的智能手机和平板电脑等移动设备一次性编写本机应用程序，随后即可跨多家供应商、多种设备进行发布，这样的能力对于以多种移动平台为目标的开发人员来说是一项显著的优势。要编写移动 Flex 应用程序，您需要使用 Flex SDK 4.5 或更新版本，这些版本针对移动设备进行了优化，包含支持触摸技术的新控件。
Spark
对于 Flex 4 和 Flex 4.5 来说，您需要了解的第一件事就是 Spark 组件。
Spark 是在 Flex 4 SDK 中引入的，旨在使 Flex 开发人员能够编写更加健壮、直观的代码，同时利用 Spark 皮肤模型将可视化属性（使用 MXML 编写）与功能（使用 ActionScript 编写）分离开来。您一定会发现，使用 Spark 编写的代码更具简洁、声明式的特征，实际上也更易于维护。在 Flex 4.5 SDK 中，Spark 得到了改进，增加了支持触摸技术的组件、特定于移动的优化等等。通过这样的改进，Adobe 就为开发多屏幕应用程序提供了出色的框架。
如果您在 Flash Builder 中新建一个 Flex 4.5 MXML 应用程序，则主应用程序文件将包含以下内容：
<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">
作为一名 Flex 3 开发人员，您可能会注意到的第一个差别就是 Application 标签的名称空间是 s 而非 mx；这是包含 Spark 组件的名称空间。您还会注意到，这里添加了 MXML 2009 名称空间，即 fx。从 Flex 4 开始，Flex 组件与特殊语言标签分离开来。新组件纳入 Spark 名称空间，旧组件保留在 MX 名称空间之中，不适合上述任一类别的特殊语言标签将归入 fx 名称空间。
注意：有关 Spark 的深入介绍、组件架构的详尽说明以及更多内容，请阅读 Deepa Subramaniam 的文章 Spark 架构与组件集概述。
Spark 状态与过渡
Spark 和 MX 组件均基于 mx.core.UIComponent 类，这提供了按照您认为恰当的几乎任何方式混合使用它们的能力。您可以在 Spark 容器内使用 MX 组件、在 MX 容器内使用 Spark 组件，或者在同一个应用程序内并列使用两种组件——就像它们处于同一个组件集内一样。
然而，Spark 与 MX 组件模型之间最大的差异之一就是定义和处理应用程序状态的方式。
在基于 MX 的 Flex 应用程序中，如果您使用了多种状态，或者状态之间存在诸多显著差异，则代码的状态定义部分很快就会变得极难处理。利用 Spark，状态管理将更加轻松。
使用全新的 Spark 状态语法，您的 states 块将更加简洁，因为它仅需要列举出所有可能的状态，而不必定义其差异。举例来说：
<s:states> <s:State name="stageOne" /> <s:State name="stageTwo" /> <s:State name="stageThree" /> </s:states>
使用 Spark 组件，状态的添加、删除和重定位将由各 UI 组件本身处理。考虑以下按钮：
<s:Button id="panic" label="Don't click me!" x="20" y="20" />
此代码定义了一个带有“Don’t click me!”的标签的按钮，此按钮的显示位置是 20, 20。为将其包含在状态 stageOne 和 stageThree 中，而不包含在 stageTwo 中，请添加 includeIn 属性：
<s:Button id="panic" label="Don't click me!" x="20" y="20" includeIn="stageOne,stageThree" />
includeIn 属性列举了显示组件的所有状态，如果状态更改为列表中没有的一个状态，则组件将被删除。如果属性未设置（如原始按钮代码中那样），则控件将包含在所有状态之中。
要重新定位按钮，您可以使用点标记来设置特定于状态的属性值。考虑这个示例：
<s:Button id="panic" label="Don't click me!" x="20" y="20" x.stageThree="50" y.stageThree="100" />
在这里，x 和 y 属性在最初仍然均为 20，但在状态更改为 stageThree 时，它们将分别修改为 50 和 100。不带点标记的普通 x 和 y 属性指定了未显式自定的所有状态的值。Flash Builder 4 及更新版本支持这种语法，也会当您在 Design View 中重定位一个特定属性处于活动状态的元素时作出这些代码修改。
与全新的 States 语法相结合，即可更加轻松地定义和读取过渡。Flex 在过渡方面也更加智能化，如果过渡属性可以推导得出，那么您就可以隐式使用它们。举例来说，如果您希望一个组件淡入显示屏，则可使用上述 includeIn 属性，在第二个状态中将其添加到显示中，同时只需将该组件指定为淡入过渡的目标即可，例如：
<s:transitions> <s:Transition fromState="stageTwo" toState="stageThree"> <s:Sequence> <s:AddAction target="{panic}" /> <s:Fade target="{panic}" /> </s:Sequence> </s:Transition> </s:transitions> <s:Button id="panic" label="Don't click me!" x="20" y="20" x.stageThree="50" y.stageThree="100" />
就上述代码而言，Flex 将识别出“panic”按钮在前一个状态 (stageTwo) 中不存在，是新添加的，因此将从 alpha 0 淡入到 1.0，而且无需您指定这些值。淡出、移动和其他过渡也可利用同类智能。
您还会注意到我使用了新增的 <s:Sequence> 标签——这是 Flex 4.0 SDK 中新增的。该标签的子标签能够顺序执行，支持精确控制过渡效果。类似地，您可以使用 <s:Parallel> 标签同时执行多个过渡。
除了淡入之外，还有其他许多选项，您可以在 Spark 效果 (PDF) 文档中了解全部 Spark 效果和滤镜。
Spark 皮肤与 FXG
在 Spark 中，功能（使用 ActionScript 编写）与显示代码（使用 MXML 编写）的分离使得代码更易于维护，也使得皮肤制作更加轻松。除此之外，FXG 的引入也改进了皮肤制作，这是一种创建充分利用 Flash Player 功能的矢量图的声明式语法。
借用 Ryan Frishberg 精彩的文章 Flex 4 中的皮肤简介中的部分示例代码，使用 FXG 创建形状是非常简单的：
<s:Rect id="rect" width="200" height="30"> <s:fill> <s:SolidColor color="0x77CC22" /> </s:fill> <s:stroke> <s:SolidColorStroke color="0x131313" weight="2"/> </s:stroke> </s:Rect>
这里创建了一个具有指定宽度和高度、实心填充色和实心轮廓色的矩形。当然，创建简便、添加圆角、边框和您能想到的矢量图的其他很多相关内容也是非常容易的。
为了简化皮肤制作过程，Flex 4 引入了一种 _ 皮肤协议 _ (skinning contract)，它支持组件数据、状态和皮肤部件无缝、直观地协同工作。在为现有组件制作皮肤时，协议是预定义的，在创建自己的组件时，您将自行定义协议的各个方面。
有关 FXG、编写和理解皮肤协议、编写可制作皮肤的组件的更多信息，请参见 Flex 4 中的皮肤简介。如果您正在为移动应用程序设计组件和皮肤，则还应阅读 Jason San Jose 有关优化皮肤的系列文章，第一篇是 Flex 移动皮肤——第 1 部分：经过优化的皮肤制作基础知识。
支持移动开发的新组件
并非 Flex 中的所有组件都开箱即用地提供了移动设备模式，因此 Adobe 创建了一些新组件，专门为移动而优化，同时支持触摸技术，这将您熟悉的 Flex 中的快速开发引入了移动领域。
用户已经开始希望移动应用程序能够提供某些体验：带有导航按钮或者标签的页眉和 / 或页脚区域、中间区域的某种形式的信息列表。对于具有这种风格的应用程序来说，不同形式的新增 ViewNavigator 组件使得一切更加轻松，正如其名称所表示的那样，它能管理视图间的导航。
除此之外，Flash Builder 4.5 中还添加了 New Flex Mobile Project 向导，提供了多种模板，利用各种 ViewNavigator 帮助您立即开始开发工作（如图 1 所示）。
图 1：在 Flash Builder 4.5 中创建一个 Flex Mobile AIR 项目
在 Application Template 选项卡中，您可以选择以下三个选项之一：
- Blank 模板创建一个基本、空白的移动应用程序，附带支持为多种平台进行编译所必不可少的 XML 配置。
- View-Based Application 模板使用 ViewNavigatorApplication 和一个入门视图创建简单的基本视图。基于视图的应用程序所遵循的设计准则与用户对于安卓设备的期待相符。导航往往通过设备上的硬件按钮控制，而非使用屏幕上的可视化元素控制。
- Tabbed Application 模板使用 TabbedViewNavigatorApplication 创建和配置带有选项卡的基本视图，为您在向导中指定的各选项卡创建空白的 ViewNavigator 视图，并将其连接在一起。带有选项卡的应用程序所遵循的设计准则与用户对于苹果 iOS 设备的期待相符。导航完全通过屏幕上的控件实现。
上述模板仅适用于 Flex (MXML) 项目。如果您选择编写一个仅有 ActionScript 的项目，那么久需要从零开始编写一切内容。
许多 Flex 组件都为移动技术进行了优化，使您能够为智能手机和平板电脑构建各种各样的应用程序。此类设备种类繁多，本文无法一一探讨，但如果您正在开发移动应用程序，那么就应该通览 Flex 4.5 文档，自行熟悉其中的内容。特别应该关注有关 Spark 容器、项目渲染器、基于列表的控件、数据网格和网格控件以及文本控件。
不仅仅是移动
除了新增的移动特性之外，Flex 4.5 SDK 还包括适合日常使用的大量新增和更新的组件、双向绑定支持、全新的文本和媒体框架等等。
新增和更新的组件的数量过多，无法在此处全部列出，但部分重要组件包括：
- 新增——Containers、Layouts、VideoDisplay、VideoPlayer、SkinnablePopupContainer 和 Module
- 更新——DataGrid、Form、Image、Formatters 和 Validators
双向绑定
双向绑定解释起来非常简单，但有着无比强大的实力。只要在绑定中的括号前方添加一个 @ 符号，更改就能同时传播到两个方向。
下面的示例将有助于表明我之所以如此欣赏这种特性的原因。
在下面的代码中有一个字符串变量、一个与字符串双向绑定的 TextInput、一个按照旧方法绑定到相同字符串的标签。在 TextInput 发送更改时，字符串将因双向关系而更新，这也会导致标签更新。
<fx:Declarations> <fx:String id="foo" /> </fx:Declarations> <s:TextInput id="ex" text="@{foo}" /> <s:Label id="disp" text="{foo}" />
TLF 和 OSMF
Flex 4.5 充分利用了全新的文本布局框架 (TLF) 和开源媒体框架 (OSMF)。全新的 VideoDisplay 和 VideoPlayer 组件依靠 OSMF 来实现 HTTP 视频流。在全新的 Adobe TV 界面中，您可以看到这种功能的一个出色示例，它仅缓冲当前位置以后的一小部分视频。就像是某些网站中的_ 无限滚动_ 系统，它能识别位置接近缓冲区结束的时候，并检索更多视频流。TLF 用于启用扩展特性，例如从右到左的文本、垂直文本和超过三十种书面语言——在显示外语内容时，这对于按照外语内容的目标阅读方式显示内容极为有用。此外它还提供了一种强大的 API，支持文本列、富控件——包括字距调整和连字等。您可以在 Adobe Labs 的富文本编辑器演示中尝试许多此类 TLF 特性。
运行时共享库
Flex 4.5 SDK 利用了比 Flex 3 更加标准的运行时共享库 (RSL)，提供了带宽、加载时间和性能方面的改进。RSL 是一种通过将共享资产外化到可独立下载并缓存在客户端中的独立文件来减小应用程序 SWF 文件大小的方式。这些共享资产可由任意多个应用程序在运行时加载和使用，但仅传输到客户端一次，这与 HTML web 应用程序外化和缓存 JavaScript 文件与镜像的方式极为相似。
Flex 编译器改进
Flex 4.5 编译器同样也得到了进一步的优化。现在，完整生成所占用的内存更少，完整和增量生成所需的编译时间更短，RSL 链接逻辑也得到了改进。在大中型 Flex 项目中，编译时间的改进高达 20%，完整生成过程中的内存占用减少也达到了 20%。
将 Flex 3 项目迁移到 Flex 4
您可能认为将 Flex 3 应用程序迁移到 Flex 4 是极为困难、耗时的，但实际上这非常简单。随着框架不断成熟，语法变化越来越少。
有关此主题的更多信息，请参见 Joan Lafferty 的 Flex 3 与 Flex 4 之间的差异。您也可能希望阅读 Greg Lafrance 的系列文章，第一篇是将 Flex 3 应用程序迁移到 Flex 4——第 1 部分：将 Flex 3 Dashboard 应用程序导入 Flash Builder 4 。
其他 Flash Builder 改进
除了新移动工作流之外，Flash Builder 4.5 还引入了一些全新的编辑器和生产力增强。Quick Assist 就是一种出色的生产力特性，它使您能够像已经具备依赖项（变量、类、方法等）一样编写代码。Flash Builder 可识别依赖项，并帮助您自动生成它们。现在，您不会再看到红色的错误指示符，而是会在任何不存在的变量、方法等项目上看到一个金色的 Quick Assist 指示符。要生成所需的对象，将鼠标定位在突出显示的一个或多个词内，并按下 Command+1 (MAC) 或 Ctrl+1 (PC) 即可。
Quick Assist 也是智能化的，它将在当前文件的恰当的类、本地方法内生成类变量。在生成函数时（如图 2 所示），它会检查传递给它的任何参数类型，以便生成正确类型的参数 stub（如图 3 所示），如果返回值将保存在任意位置，则它能够正确地设置函数的返回类型。
图 2：Quick Assist 识别可生成的函数。
图 3：Quick Assist 代码生成的结果。
Flash Builder 4.5 经过预先配置，附带数十种代码模板，这与 Eclipse 用户熟悉的 Snippet 相似。它们使得迅速便捷地插入常用代码段成为可能，并且还可选择由其提示您该代码的某些部分。您还可以修改数百种现有模板或者添加自己的模板。
针对用户体验设计人员或交互设计人员组成的团队的工作流同样也引起了一定的关注。在 Flash Builder 内，您现在可以创建新的 Flash Catalyst 兼容项目，支持在 Flash Builder 和 Flash Catalyst 之间往返。
有关 Quick Assist、代码模板和 Flash Catalyst 兼容项目的更多信息，请参见 Serge Jesper 在 Adobe TV 上发布的视频 Flash Builder 4.5 新增功能。
后续内容
至此，您应该已经熟悉了 Flex 4.5，甚至可能在考虑编写一个移动应用程序。有关本文所述主题的更多具体信息，请访问上文中提到的链接。Flex 在多屏幕和移动应用程序开发领域前景光明，我非常高兴能够脱离为多种平台开发独立本机应用程序的窘境，顺应未来，也非常高兴能够开发基于屏幕大小而非制造商的应用程序。
原文链接： A Flex 3 developer’s introduction to Flex 4.5 and Flash Builder 4.5
Java 避坑指南：Java 高手笔记代码篇
本迷你书包括 86 个业务开发中常见踩坑点。每一个知识点都相当的实用，是程序员业务开发中的必备避坑指南...
评论