解析Flex4的十大變化
本文和大家重點(diǎn)討論一下Flex4的十大變化，本文從較高層次審視了這個(gè)流行RIA框架的***版，討論了其所發(fā)生的主要變化。希望本文的介紹能讓你有所收獲。
Flex4的十大變化
本周Adobe發(fā)布了Flex4（Gumbo）的***官方beta版。該版本包含了眾多的變化。本文從較高層次審視了這個(gè)流行RIA框架的***版，討論了其所發(fā)生的主要變化。
匯集***Flash平臺技術(shù)相關(guān)資源，提供Flash平臺相關(guān)工具高速下載
1.集成AdobeCatalyst
Flex4的一個(gè)主要特性就是提供了對AdobeCatalyst（Adobe新的設(shè)計(jì)工具，用于創(chuàng)建富Internet應(yīng)用而無需編寫代碼）集成的支持。Catalyst改變了開發(fā)者與設(shè)計(jì)者協(xié)作的方式，因?yàn)樗宄刂缿?yīng)用開發(fā)者與設(shè)計(jì)者之間工作方式的顯著差異。這樣開發(fā)者與設(shè)計(jì)者都能專注于自己所擅長的領(lǐng)域，憑借Catalyst，無論開發(fā)者還是設(shè)計(jì)者都能按照自己所習(xí)慣的方式進(jìn)行工作。Flex4中的很多變化都是圍繞著Flex與Catalyst的集成進(jìn)行的。請查看AdobeCatalyst站點(diǎn)以了解其詳細(xì)信息。
2.Spark組件架構(gòu)
Flex的每個(gè)版本都包含了完整的組件庫，其中含有用于構(gòu)建應(yīng)用的通用組件，如數(shù)據(jù)表格、按鈕及布局容器等等。Flex4的底層組件架構(gòu)名為Spark，而在Flex3中則叫做Halo。為了支持Catalyst，F(xiàn)lex4更新了底層的組件模型以達(dá)到松耦合的目的。
在新的Spark組件模型中，核心邏輯、皮膚以及布局都被分開了，這樣我們就能單獨(dú)處理其中任意一部分而又不會影響到其他部分。Spark組件模型構(gòu)建于Halo組件模型之上，這意味著Spark擴(kuò)展了Halo的核心基類UIComponent，這樣我們就能以增量的方式使用Flex4，同時(shí)還能將Flex3組件應(yīng)用在Flex4應(yīng)用中。
除此以外，F(xiàn)lex4還對效果（effect）進(jìn)行了增強(qiáng)。現(xiàn)在可以將效果應(yīng)用在任意的對象和類型上，這么做提升了其靈活性。Flex4的效果由新的“spark.effects”包實(shí)現(xiàn)。就像新的組件庫一樣，F(xiàn)lex4的效果也被重新實(shí)現(xiàn)了，但卻并沒有對Flex3的效果進(jìn)行任何變更，這么做的目的是為了保持向后兼容。請查看ChetHaase所寫的關(guān)于Flex4效果的文章或是其博客以更多地了解GumboEffect。
請閱讀白皮書以更多地了解Spark架構(gòu)。
3.MXML2009
MXML基于XML，構(gòu)建于FlashPlayer所用的編程語言——ActionScript3之上。MXML用于對用戶界面和支持工具（比如說IDE，現(xiàn)在是Catalyst了）的視圖區(qū)域進(jìn)行布局。MXML2009包含了大量更新以對不同的行為（核心、皮膚和布局）進(jìn)行解耦，同時(shí)還提供了新的組件庫。現(xiàn)在Flex4的組件在其自己的包中（spark.components）得以實(shí)現(xiàn)，同時(shí)又沒有對Flex3的組件進(jìn)行任何變更，為此MXML2009專門提供了一個(gè)新的命名空間以提供支持。
下面的應(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">
這樣，我們就可以通過下面的代碼聲明Flex4的Button：
- <s:Buttonlabels:Buttonlabel="MyFlex4Button"/>
下面的代碼聲明了Flex3的Button：
- <mx:Buttonlabelmx:Buttonlabel="MyFlex3Button"/>
請瀏覽MXML2009規(guī)范以深入了解其變化。#p#
4.對ViewStates的改進(jìn)
Flex2將狀態(tài)（states）概念引入到了Flex框架中，這樣我們就可以通過簡單的狀態(tài)改變來管理視圖組件的變化。Flex4改進(jìn)了視圖狀態(tài)（viewstates）以簡化其語法，這樣我們就能更輕松地使用他們了。新語言屬性includeIn和excludeFrom就是簡化語法的一個(gè)例子，我們可以設(shè)定組件的這兩個(gè)屬性值以響應(yīng)狀態(tài)變化（參見下面的代碼示例）。
- <!--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"/>
請點(diǎn)擊這里以進(jìn)一步了解ViewStates的變化。
5.FXG支持
FlashPlayer的核心是個(gè)繪圖引擎。Adobe在FlashPlayer10中引入了FXG，現(xiàn)在又將其引入到了Flex中。FXG是個(gè)聲明式的圖形格式，可以在工具間傳遞內(nèi)容，這意味著設(shè)計(jì)者可以在Catalyst或CS4Illustrator中創(chuàng)建內(nèi)容，接下來Flex應(yīng)用開發(fā)者就可以將其導(dǎo)入并使用而無需修改任何內(nèi)容。
請閱讀FXG規(guī)范以了解更多細(xì)節(jié)信息。
6.皮膚增強(qiáng)
Spark組件模型***的變化在于對皮膚的顛覆性改造，現(xiàn)在皮膚可以控制組件的所有可視化部分，同時(shí)還將邏輯封裝到了組件核心之外。這樣我們就可以對組件的可視化部分進(jìn)行獨(dú)立修改而不會影響到底層的核心邏輯。
來看看PanelSkin.mxml皮膚文件吧，Panel容器的默認(rèn)皮膚代碼如下：
- <?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容器的可視化外觀，因此設(shè)計(jì)者可以修改組件的樣式而無需編輯其源代碼，也不必了解組件的內(nèi)部行為。更為重要的是，設(shè)計(jì)者可以按照自己熟悉的方式來使用Catalyst。請點(diǎn)擊這里深入了解Gumbo的皮膚組件。#p#
7.更新的布局組件
熟悉Flex開發(fā)的人可能會注意到Flex3中的大多數(shù)容器都已經(jīng)不在Gumbo組件庫中了。這是由于布局已經(jīng)被解耦了，現(xiàn)在我們需要通過代理（delegtion）來處理他們。因?yàn)榇蠖鄶?shù)Flex3容器僅僅就是為了提供不同的布局樣式（比如說用于水平布局的HBox，用于垂直布局的VBox等等），因此現(xiàn)在他們已經(jīng)沒什么用了。
下面的示例表明Flex開發(fā)者現(xiàn)在也可以定義布局了。該示例利用Group類來管理按鈕，Group是個(gè)新的Spark類，用于管理其中的內(nèi)容條目。布局的結(jié)果就是兩個(gè)并排放置的按鈕，就像是使用Flex3中的HBox的結(jié)果一樣。
- <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對新的布局機(jī)制進(jìn)行了深入分析。
8.FlashBuilder4
FlashBuilder4（之前叫做FlexBuilder）是面向應(yīng)用開發(fā)者的***的EclipseIDE。該新版本帶有眾多更新，包括條件調(diào)試斷點(diǎn)、更多的重構(gòu)工具并支持FlexUnit4。一如往常，它還包括MXML、ActionScript3、可視化設(shè)計(jì)器以及Flex性能與內(nèi)存分析器（只有專業(yè)版才有該性能分析器）。
除此之外，該***版還提供了高級的數(shù)據(jù)管理特性以簡化數(shù)據(jù)為中心應(yīng)用的開發(fā)。這包括客戶端的數(shù)據(jù)管理特性，它可以處理CRUD操作以及在大集合中進(jìn)行滾動。
請點(diǎn)擊這里來深入了解該IDE。
9.編譯器性能
幾乎每個(gè)Flex3開發(fā)者心中都有一個(gè)痛——糟糕的編譯器性能。基于此，Gumbo的一個(gè)主要目標(biāo)就是改進(jìn)Flex4中的編譯器性能。雖然官方尚未發(fā)布性能基準(zhǔn)，但來自Adobe的PeterDonovan根據(jù)自己所作的一些試驗(yàn)對其進(jìn)行了測試，結(jié)果表明新的編譯器性能提升了25%。他說要想將性能提升3到4倍只能進(jìn)行重新設(shè)計(jì)。當(dāng)然了，每個(gè)企業(yè)級Flex應(yīng)用的開發(fā)者都希望今年底Flex4正式發(fā)布時(shí)能實(shí)現(xiàn)這一點(diǎn)。請閱讀PeterDonovan的文章來深入了解相關(guān)信息。
10.新的文本功能
Flash應(yīng)用（無論是Flex還是非Flex應(yīng)用）的一個(gè)主要議題就是高效處理文本的能力。在FlashPlayer10中，Adobe引入了全新的文本引擎以支持RIA的需要（多語言、打印以及鍵盤快捷鍵等等）。Gumbo引入了大量新的文本類（RichText、SimpleText等等）以在Flex框架中提供更健壯的文本支持。除此以外，Adobe正在全力開發(fā)新的TextLayoutFramework以賦予ActionScript3開發(fā)者利用FlashPlayer文本引擎的能力。請點(diǎn)擊這里以深入了解TextLayoutFramework。
如你所見，F(xiàn)lex4代表了該流行的RIA平臺的巨大進(jìn)步。請查看MattChotin的文章《What'snewinFlex4SDKbeta》來深入了解Flex4SDK的變化。
【編輯推薦】
- Flex4新特性新鮮出爐
- Flex4beta的Spark布局特性解析
- 技術(shù)分享 Flex4兼容模式如何移植到發(fā)布版本
- 解析Flex全屏模式設(shè)置方法
- Flex內(nèi)存泄露解決方法和內(nèi)存釋放優(yōu)化原則
