圖 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 對應組件：

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

狀態語法中的變化

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 上的滾動欄選項并開啟虛擬化，您需要：

以下是對 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 幫助* 。