當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Flex 3 与 Flex 4 beta 之间的区别

發布時間：2024/4/17 编程问答 48 豆豆

生活随笔收集整理的這篇文章主要介紹了 Flex 3 与 Flex 4 beta 之间的区别小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Flex 3 與 Flex 4 beta 之間的區別

Flex 4（代碼名：Gumbo）beta 發行版在 Flex 3 基礎上做出重大改動。Flex 4 beta 引入了一個新的組件和外觀架構。但是作為 Flex 3 開發人員，您在使用 Flex 4 beta 編譯 Flex 3 應用程序時可能不會遇到太多難題，因為新發行版的目的之一是保持與 Flex 3 的向后兼容性。

在本文中，我將簡要概述 Flex 4 beta 的主要目的和架構區別并介紹組件、布局、狀態使用和效果方面的變化。我還將針對使用 Flex 4 beta 編譯 Flex 3 應用程序時遇到的情況回答一些提問。本文無法涵蓋 Flex 4 的所有新增功能。有關這些信息，請參閱 Matt Chotin 的 Flex 4 SDK beta 的新增功能*一文。

本文中的術語 Halo 組件是指 Flex 3 原先包含的組件。術語 Spark 組件是指 Flex 4 beta 中的一套新組件。

要求

為了充分利用本文，您需要

Flex 4 SDK beta

試用*
了解更多信息*

必備知識

本文假設您熟悉 Flex 3 Framework。

將應用程序遷移到 Flex 4 beta

將 Flex 3 應用程序遷移到 Flex 4 beta 時，步驟并不復雜。除了一些缺陷修復以及默認主題稍有變化，您的應用程序通常可以像 Flex 3 中那樣正常運行（或更好）。但您必須注意幾點。

播放器依賴性

請務必針對 Flash Player 10 進行編譯。Flex 4 beta 需要 Flash Player 10 支持。

字體選擇器需要一個名稱空間

CSS 字體選擇器將 Flex 類命名為 style。例如，以下是 Button 和 DateField 的字體選擇器：

Button {
cornerRadius: 10;
}
DateField {
color: #780800;
}

從 Flex 4 beta 開始，當應用程序使用字體選擇器時，需要名稱空間。如果您只在 Flex 應用程序中使用 MXML 2006 名稱空間，請將以下默認名稱空間聲明添加到 CSS 中：

<mx:Style>

@namespace "http://www.adobe.com/2006/mxml";
…
</mx:Style>

如果在應用程序中使用多個名稱空間，您需要在 CSS 中提供各個名稱空間。有關示例，請參閱本文稍后部分中的 Flex 4 beta 中的名稱空間與包。

此外，如果應用程序使用 StyleManager.getStyleDeclaration("Button") 等方法，字體選擇器必須包含它的包。例如，對 getStyleDeclaration() 的調用將改為 StyleManager.getStyleDeclaration("mx.controls.Button")。

主題更改

Flex 3 (Halo) 組件的默認主題目前是 Spark 主題。因此，當您使用 Flex 4 beta 編譯應用程序時，它可能會自行調整外觀和大小。但是，如果要使用 Flex 3 的外觀，您還是可以做到的，因為 Flex 4 beta 包含 Flex 3 的 Halo 主題。要使用 Halo 主題進行編譯，您可以使用 -compatibility-version=3.0 標志或使用 -theme 作為附加編譯器參數來編譯應用程序。在 Flash Builder 4 beta 中，您可以通過更改“Properties”（屬性）面板的“Flex Compiler”（Flex 編譯器）部分中的“Additional Compiler Arguments”（其他編譯器參數）設置做到這一點（請參閱圖 1）。如果要使用其他編譯器參數，請確保 framework/themes/Halo 目錄包含在您的源路徑中。

圖 1.設置其他編譯器參數

如果您選擇使用新的 Spark 主題，請注意許多可用于 Halo 主題的樣式無法用于 Spark 主題。Spark 主題只支持數量有限的樣式，包括 baseColor、color、contentBackgroundColor、focusColor、symbolColor、selectionColor 和 rollOverColor。要使用 Spark 主題更改組件上的邊框或圓角等可視部分，您需要創建一個自定義外觀。Flex 4 beta 還加入了一種設計用于快速模型的線框外觀。

除了主題更改外，Flex 4 beta 應用程序的默認預下載器也已經改為 mx.preloaders.SparkDownloadProgressBar。這個更輕量級的預下載器可以縮短一些啟動時間。如果要使用 Flex 3 預下載器，您只需更改一行代碼。在 Application 標簽中添加以下內容：preloader="mx.preloaders.DownloadProgressBar"。

如果要將應用程序從 Flex 3 遷移到 Flex 4 beta，我不建議將各個 Flex 3 Halo 組件替換為它們對應的 Flex 4 beta 組件。這樣投入時間可能并不是一個好方法。您應當為新的應用程序轉而使用 Flex 4 beta 組件架構。

Flex 4 beta 架構變化概述

Flex 4 beta 的重要主題之一是“用心設計”。這個目標涉及在設計人員和開發人員之間創造一個更順暢的工作流程。為了幫助實現這一點，該框架將組件可視部分與其剩余行為明確劃分開。在 Flex 3 中，組件的代碼包括以其行為、布局和可視變化為中心的邏輯。在 Flex 4 beta 中，組件被劃分為不同的類，各個類負責處理特定的行為。

Gumbo 架構文檔*中的說明如下：

“主組件類，即類名與組件的 MXML 標簽名匹配的那個類封裝了組件的核心行為。這包括定義組件調度的事件、組件表示的數據、接通作為主組件組成部分的任何子組件以及管理和跟蹤內部組件狀態（稍后我們將詳細討論狀態）。

與之相應的組件類是一個外觀類，它負責管理與組件的可視外觀相關的一切內容，包括圖形、布局、表示數據、更改不同狀態中的外觀以及從一個狀態過渡到另一個狀態。在 Halo 模型中，Flex 組件外觀是只負責組件的某個圖形部分的資源。更改組件外觀的任何其他方面，如布局或狀態可視化，需要將組件子類化并直接編輯 ActionScript 代碼。在 Gumbo 模型中，所有這一切都在外觀類中以聲明方式進行定義，并且主要通過名為 FXG 標簽的新圖形標簽進行定義。”

要進一步了解 Flex 4 beta 中新的圖形標簽，您可以閱讀 FXG 1.0 規范*。

作為上述架構的示例，您可以參考 spark.components.Button 類的代碼。這個類只包含以組件行為為中心的邏輯。在外觀類 spark.skins.default.ButtonSkin 中定義這個惡組件的所有可視部分。

考慮到性能，Flex 4 beta 為開發人員提供了構造塊，可供他們根據需要選擇功能。默認情況下，關閉并非所有應用程序都需要的重量級功能，如滾動和虛擬化。

Flex 4 beta 中的名稱空間與包

在將 Flex 3 類原封不動地保留在同一 mx.* 包中的同時，Flex 4 beta 為組件、核心類、效果、濾鏡、布局、基元、外觀和 utils 引入了 spark.* 包。

Flex 4 beta 提供一套新的組件和效果，它們與 Flex 3 組件共享許多相同類名。為了避免 MXML 中出現名稱沖突，Flex 4 beta 隨附四個獨特的名稱空間：MXML 2006、MXML 2009、Spark 和 Halo。

MXML 2006：之前版本的 Flex 中使用的舊版 MXML 語言名稱空間。使用 Flex 4 beta 編譯的 Flex 3 應用程序可以繼續使用這個名稱空間。

URI：http://www.adobe.com/2006/mxml

默認前綴：mx

MXML 2009：新的 MXML 語言名稱空間。這純粹是一個語言名稱空間，不包含組件標簽。

URI：http://ns.adobe.com/mxml/2009
默認前綴：fx

Spark：這個名稱空間包含所有新的 Spark 組件。它應當與 MXML 2009 語言名稱空間一起使用。

URI：library://ns.adobe.com/flex/spark
默認前綴：s

Halo：這個名稱空間包含所有 Halo 組件。它應當與 MXML 2009 語言名稱空間一起使用。

URI：library://ns.adobe.com/flex/halo
默認前綴：mx

以下是使用 MXML 2009、Spark 和 Halo 名稱空間創建一個簡單的 Flex 4 beta 應用程序的簡明示例。它使用一個 Halo DateChooser 和一個 Spark Button。

<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/halo">

<mx:DateChooser id="main_calendar" x="20" y="20"/>
<s:Button label="submit" x="220" y="20"/>

</s:Application>

Flex 4 beta 還在 CSS 中加入了多名稱空間支持。如果將 MXML 2009、Spark 和 Halo 名稱空間與字體選擇器一起使用，您需要在 CSS 定義中定義一組名稱空間以避免名稱沖突。

以下是一個將字體選擇器用于 Halo 和 Spark 組件的 CSS 示例：

<fx:Style>

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";

s|Button {
color: #FF0000;
}

mx|DateChooser {
color: #FF0000;
}

</fx:Style>

默認 Property 和 Declarations 標簽

在 Flex 4 beta 發布之前，Flex 語言允許 Application 根標簽包含可視子代和非可視子代。可視子代與 addChild() 一起添加到 Application，非可視子代則作為屬性聲明。隨后，表示新屬性聲明的非可視子代不可以作為 Application 的直接子代。您可以將這些非可視子代添加到 <fx:Declarations> 標簽下。這包括效果、驗證程序、格式化程序、數據聲明和 RPC 類等非可視子代。以下是一個簡短的示例：

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Declarations>
<s:Fade id="fadeEffect" target="{targetButton}" alphaFrom="1" alphaTo="0" />
</fx:Declarations>
<s:Button id="targetButton" />
<s:Button label="play effect" click="fadeEffect.play()" x="80" />
</s:Application>

新增組件和容器

如前所述，Flex 4 beta 引入了許多使用新架構的新組件類，它們應當可以令外觀和其他自定義操作更簡單。下表列出了 Flex 3 Halo 組件及其 Flex 4 beta Spark 對應組件：

Flex 3 Halo 組件Flex 4 beta Spark 組件

mx.controls.Button	spark.components.Button
mx.controls.ButtonBar	spark.components.ButtonBar
mx.controls.CheckBox	spark.components.CheckBox
mx.controls.ComboBox	spark.components.DropDownList（不可編輯）
mx.controls.HorizontalList	spark.components.List（帶一個 HorizontalLayout）
mx.controls.HRule	spark.primitives.Line
mx.controls.HScrollBar	spark.components.HScrollBar
mx.controls.HSlider	spark.components.HSlider
mx.controls.Image	spark.primitives.BitmapImage
mx.controls.LinkBar	spark.components.ButtonBar（帶一個自定義外觀）
mx.controls.LinkButton	spark.components.Button（帶一個自定義外觀）
mx.controls.List	spark.components.List
mx.controls.NumericStepper	spark.components.NumericStepper
mx.controls.RadioButton	spark.components.RadioButton
mx.controls.RadioButtonGroup	spark.components.RadioButtonGroup
mx.controls.TextArea	spark.components.TextArea
mx.controls.TextInput	spark.components.TextInput
mx.controls.TileList	spark.components.List（帶一個 TileLayout）
mx.controls.ToggleButtonBar	spark.components.ButtonBar
mx.controls.VideoDisplay	spark.components.VideoPlayer
mx.controls.VRule	spark.primitives.Line
mx.controls.VScrollBar	spark.components.VScrollBar
mx.controls.VSlider	spark.components.VSlider
mx.core.Application	spark.components.Application
mx.core.Window	spark.components.Window
mx.core.WindowedApplication	spark.components.WindowedApplication
mx.containers.Canvas	spark.components.Group
mx.containers.HBox	spark.components.HGroup
mx.containers.Panel	spark.components.Panel
mx.containers.Tile	spark.components.Group（帶一個 TileLayout）
mx.containers.VBox	spark.components.VGroup

Adobe 鼓勵您與 Spark 組件一起使用 Halo 組件和容器。由于 Adobe 在同一基類 (UIComponent) 上構建組件，Spark 與 Halo 之間應當可以實現全面的可互操作性。下表列出了目前沒有 Spark 直接等效類的組件和容器。

Flex 3 類，沒有直接的 Flex 4 beta 對應類

mx.controls.Alert
mx.controls.ColorPicker
mx.controls.DataGrid
mx.controls.DateChooser
mx.controls.DateField
mx.controls.Menu
mx.controls.MenuBar
mx.controls.PopUpButton
mx.controls.PopUpMenuButton
mx.controls.ProgressBar
mx.controls.RichTextEditor
mx.controls.TabBar
mx.controls.Tree
mx.containers.Accordion
mx.containers.ApplicationControlBar
mx.containers.ControlBar
mx.containers.DividedBox
mx.containers.Form
mx.containers.Grid
mx.containers.TabNavigator
mx.containers.TitleWindow
mx.containers.ViewStack

狀態語法中的變化

Flex 4 beta 將狀態功能升級為一個全面的 MXML 語言功能。因此，您可能會發現狀態更靈活、更直接。新的狀態語法內聯程度更高，允許在上下文中指定狀態特定變化。以下是 Flex 4 beta 語法中的主要區別：

只有狀態是在狀態陣列中定義的。
在新的狀態語法中，不能使用 AddChild 和 RemoveChild。您必須使用 includeIn 和 excludeFrom 屬性在組件上定義組件在特定狀態中的角色。

在以下 Flex 3 示例中，僅當文檔的 currentState 為 submitState 時，才使用狀態包含一個 Button 并刪除一個 TextInput。對于較復雜的狀態，這種方法可以做到十分詳細。

<mx:states>
<mx:State name="submitState" basedOn="">
<mx:AddChild relativeTo="{loginForm}" >
<mx:Button label="submit" bottom="10" right="10"/>
</mx:AddChild>
<mx:RemoveChild target="{firstTextInput}"/>
</mx:State>
</mx:states>

<mx:TextInput id="firstTextInput" />
<mx:Canvas id="loginForm" />

以下是一段使用 includeIn 和 excludeFrom、更簡單的 Flex 4 beta 代碼。

<s:states>
<s:State name="submitState" />
</s:states>
<s:TextInput id="firstTextInput" excludeFrom="submitState" />
<s:Group id="loginForm" >
<s:Button label="submit" bottom="10" right="10" includeIn="submitState"/>
</s:Group>

SetProperty、SetStyle 和 SetEventHandler 已替換為新的點語法，它允許您限定具備特定狀態標識符的 MXML 屬性值。

在以下 Flex 3 示例中，代碼為 submitState 中的一個 Button 定義了屬性、樣式和事件。

<mx:states>
<mx:State name="submitState" basedOn="">
<mx:SetProperty target="{submitButton}" name="label" value="submit" />
<mx:SetStyle target="{submitButton}" name="textDecoration" value="underline"/>
<mx:SetEventHandler target="{submitButton}" name="click" handler="trace('done');"/>
</mx:State>
<mx:State name="clearState" basedOn="">
<mx:SetProperty target="{submitButton}" name="label" value="clear" />
<mx:SetEventHandler target="{submitButton}" name="click" handler="emptyDocument()" />
</mx:State>
</mx:states>

<mx:Button id="submitButton" />

在 Flex 4 beta 中，代碼如下：

<s:states>
<s:State name="submitState" />
<s:State name="clearState" />
</s:states>

<s:Button label.submitState="submit" textDecoration.submitState="underline"
click.submitState="trace('done')" click.clearState="emptyDocument()"
label.clearState="clear" textDecoration.clearState="none"/>

組件不能再處于未定義狀態或空狀態。默認情況下，聲明的第一個狀態是組件的初始狀態。
當文檔使用 MXML 2009 語言名稱空間時，可以使用新語法。可以混合使用舊版語法和新版狀態語法。只有 MXML 2006 名稱空間中可以使用舊版語法。

此外，各個組件現在支持外觀類中定義的一組狀態，這使得根據組件狀態應用可視變化更加簡單。例如，如果查看 Spark Button 的外觀，您會發現已定義以下狀態：

<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>

ButtonSkin 類定義了各個狀態中 Spark Button 在可視方面的變化。

以上只是簡要介紹了新的 Flex 4 beta 狀態語法。有關更多詳細信息，請參閱增強的狀態語法規范*。

效果中的變化

Flex 4 beta 的效果架構改進顯著。雖然 Halo 效果只能用于不基于 UIComponent 的控件，Spark 效果可用于任何目標，包括框架中的新圖形基元。所有這些效果類都包含在 spark.effects.* package 中。由于 Spark 效果可用于 Halo 組件、Spark 組件和圖形基元，Adobe 建議您在今后的應用程序中使用 Spark 效果類。

我并未贅述這一問題，因為您可以通過 Chet Haase 的 Adobe Flex 4 SDK beta 中的效果一文了解效果類中新增功能的更多詳細信息。

布局中的變化

之前的 Flex 版本在各個控件中定義組件和容器布局。因此，List、TileList 和 HorizontalList 等組件都共享布局以外的相同功能。而它們的布局邏輯仍在這些組件類中進行定義。在 Flex 4 beta 中，布局已與組件剝離開來。現在，Application、List、ButtonBar 和 Panel 等 Spark 組件可以通過聲明方式定義布局。在所有組件中，Group 類負責管理包含，而 Group 的子代的布局則委派到相關的布局對象。布局除了 FXG 圖形基元，還支持 Spark 和 Halo 組件。甚至可以在運行時更改布局。

作為開發人員，您可以輕松編寫自定義布局并將它們切入或切出個別組件。以下是定義垂直 List、水平 List 和拼貼 List 的一個示例。

垂直 List（Spark List 的默認布局是 VerticalLayout）：

<s:List />

水平 List：

<s:List>
<s:layout>
<s:HorizontalLayout />
</s:layout>
</s:List>

拼貼 List：

<s:List>
<s:layout>
<s:TileLayout />
</s:layout>
</s:List>

如前所述，Flex 4 beta 架構旨在為開發人員提供構造塊，供他們根據需要選擇功能。默認情況下，關閉虛擬化和滾動。要增加 Group 上的滾動欄選項并開啟虛擬化，您需要：

1) 在布局對象上將 useVirtualLayout 設為 true 2) 將一個 Scroller 組件添加到 Group。

以下是對 Spark Panel 使用虛擬化和滾動的一個示例：

<s:Panel title="Horizontal Panel" width="300" height="220" left="20" top="20">
<s:Scroller width="100%" height="100%">
<s:Group>
<s:layout>
<s:HorizontalLayout useVirtualLayout="true" />
</s:layout>
<s:TextInput />
<s:Button label="clear" />
<mx:DateChooser />
<s:Button label="submit" />
</s:Group>
</s:Scroller>
</s:Panel>

有關 Flex 4 beta 中的所有布局增強（包括對變換的更好支持）的更多信息，請參閱 Spark 布局規范*。

使用文本

所有 Spark 組件都使用 Flash Player 10 中的新文本引擎。這些新類為控制文本度量標準、垂直文本以及連字、雙向文本等字形元素提供了低級支持。并且，設備字體現在具備嵌入字體的大部分功能，可以對這些字體消除鋸齒、旋轉和設置樣式。Flex 4 beta 在使用文本的所有 Spark 組件中用到了這一功能。有關 Flex 4 beta 提供的文本基元和文本組件的更多信息，請參閱 Flex 4 功能和遷移指南*中的“文本基元”部分。

Spark 組件現在還使用 Flash Player 10 和 AIR 1.5 中的 DefineFont4 嵌入字體格式。從最新的 beta 版開始，Halo 組件無法再使用 DefineFont4 格式。將 Spark 和 Halo 組件混合在一個應用程序中并嵌入字體時，這會造成一些開銷。就目前而言，如果要對所有組件使用同一種嵌入字體，您需要嵌入字體兩次，即使用針對 Spark 組件的 DefineFont4 和針對 Halo 組件的 DefineFont3 各嵌入一次。

以下是一個為使用 Spark TextInput 和 Halo DataGrid 的 Flex 4 beta 應用程序嵌入字體 Arial 的示例。

<fx:Style>

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";

@font-face {
src: url("arial.ttf");
fontFamily: "ArialDF3";
}

@font-face {
src: url("arial.ttf");
fontFamily: "ArialDF4";
cff: true;
}

s|TextInput {
fontFamily: "ArialDF4";
fontAntiAliasType: "normal";
}
mx|DataGrid {
fontFamily: "ArialDF3";
fontAntiAliasType: "normal";
}
</fx:Style>

請注意，為 Spark 組件嵌入字體時，您需要在字體定義中指定 cff: true。

為 Spark 和 Halo 組件嵌入字體的解決方案仍處于開發階段，因此今后這個過程應該會更簡單。

與 Flex 3 的向后兼容性

與 Flex 3 一樣，您可以使用其他編譯參數編譯應用程序：

-compatibility-version=3.0.0.

這個編譯器參數允許應用程序使用某些 Flex 3 行為，而不是新的 Flex 4 beta 行為。要獲得 Flex 4 beta 中支持使用 -compatibility-version 參數的向后兼容性變化的完整列表，請參閱向后兼容性文檔*。

注意：調用 Flex 3 兼容性時，無法選擇性地保留一個 Flex 4 beta 行為變化子集。如果使用參數 -compatibility-version=3.0.0 進行編譯，您將獲得文檔中描述的所有 Flex 3 行為。

后續工作

從 Flex 3 遷移到 Flex 4 beta 有可能沒那么痛苦。這個框架旨在盡可能地向后兼容。并且，當您熟悉新架構后，您會發現它其實更“靈活”！有關 Flex 4 beta 功能的更多信息，請訪問 Web 幫助*。

posted on 2009-10-11 14:24 NET未來之路閱讀(...) 評論(...) 編輯收藏

轉載于:https://www.cnblogs.com/lonelyxmas/archive/2009/10/11/1580871.html

總結

以上是生活随笔為你收集整理的Flex 3 与 Flex 4 beta 之间的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：面试题08(C++)
下一篇： struts2的select标签的用法