Flex 4十大主要特性變化一覽
上周Adobe發布的Flex 4(Gumbo)首個官方beta版包含了眾多的變化。本文從較高層次審視了這個流行RIA框架的最新版,討論了其所發生的主要變化。
1. 集成Adobe Catalyst
Flex 4的一個主要特性就是提供了對Adobe Catalyst(Adobe新的設計工具,用于創建富Internet應用而無需編寫代碼)集成的支持。Catalyst改變了開發者與設計者協作的方式,因為它清楚地知道應用開發者與設計者之間工作方式的顯著差異。這樣開發者與設計者都能專注于自己所擅長的領域,憑借Catalyst,無論開發者還是設計者都能按照自己所習慣的方式進行工作。Flex 4中的很多變化都是圍繞著Flex與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的效果進行任何變更,這么做的目的是為了保持向后兼容。
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:
下面的代碼聲明了Flex 3的Button:
請瀏覽MXML 2009規范以深入了解其變化。
4. 對View States的改進
Flex 2將狀態(states)概念引入到了Flex框架中,這樣我們就可以通過簡單的狀態改變來管理視圖組件的變化。Flex 4改進了視圖狀態(view states)以簡化其語法,這樣我們就能更輕松地使用他們了。新語言屬性includeIn和excludeFrom就是簡化語法的一個例子,我們可以設定組件的這兩個屬性值以響應狀態變化(參見下面的代碼示例)。
- <m:states>
- <m:State name="A"/>
- <m:State name="B"/>
- <m:State name="C"/>
- < SPAN>m:states>
- <Button label="Click Me" includeIn="A, B"/>
- <Button label="Button C" excludeFrom="C"/>
5. FXG支持
Flash Player的核心是個繪圖引擎。Adobe在Flash Player 10中引入了FXG,現在又將其引入到了Flex中。FXG是個聲明式的圖形格式,可以在工具間傳遞內容,這意味著設計者可以在Catalyst或CS4 Illustrator中創建內容,接下來Flex應用開發者就可以將其導入并使用而無需修改任何內容。#p#
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>
- /**
- * @copy spark.skins.default.ApplicationSkin#hostComponent
- */
- [HostComponent("spark.components.Panel")]
- ]]>
- < SPAN>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};
- < SPAN>fx:Script>
- <s:states>
- <s:State name="normal" />
- <s:State name="disabled" />
- < SPAN>s:states>
- . . . . .
- <s:Rect left="1" right="1" top="31" height="1">
- <s:fill>
- <s:SolidColor color="0xC0C0C0" />
- < SPAN>s:fill>
- < SPAN>s:Rect>
- <s:SimpleText id="titleField" lineBreak="explicit"
- left="10" right="4" top="2" height="30"
- verticalAlign="middle" fontWeight="bold">
- < SPAN>s:SimpleText>
- <s:Group id="contentGroup" left="1" right="1" top="32" bottom="1">
- < SPAN>s:Group>
- < SPAN>s:SparkSkin>
由于該皮膚文件唯一的作用就是控制Panel容器的可視化外觀,因此設計者可以修改組件的樣式而無需編輯其源代碼,也不必了解組件的內部行為。更為重要的是,設計者可以按照自己熟悉的方式來使用Catalyst。
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" />
- < SPAN>s:layout>
- <s:Button label="Button 1" />
- <s:Button label="Button 2" />
- < SPAN>s:Group>
8. Flash Builder 4
Flash Builder 4(之前叫做Flex Builder)是面向應用開發者的最新的Eclipse IDE。該新版本帶有眾多更新,包括條件調試斷點、更多的重構工具并支持FlexUnit 4。一如往常,它還包括MXML、ActionScript 3、可視化設計器以及Flex性能與內存分析器(只有專業版才有該性能分析器)。
除此之外,該最新版還提供了高級的數據管理特性以簡化數據為中心應用的開發。這包括客戶端的數據管理特性,它可以處理CRUD操作以及在大集合中進行滾動。
9. 編譯器性能
幾乎每個Flex 3開發者心中都有一個痛——糟糕的編譯器性能。基于此,Gumbo的一個主要目標就是改進Flex 4中的編譯器性能。雖然官方尚未發布性能基準,但來自Adobe的Peter Donovan根據自己所作的一些試驗對其進行了測試,結果表明新的編譯器性能提升了25%。他說要想將性能提升3到4倍只能進行重新設計。當然了,每個企業級Flex應用的開發者都希望今年底Flex 4正式發布時能實現這一點。
10. 新的文本功能
Flash應用(無論是Flex還是非Flex應用)的一個主要議題就是高效處理文本的能力。在Flash Player 10中,Adobe引入了全新的文本引擎以支持RIA的需要(多語言、打印以及鍵盤快捷鍵等等)。Gumbo引入了大量新的文本類(RichText、 SimpleText等等)以在Flex框架中提供更健壯的文本支持。除此以外,Adobe正在全力開發新的Text Layout Framework以賦予ActionScript 3開發者利用Flash Player文本引擎的能力。請點擊這里以深入了解Text Layout Framework。
【編輯推薦】