關於自定義spark組件的學習體會

當使用Action Script創建一個skinnable component組件時，需要創建2個類。一個是組件類，一個組件類要使用的skin類。

1.在組件類中定義了組件的核心行爲,包括派發事件、組件所要顯示的數據、在皮膚中實現的skin part和view states。

2.而皮膚類則定義了組件外觀相關的信息，定義了組件中所包含的子組件，組件的默認佈局等。

自定義組件可能會需要重載4個方法，commitProperies(),createChildren(),measure(),updateDisplayList().

而自定義skinnable component組件時，還可能需要重載下面幾個方法。 attachSkin(),detachSkin(),partAdded(),partRemoved(),getCurrentState()

 

仔細看下面的2個例子，代碼來自於官方教程Using_Flex4中的2337頁。

package myComponents { import flash.events.Event; import spark.components.Button; import spark.components.RichEditableText; import spark.components.supportClasses.SkinnableComponent; // ModalText dispatches a change event when the text of the // RichEditableText subcomponent changes, // and a placementChanged event // when you change the textPlacement property of ModalText. [Event(name="change", type="flash.events.Event")] [Event(name="placementChanged", type="flash.events.Event")] // Define the skin states implemented by the skin class. [SkinState("normal")] [SkinState("normalDisabled")] [SkinState("textLeft")] [SkinState("textLeftDisabled")] /** a) Extend SkinnableComponent. */ public class ModalTextStates extends SkinnableComponent { /** b) Implement the constructor. */ public function ModalTextStates() { super(); // Set the skin class. setStyle("skinClass", ModalTextStatesSkin); } /** C) Define the skin parts. */ [SkinPart(required="true")] public var modeButton:Button; [SkinPart(required="true")] public var textInput:RichEditableText; /** d) Implement the commitProperties() method. */ override protected function commitProperties():void { super.commitProperties(); if (bTextChanged) { bTextChanged = false; textInput.text = _text; } } /** e) Implement the partAdded() method. */ override protected function partAdded(partName:String, instance:Object):void { super.partAdded(partName, instance); if (instance == textInput) { textInput.editable = false; textInput.text= _text; textInput.addEventListener("change", textInput_changeHandler); } if (instance == modeButton) { modeButton.label = "Toggle Editing Mode"; modeButton.addEventListener("click", modeButton_changeHandler); } } /** f) Implement the partRemoved() method. */ override protected function partRemoved(partName:String, instance:Object):void { super.partRemoved(partName, instance); if (instance == textInput) { textInput.removeEventListener("change", textInput_changeHandler); } if (instance == modeButton) { textInput.removeEventListener("click", modeButton_changeHandler); } } /** g) Implement the getCurrentSkinState() method. * The view state is determined by the _textPlacement property * and the editable property of the RichEditableText subcomponent.*/ override protected function getCurrentSkinState():String { var returnState:String = "normal"; if (textInput.editable == true) { if (_textPlacement == "right") { returnState = "normal"; } else if (_textPlacement == "left") { returnState = "textLeft"; } } if (textInput.editable == false) { if (_textPlacement == "right") { returnState = "normalDisabled"; } else if (_textPlacement == "left") { returnState = "textLeftDisabled"; } } return returnState; } /** h) Add methods, properties, and metadata. * The general pattern for properties is to specify a private * holder variable. */ // Define the text property. private var _text:String = "ModalText"; private var bTextChanged:Boolean = false; // Then, create a getter/setter pair for the text property. [Bindable] public function set text(t:String):void { _text = t; bTextChanged = true;invalidateProperties(); } public function get text():String { return textInput.text; } // Define the textPlacement property. private var _textPlacement:String = "right"; // Create a getter/setter pair for the textPlacement property. // Dispatch the placementChanged event when it changes. [Bindable] public function set textPlacement(p:String):void { _textPlacement = p; invalidateSkinState(); dispatchEvent(new Event("placementChanged")); } public function get textPlacement():String { return _textPlacement; } // Dispatch a change event when the RichEditableText.text // property changes. private function textInput_changeHandler(eventObj:Event):void { dispatchEvent(new Event("change")); } // Handle the Button click event to toggle the // editting mode of the RichEditableText subcomponent. private function modeButton_changeHandler(eventObj:Event):void { textInput.editable = !textInput.editable; invalidateSkinState(); } } } 

<?xml version="1.0" encoding="utf-8"?> <!-- asAdvancedSpark/myComponents/ModalTextStatesSkin.mxml --> <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="100" minHeight="25"> <!-- Define ModalTextState as the host component of the skin. --> <fx:Metadata> <!--[CDATA[ [HostComponent("myComponents.ModalTextStates")] ]]--> </fx:Metadata> <!-- Define the view states. --> <s:states> <s:State name="normal" /> <s:State name="normalDisabled" stateGroups="disabledGroup"/> <s:State name="textLeft"/> <s:State name="textLeftDisabled" stateGroups="disabledGroup"/> </s:states> <!-- Define the border around the RichEditableText control. --> <s:Rect x="{myScroller.x}" width="{myScroller.width}" height="{myScroller.height}"> <s:stroke> <s:SolidColorStroke color="0x686868" weight="1"/> </s:stroke> </s:Rect> <!--- Defines the appearance of the Button subcomponent. --> <s:Button id="modeButton" width="150" x="0" x.textLeft="206" x.textLeftDisabled="206" minHeight="25" height="100%"/> <!--- Defines the appearance of the RichEditableText subcomponent. --> <s:Scroller id="myScroller" width="200" x="156" x.textLeft="0" x.textLeftDisabled="0"> <s:RichEditableText id="textInput" alpha="1.0" alpha.disabledGroup="0.5" minHeight="25" heightInLines="4" widthInChars="20" paddingLeft="4" paddingTop="4" paddingRight="4" paddingBottom="4"/> </s:Scroller> </s:SparkSkin> 

 

第1段代碼是組件類，

第2段代碼是皮膚類。

 

這2段代碼中說明了好多問題。

1.組件類中的組件如何和皮膚類中定義的組件對應

 

組件類中的代碼：

[SkinPart(required="true")]

public var modeButton:Button;

皮膚類中的代碼：

<s:Button id="modeButton"/>

 

2.如何在皮膚中定義state並且在組件類中使用

 

組件類中的代碼：

 

[SkinState("normal")]

[SkinState("normalDisabled")]

[SkinState("textLeft")]

[SkinState("textLeftDisabled")]

 

皮膚類中的代碼：

 

<s:states>

<s:State name="normal" />

<s:State name="normalDisabled" stateGroups="disabledGroup"/>

<s:State name="textLeft"/>

<s:State name="textLeftDisabled" stateGroups="disabledGroup"/>

</s:states>