Flex4 Skinning 4 留言板示例

下面我們想新建這個元件，新建乙個as3類，名為notecard, 並繼承skinnablecomponent父類。如下**所示：

package com.guyue.components}}

然後為這個類用skinstate元資料方式新增相應的skin state, 一般情況下有兩個：normal和disabled. **如下：

[skinstate("normal")]
[skinstate("disabled")]

[skinpart(required="true")]
public var labeldisplay:textbase;
[skinpart(required="true")]
public var closebutton:button;

private var _text:string;
public function get text():string
public function set text(value:string):void

由於skin可以在執行時載入或者解除安裝，因此我們在程式剛開始執行時並不能保證component的相關skin檔案已經準備完畢。所以需要對相應skin part屬性進行動態設定。flex框架會將skin中宣告的skin part與component中的相關屬性結合起來，並通過skinning生命週期中相應的方法進行通知。

這裡的notecard類用到的相關方法主要有getcurrentskinstate(), partadded(), partremoved()這三個。這三個方法都在skinnablecomponent中有定義，因此只需要在子類中進行覆寫。

getcurrentskinstate()方法是返回要要載入skin的component的state名稱。比如這裡的notecard類有disabled, enabled, 實現**如下：

override protected function getcurrentskinstate():string

partadded()方法會在skin part新增的時候被呼叫，因此在這個方法中，我們可以新增這個skin part的相關處理邏輯，比如事件監聽等。這裡的notecard類實現**如下：

override protected function partadded(partname:string, instance:object):void

partremoved()方法會在skin part移除的時候被呼叫，因此在這個方法中，我們可以將新增在這個skin part的相關處理邏輯進行移除，比如事件監聽等。這裡的notecard類實現**如下：

override protected function partremoved(partname:string, instance:object):void

protected function closebutton_clickhandler(event:mouseevent):void

以上只是建立了skinnablecomponent, 接下來需要為它定義相關的**才能達到想要的效果。在skins包中新建乙個mxml skin檔案notecardskin, 定義其hostcomponent元資料屬性為剛剛建立的notecard類。**如下：

<?xml version="1.0" encoding="utf-8"?>
[hostcomponent("com.guyue.components.notecard")]

接下來定義與notecard類中對應的states, **如下：

接下來是介面的組成部分，包括乙個矩形，乙個矩形中的文字標籤和乙個圓形按鈕。最後notecardskin**的**如下：

<?xml version="1.0" encoding="utf-8"?>
[hostcomponent("com.guyue.components.notecard")]

注意觀察一下label和button的id屬性，可以發現與notecard類中的skinpart是對應的，這樣在將skin應用到component上時，flex會自動匹配。

另外圓形按鈕closebutton也使用了乙個自定義**，使用這個**會將flex4自帶的預設**覆蓋，這裡我們需要再建立這個新的**檔案notecardclosebuttonskin, 具體方法與上大同小異，**如下：

<?xml version="1.0" encoding="utf-8"?>
[hostcomponent("spark.components.button")]

以上就是乙個簡單skinnable spark component實現的示例。flex強大的skinning機制使得它的實現非常容易。我們可以隨時定義新的**來完全改變這個component的外觀。

Flex4 Skinning 4 留言板示例

Flex學習筆記4

flex學習小結4

Flex 4 問題彙總

Flex4 Skinning 4 留言板示例

Flex學習筆記4

flex學習小結4

Flex 4 問題彙總

相關推薦