Flex4的十大變化揭秘

作者：張龍 2010-08-12 14:58:12

Flex4有很多值得學習的地方，這里向大家介紹一下Flex4的十大變化，Flex4的一個主要特性就是提供了對AdobeCatalyst集成的支持。

本文向大家介紹一下Flex4的十大變化，Adobe已經發布了Flex4（Gumbo）的首個官方beta版，該版本包含了眾多的變化。這里和大家分享一下，希望對你的學習有所幫助。

Flex4的十大變化

Adobe已經發布了Flex4（Gumbo）的首個官方beta版。該版本包含了眾多的變化。本文從較高層次審視了這個流行RIA框架的最新版，討論了其所發生的主要變化。

匯集最新Flash平臺技術相關資源，提供Flash平臺相關工具高速下載

1.集成AdobeCatalyst

Flex4的一個主要特性就是提供了對AdobeCatalyst（Adobe新的設計工具，用于創建富Internet應用而無需編寫代碼）集成的支持。Catalyst改變了開發者與設計者協作的方式，因為它清楚地知道應用開發者與設計者之間工作方式的顯著差異。這樣開發者與設計者都能專注于自己所擅長的領域，憑借Catalyst，無論開發者還是設計者都能按照自己所習慣的方式進行工作。Flex4中的很多變化都是圍繞著Flex與Catalyst的集成進行的。請查看AdobeCatalyst站點以了解其詳細信息。

2.Spark組件架構

Flex的每個版本都包含了完整的組件庫，其中含有用于構建應用的通用組件，如數據表格、按鈕及布局容器等等。Flex4的底層組件架構名為Spark，而在Flex3中則叫做Halo。為了支持Catalyst，Flex4更新了底層的組件模型以達到松耦合的目的。

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

除此以外，Flex4還對效果（effect）進行了增強。現在可以將效果應用在任意的對象和類型上，這么做提升了其靈活性。Flex4的效果由新的“spark.effects”包實現。就像新的組件庫一樣，Flex4的效果也被重新實現了，但卻并沒有對Flex3的效果進行任何變更，這么做的目的是為了保持向后兼容。請查看ChetHaase所寫的關于Flex4效果的文章或是其博客以更多地了解GumboEffect。

請閱讀白皮書以更多地了解Spark架構。

3.MXML2009

MXML基于XML，構建于FlashPlayer所用的編程語言——ActionScript3之上。MXML用于對用戶界面和支持工具（比如說IDE，現在是Catalyst了）的視圖區域進行布局。MXML2009包含了大量更新以對不同的行為（核心、皮膚和布局）進行解耦，同時還提供了新的組件庫。現在Flex4的組件在其自己的包中（spark.components）得以實現，同時又沒有對Flex3的組件進行任何變更，為此MXML2009專門提供了一個新的命名空間以提供支持。

下面的應用聲明示例展示了如何使用該命名空間以及如何為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">

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

<s:Buttonlabels:Buttonlabel="MyFlex4Button"/>

下面的代碼聲明了Flex3的Button：

<mx:Buttonlabelmx:Buttonlabel="MyFlex3Button"/>

請瀏覽MXML2009規范以深入了解其變化。#p#

4.對ViewStates的改進

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

<!--GiventhestatesA,B,C--> 
<m:states> 
<m:Statenamem:Statename="A"/> 
<m:Statenamem:Statename="B"/> 
<m:Statenamem:Statename="C"/> 
</m:states> 
 
<!--ThisbuttonwillappearinonlystatesAandB--> 
<ButtonlabelButtonlabel="ClickMe"includeIn="A,B"/> 
 
<!--ThisbuttonwillappearinstatesAandB--> 
<ButtonlabelButtonlabel="ButtonC"excludeFrom="C"/>

請點擊這里以進一步了解ViewStates的變化。

5.FXG支持

FlashPlayer的核心是個繪圖引擎。Adobe在FlashPlayer10中引入了FXG，現在又將其引入到了Flex中。FXG是個聲明式的圖形格式，可以在工具間傳遞內容，這意味著設計者可以在Catalyst或CS4Illustrator中創建內容，接下來Flex應用開發者就可以將其導入并使用而無需修改任何內容。

請閱讀FXG規范以了解更多細節信息。

6.皮膚增強

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

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

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<s:SparkSkinxmlns:fxs:SparkSkinxmlns:fx="http://ns.adobe.com/mxml/2009" 
 
xmlns:s="library://ns.adobe.com/flex/spark"alpha.disabled="0.5"> 
 
<fx:Metadata> 
<![CDATA[  
/**  
*@copyspark.skins.default.ApplicationSkin#hostComponent  
*/  
[HostComponent("spark.components.Panel")]  
]]> 
</fx:Metadata> 
 
<fx:Script> 
/*Definetheskinelementsthatshouldnotbecolorized.  
Forpanel,borderandtitlebackroundareskinned,butthecontentareaandtitletextarenot.*/  
staticprivateconstexclusions:Array=["background","titleField","contentGroup"];  
 
/**  
*@copyspark.skins.SparkSkin#colorizeExclusions  
*/  
overridepublicfunctiongetcolorizeExclusions():Array{returnexclusions;}  
 
/*Definethecontentfillitemsthatshouldbecoloredbythe"contentBackgroundColor"style.*/  
staticprivateconstcontentFill:Array=["bgFill"];  
 
/**  
*@inheritDoc  
*/  
overridepublicfunctiongetcontentItems():Array{returncontentFill};  
</fx:Script> 
 
<s:states> 
<s:Statenames:Statename="normal"/> 
<s:Statenames:Statename="disabled"/> 
</s:states> 
 
.....  
 
<s:Rectlefts:Rectleft="1"right="1"top="31"height="1"> 
<s:fill> 
<s:SolidColorcolors:SolidColorcolor="0xC0C0C0"/> 
</s:fill> 
</s:Rect> 
 
<!--layer5:text--> 
<!--DefinestheappearanceofthePanelSkinclass'stitlebar.--> 
<s:SimpleTextids:SimpleTextid="titleField"lineBreak="explicit"  
left="10"right="4"top="2"height="30"  
verticalAlign="middle"fontWeight="bold"> 
</s:SimpleText> 
 
<s:Groupids:Groupid="contentGroup"left="1"right="1"top="32"bottom="1"> 
</s:Group> 
 
</s:SparkSkin>

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

請點擊這里深入了解Gumbo的皮膚組件。#p#

7.更新的布局組件

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

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

<s:Groupwidths:Groupwidth="400"height="400"> 
<s:layout> 
<s:HorizontalLayoutpaddingLefts:HorizontalLayoutpaddingLeft="5"paddingTop="5"/> 
</s:layout> 
 
<s:Buttonlabels:Buttonlabel="Button1"/> 
<s:Buttonlabels:Buttonlabel="Button2"/> 
</s:Group>

來自Adobe的RyanStewart對新的布局機制進行了深入分析。

8.FlashBuilder4

FlashBuilder4（之前叫做FlexBuilder）是面向應用開發者的最新的EclipseIDE。該新版本帶有眾多更新，包括條件調試斷點、更多的重構工具并支持FlexUnit4。一如往常，它還包括MXML、ActionScript3、可視化設計器以及Flex性能與內存分析器（只有專業版才有該性能分析器）。

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

請點擊這里來深入了解該IDE。

9.編譯器性能

幾乎每個Flex3開發者心中都有一個痛——糟糕的編譯器性能。基于此，Gumbo的一個主要目標就是改進Flex4中的編譯器性能。雖然官方尚未發布性能基準，但來自Adobe的PeterDonovan根據自己所作的一些試驗對其進行了測試，結果表明新的編譯器性能提升了25%。他說要想將性能提升3到4倍只能進行重新設計。當然了，每個企業級Flex應用的開發者都希望今年底Flex4正式發布時能實現這一點。

請閱讀PeterDonovan的文章來深入了解相關信息。

10.新的文本功能

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

如你所見，Flex4代表了該流行的RIA平臺的巨大進步。請查看MattChotin的文章《What'snewinFlex4SDKbeta》來深入了解Flex4SDK的變化。

【編輯推薦】

揭露Flex4的六大變化
技術前沿解析最新QTP識別Flex4方法
探究Flex4重大變身
揭開Flex正則表達式的神秘面紗
Flex數據綁定及其使用頻繁的幾種情況

責任編輯：佚名來源： infoq.com

Flex4