在flash mx professional 2004中,開發人員開可以在專案中自己建立新的v2元件。在開始開發v2元件之前,首先要了解movieclip類、uiobject類和uicomponent類,因為它們是flash v2元件的基類,所有flash自帶的元件都是它們的直接或間接子類。開發乙個元件可以從原先的父類繼承,擴充套件現有的元件類,使被建立的元件在父類的基礎上進一步擴充套件。另外,也可以建立乙個不帶父類的元件,以實現一些其它的功能。在這裡將重點討論如何擴充套件現有的元件類。擴充套件乙個現有元件類,通常包括以下幾個步驟:
1、元件首先作為乙個電影剪輯(movieclip)被建立,在該電影剪輯中建立兩個圖層,分別用於元件介面元素和指令碼。然後在庫的下拉列表中選擇component defination,在該對話方塊中的as2.0 class中輸入該元件所要關聯的類的完全限定名。當介面元素定義完成以後,就可以在外部檔案中建立元件的屬性、事件和方法,當然,元件的介面元素也可以在類中使用**動態建立。
2、在定義元件類檔案時,首先必須匯入所需要的類,前面已經說過,movieclip類、uiobject類和uicomponent類是v2元件的基類,所以如果當前建立的元件是從v2元件的任意元件擴充套件,那麼就必須了解這三個基類,和其下的相關元件類。關於元件的特性可以檢視macromedia公司發布的元件字典,也可以直接在flashinstaldir/en/first run/classes目錄檢視類檔案**。
3、確定元件所要擴充套件的類以後,就要為元件類編寫建構函式(constructor)。一般情況下,建構函式建議為空,這樣才能用物件的屬性介面來定義物件屬性。此外,根據初始化呼叫順序的不同,有時在建構函式中設定屬性會導致覆蓋預設值。
4、接下來要做的是新增元件的版本資訊,如果當前開發的元件是作為元件包的一部分,那麼可以把版本資訊放到另外乙個外部檔案中。在定義版本資訊時,可以繼承uiobject類的靜態字串屬性version。另外還需要定義三個比較重要的屬性:symbolname,symbolowner和classname;他們都是從元件基類繼承的。symbolname定義為靜態的字串變數,用於指定元件符號的名稱;symbolowner定義為靜態的object型別,是該類的乙個完全限定名,它將在createclassobject() 方法的內部呼叫中被使用;classname定義了元件類名稱。
5、當這些都完成以後,就要開始定義元件功能相關的屬性和方法。在屬性和方法定義時,比較好的做法是確定每乙個屬性和方法的訪問特性,使元件為使用者提供乙個良好的應用程式介面(api)。所以在定義屬性和方法時要使用private和public來宣告屬性的可訪問性,並使用setter和getter函式來設定和獲取屬性的值。這樣就更好的地實現了元件的封裝,使使用者無須了解元件的內部細節。
所有元件必須實現兩個核心方法:始化方法和大小調整。如果不在自定義元件的類檔案中覆蓋兩個方法,flash player 可能會產生錯誤。flash 在建立類時呼叫初始化方法。初始化方法應該呼叫父類的初始化方法,因為只有在呼叫此方法之後,才能正確設定width、height 和和其它的影片剪輯引數。
function init(void):void
大小調整的方法也與初始化方法類似:
function size(void):void
6、為了讓屬性在開發面板中可見,還必須為屬性宣告相關的元資料(metadata)。元資料標記可以定義元件屬性、資料繫結屬性和事件。flash 可以解釋這些語句並相應地更新開發環境。元資料與類宣告或單個的資料字段相關。元資料語句繫結到指令碼的下一行。例如,在定義元件屬性時,在屬性宣告的前一行新增元資料標記。在定義元件事件時,在類定義之外新增元資料標記,以便將事件繫結到整個類。對屬性而言,有兩個比較重要的元資料:inspectable和inspectablelist。
inspectable元資料定義了在「元件檢查器(component inspector)」面板中向使用者顯示的元件的屬性。語法如下:
[inspectable( value_type=value [,attribute=value,...] ) ]
property_declaration name:type;
inspectable元資料還包括若干元資料標記:
·name:型別為string(可選),屬性在開發面板中的顯示名稱。
·type:型別為string(可選)指定屬性的型別。如果省略,則使用屬性的型別。以下下是可接受的值: array、 object、list、string、number、boolean、font name、color。
·defaultvalue:型別可以是string或number(必需)。指定屬性的預設值。
·enumeration:型別為string(可選)。指定以逗號分隔的屬性合法值列表。
·category:型別為string(可選)。將屬性劃分到屬性檢查器中的某個特定子類別中。
inspectablelist 元資料關鍵字用於確切地指定屬性檢查器中應顯示可檢查引數的哪個子集。可以將 inspectablelist 與 inspectable 組合使用,這樣即可隱藏子類元件的繼承屬性。如果不給元件的類新增 inspectablelist 元資料關鍵字,所有可檢查的引數(包括元件父類的可檢查引數)都會顯示在屬性檢查器中。其的語法如下:
[inspectablelist("attribute1"[,...])]
// class definition
inspectablelist 關鍵字必須緊挨著類定義且在它之前,因為它應用於整個類。
7、定義元件的事件,首先要使用event元資料關鍵字宣告事件。event 元資料關鍵字用於定義元件事件。其語法如下:
[event("event_name")]
在類檔案中必須把 event 語句新增到類定義之外,以便將它們繫結到類,而不繫結到類的特定成員。首先元件類會繼承基類事件。如果當前定義元件的基類是uicomponent,那麼該元件中已經包括了movieclip類、uiobject類和uicomponent類的28個事件。但事實上,這28個事件並不是都可以用的。其原因很簡單,因為元件可以有它的組成結構,元件內部可能還有元件或是其它的元件例項。元件要為使用者提供乙個統一的介面,就必須抽取其內部結構的某些事件並把它們定義為元件的事件,這是一種基於元件內部組成結構的事件。比如說元件包括兩個文字框t1和t2,這時可以根據元件的功能要求把t1的change事件發布為元件的pp事件,而把t2的change事件發布為元件的uu事件,當然關於元件事件的名稱可以由元件開發人員自己定義。
那麼究竟如何為元件定義乙個新的事件呢?對於上面的那個例子,可以做如下定義:
//匯入類
import mx.core.uicomponent;
//用元資料宣告元件事件
[event("pp")]
[event("uu")]
//指明該類從uicomponent繼承
class t_t extends uicomponent
//在建構函式中發布t2的change事件
t2.onchanged=function() }
}在以上**中,先用元資料宣告了元件的兩個事件uu和pp,然後又在元件類的建構函式中定義t1和t2的change事件,並在它們的change事件中用_parent.dispatchevent(eventobj);語句把chang事件發布為元件事件。dispatchevent()方法需要乙個object型別的事件物件作為引數,該物件中儲存了與事件相關的資訊:target指明事件廣播(發生)的物件;type定義了事件型別的名稱——也可以認為是事件名稱。在事件指令碼中使用如下**就可以對事件做出響應,其使用方法與一般的事件處理方法一致:
//對元件的pp事件做出響應
on(pp)
//對元件的uu事件做出響應
on(uu)
元件的屬性的改變也可以作為事件發布,例如:
private var tm:string;
//在setter中發布元件的事件
public function set ttm(val:string)
當然,還要用event元資料為元件宣告事件。但事實上,沒有event元資料宣告的事件元件同樣可做出響應。event元資料宣告似乎僅僅是多了乙個**提示而已。所以元資料只是為元件提供了乙個更加友好的使用者介面,使開發人員更加容易得使用元件。
在發布元件之前,還可以為組定製乙個圖示。圖示大小要求為 18 x 18 畫素,並儲存為 png 格式。它的 alpha 透明度必須是8位,左上角的畫素要求是透明的,以支援遮罩。另外還需要在元件類檔案中定義新增元資料宣告:
[iconfile("component_name.png")]
該宣告和事件宣告一樣,必須放在類定義之前,使該宣告作用到元件類。最後將該影象儲存到到fla檔案所在的同一目錄中。在匯出 swc 檔案時,flash將在自動包含該影象。
當元件定義完整,測試通過後,就可以發布元件供其他開發人員使用。flash mx 2004 將元件匯出為元件包(swc 檔案)。在發布元件時,只需向其他開發者提供 swc檔案就可以了。此檔案包含與元件相關的所有**、swf 檔案、影象和元資料,因此其他開發者可以方便地將它放到自己的 flash開發環境中。
這裡對flash v2元件開發做了初步的討論。在具體的開發時,應根據元件的功能特性非常細緻地刻畫元件的屬性、事件和方法,宣告元資料定義良好的使用者介面。如果該元件是乙個可視的元件還需要為元件製作元件介面的圖形元素。
Vue再學習2 元件開發
在main.js中配置,配置完成之後可以全域性使用 1 引入元件物件 import globaltitle from components globaltitle.vue 2 宣告全域性元件 vue.component 元件名 元件物件 vue.component globaltitle globa...
2 1 元件化開發
doctype html lang en charset utf 8 titletitle head 歡迎來到vue元件化h2 div 歡迎來到vue元件化h2 div 歡迎來到vue元件化h2 div body html 1.定義的元件,可以在同乙個頁面的多個vue例項中去使用 2.元件建立,組建...
Vue入門(2)元件
元件是可復用的 vue 例項,且帶有乙個名字。元件是vue.js最強大的功能之一。元件可以擴充套件html元素,封裝可重用的 在較高層面上,元件是自定義的元素,vue.js的編譯器為它新增特殊功能。在有些情況下,元件也可以是原生html元素的形式,以is特性擴充套件。1.區域性元件的建立 div 區...