将 Flex 3 的应用程序迁移到 Flex 4 — 第 1 部分：将 Flex 3 Da

?

?

本系列一共 4 个部分 ， 内容涉及将 Flex 开发人员中心上可用的 Flex 3 Dashboard 演示应用程序导入 Flash Builder 4 （ 用于 Flash 平台的 Adobe 的 IDE 最新版本 ）， 然后将应用程序迁移至 Flex 4 以充分利用 Flex 4 Spark 的架构和组件 ， 本文是第 1 部分。

我确实着迷于 Flex 3 Dashboard 应用程序。它是 Flex 的一些强效应用的极佳展示 ， 包括显示图表、栅格、表单中的数据 ， 以及可围绕 UI 拖放的 pod 中的数据。而且它同时也是将某些迷人的 Flex 功能集成至你自己的应用程序中的绝佳起点。

Flash Builder 4 推出时包含 Flex 3.x SDK 和 Flex 4.x SDK 。一方面你可以在 Flash Builder 中继续开发 Flex 3 应用程序 ， 不过迁移至 Flex 4.x 具有明显的优势。首先，编译器速度更快。其次，新的 Spark 组件架构以及新的植皮和状态模型都是巨大的改进功能。当您也在考虑其它新功能的同时，使用 Flex 4.x SDK 是一个明确的选择。

该系列的第 1 部分 （ 本文 ） 描述了将 Flex 3 Dashboard 导入 Flash Builder 4 的同时尽量减少变动的方法。 Flex 4.x SDK 推出了新的编译器，因此导入 Dashboard 需要几个附加步骤。

本系列文章并无改进 Dashboard 应用程序架构总体质量的意图。其目的是提供一个例子，即修改 Flex 3 中创建的应用程序以使用 Flex 4 — 并提供足够的信息帮助你将自己的 Flex 3 应用程序迁移至 Flex 4 。

下面是本系列文章涵盖的一些 Flex 4 和一般 Flex 主题 ：

·???????? Flex 3 和 Flex 4 的命名空间的差异

·???????? Flex 4 Spark 布局方案的显著区别

·???????? Flex 4 Spark 植皮模型的显著区别

·???????? 创建和编辑自定义组件的皮肤 ， 包括皮肤状态

·???????? 将 CSS 样式移入自定义皮肤

·???????? 改编 Flex 3 应用程序以使用 Flex 4 的容器和控件

如需试用 Dashboard 应用程序 ， 请访问 Flex 3 Dashboard 页面 并单击体验应用程序 (Experience The Application) 链接。

开始

要完成本系列文章 ， 你需要安装 Flash Builder 4 或 Flash Builder 4.0.1 。鉴于你需要 Flex 4.1 SDK （ 如果有 ， 可使用较新版本 ）， 使用 Flash Builder 4.0.1 更好。 Flex SDK 的 4.1 版本是必须的，因为它含有所需的重要增强功能，可避免启动 Dashboard 应用程序时出现运行时错误。

获取 Flex 4.1 SDK

如果你有 Flash Builder 4 但还没有 Flex 4.1 SDK ， 则需要进行下载 （ 如果有 ， 亦可下载最新版本 ） 并将其加入你的 Flash Builder 4 安装。如果你已经有 Flash Builder 4.0.1 ，则不需要更新 SDK 。

请按照以下步骤安装 Flex 4.1 SDK ：

1.?????? 访问 Flex 4 Downloads 页面。

2.?????? 在 Latest Milestone Release Builds 部分中下载最新的 Adobe Flex SDK 和 Adobe Add-ons 文件 ， 请勿下载 Open Source Flex SDK 文件。

3.?????? ZIP 文件下载完成后 ， 在你的 Flash Builder 4 sdks 文件夹中创建一个新文件夹 ， 命名为 4.1 。在 Windows 中，该文件夹的路径通常为 C:/Program Files/Adobe/Adobe Flash Builder 4/sdks 。

4.?????? 将这两个 ZIP 文件的内容提取至 4.1 文件夹。

下载 Dashboard 源文件

要获取 Dashboard 源文件 ， 请直接下载本文的样本文件 Dashboard-Part1-Start.zip 。

你也可以在 Flex 3 Dashboard 主页面上下载 Dashboard 源文件 ZIP 存档。

Dashboard 源页面 。

2.?????? 单击页面左下角的 Download Source 链接。你不需要下载 Flex 3 SDK 。

本文的另一个样本文件 Dashboard-Part1-End.zip 含有一个第 1 部分所有步骤已完成的项目。如果需要，你可以使用此项目作为参考。

导入 Dashboard 项目

当你导入 Dashboard 项目时 ， 你还必须选择该项目的 Flex SDK 版本。本节对这两个步骤进行描述。

从 ZIP 文件或项目文件夹中导入

有两个方法可以将 Dashboard 应用程序项目导入 Flash Builder 。你可以直接从 Dashboard.zip 存档文件中导入 ， 或者在提取 ZIP 文件内容后将项目导入一个目录中 （ 参见图 1 ） 。你可以使用其中一种方法。

图 1. 从项目文件夹中导入。

请按照以下步骤从 ZIP 文件中导入 ：

1.?????? 选择 File > Import Flex Project in Flash Builder 4 。

Import Flex Project 对话框中 ， 选择 File 并单击右边的 Browse 按钮。

3.?????? 导航至含有 Dashboard.zip 文件的文件夹。

4.?????? 选择该文件并单击 Open 。

5.?????? 返回 Import Flex Project 对话框，单击 Finish 。

选择 Flex SDK 版本

单击 Finish 之后将弹出一个提示 ， 让你选择用哪一个 Flex SDK 编译该项目 （ 参见图 2 ） 。 Dashboard 项目至少需要 Flex SDK 4.1 ，或者你可以选择较新的 Flex 4 SDK 版本（如果有）。

1.?????? 如果你只安装此教程使用的 Flex 4.1 SDK 教程 ， 需要单击 Configure Flex SDKs 链接以将其添加为一个选项。

2.?????? 如果你的默认 SDK 不是 Flex 4.1 ， 请选择 Use A Specific SDK 并选择 Flex 4.1 SDK 。

3.?????? 确保 Use Flex 3 Compatibility Mode 选项未 选中 ， 因为你要将 Dashboard 应用程序迁移至 Flex 4 。

4.?????? 单击 OK 。

图 2. 选中 Flex 4.1 SDK 。

5.?????? 如果你从 ZIP 项目存档文件中导入 ， 并且看到信息说该项目将进行升级 （ 参见图 3 ）， 直接单击 OK 即可。

图 3. 项目升级提示。

6.?????? 导入过程完成后 ， 展开 Dashboard 项目和其在 Package Explorer 视图 （ 参见图 4 ） 中的 src 文件夹以查看导入的文件夹和文件。

图 4. 导入之后的项目源文件树。

注 ： 将 Flex 3 Dashboard 应用程序导入 Flash Builder 之后 ， 你可能希望将此已导入但未更改的项目文件保存至另一个位置作为参考。

修复警告和错误

项目成功导入之后 ， 你将需要进行几处代码更改 ， 以对 Flex 3 SDK 和 Flex 4.x SDK 的不同点进行修正。

注 ： 本文随后将提到的一些错误只有在前几个错误被修复之后才会显示 ， 因此你可能还看不见它们。

添加一个空 libs 文件夹

如果你尝试建立项目 （ 通过选择 Project > Build All ）， 你将看到的第一个错误是缺失 libs 文件夹 （ 参见图 5 ） 。

图 5. Problems 视图中的错误提示缺失 libs 文件夹。

对于 新项目 ， ibs 文件夹会通过 Flash Builder 自动创建 ， 但对于不含 libs 文件夹的导入项目 ， 必须手动创建 libs 文件夹 ：

1.?????? 在 Package Explorer 视图中 ， 右键单击该项目的顶层文件夹 Dashboard ， 然后选择 New > Folder 。

2.?????? 输入 libs 作为文件夹名称。

3.?????? 单击 Finish 。

该文件夹可为空文件夹 （ 参见图 6 ）， 但其必须存在才能消除错误。

?

图 6. Package Explorer 视图中的新文件夹。

解决顶层 Flex 全局警告

添加 libs 文件夹之后 ， 再次建立该项目。 缺失文件夹错误将不再显示 ， 但你将收到两个错误和两个警告 （ 参见图 7 ） 。

?

图 7. Problems 视图中显示的两个新错误和两个警告。

出现这两个警告是因为在 Flex 4.x SDK 中你引用了不同于 Flex 3 SDK 的顶层应用程序的对象和方法。不使用在 Flex 3 中使用的 mx.core.Application 类（例如， Application.application.MY_TOP_VAR_OR_METHOD ），在 Flex 4 中你使用 mx.core.FlexGlobals 类（例如， FlexGlobals.topLevelApplication.MY_TOP_VAR_OR_METHOD ）。

要消除这两个警告 ， 请按照以下步骤 ：

1.?????? 双击第一个警告 ， 打开相关的源代码文件 ， 然后将光标定位在导致警告的代码行。

2.?????? 将 Application.application 替换为 FlexGlobals.topLevelApplication 。

3.?????? 对第二个警告重复步骤 1 和步骤 2 。

4.?????? 保存你的更改。

5.?????? 如果你看见两个访问未定义属性 FlexGlobals 的错误 ， 请将下面一行内容添加至位于另一个导入语句旁边的 PodLayoutManager.as 的顶端 ：

?

import mx.core.FlexGlobals;

进行这两处更改之后再重新建立时 ， 将不再显示这两个警告。

解决 IStroke 和 IFill 接口更改问题

这两个不正确参数编号的错误是由 Flex 3.5 SDK 中的 API 更改造成 （ 在 Flex 3.5 SDK 发布之前 ， Dashboard 应用程序最初使用较早的 Flex 3 SDK 版本而创建 ） 。这些更改涉及到了 IStroke 和 IFill 接口。出现的问题是，传送至在接口中定义的两个方法的参数编号已经更改。

要修复以上错误，请按照以下步骤：

1.?????? 双击第一个错误打开 RollOverBoxItemRenderer.as ， 然后将光标定位在导致该错误的行 ：

?

stroke.apply(g);

出现第一个错误是因为 IStroke 接口法 apply() 在 Flex 3.5 之前是一个参数 ， 而现在有三个参数。

Flex 3.4 和较早版本：

?

apply(g:Graphics):void

Flex 3.5 和 Flex 4 ：

?

apply(graphics:Graphics,targetBounds:Rectangle,targetOrigin:Point):void

stroke.apply(g); 替换为 stroke.apply(g,rc,new Point(rc.left,rc.top)); 。

3.?????? 将下面的行 （ 如果预先不存在 ） 添加至不含另一个 import 语句的 文件顶端 ：

?

import flash.geom.Point;

4.?????? 保存你的更改并重新建立项目。将只显示第二个错误。

5.?????? 双击 Problems 视图中的第二个错误 ， 打开 RollOverWedgeItemRenderer.as ， 然后将光标定位在导致该错误的行 ：

?

f.begin(g,rc);

出现该错误是因为 IFill 接口法 begin () 在 Flex 3.5 之前是两个参数 ， 而现在有三个参数。

Flex 3.4 和较早版本：

?

begin(target:Graphics,rc:Rectangle):void

Flex 3.5 和 Flex 4 ：

?

begin(target:Graphics,targetOrigin:Point):void

6.?????? 将 f.begin(g,rc); 行替换为 即可解决该错误。

?

7.?????? 保存你的更改并重新建立项目。

现在你应该看见两个新的错误和多个警告 （ 参见图 8 ） 。接下来将修复这些问题。

?

图 8. Problems 视图中新出现的错误。

?

移除 Style 标签

要消除以上警告，请按照以下步骤：

1.?????? 打开主应用程序文件 main.mxml 。

2.?????? 移除 <mx:Style> 标签（在第 15 行旁边）：

?

<mx:Style source="/assets/styles.css" />

3.?????? 保存你的更改并重新建立项目。

?

此标签控制的样式将在本系列文章后续部分的各种自定义皮肤中实施。请勿删除 styles.css 文件，因为你在创建自定义皮肤时需要引用它。

移除 Application 容器中和别处的样式属性设置

要修复剩下的两个错误 ， 请按照以下步骤 ：

1.?????? 双击第一个错误 ， 然后在 main.mxml 中 ， 移除 <mx:Application> 标签的 backgroundSize 样式属性。

2.?????? 双击第二个错误 ， 然后在 src/com/esria/samples/dashboard/view/ListContent.mxml 中 ， 移除 <mx:List> 标签中的 themeColor 样式属性。

3.?????? 保存你的更改并重新建立项目。

至此 ， 最新的警告和错误都得到解决 ， 但你还将看见一个 HTML 包相关的新错误。接下来你将修复此错误。

修复 HTML 包错误

你需要修复的最后一个错误是 ， Flash Builder 无法创建 HTML 包 （ 参见图 9 ） 。出现该错误是因为 HTML 模板在 Flex 4 中已经更新以充分利用 SWFObject ，这可以提供 Flash Player 检测的更可靠的方式。

?

图 9. Problems 视图中出现的 HTML 包错误。

?

该错误的修复很简单：

1.?????? 右键单击错误消息然后选择 Recreate HTML Templates 。

2.?????? 重新建立项目。

3.?????? 验证 Problems 视图中无错误报告。

注 ： 将 Flex 3 Dashboard 应用程序导入 Flash Builder 时出现的所有错误都被解决之后 ， 你可能希望将此项目文件保存至另一个位置作为参考。

启动 Dashboard 应用程序

?

现在你已经解决了所有出现的错误 ， 可以启动 Flash Builder 4 中的 Dashboard? 应用程序 ， 方式是选中 Run > Run Main 或按下 Ctrl+F11 （ 参见图 10 ） 。

?

图 10. 用 Flex 4.1 SDK 建立的 Dashboard 应用程序。

?

启动该应用程序时 ， 你将注意到显示内容和该应用程序的 Flex 3 版本大不相同。原因之一是因为你删除了 <mx:Style> 标签，因此该应用程序不再使用 应用程序 CSS 样式引用的图像。

另一个原因是 ， 该应用程序正在使用 Flex 4.1 SDK 。 Flex 3 MX 控件的默认外观和感觉已经发生变化，更类似于新的 Flex 4 Spark 控件的外观和感觉，而且 MX 控件和容器的某些属性在 Flex 4 中已发生变化。

本系列文章的第 2 部分将引导你迁移该应用程序以使用 Flex 4 Spark 控件和容器 ， 以及新的 Spark 架构。在本系列文章的最后， Dashboard 应用程序将和 Flex 3 版本完全一致。

?

下一步阅读方向

本文阐述了将 Flex Developer Center Dashboard 演示应用程序 （ 使用 Flex 3 SDK 进行编写 ） 导入 Flash Builder 4 的方法 ， 作为迁移该应用程序至 Flex 4 的第一个步骤。

现在你已经导入了 Dashboard 项目并解决了转换至 Flex 4.1 SDK 时突发的最初的错误 ， 你可以进入本系列的第 2 部分 （ 即将推出 ）， 开始将该应用程序迁移至 Flex 4 。

关于 Flex 4 的更多信息 — 尤其是 Dashboard 应用程序相关的特性 — 请参见以下资源 ：

·???????? Flex 4 帮助 – 图表介绍

·???????? – 深入探讨数据

·???????? – 拖放

·???????? Flex 研发人员中心 - Flex 4 的新增功能

·???????? Flex 一周视频培训（免费）

+

根据 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授予本作品许可。超出本许可证范围且与本文中包含的示例代码相关的权限可在 Adobe 上找到。