AS方式重寫(xiě)Flex組件常規(guī)步驟
本文和大家重點(diǎn)學(xué)習(xí)一下AS方式重寫(xiě)Flex組件常規(guī)步驟，在Flex已有Flex組件無(wú)法滿足業(yè)務(wù)需求，或是需要更改其可視化外觀等特性時(shí)，直接進(jìn)行繼承擴(kuò)展。
AS方式重寫(xiě)Flex組件常規(guī)步驟
１、如果有必要，為Flex組件創(chuàng)建所有基于標(biāo)記（tag-based）的皮膚（skins）
２、創(chuàng)建ActionScript類文件
⑴從一個(gè)基類擴(kuò)展，比如UIComponent或者其他的Flex組件類
⑵指定使用者能夠通過(guò)MXML標(biāo)記進(jìn)行設(shè)置的屬性
⑶嵌入（Embed）所有的圖片和皮膚文件，文件大小盡可能小
⑷實(shí)現(xiàn)構(gòu)造器，可以設(shè)置屬性和樣式的缺省值，或者初始化數(shù)據(jù)結(jié)構(gòu)，比如數(shù)組
⑸根據(jù)需要，確定是否覆蓋以下五個(gè)方法：
(a)UIComponent.createChildren()方法，創(chuàng)建Flex組件的子Flex組件
(b)UIComponent.commitProperties()方法，提交Flex組件所有的屬性變化，設(shè)置measure()方法可能使用的屬性值。絕大多數(shù)情況下，都是對(duì)影響Flex組件如何在屏幕上顯示的屬性使用這個(gè)方法
(c)UIComponent.measure()方法，設(shè)置Flex組件的缺省size（measuredWidth、measuredHeight）和缺省的最小size（measuredMinWidth、measuredMinHeight）
(d)UIComponent.layoutChrome()方法，用于定義容器的邊框區(qū)域和確定邊框區(qū)域的位置，以及確定要在邊框區(qū)域中顯示的附加元素。例如，Panel容器使用layoutChrome()方法定義panel容器的title區(qū)域，這個(gè)區(qū)域用來(lái)包含title文本和close按鈕。
通常，使用RectangularBorder類來(lái)定義容器區(qū)域的邊框，而不是用圖片資源去包圍Flex組件。比如創(chuàng)建一個(gè)RectangularBorder對(duì)象，然后在重載的createChildren()方法中,將其作為一個(gè)內(nèi)容子控件添加到Flex組件中，再用updateDisplayList()方法來(lái)確定其位置。
將容器的內(nèi)容區(qū)域和容器邊框區(qū)域分開(kāi)處理的主要原因是為了應(yīng)對(duì)Container.autoLayout
屬性被設(shè)置為false的這種情況。當(dāng)autoLayout（自動(dòng)布局）屬性使用默認(rèn)值true時(shí)，只要容器子控件的大小和位置發(fā)生變化，容器及子控件就會(huì)進(jìn)行度量和布局。而當(dāng)其為false時(shí)，度量和布局只在子控件被添加或移出容器時(shí)才執(zhí)行。分開(kāi)處理讓Flex在這兩種情況下都執(zhí)行l(wèi)ayoutChrome()，從而在autoLayout屬性為false的情況下，容器仍能夠更新它的邊框區(qū)域。
(e)UIComponent.updateDisplayList()方法，根據(jù)以前所設(shè)置的屬性和樣式來(lái)確定Flex組件的子Flex組件在屏幕上的大?。╯ize）及位置（position），并且畫(huà)出Flex組件所使用的所有皮膚（skins）及圖形化元素。Flex組件的父容器負(fù)責(zé)確定Flex組件本身大?。╯ize）。
要在updateDisplayList()方法中確定一個(gè)Flex組件的大小，當(dāng)子Flex組件是UICOMPONENT時(shí)使用setActualSize()方法，而不是UICOMPONENT則使用與Flex組件大小相關(guān)的屬性width和height。要確定Flex組件的位置，當(dāng)子Flex組件是UICOMPONENT時(shí)使用move()方法，而不是UICOMPONENT則使用x和y屬性。一個(gè)區(qū)別就是move()方法不僅改變了Flex組件位置，而且在調(diào)用這個(gè)方法之后立即分發(fā)了一個(gè)move事件，設(shè)置x和y屬性也更改Flex組件的位置，但卻在下一個(gè)屏幕更新事件中才會(huì)分發(fā)move事件。
◆Flex組件支持很多類型的可視元素，比如皮膚，樣式和邊框。在updateDisplayList()方法中，可以添加這些可視元素，并對(duì)它們進(jìn)行一些控制。由于UICOMPONENT繼承自SPRITE，所以可以使用Graphics對(duì)象中的Flash繪畫(huà)APIs進(jìn)行繪制圖形，比如使用Graphics類去畫(huà)邊框水平線以及其他圖形元素：
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ā)生時(shí)機(jī)是在updateDisplayList()執(zhí)行之后。比如一個(gè)Flex組件的unscaledHeight屬性是100，而其scaleY屬性是2.0,那么它在FlashPlayer或AIR中出現(xiàn)的高度為200像素。
需要注意的是，定義新Flex組件時(shí)不一定要重載所有的五個(gè)方法，只需重載實(shí)現(xiàn)Flex組件功能所必需的即可。比如實(shí)現(xiàn)一個(gè)自定義的Button控件，該控件使用新的機(jī)制來(lái)定義缺省大?。╯ize）。在這種情況下，只需要重載measure()方法。或者，要實(shí)現(xiàn)VBox容器的一個(gè)新子類。新子類利用VBox類已有的所有有關(guān)設(shè)定大?。╯izing）的邏輯，但是變更了VBox類的布局邏輯以實(shí)現(xiàn)從底部到頂部的方式來(lái)布局容器中的子控件，而不是自頂向下的布局。在這種情況下，只需要重載updateDisplayList()方法。
(6)增加屬性（properties），方法（methods），樣式（styles），事件（events）以及元數(shù)據(jù)
【編輯推薦】
