将应用程序从Flex 3迁移至Flex 4.doc

将应用程序从Flex 3迁移至Flex 4要求必备知识熟悉 Adobe Flex。用户级别中级所需产品 Flex（下载试用） Flash Builder（下载试用） 示例文件（范例）在本指南中，我将介绍如何将一个实际应用程序从 Flex 3 迁移至 Flex 4。文中提供的示例涵盖了 Flex 应用程序开发的所有重要领域，包括 CSS、Spark 组件、自定义外观、嵌入字体等。在您自己动手之转换之前，这看起来好像是一项艰巨的任务。如果您阅读了本指南之后，您就会发现Flex 4在组件架构、CSS改进、新状态机制和新图形标记语言FXG等各方面的优势。MX组件的向后兼容性和Flash Builder 4的优化都让这个转化过程变的简单易行本指南中使用的示例文件包括原始 Flex 3 应用程序及转换后的 Flex 4 应用程序的源代码。完成指南中所述步骤后，您就可以使用完成后的 Flex 4 应用程序源代码进行引用了。本文包含以下内容： 打开项目 命名空间更改 警告清除 更新应用程序及其背景 布局和样式 从 ViewStack 到 Flex 4 States 添加渐变效果 转换 SampleMicPanel 自定义视图 转换 PitchDetection 自定义视图 转换 InformationPanel 自定义视图 转换 InputDeviceSelector 自定义视图打开项目首先，打开 Flex 3 项目，将设置更改为指向 Flex 4.1 SDK。我将简要介绍重新对其进行编译所需改变，以及不使用MX兼容模式时Flex4的视觉效果。1. 将 flex3_to_flex4_transitioning.zip 内的 MicrophoneExamplesFlex3.zip 示例文件解压至您选择的文件夹。2. 在 Flash Builder 4 中选择 File - Import - Flash Builder Project。3. 选择 Project Folder。4. 单击 Browse，导航至刚才解压的 MicrophoneExamplesFlex3 文件夹，并单击 OK。5. 单击 Finish。原始项目使用 Flex 3.2 SDK（AIR 2.0 beta 将其覆盖）。如果要构建项目，您将会在 Problems 面板中看到一个错误提示信息“Unknown Flex SDK: ”。要解决这一问题，您需要更改该项目使用的 SDK 版本。6. 下载和安装包含 AIR 2.0 的Flex 4.1 SDK。（请参阅安装说明中的发布说明。）7. 右键单击项目并选择属性以打开属性对话框。8. 选择左边的 Flex Compiler 类别。9. 在 Flex SDK Version 部分，选择 Flex 4.1 SDK。10. 单击 OK。注：如果您使用不同的 Flex 4 和 AIR 2.0 SDK 或 Flex 4.1 版本，请使用 Configure Flex SDKs 并选择合适的 SDK。因为原始应用程序使用 AIR 2.0 beta 版本，您需要更新应用程序描述符文件中的命名空间。11. 打开 src 文件夹中的 MicrophoneExamples-app.xml 文件并找到下列代码行： 12. 删除“beta2”，代码行显示如下：13. 保存更改并构建项目。应用程序将进行无错误编译（尽管可能会出现一些警告）。14. 选择 Run Run MicrophoneExamples并运行图1和图2显示出Flex3版本和Flex4版本的应用程序的不同：图 1. 用 Flex 3 SDK 构建的原始应用程序。图 2. 使用 Flex 4 SDK 构建的应用程序，无任何代码更改。新旧应用程序的差异是由于新 Flex 4 默认 CSS 和主题值产生的。如果您希望 Flex 4 编译器可以严格兼容旧的 MX 组件，可以在 Flex 项目的 Flex Compiler 对话框中选择“Use Flex 3 compatibility mode”选项。另外请注意：Flex 4.1 SDK 要求的最低版本播放器是 Flash Player 10。命名空间更改迁移过程的第二步是进行命名空间的更改。新命名空间将 MXML 2006 命名空间分为三个部分：fx、s 和 mx。这三个部分分别是 MXML 2009 语言和构造（fx）、Spark 组件（s）和 MX 组件（mx）。更改命名空间的步骤如下：1. 打开主 MicrophoneExamples.mxml 应用程序文件。2. 删除旧命名空间声明：xmlns:mx=/2006/mxml 3. 插入新命名空间声明：xmlns:fx=/mxml/2009 xmlns:s=library://flex/spark xmlns:mx=library://flex/mx 4. 保存更改并构建项目。更改命名空间产生两个错误。5. 定位错误（文件第 24 行和第 25 行附近）并分别将 mx:Style 和 mx:Script 更改为 fx:Style 和 fx:Script。现在命名空间可以覆盖不同的组件集，两个组件可能名称相同，如 s:Button 和 mx:Button。命名空间的目的是清晰定义不同的组件包；这对于 MXML 及 CSS 文件和样式都很重要。Flex 4 包含对 CSS 的多命名空间支持。6. 打开 embed_assets/stylesheet_common.css 文件，并将 Spark 和 MX 命名空间添加到文件的顶部，如下所示：namespace s library://flex/spark; namespace mx library://flex/mx; 您需要将 MX 命名空间添加到 MX 组件。7. 在 WindowedApplication、Application、Window、ComboBox、Hslider、RadioButton 和 ToolTip 前添加 mx|。剩余样式是特定样式名称。这时，您也可以利用时机处理主题颜色编译器警告。8. 将主题颜色更改为 chrome 颜色。请注意：chrome 颜色并非主题颜色的真实替代，而是为了本文中应用程序之目的。新 Spark 组件默认样式集与 Halo 主题不同。文件的前几行显示如下：/* * Common CSS definitions for the Adobe Directory */namespace s library://flex/spark;namespace mx library://flex/mx;mx|WindowedApplication,mx|Application,mx|Window /* make app window transparent */ font-family: Myriad Web; font-size: 12; font-anti-alias-type:advanced; disabled-overlay-alpha: 0; chrome-color: #444444; color: #AAAAAA; text-roll-over-color: #AAAAAA; text-selected-color: #AAAAAA;警告清除这时，在进行下一步操作之前，您还需要处理一个编译器警告。您将会看到一个警告显示不赞成使用 Application.application 并建议使用 FlexGlobals.topLevelApplication。您无法绑定 FlexGlobals，但是可以采用一种不同的办法，在 InformationPanel.mxml 中创建一个公共的可绑定属性并在 MicrophoneExamples.mxml 中对其进行引用。1. 在 InformationPanel.mxml 中定位下列代码： 2. 将上述代码更改为如下新的代码： 3. 在 MicrophoneExamples.mxml 中定位下列代码：4. 添加 applicationVersion 属性：更新应用程序及其背景主应用程序文件包含组成应用程序的几个组件。在这一部分和下一部分，您将将旧的 MX 组件更改为其 Spark 等效组件并探索对应用程序进行布局和设计样式的新方法。首先要更改的是主 WindowedApplication 类，其中您将将 mx:WindowedApplication 更新为 s:WindowedApplication。您还需要更改其他一些属性。需要将布局、showFlexChrome、horizontalScrollPolicy 和 verticalScrollPolicy 等 4 个属性删除。布局属性是 Spark 中的 LayoutBase 类（而不是 String 类），且通常在 MXML 中定义。一个 Spark WindowedApplication 组件的默认布局相当于旧的绝对布局属性。对于 showFlexChrome，您将希望设置 showStatusBar=false，以删除 Flex 状态栏 chrome（默认情况下，Flex 状态栏 chrome 在 Spark WindowedApplication 组件中是打开的）。在 Spark 中进行滚动通常是在 Skin 中进行处理的，且对于其组件也同样如此。默认情况下，Spark WindowedApplication 不为应用程序绘制任何 chrome；如果需要，应该开发人员来绘制 chrome。在原始代码中，使用 VBox 和 mainBox CSS 样式创建一个自定义背景。mainBox 样式仅沿应用程序的宽度和高度提供一个灰色背景。在新应用程序中，它可以从主应用程序中删除 Vbox 组件并从 CSS 文件中删除 mainBox 样式。然后您可以将 backgroundColor=0x666666 添加到主应用程序类中，以达到同样的效果。实现上述更改的步骤如下：1. 在 MicrophoneExamples.mxml 中定位下列代码：2. 用如下代码更新WindowedApplication组件：3. 通过删除下列行删除 Vbox： 4. 将结束标记从 更改为 。5. 从 stylesheet_common.css 中删除 mainBox 定义。布局和样式在 Flex 3 中，布局和设置样式的能力（填充、背景颜色等）被混合到一个组件中。将麦克风应用程序（或其他任何应用程序）从 Flex 3 迁移至 Flex 4 时，您会注意到可以独立处理布局和样式的区域。例如，在 MicrophoneExamples.mxml 中检查首个 Hbox。Hbox 在 Spark 中没有直接的一对一组件匹配，尤其是 titleBox 样式类定义 CSS 文件中的填充、边框和背景值后。在 Spark 中，Group 类被设计为轻量级布局和容器类，但是它们不提供任何外观自定义功能。对于外观自定义功能或任何展示组件，您需要使用一个可以扩展 SkinnableComponent 的类。您可以使用 SkinnableContainer 在容器中展示可视内容和布局元素。这将打开很多选项，并导致些许混乱。因为 Hbox 提供可视内容和布局，使用 SkinnableContainer 类是个好主意。以下是所有更改都完成后的 SkinnableContainer；具体步骤见下文。 1. 首先在 MicrophoneExamples.mxml 中用 s:SkinnableContainer 代替 mx:Hbox。2. 在名为 controls.skins 的项目中创建一个新包。3. 在该包中，使用一个 ponents.SkinnableContainer 主机组件创建一个名为 TopBarSkin.mxml 的新 MXML 外观。4. 将下列代码复制到 TopBarSkin.mxml，覆盖其默认内容。 该外观通过使用 titleBox CSS 样式表中的值绘制一个 Rect 和 Line 来创建背景和底部边框。SkinnableContainer 寻找一个名为 contentGroup 的外观部件，在该外观中是一个 Hgroup，其值是通过 titleBox 样式在原始 Hbox 上使用的填充值和布局值。在原始 Hbox 内，首个容器是一个包含应用程序麦克风图标和部分标签的 Canvas 组件。其目的仅仅是使用部分特定值部署组件。5. 将 mx:Canvas 更改为 s:Group。在 Canvas 内，有一个 Image 组件： mx:Image 类支持动态和静态图像加载，但是使用 s:BitmapImage 将更加快速，且使用的类也更小。6. 将 mx:Image 行更改为： 7. 将 mx:Label 组件更改为 s:Label 组件。此更改还要求对 CSS 文件进行部分更改。Flex 4 Spark 控件使用新的 Flash Player 10 文本布局框架（TLF）展示文本；它更加新(先进)且可以提供几种新功能，包括双向文本。它与嵌入字体的工作方式也不同。在使用 font-face 嵌入不同字体的 CSS 文件中，您需要添加 embedAsCFF: true;。您还需要为希望使用嵌入字体的特定样式类添加 fontLookup: embeddedCFF;。8. 在 stylesheet_common.css 文件中进行下列更改：font-face src:url(/embed_assets/fonts/MYRIAD.TTF); font-family: Myriad Web; advanced-anti-aliasing: true; embedAsCFF: true; font-face src:url(/embed_assets/fonts/MYRIADB_0.TTF); font-family: Myriad Web; font-weight: bold; advanced-anti-aliasing: true; embedAsCFF: true; font-face src:url(/embed_assets/fonts/MyriadPro-Black.otf); font-family: Myriad Pro Black; embedAsCFF: true; .titleText, .titleTextGrey, .titleTextBlack font-size: 12; color: #FFFFFF; font-family: Myriad Pro Black; fontLookup: embeddedCFF;默认情况下，s:Label 有一个背景颜色，因此您会希望通过用 CSS 文件中的 background-alpha: 0; 添加一个 s|Label CSS 样式使背景颜色不可见。9. 将下列代码添加到 stylesheet_common.css：s|Label background-alpha: 0; font-size: 12;10. 同样，在 Label 组件上添加 y=3 并将两个像素添加到标签组件的 x 值，以使文本重新排行，因为 TLF 的默认定位：s:Label id=txtExample text=viewName x=100 y=3 styleName=titleTextGrey原始 Hbox 的第二组组件包含右边的 4 个按钮：左导航、右导航、帮助和关闭。11. 容器类 mx:Hbox 不包含任何可视内容，因此将其更改为 s:Hgroup，保留水平布局。同样，将 horizontalGap 属性更改为 gap。您需要记住 Spark 按钮上的一些更改。您将看到原始 btnInfo 按钮的 toggle 为“真”。默认情况下，Spark 按钮不实现 toggle 功能。有一个选择状态的按钮有一个 Spark ToggleButton。下一个大问题是，在默认情况下，Spark 按钮的风格不支持通过样式进行向上、向下、over 和禁用外观操作。幸运的是这不难处理。您基本想要为按钮状态使用图像，并弃用普通按钮外观的所有绘画，这就是 Flex 4 外观自定义功能中的所有内容。12. 将 mx:Button 组件更改为 s:Button 组件如果是 btnInfo，则更改为 s:ToggleButton。13. 在 controls.skins 包中创建一个名为 IconButtonSkin 的新 MXML Skin。14. 将下列代码复制到 IconButtonSkin.mxml： HostComponent(ponents.supportClasses.ButtonBase) 该 Skin 文件中的代码侦听状态更改，然后使用状态值根据样式查找设置图标。样式是旧版的 mx:Button 的样式，因此无须更改 CSS 代码。请注意：代码还将检查样式是否存在以确认它没有试图设置一个无效的图像源。IconButtonSkin 不包含任何绘画代码或标签，仅包含一个单独的 s:BitmapImage。该组件的源属性被设置成 CSS 样式中设置的值。因为该应用程序没有其他按钮，您可以在 CSS 文件中为 s|Button 和 s|ToggleButton 设置默认外观，以新建 IconButtonSkin。15. 将下列代码添加到 stylesheet_common.css：s|Button, s|ToggleButton skin-class: ClassReference(controls.skins.IconButtonSkin); 现在所有向上、over 和其他状态的特定按钮 CSS 类样式将与新的 s|Button 和 s|ToggleButton 外观文件一起工作。从 ViewStack 到 Flex 4 statesFlex 4 对 MXML 中状态工作的方式进行了彻底革新，新版方法比旧版方法（使用旧版方法时，所有状态逻辑都在状态 MXML 块中）更加简易。您可以使用 Flex 4 状态机制代替 mx|ViewStack 功能的大部分简单案例。注：无 Spark ViewStack 直接组件替代，但是如果您需要旧版 selectedChild 属性和相似的语法，您可以从网上找到第三方 ViewStack Flex 4 Spark 组件。1. 要使用新状态方法，请打开 MicrophoneExamples.mxml 并添加三种状态，分别用于 ViewStack 中声明的三种视图： 注： 块必须放置于任何内容组件之前，否则您将收到下列编译器错误提示：“Child elements of WindowedApplication serving as the default property value for mxmlContentFactory must be contiguous. MicrophoneExamples.mxml /microphone/src line 57 Flex Problem”。2. 接下来，删除 mx:ViewStack 并使用各自的状态名称为 mx:ViewStack 中每个自定义组件添加 includedIn 属性： 3. 构建项目。在 Problems 面板中，您将在 MicrophoneExamplesSource.as 中看到三个错误，分别在下列三行中：vsMain.selectedChild = pnlInfo;vsMain.selectedChild = pnlMic;vsMain.selectedChild = pnlTuner;您需要更改这些行上的 currentState，而不是更改 selectedChild。4. 在 MicrophoneExamplesSource.as 中编辑上述所有行，并将这些行更改为：currentState = info;currentState = sampleMic;currentState = pitchDetection;当 currentState 属性值更改时，触发事件，用于状态转换。以下是 MicrophoneExamplesSource.as 代码更改：if (view != info) btnInfo.selected = false; else viewName = (Application Info); currentState = info; if (view = mic) viewName = (Record & Playback); currentState = sampleMic; if (view = tuner) viewName = (Pitch Detection); currentState = pitchDetection; 添加渐变效果Flex 4