Flex如何自定義元件

2021-08-31 13:03:35 字數 3106 閱讀 6592

1.在類宣告前插入[style]元資料標籤,語法如下:

[style(name="style_name"[,property="value",...])]

2.定義乙個靜態初始器,為樣式屬性設定預設值。

3.覆寫stylechanged()方法,檢測樣式屬性是否改變。

4.覆寫updatedisplaylist() 方法,在顯示元件時加入樣式。

一般情況下,我們會使用乙個狀態變數來標識樣式是否改變。在updatedisplaylist方法中,首先 檢測該標識,再基於新樣式設定更新元件外觀。注意:updatedisplaylist方法只更新因為該樣式改變而需要重繪或重新計算的部分外觀,而不是 整個元件的外觀。

如果要建立乙個自定義元件,你需要重寫uicomponent類的某些方法,最少需要重寫如下方法:建構函式, createchildren(), commitproperties(), measure(), layoutchrome(), updatedisplaylist() 。

基礎語句結構如下:

package mycomponents

}注意包名與你的磁碟目錄結構一致。接下來一一講解每個方法的重寫。

建構函式

示例如下:

public function 類名()

注意,as3中建構函式不支援過載。

createchildren()

此方法的作用是在此自定義元件中建立子元件。

此方法不用你去呼叫,flex在你將此自定義元件使用addchild方法加入到父元件時自動呼叫。示例如下:

// declare two variables for the component children.

private var text_mc:textarea;

private var mode_mc:button;

override protected function createchildren():void

// test for the existence of the children before creating them.

if (!mode_mc)

}上例使用createchildren()在此自定義元件中加入了乙個label和乙個button。

commitproperties()

此方法是在修改元件屬性時使用。

此方法不用你去呼叫。當你呼叫invalidateproperties()(重新整理屬性)、addchild()(增加子元件)方法時,flex會自動呼叫此方法。這樣元件在下次顯示時,就能以新的屬性來顯示。

此方法還有乙個作用是為measure()方法提供最新的屬性資訊。

measure()

此方法的作用是設定元件的預設尺寸。

此方法不用你去呼叫。當你呼叫invalidatesize ()(重新整理尺寸)、addchild()(增加子元件)方法時,flex會自動呼叫此方法。這樣元件在下次顯示時,就能以預設尺寸來顯示。

如果你顯式的設定了元件的尺寸,如,flex就不用呼叫此方法了。要注意,measure()方法只是設定元件的預設尺寸,在updatedisplaylist()方法中,元件具備的實際尺寸(actual size)與預設尺寸可能不同。

flex中的每個元件都是有預設尺寸的。如這樣寫:,flex就會自動給乙個尺寸。如果你想重寫預設尺寸,可以重新設定measuredheight 、measuredwidth、measuredminheight、measuredminwidth。如下例:

package mycomponents

override protected function measure():void }}

然後在mxml中使用:

<?xml version="1.0"?>

xmlns:mycomp="mycomponents.*" >

此中的bluebutton就會以預設值100寬,50高來顯示。

layoutchrome()

一些容器類(container)或其子類採用此方法設定元件的border area(邊框區域)。

此方法不用你去呼叫。當你呼叫invalidatedisplaylist ()(重新整理顯示)方法時,flex會自動呼叫此方法。這樣元件在下次顯示時,就能以新的邊框來顯示。

典型的用法是你可以重寫rectangularborder類。

乙個將元件的邊框區域(border area)和內容區域(content area)分開處理的原因是當container.autolayout=false時。

總括的來講,layoutchrome()是用來處理邊框區域的重新整理顯示,而updatedisplaylist()用來處理內容區域的重新整理顯示。

updatedisplaylist()

此方法不用你去呼叫。當你呼叫invalidatedisplaylist ()(重新整理顯示)、addchild()(增加子元件)方法時,flex會自動呼叫此方法。這樣元件在下次顯示時,就能以新的樣子來顯示。其實類似vc++中的paint訊息處理。

此方法的主要作用為:

a.更改元件的尺寸和位置。要改變尺寸,在此方法中使用setactualsize()方法,而不是使用width和height屬性來完成。要改變位置,在此方法中使用move()方法,而不是使用x和y屬性來完成。

b.繪製可視元素,如**、樣式、邊框。你可以使用flash drawing api來完成。

函式的原型為:

protected function updatedisplaylist(unscaledwidth:number,

unscaledheight:number):void

兩個引數分別為此自定義元件的寬度和高度。當然如果設定父容器設定scaley=2,你設定unscaledheight=100,那麼最終呈現的是200高度的元件。

第乙個功能示例:

package mycomponents

override protected function updatedisplaylist(unscaledwidth:number,

unscaledheight:number):void }}

}第二個功能示例:

override protected function updatedisplaylist(unscaledwidth:number, unscaledheight:number):void

Flex自定義元件

使用mxml標籤定義 主檔案main1.mxml 注 xmlns mycomp 自定義命名空間其實很類似於包的概念用來管理元件的。實際當中最好把自己的元件檔案分資料夾管理。元件定義mycomp1.mxml 濟南威海 煙台注 元件的檔名就對應著將來使用時的mxml標籤名,根標籤就是你用來擴充套件的父類...

flex自定義元件

加入自定義事件 首先用元資料標籤給clogin新增自定義事件 示例 clogin.mxml event btnclicked 12 15 textalign left 12 15 textalign left displayaspassword true 12 x 190 y 118 前面提到,mx...

flex自定義元件

加入自定義事件 首先用元資料標籤給clogin新增自定義事件 示例 clogin.mxml event btnclicked 12 15 textalign left 12 15 textalign left displayaspassword true 12 x 190 y 118 前面提到,mx...