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

Flex4beta的Spark布局

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

需求

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

SPARK及HALO布局對(duì)比

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

相同的特性

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

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

顯著的不同

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

提升的新特性

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

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

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

使用Spark布局進(jìn)行工作

因?yàn)椴季趾腿萜髟赟park中是分離的，所以在使用Spark布局時(shí)需要注意一下幾點(diǎn)改變?；c(diǎn)時(shí)間在下面的表格上，你可以直觀的看到Halo布局容器類以及與其相對(duì)應(yīng)的Spark布局和容器組合

【編輯推薦】

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