文章
Flex 4的十大變化
作者 Jon Rose 譯者 張龍 發佈於 2009年7月26日 下午10時31分
本週Adobe發佈了Flex 4（Gumbo）的首個官方beta版。該版本包含了衆多的變化。本文從較高層次審視了這個流行RIA框架的最新版，討論了其所發生的主要變化。
相關廠商 內容
Free！InfoQ獨家免費提供少量Flash開發工具產品序列號
下載Flash Builder 4，體驗Flash Builder 4 beta進行以數據爲中心的開發
RIA特別專題：Flex vs. Silverlight vs. HTML 5 vs. Laszlo
相關贊助商
彙集最新RIA技術相關資源，提供Flash開發平臺相關工具高速下載，免費獲得Adobe軟件的產品序列號
1. 集成Adobe Catalyst
Flex 4的一個主要特性就是提供了對Adobe Catalyst（Adobe新的設計工具，用於創建富Internet應用而無需編寫代碼）集成的支持。Catalyst改變了開發者與設計者協作的方 式，因爲它清楚地知道應用開發者與設計者之間工作方式的顯著差異。這樣開發者與設計者都能專注於自己所擅長的領域，憑藉Catalyst，無論開發者還是 設計者都能按照自己所習慣的方式進行工作。Flex 4中的很多變化都是圍繞着Flex與Catalyst的集成進行的。請查看Adobe Catalyst站點 以瞭解其詳細信息。
2. Spark組件架構
Flex的每個版本都包含了完整的組件庫，其中含有用於構建應用的通用組件，如數據表格、按鈕及佈局容器等等。Flex 4的底層組件架構名爲Spark，而在Flex 3中則叫做Halo。爲了支持Catalyst，Flex 4更新了底層的組件模型以達到鬆耦合的目的。
在新的Spark組件模型中，核心邏輯、皮膚以及佈局都被分開了，這樣我們就能單獨處理其中任意一部分而又不會影響到其他部分。Spark組件模型 構建於 Halo組件模型之上，這意味着Spark擴展了Halo的核心基類UIComponent，這樣我們就能以增量的方式使用Flex 4，同時還能將Flex 3組件應用在Flex 4應用中。
除此以外，Flex 4還對效果（effect）進行了增強。現在可以將效果應用在任意的對象和類型上，這麼做提升了其靈活性。Flex 4的效果由新的“spark.effects”包實現。就像新的組件庫一樣，Flex 4的效果也被重新實現了，但卻並沒有對Flex 3的效果進行任何變更，這麼做的目的是爲了保持向後兼容。請查看Chet Haase所寫的關於Flex 4效果的文章 或是其博客 以更多地瞭解Gumbo Effect。
3. MXML 2009
MXML基於XML，構建於Flash Player所用的編程語言——ActionScript 3之上。MXML用於對用戶界面和支持工具（比如說IDE，現在是Catalyst了）的視圖區域進行佈局。MXML 2009包含了大量更新以對不同的行爲（核心、皮膚和佈局）進行解耦，同時還提供了新的組件庫。現在Flex 4的組件在其自己的包中（spark.components）得以實現，同時又沒有對Flex 3的組件進行任何變更，爲此MXML 2009專門提供了一個新的命名空間以提供支持。
下面的應用聲明示例展示瞭如何使用該命名空間以及如何爲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：
<s:Button label="My Flex 4 Button" />
下面的代碼聲明瞭Flex 3的Button：
<mx:Button label="My Flex 3 Button" />
請瀏覽MXML 2009規範 以深入瞭解其變化。
4. 對View States的改進
Flex 2將狀態（states）概念引入到了Flex框架中，這樣我們就可以通過簡單的狀態改變來管理視圖組件的變化。Flex 4改進了視圖狀態（view states）以簡化其語法，這樣我們就能更輕鬆地使用他們了。新語言屬性includeIn和excludeFrom就是簡化語法的一個例子，我們可以 設定組件的這兩個屬性值以響應狀態變化（參見下面的代碼示例）。
<!-- Given the states A,B,C -->
<m:states>
<m:State name="A"/>
<m:State name="B"/>
<m:State name="C"/>
</m:states>
<!-- This button will appear in only states A and B -->
<Button label="Click Me" includeIn="A, B"/>
<!-- This button will appear in states A and B -->
<Button label="Button C" excludeFrom="C"/>
請點擊這裏 以進一步瞭解View States的變化。
5. FXG支持
Flash Player的核心是個繪圖引擎。Adobe在Flash Player 10中引入了FXG，現在又將其引入到了Flex中。FXG是個聲明式的圖形格式，可以在工具間傳遞內容，這意味着設計者可以在Catalyst或CS4 Illustrator中創建內容，接下來Flex應用開發者就可以將其導入並使用而無需修改任何內容。
請閱讀FXG規範 以瞭解更多細節信息。
6. 皮膚增強
Spark組件模型最大的變化在於對皮膚的顛覆性改造，現在皮膚可以控制組件的所有可視化部分，同時還將邏輯封裝到了組件核心之外。這樣我們就可以對組件的可視化部分進行獨立修改而不會影響到底層的核心邏輯。
來看看PanelSkin.mxml皮膚文件吧，Panel容器的默認皮膚代碼如下：
<?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>
<![CDATA[
/**
* @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>
<!-- layer 5: text -->
<!-- Defines the appearance of the PanelSkin class's title bar. -->
<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容器的可視化外觀，因此設計者可以修改組件的樣式而無需編輯其源代碼，也不必瞭解組件的內部行爲。更爲重要的是，設計者可以按照自己熟悉的方式來使用Catalyst。
請點擊這裏 深入瞭解Gumbo的皮膚組件。
7. 更新的佈局組件
熟悉Flex開發的人可能會注意到Flex 3中的大多數容器都已經不在Gumbo組件庫中了。這是由於佈局已經被解耦了，現在我們需要通過代理（delegtion）來處理他們。因爲大多數 Flex 3容器僅僅就是爲了提供不同的佈局樣式（比如說用於水平佈局的HBox，用於垂直佈局的VBox等等），因此現在他們已經沒什麼用了。
下面的示例表明Flex開發者現在也可以定義佈局了。該示例利用Group類來管理按鈕，Group是個新的Spark類，用於管理其中的內容條目。佈局的結果就是兩個並排放置的按鈕，就像是使用Flex 3中的HBox的結果一樣。
<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>
來自Adobe的Ryan Stewart對新的佈局機制進行了深入分析 。
8. Flash Builder 4
Flash Builder 4（之前叫做Flex Builder）是面向應用開發者的最新的Eclipse IDE。該新版本帶有衆多更新，包括條件調試斷點、更多的重構工具並支持FlexUnit 4。一如往常，它還包括MXML、ActionScript 3、可視化設計器以及Flex性能與內存分析器（只有專業版纔有該性能分析器）。
除此之外，該最新版還提供了高級的數據管理特性以簡化數據爲中心應用的開發。這包括客戶端的數據管理特性，它可以處理CRUD操作以及在大集合中進行滾動。
請點擊這裏 來深入瞭解該IDE。
9. 編譯器性能
幾乎每個Flex 3開發者心中都有一個痛——糟糕的編譯器性能。基於此，Gumbo的一個主要目標就是改進Flex 4中的編譯器性能。雖然官方尚未發佈性能基準，但來自Adobe的Peter Donovan根據自己所作的一些試驗對其進行了測試，結果表明新的編譯器性能提升了25%。他說要想將性能提升3到4倍只能進行重新設計。當然了，每個 企業級Flex應用的開發者都希望今年底Flex 4正式發佈時能實現這一點。
請閱讀Peter Donovan的文章 來深入瞭解相關信息。
10. 新的文本功能
Flash應用（無論是Flex還是非Flex應用）的一個主要議題就是高效處理文本的能力。在Flash Player 10中，Adobe引入了全新的文本引擎以支持RIA的需要（多語言、打印以及鍵盤快捷鍵等等）。Gumbo引入了大量新的文本類（RichText、 SimpleText等等）以在Flex框架中提供更健壯的文本支持。除此以外，Adobe正在全力開發新的Text Layout Framework以賦予ActionScript 3開發者利用Flash Player文本引擎的能力。請點擊這裏 以深入瞭解Text Layout Framework。
如你所見，Flex 4代表了該流行的RIA平臺的巨大進步。請查看Matt Chotin的文章《What's new in Flex 4 SDK beta》 來深入瞭解Flex 4 SDK的變化。
作者簡介
Jon Rose是Gorilla Logic, Inc. （位於科羅拉多州的博爾德）的一名企業軟件諮詢師和Flex業務主管。他還是知名的企業軟件社區InfoQ.com的編輯。另外，他是DrunkOnSoftware.com 的主辦人之一，這是一個面向那些愛豪飲的朋友的視頻網站。他的客戶有小公司，也有政府部門。愛解決難題的天性使其致力於開發高質量的軟件。你可以通過其博客 瞭解他。