本文和大家重點討論一下Flex4beta的Spark布局的概念，Spark作為Flex4beta的全新組件模型和架構(gòu)給RIA表格帶來了很多驚喜，同時在皮膚、CSS、組件、狀態(tài)、動畫、文本、graphics標簽、布局等等方面解決了許多關(guān)鍵性問題.

Flex4beta的Spark布局

注意：此文使用的是Flexbeta1，當然Flex4beta2也不會有任何問題
Spark作為Flex4beta的全新組件模型和架構(gòu)給RIA表格帶來了很多驚喜，同時在皮膚、CSS、組件、狀態(tài)、動畫、文本、graphics標簽、布局等等方面解決了許多關(guān)鍵性問題.
本文我將會重點關(guān)注Spark布局。我會從全局的角度審視Flex3布局和Spark布局的主要不同之處。在簡短介紹用法的不同之后我會一步步的創(chuàng)建一個自定義的Spark布局-一個簡單的FlowLayout類。
全文所提到的Halo其實就是指代Flex3中的布局、組件、架構(gòu)。而Spark則指代Flex4beta中全新的布局、容器以及整體架構(gòu)。

需求

為了學到更多，你需要以下軟件和文件:
Flex4beta
下載了解更多
FlashBuilder4beta（嚴格意義上來說不是必需的，但卻十分有用而且免費）
下載了解更多
案例文件
spark_flow_layout.zip（ZIP7K）
預備知識
假定目標讀者熟悉Flex3框架

SPARK及HALO布局對比

和Spark架構(gòu)的其他新特性一樣，全新的布局一樣是在強大的Halo布局的基礎(chǔ)上發(fā)展而來的。Flex3開發(fā)者將會發(fā)現(xiàn)了解通用執(zhí)行流程以及相應的API以及布局邏輯都是十分容易的。然而，由于Spark更加注重模塊化設(shè)計所以在一些地方還是有所不同與改進的。

相同的特性

對于使用MXML的開發(fā)者來說，沒什么太大改變。像width,height,minWidth,explicitWidth和percentWidth這些屬性以及相應的語法及語義都沒有發(fā)生變化。仍然支持left，right，top，horizontalCenter和baseline這些樣式。

組件開發(fā)者同樣會發(fā)現(xiàn)相似的元素。核心布局管理類以及組件生命周期都沒有發(fā)生變化。對于組件開發(fā)者來說三個十分熟悉的方法-commitProperties(),measure(),updateDisplayList()仍然被布局管理器以相同的順序進行調(diào)用，并且失效規(guī)則也沒有發(fā)生變化。
在measure()方法調(diào)用時組件依舊會設(shè)定默認的大小，同樣，組件在updateDisplayList（）方法被調(diào)用時依舊會為它的子元素設(shè)定大小。

顯著的不同

也許最明顯的布局不同之處就在于Flex4beta中Spark布局從容器中分離出來了！當一個Spark容器調(diào)用measure()或updateDisplayList()時，測量和子元素的放置會交由一個Spark布局實例來完成。這種分離的模式帶來了許多其他相關(guān)的新穎點：
布局邏輯被抽象在一個繼承自LayoutBase類的單獨類中，LayoutBase是Spark布局的最基礎(chǔ)的類
全新的API被引入到Spark布局以及它測量、設(shè)值、擺放的元素中。這正是ILayoutElement接口的典型應用，并且支持2d和3d變換。如果你不創(chuàng)建自己的布局話，可能并不會注意到這個接口，但如果你這么做的話，你就會發(fā)現(xiàn)它是多么的高效。
布局虛擬化-創(chuàng)建，銷毀以及回收數(shù)據(jù)容器的項目渲染器完全交給DataGroup容器(Spark為數(shù)據(jù)容器所開發(fā)的基本構(gòu)造塊)來實現(xiàn)。Spark布局支持虛擬化相對比較容易是因為這一繁重的任務DataGroup負責完成了。
Spark容器的顯示列表順序與子元素順序相分離。舉例來說，第一個子元素可以被渲染呈現(xiàn)在最后一個子元素的上面

提升的新特性

Flex4beta中Spark布局的改變致力于使整個系統(tǒng)更加模塊化，功能更強大，更具擴展性。以下就是之前提到的Spark所帶來的新特性以及改進的列表：
可設(shè)定的布局--因為布局邏輯與容器相分離，Spark容器可以被設(shè)定不同的Spark布局，即使是在運行的時候。這樣減少了容器類的數(shù)量，同時提升了模塊化以及代碼的重用性。例如，在Spark中只有一個List類。為了獲得Halo中TileList的功能，只需要為它制定一個TileLayout實例即可

自定義布局--伴隨著布局邏輯與容器的分離，新的LayoutBase類以及ILayoutElement接口允許開發(fā)者更快更容易的開發(fā)強大的布局，再將它們和Spark容器組合起來。
隨意2D變換--Spark布局現(xiàn)在支持隨意2D變換。這一功能被內(nèi)置在ILayoutElement接口中，并且被所有的Spark容器子類所支持。這樣一來使得開發(fā)支持2D變換的自定義布局變得不費吹灰之力
像素平滑滾動--這一功能被DataGroup所支持，這樣一來所有的Spark容器都將支持像素平滑滾動。在自定義布局中實現(xiàn)平滑滾動同樣是輕而易舉的事
3D支持--LayoutBase和ILayoutElement接口都支持3D。現(xiàn)在網(wǎng)絡(luò)上已經(jīng)出現(xiàn)了3D自定義布局的類，例如CoverFlow，Carousel，WheelLayout。
深度管理--開發(fā)者可以指定任意子元素的深度，無論在MXML中還是在自定義布局中

后期布局變換--開發(fā)者可以指定x,y,z,rotation,scale等屬性而不會對布局產(chǎn)生任何影響。因為現(xiàn)在所有的Spark布局已經(jīng)內(nèi)置了2D變換支持，這一新特性十分實用。假如要做一個移上效果，當鼠標移動到水平布局的列表的一個縮略圖上的時候，它會放大一點或者3d旋轉(zhuǎn)，但這并不會將其他的縮略圖擠向右側(cè)。
相容坐標空間--所有的大小屬性如width,height,measuredWidth,measuredHeight保持一致的預變換。這樣就消除了沖突如“measure()中measuredWidth是無法縮放的，但updateDisplayList()卻可以”。

使用Spark布局進行工作

因為布局和容器在Spark中是分離的，所以在使用Spark布局時需要注意一下幾點改變?；c時間在下面的表格上，你可以直觀的看到Halo布局容器類以及與其相對應的Spark布局和容器組合

【編輯推薦】

1. Flex4Beta引入新元素功能更強大
2. Flex3到Flex4的轉(zhuǎn)變新特性值得關(guān)注
3. Flex4Beta引入新元素功能更強大
4. FlexBuilder3.0與Eclipse3.4的完美結(jié)合
5. 技術(shù)分享 Flex4兼容模式如何移植到發(fā)布版本