将Flex 3应用程序移植到Flex 4.5中 第2部分：Dashboard应用程序

要求：

必要知识

建议充分了解Flex 3，并对Flex 4.5有基本了解。读者在阅读本文之前，还应首先阅读本文章系列的第1部分。

用户级别

初级

要求的软件产品

Flash Builder 4.5 Premium（下载试用版）

样本文件

Dashboard-flex45-Part2-Start.zip

Dashboard-flex45-Part2-End.zip

?

本文是系列文章（共4部分）的第2部分，在本文中，用户可以将Flex开发者中心的Flex 3 Dashboard验证应用程序导入Flash Builder 4.5中，然后将应用程序移植到Flex 4.5中，以使用Flex 4.5 Spark架构及组件。

虽然Flex 4.5的一个主要特征是支持在Flex中创建移动应用程序，但是本系列文章没有将Dashboard应用程序转换为移动应用程序。之后的系列文章将介绍移动Dashboard应用程序的创建。

本系列文章的第1部分介绍如何将Flex Dashboard导入Flash Builder 4.5中，从而做出充分的改动，并进行编译和运行。第2部分（本文）介绍Dashboard代码移植到Flex 4.5的过程。

用户在完成第2部分之前，必须完成第1部分的所有步骤。或者，用户还可以下载Dashboard-Part2-Start.zip样本文件，对文件进行解压缩，将其导入Flash Builder中，然后继续。本文的另一个样本文件Dashboard-Part2-End.zip包含一个项目，在该项目中，第2部分的所有步骤均已完成。如果用户愿意，可以使用该项目作为参考。

注：如果用户下载源代码并使用Flex 3（及Flex 3.4 SDK）进行编译的话，Adobe样例网站上的Flex 3 Dashboard应用程序和实际显示的不同（参见图1）。在本系列文章中，用户可以将Dashboard应用程序移植到Flex 4.5中，这样就和使用Flex 3编译后的结果相同了，而不是Adobe 样例网站上显示的结果。

图1. example.adobe.com网站（左图）及编译源代码（右图）显示的Dashboard

Dashboard初始化

Dashboard 应用程序将每个pod的位置和状态信息保存在FlexSharedObject中，该概念类似于在网页上使用的cookies。用户在将Dashboard应用程序转成Flex 4.5时，可以在Dashboard范围内改变pod的位置，对pod进行最大化和最小化等等。如果运行时间发生错误，会导致SharedObject存储状态的不稳定性。在任何一种情况下，用户都需要对Dashboard进行初始化，以便继续使用。用户可以通过删除电脑上的SharedObject文件来实现。该文件的位置取决于用户使用的操作系统：

1? Windows 95/98/ME/2000/XP系统，文件位置：c:/Documents and Settings/username/ApplicationData/Macromedia/Flash Player/#SharedObjects；

2? Windows Vista /Windows 7系统，文件位置：c:/Users/username/AppData/Roaming/Macromedia/FlashPlayer/#SharedObjects?

3??Mac OS X系统，文件位置：/Users/username/Library/Preferences/Macromedia/FlashPlayer/#SharedObjects/web_domain/path_to_application/application_name/object_name.sol

4? Linux/Unix系统，文件位置：? /home/username/.macromedia/Flash_Player/#SharedObjects/web_domain/path_to_application/application_name/object_name.sol

代码转换的组织方式
Dashboard是一个不平凡的应用程序，代码分布在19个文件中（不包括数据文件和图像文件）。应用程序范围对引导用户做出Dashboard移植到Flex 4.5的变动构成了挑战。

代码转换的一般方法首先是应用程序对象，然后是容器层级的各级。但是，一个文件的变化通常会引起其他文件的变化，从而避免发生错误，保证能够启动应用程序。

本系列文章方法的目标之一就是尽可能将应用程序维持在可以启动的状态，而不会发生任何错误（允许出现警告）。
某些部分包含转换代码的多个步骤。漏掉或误用任何一个步骤均很难进行下去。请仔细阅读每一步骤，并将技巧记好。

1 在使用另外一个MXML标签替换MXML标签时，只需替换标签名称和命名空间前缀，而非整个标签，说明另有规定除外。
2 在本系列文章中，许多步骤在多个文件中重复使用，所以后继说明可以帮助用户简化或总结已执行的步骤。
3 ?步骤的参考点通常为函数名称、MXML标签的id或更通用的文本，如“文件的顶部附近”。

Main.mxml的初始变化

?? 用户首先要对主应用程序文件main.mxml做出基本变化。

?? Spark应用程序容器使用的变化

?? 首先，在main.mxml中，将打开和关闭应用程序标签的命名空间前缀由mx改为s，以使用新的Spark应用程序类。

??? 1. 将<mx:Application改为<s:Application，并将<s:Application改为</s:Application>。

然后，使用打开应用程序标签中的三个Flex 4.5命名空间定义替换一个Flex 3 命名空间定义。

2. 使用下列各行替换xmlns:mx="/2006/mxml"。

Script标签命名空间前缀的变化

3. 改变<mx:Script>标签中的命名空间前缀，以使用Flex 4.5 fx命名空间，代替使用mx命名空间。

4. 将</mx:Script>改为</fx:Script>，对关闭标签进行更新。

指定应用程序容器中的VerticalLayout

Flex 3 Dashboard <mx:Application>标签默认为垂直布局，但是Flex 4.5 Spark <s:Application>标签默认设置为BasicLayout（Flex4.5相当于绝对布局）。用户需要指定应用程序容器的垂直布局。

5. 在main.mxml中，将下列代码添加在<mx:TabBar>组件之前。

1. 保存修改。

2. 创建并运行应用程序。

Dashboard应用程序编译时应该不会发生错误，并正常运行。与Flex 3版本相比，该应用程序会产生某些显示问题，比如背景图不显示（参见图2），但是当用户接下来将应用程序移植到Flex 4.5中时，可以消除这些问题。

图2. 应用程序启动，但是会出现某些显示问题（部分截屏）
用户在将该应用程序与Flex 3对比时，还会发现其他差异（参见图3）。

图3. Flex3 Dashboard 应用程序（部分截屏）

执行应用程序容器的自定义皮肤

用户在更新主应用程序容器及命名空间之后，下一步就是执行应用程序容器的自定义皮肤。

用户执行的自定义皮肤可以恢复应用程序容器的背景图。

1. 首先为自定义皮肤创建一个名为skins的新文件夹。右键点击PackageExplorer中的src文件夹，选择New>Folder，键入skins作为文件夹名称，点击完成。该文件夹应与default package在同一级（参见图4）。

图4. Package Explorer中的skins文件夹

接下来，我们要创建皮肤。

2. 右键点击skins文件夹，选择New>MXMLSkin。

3. 在新New MXML Skin 对话框中，在Name（名称）处键入CustomApplicationSkin，在Host Component（主机组件）处键入spark.components.Application。

4. 勾选Create as copy of，验证该副本来自于spark.skins.spark.ApplicationSkin。

5. 勾选Remove ActionScript Styling Code（参见图5）。

图5. 创建Dashboard应用程序的应用程序容器皮肤

9. 点击Finish。

利用FlashBuilder，在src/skins文件夹中创建名为CustomApplicationSkin.mxml的新文件。

10. 为了能够使用用户尚未修改的自定义skin类，在main.mxml文件上方添加<s:Application>标签。

然后，修改skin 类，执行先前在styles.css中定义的样式以及用户在第1部分去除的backgroundSize样式属性。用户可能需要参照assets/styles.css中的应用程序类型选择器，因为其样式是在皮肤中执行的。由于Spark架构力图明确区分组件的视觉元素与逻辑，所以在Flex 4.5中并未像在Flex 3中那样使用CSS样式。

11. 打开文件skins/CustomApplicationSkin.mxml，找到带有id backgroundRect的Rect标签，执行皮肤中的background图像。使用下列BitmapImage标签替换整个Rect标签及其内容。

12. 保存修改，重新创建项目。

注：该皮肤将顶部、底部、左方和左方的constraint属性设置为0，这样可使图像充满整个应用程序背景，同时充当从<mx:Application>标签中移除的backgroundSize样式属性的角色。

由于默认的Flex4.5 Spark 应用程序背景是白色的，所以无需在Style.css（及应用程序标签）中使用background-color样式和background-gradient-colors样式。同样，由于应用程序默认文本颜色为黑色，所以style.css中的color样式也是不必要的。

启动应用程序，用户可以在该应用程序中发现Flex 3 Dashboard应用程序中使用的类似的背景图（参见图6）。

图6. 应用程序背景图不当显示（部分截屏）

未完待续！