解析重寫Flex組件中角色 規則和步驟
在學習Flex的過程中，你可能會遇到重寫Flex組件的問題，這里和大家分享一下，希望本文的介紹能讓你有所收獲。
重寫Flex組件
一、為什么要重寫Flex組件
1、在Flex已有Flex組件無法滿足業務需求，或是需要更改其可視化外觀等特性時，直接進行繼承擴展。舉例，繼承BUTTONFlex組件的長文本卻不自動換行的自定義控件。
2、為了模塊化設計或進一步重用，需要對Flex組件進行組合。比如一個包括TEXTAREA,BUTTON的復合控件。
二、重寫Flex組件需要經常換位思考的三個角色
1、作為重寫Flex組件的使用者，有哪些需求。比如需要在MXML標簽和AS代碼中暴露哪些屬性及對應默認值、事件和事件的處理邏輯。
2、重寫Flex組件一般需要使用Flex原有Flex組件，要站在原有開發者的角度了解設計規則。
3、作為重寫Flex組件的設計者，在滿足需求的情況下盡量做到可復用、低耦合易擴展等設計原則，讓新Flex組件像Flex原Flex組件一樣好用。
三、重寫Flex組件AS方式和MXML方式的采用規則
1、MXML文件和AS文件***都會被編譯成AS類，只不過MXML編譯速度稍慢一些
2、如果MXML和AS都能完成的一個簡單Flex組件，MXML更容易被創建和控制布局
3、當要覆蓋Flex組件的某些方法時只能用AS方式
4、創建一個直接繼承UIComponent的子類時只能用AS
5、創建非可視化Flex組件比如Formatter、validator、Effect……時，只能用AS
6、要為Flex組件添加日志功能時，只能用AS.
四、AS方式重寫Flex組件常規步驟
1、如果有必要，為Flex組件創建所有基于標記（tag-based）的皮膚（skins）
2、創建ActionScript類文件
1）從一個基類擴展，比如UIComponent或者其他的Flex組件類
2）指定使用者能夠通過MXML標記進行設置的屬性
3）嵌入（Embed）所有的圖片和皮膚文件，文件大小盡可能小
4）實現構造器，可以設置屬性和樣式的缺省值，或者初始化數據結構，比如數組
5）根據需要，確定是否覆蓋以下五個方法：
(a)UIComponent.createChildren()方法，創建Flex組件的子Flex組件
(b)UIComponent.commitProperties()方法，提交Flex組件所有的屬性變化，設置measure()方法可能使用的屬性值。絕大多數情況下，都是對影響Flex組件如何在屏幕上顯示的屬性使用這個方法
(c)UIComponent.measure()方法，設置Flex組件的缺省size（measuredWidth、measuredHeight）和缺省的最小size（measuredMinWidth、measuredMinHeight）
(d)UIComponent.layoutChrome()方法，用于定義容器的邊框區域和確定邊框區域的位置，以及確定要在邊框區域中顯示的附加元素。例如，Panel容器使用layoutChrome()方法定義panel容器的title區域，這個區域用來包含title文本和close按鈕。
通常，使用RectangularBorder類來定義容器區域的邊框，而不是用圖片資源去包圍Flex組件。比如創建一個RectangularBorder對象，然后在重載的createChildren()方法中,將其作為一個內容子控件添加到Flex組件中，再用updateDisplayList()方法來確定其位置。
將容器的內容區域和容器邊框區域分開處理的主要原因是為了應對Container.autoLayout
屬性被設置為false的這種情況。當autoLayout（自動布局）屬性使用默認值true時，只要容器子控件的大小和位置發生變化，容器及子控件就會進行度量和布局。而當其為false時，度量和布局只在子控件被添加或移出容器時才執行。分開處理讓Flex在這兩種情況下都執行layoutChrome()，從而在autoLayout屬性為false的情況下，容器仍能夠更新它的邊框區域。
(e)UIComponent.updateDisplayList()方法，根據以前所設置的屬性和樣式來確定Flex組件的子Flex組件在屏幕上的大?。╯ize）及位置（position），并且畫出Flex組件所使用的所有皮膚（skins）及圖形化元素。Flex組件的父容器負責確定Flex組件本身大?。╯ize）。
要在updateDisplayList()方法中確定一個Flex組件的大小，當子Flex組件是UICOMPONENT時使用setActualSize()方法，而不是UICOMPONENT則使用與Flex組件大小相關的屬性width和height。要確定Flex組件的位置，當子Flex組件是UICOMPONENT時使用move()方法，而不是UICOMPONENT則使用x和y屬性。一個區別就是move()方法不僅改變了Flex組件位置，而且在調用這個方法之后立即分發了一個move事件，設置x和y屬性也更改Flex組件的位置，但卻在下一個屏幕更新事件中才會分發move事件。
Flex組件支持很多類型的可視元素，比如皮膚，樣式和邊框。在updateDisplayList()方法中，可以添加這些可視元素，并對它們進行一些控制。由于UICOMPONENT繼承自SPRITE，所以可以使用Graphics對象中的Flash繪畫APIs進行繪制圖形，比如使用Graphics類去畫邊框水平線以及其他圖形元素：
- graphics.lineStyle(1,0x000000,1.0);
- graphics.drawRect(0,0,unscaledWidth,unscaledHeight);
updateDisplayList()方法形式如下：
- protectedfunctionupdateDisplayList(unscaledWidth:Number，unscaledHeight:Number):void（）
- {
- }
以像素為單位的Flex組件坐標系中，unscaledWidth和unscaledHeight是由父容器確定的Flex組件大小，而不管Flex組件的scaleX,scaleY是多少。縮放發生在FlashPlayer或者AIR中，發生時機是在updateDisplayList()執行之后。比如一個Flex組件的unscaledHeight屬性是100，而其scaleY屬性是2.0,那么它在FlashPlayer或AIR中出現的高度為200像素。
需要注意的是，定義新Flex組件時不一定要重載所有的五個方法，只需重載實現Flex組件功能所必需的即可。比如實現一個自定義的Button控件，該控件使用新的機制來定義缺省大?。╯ize）。在這種情況下，只需要重載measure()方法?；蛘?，要實現VBox容器的一個新子類。新子類利用VBox類已有的所有有關設定大小（sizing）的邏輯，但是變更了VBox類的布局邏輯以實現從底部到頂部的方式來布局容器中的子控件，而不是自頂向下的布局。在這種情況下，只需要重載updateDisplayList()方法。
(6)增加屬性（properties），方法（methods），樣式（styles），事件（events）以及元數據
3、以ActionScript文件或者SWC文件的形式部署Flex組件
【編輯推薦】
- 技術分享 如何重寫Flex組件
- Flex基礎 創建***個Flex項目
- 解析Flex事件執行流程
- FlexBuilder3.0與Eclipse3.4的***結合
- 學習筆記 FlexBuilder2.0中如何使用基于Lists的控件
