AS方式重寫Flex組件常規步驟

Flex組件有很多值得學習的地方,本文向大家簡單介紹一下AS方式重寫Flex組件常規步驟,希望本文的介紹能讓你有所收穫。 

本文和大家重點學習一下AS方式重寫Flex組件常規步驟,在Flex已有Flex組件無法滿足業務需求,或是需要更改其可視化外觀等特性時,直接進行繼承擴展。 

AS方式重寫Flex組件常規步驟 

1、如果有必要,爲Flex組件創建所有基於標記(tag-based)的皮膚(skins) 

2、創建ActionScript類文件 

⑴從一個基類擴展,比如UIComponent或者其他的Flex組件類 

⑵指定使用者能夠通過MXML標記進行設置的屬性 

⑶嵌入(Embed)所有的圖片和皮膚文件,文件大小儘可能小 

⑷實現構造器,可以設置屬性和樣式的缺省值,或者初始化數據結構,比如數組 

⑸根據需要,確定是否覆蓋以下五個方法: 

(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組件在屏幕上的大小(size)及位置(position),並且畫出Flex組件所使用的所有皮膚(skins)及圖形化元素。Flex組件的父容器負責確定Flex組件本身大小(size)。 

要在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類去畫邊框水平線以及其他圖形元素: 

Java代碼   收藏代碼
  1. graphics.lineStyle(1,0x000000,1.0);  
  2.   
  3. graphics.drawRect(0,0,unscaledWidth,unscaledHeight);  
  4.   
  5. updateDisplayList()  



方法形式如下: 

Java代碼   收藏代碼
  1. 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控件,該控件使用新的機制來定義缺省大小(size)。在這種情況下,只需要重載measure()方法。或者,要實現VBox容器的一個新子類。新子類利用VBox類已有的所有有關設定大小(sizing)的邏輯,但是變更了VBox類的佈局邏輯以實現從底部到頂部的方式來佈局容器中的子控件,而不是自頂向下的佈局。在這種情況下,只需要重載updateDisplayList()方法。 

 

原文地址:http://smartblack.iteye.com/blog/393716

 

 

發佈了98 篇原創文章 · 獲贊 0 · 訪問量 3861
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章