关于自定义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>