技術(shù)分享 如何重寫Flex組件
本文和大家重點討論一下如何重寫Flex組件，為了模塊化設(shè)計或進(jìn)一步重用，需要對Flex組件進(jìn)行組合。比如一個包括TEXTAREA,BUTTON的復(fù)合控件。
重寫Flex組件
一、為什么要重寫Flex組件
1、在Flex已有Flex組件無法滿足業(yè)務(wù)需求，或是需要更改其可視化外觀等特性時，直接進(jìn)行繼承擴展。舉例，繼承BUTTONFlex組件的長文本卻不自動換行的自定義控件。
2、為了模塊化設(shè)計或進(jìn)一步重用，需要對Flex組件進(jìn)行組合。比如一個包括TEXTAREA,BUTTON的復(fù)合控件。
二、重寫Flex組件需要經(jīng)常換位思考的三個角色
1、作為重寫Flex組件的使用者，有哪些需求。比如需要在MXML標(biāo)簽和AS代碼中暴露哪些屬性及對應(yīng)默認(rèn)值、事件和事件的處理邏輯。
2、重寫Flex組件一般需要使用Flex原有Flex組件，要站在原有開發(fā)者的角度了解設(shè)計規(guī)則。
3、作為重寫Flex組件的設(shè)計者，在滿足需求的情況下盡量做到可復(fù)用、低耦合易擴展等設(shè)計原則，讓新Flex組件像Flex原Flex組件一樣好用。
三、重寫Flex組件AS方式和MXML方式的采用規(guī)則
1、MXML文件和AS文件***都會被編譯成AS類，只不過MXML編譯速度稍慢一些
2、如果MXML和AS都能完成的一個簡單Flex組件，MXML更容易被創(chuàng)建和控制布局
3、當(dāng)要覆蓋Flex組件的某些方法時只能用AS方式
4、創(chuàng)建一個直接繼承UIComponent的子類時只能用AS
5、創(chuàng)建非可視化Flex組件比如Formatter、validator、Effect……時，只能用AS
6、要為Flex組件添加日志功能時，只能用AS.#p#
四、AS方式重寫Flex組件常規(guī)步驟
１、如果有必要，為Flex組件創(chuàng)建所有基于標(biāo)記（tag-based）的皮膚（skins）
２、創(chuàng)建ActionScript類文件
⑴從一個基類擴展，比如UIComponent或者其他的Flex組件類
⑵指定使用者能夠通過MXML標(biāo)記進(jìn)行設(shè)置的屬性
⑶嵌入（Embed）所有的圖片和皮膚文件，文件大小盡可能小
⑷實現(xiàn)構(gòu)造器，可以設(shè)置屬性和樣式的缺省值，或者初始化數(shù)據(jù)結(jié)構(gòu)，比如數(shù)組
⑸根據(jù)需要，確定是否覆蓋以下五個方法：
(a)UIComponent.createChildren()方法，創(chuàng)建Flex組件的子Flex組件
(b)UIComponent.commitProperties()方法，提交Flex組件所有的屬性變化，設(shè)置measure()方法可能使用的屬性值。絕大多數(shù)情況下，都是對影響Flex組件如何在屏幕上顯示的屬性使用這個方法
(c)UIComponent.measure()方法，設(shè)置Flex組件的缺省size（measuredWidth、measuredHeight）和缺省的最小size（measuredMinWidth、measuredMinHeight）
(d)UIComponent.layoutChrome()方法，用于定義容器的邊框區(qū)域和確定邊框區(qū)域的位置，以及確定要在邊框區(qū)域中顯示的附加元素。例如，Panel容器使用layoutChrome()方法定義panel容器的title區(qū)域，這個區(qū)域用來包含title文本和close按鈕。
通常，使用RectangularBorder類來定義容器區(qū)域的邊框，而不是用圖片資源去包圍Flex組件。比如創(chuàng)建一個RectangularBorder對象，然后在重載的createChildren()方法中,將其作為一個內(nèi)容子控件添加到Flex組件中，再用updateDisplayList()方法來確定其位置。
將容器的內(nèi)容區(qū)域和容器邊框區(qū)域分開處理的主要原因是為了應(yīng)對Container.autoLayout
屬性被設(shè)置為false的這種情況。當(dāng)autoLayout（自動布局）屬性使用默認(rèn)值true時，只要容器子控件的大小和位置發(fā)生變化，容器及子控件就會進(jìn)行度量和布局。而當(dāng)其為false時，度量和布局只在子控件被添加或移出容器時才執(zhí)行。分開處理讓Flex在這兩種情況下都執(zhí)行l(wèi)ayoutChrome()，從而在autoLayout屬性為false的情況下，容器仍能夠更新它的邊框區(qū)域。
(e)UIComponent.updateDisplayList()方法，根據(jù)以前所設(shè)置的屬性和樣式來確定Flex組件的子Flex組件在屏幕上的大小（size）及位置（position），并且畫出Flex組件所使用的所有皮膚（skins）及圖形化元素。Flex組件的父容器負(fù)責(zé)確定Flex組件本身大?。╯ize）。
要在updateDisplayList()方法中確定一個Flex組件的大小，當(dāng)子Flex組件是UICOMPONENT時使用setActualSize()方法，而不是UICOMPONENT則使用與Flex組件大小相關(guān)的屬性width和height。要確定Flex組件的位置，當(dāng)子Flex組件是UICOMPONENT時使用move()方法，而不是UICOMPONENT則使用x和y屬性。一個區(qū)別就是move()方法不僅改變了Flex組件位置，而且在調(diào)用這個方法之后立即分發(fā)了一個move事件，設(shè)置x和y屬性也更改Flex組件的位置，但卻在下一個屏幕更新事件中才會分發(fā)move事件。
Flex組件支持很多類型的可視元素，比如皮膚，樣式和邊框。在updateDisplayList()方法中，可以添加這些可視元素，并對它們進(jìn)行一些控制。由于UICOMPONENT繼承自SPRITE，所以可以使用Graphics對象中的Flash繪畫APIs進(jìn)行繪制圖形，比如使用Graphics類去畫邊框水平線以及其他圖形元素：
graphics.lineStyle(1,0x000000,1.0);
graphics.drawRect(0,0,unscaledWidth,unscaledHeight);
updateDisplayList()方法形式如下：
protectedfunctionupdateDisplayList(unscaledWidth:Number，unscaledHeight:Number):void
以像素為單位的Flex組件坐標(biāo)系中，unscaledWidth和unscaledHeight是由父容器確定的Flex組件大小，而不管Flex組件的scaleX,scaleY是多少?？s放發(fā)生在FlashPlayer或者AIR中，發(fā)生時機是在updateDisplayList()執(zhí)行之后。比如一個Flex組件的unscaledHeight屬性是100，而其scaleY屬性是2.0,那么它在FlashPlayer或AIR中出現(xiàn)的高度為200像素。
需要注意的是，定義新Flex組件時不一定要重載所有的五個方法，只需重載實現(xiàn)Flex組件功能所必需的即可。比如實現(xiàn)一個自定義的Button控件，該控件使用新的機制來定義缺省大?。╯ize）。在這種情況下，只需要重載measure()方法?；蛘撸獙崿F(xiàn)VBox容器的一個新子類。新子類利用VBox類已有的所有有關(guān)設(shè)定大?。╯izing）的邏輯，但是變更了VBox類的布局邏輯以實現(xiàn)從底部到頂部的方式來布局容器中的子控件，而不是自頂向下的布局。在這種情況下，只需要重載updateDisplayList()方法。
(6)增加屬性（properties），方法（methods），樣式（styles），事件（events）以及元數(shù)據(jù)
３、以ActionScript文件或者SWC文件的形式部署Flex組件 #p#
五、深入Flex組件生命周期
１、生命周期（LifeCycle）簡述
⑴調(diào)用Flex組件構(gòu)造函數(shù)。構(gòu)造函數(shù)沒有返回類型，沒有參數(shù)，使用super()調(diào)用父類的構(gòu)造器
⑵使用set,get設(shè)置Flex組件屬性，常在set方法內(nèi)監(jiān)控一個布爾變量來實現(xiàn)失效機制
⑶調(diào)用addChild()方法將Flex組件添加到父Flex組件顯示列表中，F(xiàn)lex將自動調(diào)用createChildren()，invalidateProperties()，invalidateSize()，invalidateDisplayList()。只有將Flex組件添加到父容器中，F(xiàn)lex才能確定它的大小(size)，設(shè)置它所繼承樣式(style)屬性，或者在屏幕上畫出它
⑷Flex組件的parent屬性設(shè)置為對父容器的引用
⑸樣式(style)設(shè)置
⑹Flex組件分發(fā)preinitialize事件
⑺調(diào)用Flex組件createChildren()方法
⑻調(diào)用invalidateProperties()，invalidateSize()，invalidateDisplayList()失效方法，F(xiàn)lex將在下一個“渲染事件”(renderevent)期間對相應(yīng)的commitProperties()，measure()，updateDisplayList()方法進(jìn)行調(diào)用。這個規(guī)則唯一例外就是當(dāng)用戶設(shè)置Flex組件的height和width屬性時,Flex不會調(diào)用measure()方法。也就是說，只有當(dāng)Flex組件的explicitWidth和explicitHeight屬性是NaN時Flex才會調(diào)用measure()方法。
⑼Flex組件分發(fā)initialize事件。此時Flex組件所有的子Flex組件初始化完成，但Flex組件尚未更改size和布局，可以利用這個事件在Flex組件布局之前執(zhí)行一些附加的處理
⑽在父容器上分發(fā)childAdd事件
⑾在父容器上分發(fā)initialize事件
⑿在下一個“渲染事件”(renderevent)中,Flex執(zhí)行以下動作：
a.調(diào)用Flex組件的commitProperties()方法
b.調(diào)用Flex組件的measure()方法
c.調(diào)用Flex組件的layoutChrome()方法
d.調(diào)用Flex組件的updateDisplayList()方法
e.在Flex組件上分發(fā)updateComplete事件
⒀如果commitProperties()，measure()，updateDisplayList()方法調(diào)用了invalidateProperties()，invalidateSize()，invalidateDisplayList()方法，則Flexh會分發(fā)另外一個render事件
⒁在***的render事件發(fā)生后,Flex執(zhí)行以下動作：
a.設(shè)置Flex組件visible屬性使其可視
b.Flex組件分發(fā)creationComplete事件，F(xiàn)lex組件的大小(size)和布局被確定，這個事件只在Flex組件創(chuàng)建時分發(fā)一次
c.Flex組件分發(fā)updateComplete事件。無論什么時候，只要Flex組件的布局(layout)，位置，大小或其它可視的屬性發(fā)生變化就會分發(fā)這事件，然后更新Flex組件來正確地顯示。
２、為什么使用失效機制（invalidationmechanism)
一種情況是，當(dāng)設(shè)置了Flex組件的多個屬性后，比如Button控件的label和icon屬性，我們需要所有屬性被設(shè)置后一次性執(zhí)行commitProperties(),measure(),updateDisplayList()方法，而不是設(shè)置過label屬性后執(zhí)行一遍這些方法，然后在設(shè)置icon屬性后又執(zhí)行一次這些方法。
另一種情況是幾個Flex組件同時更改了它們的字體大小。程序更改字體大小的執(zhí)行速度大大快于Flex更新應(yīng)用的速度，因此要在確定最終更改字體之后才開始更新布局。另外，F(xiàn)lex需要協(xié)調(diào)布局操作以消除任何冗余過程，而不是在每個Flex組件更新它的字體大小之后都執(zhí)行一次布局操作。
Flex使用“失效機制（invalidationmechanism）”來同步Flex組件的更改。Flex用一系列方法的調(diào)用，比如在setter方法內(nèi)監(jiān)控一個變更變量來標(biāo)記Flex組件的某些東西已經(jīng)發(fā)生變化，然后在下一個“渲染事件（renderevent）”中觸發(fā)Flex組件的commitProperties(),measure(),layoutChrome()，updateDisplayList()檢查這些布爾變量來完成最終的變更邏輯。這樣做的額外好處就是setter方法可以更迅速地返回，把對新屬性值的處理留給了commitProperties()方法。
失效方法及其對應(yīng)的觸發(fā)函數(shù)如下：
invalidateProperties()通知Flex組件，以使下次屏幕更新時，它的commitProperties()方法被調(diào)用。
invalidateSize()通知Flex組件，以使下次屏幕更新時，它的measure()方法被調(diào)用。
invalidateDisplayList()通知Flex組件，以使下次屏幕更新時它的layoutChrome()方法和
updateDisplayList()方法能被調(diào)用。
當(dāng)Flex組件調(diào)用一個“失效”方法時，它就通知Flex該Flex組件已經(jīng)被更新。當(dāng)多個Flex組件調(diào)用失效
方法，F(xiàn)lex會在schedules中協(xié)調(diào)這些更新，以使這些更新操作在下一次屏幕更新時一起執(zhí)行。注意，createChildren()沒有對應(yīng)的失效方法，它會在調(diào)用后被立即執(zhí)行。
【編輯推薦】
