上周Adobe發(fā)布的Flex 4（Gumbo）首個官方beta版包含了眾多的變化。本文從較高層次審視了這個流行RIA框架的最新版，討論了其所發(fā)生的主要變化。

1. 集成Adobe Catalyst

Flex 4的一個主要特性就是提供了對Adobe Catalyst（Adobe新的設(shè)計工具，用于創(chuàng)建富Internet應(yīng)用而無需編寫代碼）集成的支持。Catalyst改變了開發(fā)者與設(shè)計者協(xié)作的方式，因為它清楚地知道應(yīng)用開發(fā)者與設(shè)計者之間工作方式的顯著差異。這樣開發(fā)者與設(shè)計者都能專注于自己所擅長的領(lǐng)域，憑借Catalyst，無論開發(fā)者還是設(shè)計者都能按照自己所習(xí)慣的方式進(jìn)行工作。Flex 4中的很多變化都是圍繞著Flex與Catalyst的集成進(jìn)行的。

2. Spark組件架構(gòu)

Flex的每個版本都包含了完整的組件庫，其中含有用于構(gòu)建應(yīng)用的通用組件，如數(shù)據(jù)表格、按鈕及布局容器等等。Flex 4的底層組件架構(gòu)名為Spark，而在Flex 3中則叫做Halo。為了支持Catalyst，F(xiàn)lex 4更新了底層的組件模型以達(dá)到松耦合的目的。

在新的Spark組件模型中，核心邏輯、皮膚以及布局都被分開了，這樣我們就能單獨(dú)處理其中任意一部分而又不會影響到其他部分。Spark組件模型構(gòu)建于 Halo組件模型之上，這意味著Spark擴(kuò)展了Halo的核心基類UIComponent，這樣我們就能以增量的方式使用Flex 4，同時還能將Flex 3組件應(yīng)用在Flex 4應(yīng)用中。

除此以外，F(xiàn)lex 4還對效果（effect）進(jìn)行了增強(qiáng)?，F(xiàn)在可以將效果應(yīng)用在任意的對象和類型上，這么做提升了其靈活性。Flex 4的效果由新的“spark.effects”包實現(xiàn)。就像新的組件庫一樣，F(xiàn)lex 4的效果也被重新實現(xiàn)了，但卻并沒有對Flex 3的效果進(jìn)行任何變更，這么做的目的是為了保持向后兼容。

3. MXML 2009

MXML基于XML，構(gòu)建于Flash Player所用的編程語言——ActionScript 3之上。MXML用于對用戶界面和支持工具（比如說IDE，現(xiàn)在是Catalyst了）的視圖區(qū)域進(jìn)行布局。MXML 2009包含了大量更新以對不同的行為（核心、皮膚和布局）進(jìn)行解耦，同時還提供了新的組件庫?，F(xiàn)在Flex 4的組件在其自己的包中（spark.components）得以實現(xiàn)，同時又沒有對Flex 3的組件進(jìn)行任何變更，為此MXML 2009專門提供了一個新的命名空間以提供支持。

下面的應(yīng)用聲明示例展示了如何使用該命名空間以及如何為Spark和Halo組件定義命名空間：

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

這樣，我們就可以通過下面的代碼聲明Flex 4的Button：

下面的代碼聲明了Flex 3的Button：

請瀏覽MXML 2009規(guī)范以深入了解其變化。

4. 對View States的改進(jìn)

Flex 2將狀態(tài)（states）概念引入到了Flex框架中，這樣我們就可以通過簡單的狀態(tài)改變來管理視圖組件的變化。Flex 4改進(jìn)了視圖狀態(tài)（view states）以簡化其語法，這樣我們就能更輕松地使用他們了。新語言屬性includeIn和excludeFrom就是簡化語法的一個例子，我們可以設(shè)定組件的這兩個屬性值以響應(yīng)狀態(tài)變化（參見下面的代碼示例）。

   
<m:states>   
  <m:State name="A"/>   
  <m:State name="B"/>   
  <m:State name="C"/>   
m:states>   
 
   
<Button label="Click Me" includeIn="A, B"/>   
 
   
<Button label="Button C" excludeFrom="C"/> 

5. FXG支持

Flash Player的核心是個繪圖引擎。Adobe在Flash Player 10中引入了FXG，現(xiàn)在又將其引入到了Flex中。FXG是個聲明式的圖形格式，可以在工具間傳遞內(nèi)容，這意味著設(shè)計者可以在Catalyst或CS4 Illustrator中創(chuàng)建內(nèi)容，接下來Flex應(yīng)用開發(fā)者就可以將其導(dǎo)入并使用而無需修改任何內(nèi)容。#p#

6. 皮膚增強(qiáng)

Spark組件模型最大的變化在于對皮膚的顛覆性改造，現(xiàn)在皮膚可以控制組件的所有可視化部分，同時還將邏輯封裝到了組件核心之外。這樣我們就可以對組件的可視化部分進(jìn)行獨(dú)立修改而不會影響到底層的核心邏輯。

來看看PanelSkin.mxml皮膚文件吧，Panel容器的默認(rèn)皮膚代碼如下：

xml version="1.0" encoding="utf-8"?>   
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5">   
 
   <fx:Metadata>   
    
    /**   
     * @copy spark.skins.default.ApplicationSkin#hostComponent   
     */   
    [HostComponent("spark.components.Panel")]   
    ]]>   
   fx:Metadata>   
 
   <fx:Script>   
     /* Define the skin elements that should not be colorized.   
      For panel, border and title backround are skinned, but the content area and title text are not. */   
      static private const exclusions:Array = ["background", "titleField", "contentGroup"];   
 
     /**   
      * @copy spark.skins.SparkSkin#colorizeExclusions   
      */   
     override public function get colorizeExclusions():Array {return exclusions;}   
 
     /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */   
     static private const contentFill:Array = ["bgFill"];   
 
     /**   
      * @inheritDoc   
      */   
     override public function get contentItems():Array {return contentFill};   
   fx:Script>   
 
   <s:states>   
     <s:State name="normal" />   
     <s:State name="disabled" />   
   s:states>   
 
    . . . . .   
 
   <s:Rect left="1" right="1" top="31" height="1">   
    <s:fill>   
     <s:SolidColor color="0xC0C0C0" />   
    s:fill>   
   s:Rect>   
 
      
      
   <s:SimpleText id="titleField" lineBreak="explicit"   
      left="10" right="4" top="2" height="30"   
      verticalAlign="middle" fontWeight="bold">   
   s:SimpleText>   
 
   <s:Group id="contentGroup" left="1" right="1" top="32" bottom="1">   
   s:Group>   
 
s:SparkSkin> 

由于該皮膚文件唯一的作用就是控制Panel容器的可視化外觀，因此設(shè)計者可以修改組件的樣式而無需編輯其源代碼，也不必了解組件的內(nèi)部行為。更為重要的是，設(shè)計者可以按照自己熟悉的方式來使用Catalyst。

7. 更新的布局組件

熟悉Flex開發(fā)的人可能會注意到Flex 3中的大多數(shù)容器都已經(jīng)不在Gumbo組件庫中了。這是由于布局已經(jīng)被解耦了，現(xiàn)在我們需要通過代理（delegtion）來處理他們。因為大多數(shù) Flex 3容器僅僅就是為了提供不同的布局樣式（比如說用于水平布局的HBox，用于垂直布局的VBox等等），因此現(xiàn)在他們已經(jīng)沒什么用了。

下面的示例表明Flex開發(fā)者現(xiàn)在也可以定義布局了。該示例利用Group類來管理按鈕，Group是個新的Spark類，用于管理其中的內(nèi)容條目。布局的結(jié)果就是兩個并排放置的按鈕，就像是使用Flex 3中的HBox的結(jié)果一樣。

<s:Group width="400" height="400">   
  <s:layout>   
   <s:HorizontalLayout paddingLeft="5" paddingTop="5" />   
  s:layout>   
 
  <s:Button label="Button 1" />   
  <s:Button label="Button 2" />   
s:Group> 

8. Flash Builder 4

Flash Builder 4（之前叫做Flex Builder）是面向應(yīng)用開發(fā)者的最新的Eclipse IDE。該新版本帶有眾多更新，包括條件調(diào)試斷點(diǎn)、更多的重構(gòu)工具并支持FlexUnit 4。一如往常，它還包括MXML、ActionScript 3、可視化設(shè)計器以及Flex性能與內(nèi)存分析器（只有專業(yè)版才有該性能分析器）。

除此之外，該最新版還提供了高級的數(shù)據(jù)管理特性以簡化數(shù)據(jù)為中心應(yīng)用的開發(fā)。這包括客戶端的數(shù)據(jù)管理特性，它可以處理CRUD操作以及在大集合中進(jìn)行滾動。

9. 編譯器性能

幾乎每個Flex 3開發(fā)者心中都有一個痛——糟糕的編譯器性能?；诖?，Gumbo的一個主要目標(biāo)就是改進(jìn)Flex 4中的編譯器性能。雖然官方尚未發(fā)布性能基準(zhǔn)，但來自Adobe的Peter Donovan根據(jù)自己所作的一些試驗對其進(jìn)行了測試，結(jié)果表明新的編譯器性能提升了25%。他說要想將性能提升3到4倍只能進(jìn)行重新設(shè)計。當(dāng)然了，每個企業(yè)級Flex應(yīng)用的開發(fā)者都希望今年底Flex 4正式發(fā)布時能實現(xiàn)這一點(diǎn)。

10. 新的文本功能

Flash應(yīng)用（無論是Flex還是非Flex應(yīng)用）的一個主要議題就是高效處理文本的能力。在Flash Player 10中，Adobe引入了全新的文本引擎以支持RIA的需要（多語言、打印以及鍵盤快捷鍵等等）。Gumbo引入了大量新的文本類（RichText、 SimpleText等等）以在Flex框架中提供更健壯的文本支持。除此以外，Adobe正在全力開發(fā)新的Text Layout Framework以賦予ActionScript 3開發(fā)者利用Flash Player文本引擎的能力。請點(diǎn)擊這里以深入了解Text Layout Framework。

【編輯推薦】

1. Flash Flex服務(wù)組件大排行
2. Java+Flex打造完美RIA應(yīng)用
3. 將Flex與Spring集成框架
4. Flex連接Java EE的技術(shù)選擇
5. Adobe宣布Flex Builder將更名為Flash Builder