圖 1. 設(shè)置其他編譯器參數(shù)

如果您選擇使用新的 Spark 主題，請(qǐng)注意許多可用于 Halo 主題的樣式無(wú)法用于 Spark 主題。Spark 主題只支持?jǐn)?shù)量有限的樣式，包括 baseColor 、 color 、 contentBackgroundColor 、 focusColor 、 symbolColor 、 selectionColor 和 rollOverColor 。要使用 Spark 主題更改組件上的邊框或圓角等可視部分，您需要?jiǎng)?chuàng)建一個(gè)自定義外觀。Flex 4 beta 還加入了一種設(shè)計(jì)用于快速模型的線框外觀。

除了主題更改外，F(xiàn)lex 4 beta 應(yīng)用程序的默認(rèn)預(yù)下載器也已經(jīng)改為 mx.preloaders.SparkDownloadProgressBar。這個(gè)更輕量級(jí)的預(yù)下載器可以縮短一些啟動(dòng)時(shí)間。如果要使用 Flex 3 預(yù)下載器，您只需更改一行代碼。在 Application 標(biāo)簽中添加以下內(nèi)容： preloader="mx.preloaders.DownloadProgressBar" 。

如 果要將應(yīng)用程序從 Flex 3 遷移到 Flex 4 beta，我不建議將各個(gè) Flex 3 Halo 組件替換為它們對(duì)應(yīng)的 Flex 4 beta 組件。這樣投入時(shí)間可能并不是一個(gè)好方法。您應(yīng)當(dāng)為新的應(yīng)用程序轉(zhuǎn)而使用 Flex 4 beta 組件架構(gòu)。

Flex 4 beta 架構(gòu)變化概述

Flex 4 beta 的重要主題之一是“用心設(shè)計(jì)”。這個(gè)目標(biāo)涉及在設(shè)計(jì)人員和開(kāi)發(fā)人員之間創(chuàng)造一個(gè)更順暢的工作流程。為了幫助實(shí)現(xiàn)這一點(diǎn)，該框架將組件可視部分與其剩余行為 明確劃分開(kāi)。在 Flex 3 中，組件的代碼包括以其行為、布局和可視變化為中心的邏輯。在 Flex 4 beta 中，組件被劃分為不同的類，各個(gè)類負(fù)責(zé)處理特定的行為。

Gumbo 架構(gòu)文檔* 中的說(shuō)明如下：

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

與 之相應(yīng)的組件類是一個(gè)外觀類，它負(fù)責(zé)管理與組件的可視外觀相關(guān)的一切內(nèi)容，包括圖形、布局、表示數(shù)據(jù)、更改不同狀態(tài)中的外觀以及從一個(gè)狀態(tài)過(guò)渡到另一個(gè)狀 態(tài)。在 Halo 模型中，F(xiàn)lex 組件外觀是只負(fù)責(zé)組件的某個(gè)圖形部分的資源。更改組件外觀的任何其他方面，如布局或狀態(tài)可視化，需要將組件子類化并直接編輯 ActionScript 代碼。在 Gumbo 模型中，所有這一切都在外觀類中以聲明方式進(jìn)行定義，并且主要通過(guò)名為 FXG 標(biāo)簽的新圖形標(biāo)簽進(jìn)行定義。”

要進(jìn)一步了解 Flex 4 beta 中新的圖形標(biāo)簽，您可以閱讀 FXG 1.0 規(guī)范* 。

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

考慮到性能，F(xiàn)lex 4 beta 為開(kāi)發(fā)人員提供了構(gòu)造塊，可供他們根據(jù)需要選擇功能。默認(rèn)情況下，關(guān)閉并非所有應(yīng)用程序都需要的重量級(jí)功能，如滾動(dòng)和虛擬化。

Flex 4 beta 中的名稱空間與包

在將 Flex 3 類原封不動(dòng)地保留在同一 mx.* 包中的同時(shí)，F(xiàn)lex 4 beta 為組件、核心類、效果、濾鏡、布局、基元、外觀和 utils 引入了 spark.* 包。

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

MXML 2006： 之前版本的 Flex 中使用的舊版 MXML 語(yǔ)言名稱空間。使用 Flex 4 beta 編譯的 Flex 3 應(yīng)用程序可以繼續(xù)使用這個(gè)名稱空間。

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

默認(rèn)前綴：mx

MXML 2009： 新的 MXML 語(yǔ)言名稱空間。這純粹是一個(gè)語(yǔ)言名稱空間， 不 包含組件標(biāo)簽。

URI：http://ns.adobe.com/mxml/2009
默認(rèn)前綴：fx

Spark： 這個(gè)名稱空間包含所有新的 Spark 組件。它應(yīng)當(dāng)與 MXML 2009 語(yǔ)言名稱空間一起使用。

URI：library://ns.adobe.com/flex/spark
默認(rèn)前綴：s

Halo： 這個(gè)名稱空間包含所有 Halo 組件。它應(yīng)當(dāng)與 MXML 2009 語(yǔ)言名稱空間一起使用。

URI：library://ns.adobe.com/flex/halo
默認(rèn)前綴：mx

以下是使用 MXML 2009、Spark 和 Halo 名稱空間創(chuàng)建一個(gè)簡(jiǎn)單的 Flex 4 beta 應(yīng)用程序的簡(jiǎn)明示例。它使用一個(gè) Halo DateChooser 和一個(gè) 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 定義中定義一組名稱空間以避免名稱沖突。

以下是一個(gè)將字體選擇器用于 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>
    

默認(rèn) Property 和 Declarations 標(biāo)簽

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

      <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>
    

新增組件和容器

如前所述，F(xiàn)lex 4 beta 引入了許多使用新架構(gòu)的新組件類，它們應(yīng)當(dāng)可以令外觀和其他自定義操作更簡(jiǎn)單。下表列出了 Flex 3 Halo 組件及其 Flex 4 beta Spark 對(duì)應(yīng)組件：

Adobe 鼓勵(lì)您與 Spark 組件一起使用 Halo 組件和容器。由于 Adobe 在同一基類 (UIComponent) 上構(gòu)建組件，Spark 與 Halo 之間應(yīng)當(dāng)可以實(shí)現(xiàn)全面的可互操作性。下表列出了目前沒(méi)有 Spark 直接等效類的組件和容器。

狀態(tài)語(yǔ)法中的變化

Flex 4 beta 將狀態(tài)功能升級(jí)為一個(gè)全面的 MXML 語(yǔ)言功能。因此，您可能會(huì)發(fā)現(xiàn)狀態(tài)更靈活、更直接。新的狀態(tài)語(yǔ)法 內(nèi)聯(lián) 程度更高，允許在上下文中指定狀態(tài)特定變化。以下是 Flex 4 beta 語(yǔ)法中的主要區(qū)別：

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

在以下 Flex 3 示例中，僅當(dāng)文檔的 currentState 為 submitState 時(shí)，才使用狀態(tài)包含一個(gè) Button 并刪除一個(gè) TextInput。對(duì)于較復(fù)雜的狀態(tài)，這種方法可以做到十分詳細(xì)。

      <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 、更簡(jiǎn)單的 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 已替換為新的 點(diǎn) 語(yǔ)法，它允許您限定具備特定狀態(tài)標(biāo)識(shí)符的 MXML 屬性值。

在以下 Flex 3 示例中，代碼為 submitState 中的一個(gè) 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"/>
    

• 組件不能再處于未定義狀態(tài)或空狀態(tài)。默認(rèn)情況下，聲明的第一個(gè)狀態(tài)是組件的初始狀態(tài)。
  當(dāng)文檔使用 MXML 2009 語(yǔ)言名稱空間時(shí)，可以使用新語(yǔ)法。可以混合使用舊版語(yǔ)法和新版狀態(tài)語(yǔ)法。只有 MXML 2006 名稱空間中可以使用舊版語(yǔ)法。

此外，各個(gè)組件現(xiàn)在支持外觀類中定義的一組狀態(tài)，這使得根據(jù)組件狀態(tài)應(yīng)用可視變化更加簡(jiǎn)單。例如，如果查看 Spark Button 的外觀，您會(huì)發(fā)現(xiàn)已定義以下?tīng)顟B(tài)：

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

ButtonSkin 類定義了各個(gè)狀態(tài)中 Spark Button 在可視方面的變化。

以上只是簡(jiǎn)要介紹了新的 Flex 4 beta 狀態(tài)語(yǔ)法。有關(guān)更多詳細(xì)信息，請(qǐng)參閱 增強(qiáng)的狀態(tài)語(yǔ)法規(guī)范* 。

效果中的變化

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

我并未贅述這一問(wèn)題，因?yàn)槟梢酝ㄟ^(guò) Chet Haase 的 Adobe Flex 4 SDK beta 中的效果 一文了解效果類中新增功能的更多詳細(xì)信息。

布局中的變化

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

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

垂直 List（Spark List 的默認(rèn)布局是 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>
    

如前所述，F(xiàn)lex 4 beta 架構(gòu)旨在為開(kāi)發(fā)人員提供構(gòu)造塊，供他們根據(jù)需要選擇功能。默認(rèn)情況下，關(guān)閉虛擬化和滾動(dòng)。要增加 Group 上的滾動(dòng)欄選項(xiàng)并開(kāi)啟虛擬化，您需要：

以下是對(duì) Spark Panel 使用虛擬化和滾動(dòng)的一個(gè)示例：

      <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>
    

有關(guān) Flex 4 beta 中的所有布局增強(qiáng)（包括對(duì)變換的更好支持）的更多信息，請(qǐng)參閱 Spark 布局規(guī)范* 。

使用文本

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

Spark 組件現(xiàn)在還使用 Flash Player 10 和 AIR 1.5 中的 DefineFont4 嵌入字體格式。從最新的 beta 版開(kāi)始，Halo 組件無(wú)法再使用 DefineFont4 格式。將 Spark 和 Halo 組件混合在一個(gè) 應(yīng)用程序 中并嵌入字體時(shí)，這會(huì)造成一些開(kāi)銷。就目前而言，如果要對(duì)所有組件使用同一種嵌入字體，您需要嵌入字體兩次，即使用針對(duì) Spark 組件的 DefineFont4 和針對(duì) Halo 組件的 DefineFont3 各嵌入一次。

以下是一個(gè)為使用 Spark TextInput 和 Halo DataGrid 的 Flex 4 beta 應(yīng)用程序嵌入字體 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>
    

請(qǐng)注意，為 Spark 組件嵌入字體時(shí)，您需要在字體定義中指定 cff: true。

為 Spark 和 Halo 組件嵌入字體的解決方案仍處于開(kāi)發(fā)階段，因此今后這個(gè)過(guò)程應(yīng)該會(huì)更簡(jiǎn)單。

與 Flex 3 的向后兼容性

與 Flex 3 一樣，您可以使用其他編譯參數(shù)編譯應(yīng)用程序：

      -compatibility-version=3.0.0. 
    

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

注意： 調(diào)用 Flex 3 兼容性時(shí)，無(wú)法選擇性地保留一個(gè) Flex 4 beta 行為變化子集。如果使用參數(shù) -compatibility-version=3.0.0 進(jìn)行編譯，您將獲得文檔中描述的所有 Flex 3 行為。

后續(xù)工作

從 Flex 3 遷移到 Flex 4 beta 有可能沒(méi)那么痛苦。這個(gè)框架旨在盡可能地向后兼容。并且，當(dāng)您熟悉新架構(gòu)后，您會(huì)發(fā)現(xiàn)它其實(shí)更“ 靈活 ”！有關(guān) Flex 4 beta 功能的更多信息，請(qǐng)?jiān)L問(wèn) Web 幫助* 。