学步园

在上一篇 中，定义了一个最简单的SkinnableComponent并为其定义了两个Skin。

对于TransitionSkin，需要在enable时有不同的展现方式，这可以通过Skin State实现。

 

对自定义的SkinnableComponent的修改

 

首先在组件中定义isEnabled属性：

private var _isEnabled:Boolean = false;</p> <p> public function get isEnabled():Boolean<br /> {<br /> return _isEnabled;<br /> }</p> <p> public function set isEnabled(value:Boolean):void<br /> {<br /> _isEnabled = value;<br /> }

 

然后定义SkinState元标签：

[SkinState("normal")]<br /> [SkinState("enable")]

 

最后需要将属性值和组件状态关联起来，这是通过覆盖SkinnableComponent的getCurrentSkinState方法实现的。

该方法的最初定义如下：

/**<br /> * Returns the name of the state to be applied to the skin. For example, a<br /> * Button component could return the String "up", "down", "over", or "disabled"<br /> * to specify the state.<br /> *<br /> * <p>A subclass of SkinnableComponent must override this method to return a value.</p><br /> *<br /> * @return A string specifying the name of the state to apply to the skin.<br /> *<br /> * @langversion 3.0<br /> * @playerversion Flash 10<br /> * @playerversion AIR 1.5<br /> * @productversion Flex 4<br /> */<br /> protected function getCurrentSkinState():String<br /> {<br /> return null;<br /> }

 

在Node中需要覆盖该方法：

override protected function getCurrentSkinState():String<br /> {<br /> if(isEnabled)<br /> return "enable";<br /> return "normal";<br /> }

 

完整的Node代码如下：

Node.as

package skinsample<br /> {<br /> [SkinState("normal")]<br /> [SkinState("enable")]<br /> import spark.components.supportClasses.SkinnableComponent;</p> <p> public class Node extends SkinnableComponent<br /> {</p> <p> public function Node()<br /> {<br /> super();<br /> }</p> <p> private var _isEnabled:Boolean = false;</p> <p> public function get isEnabled():Boolean<br /> {<br /> return _isEnabled;<br /> }</p> <p> public function set isEnabled(value:Boolean):void<br /> {<br /> _isEnabled = value;<br /> }</p> <p> override protected function getCurrentSkinState():String<br /> {<br /> if(isEnabled)<br /> return "enable";<br /> return "normal";<br /> }<br /> }<br /> }

对Skin的修改

Skin中首先需要增加状态的声明：

<s:states><br /> <s:State name="normal" /><br /> <s:State name="enable" /><br /> </s:states>

接下来可以指定Skin元素在哪个状态中出现，默认是在所有状态中出现。XML节点和属性都可以进行指定。

对于XML节点，增加includeIn属性，如：

<s:Button top="0" right="0" bottom="0" left="0" alpha="0" includeIn="enable,normal" />

对于XML属性，增加 属性名称.状态名称 指定特定状态下的属性值，如：

<s:SolidColor color="0x131313" color.enable="0xff0000" />

 

完整的Skin代码如下：

TransitionSkin.mxml

<?xml version="1.0" encoding="utf-8"?><br /> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" width="400" height="300"><br /> <s:states><br /> <s:State name="normal" /><br /> <s:State name="enable" /><br /> </s:states><br /> <s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0"<br /> bottom="0" left="0"><br /> <s:fill><br /> <s:SolidColor color="0x131313" color.enable="0xff0000" /><br /> </s:fill><br /> <s:stroke><br /> <s:SolidColorStroke color="0x131313" weight="2"/><br /> </s:stroke><br /> </s:Rect><br /> <s:Button top="0" right="0" bottom="0" left="0" alpha="0" includeIn="enable,normal"/><br /> </s:Skin><br />

 

PlaceSkin.mxml

<?xml version="1.0" encoding="utf-8"?><br /> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" width="400" height="300"><br /> <s:states><br /> <s:State name="normal" /><br /> <s:State name="enable" /><br /> </s:states><br /> <s:Ellipse id="ellipse" top="0" right="0" bottom="0" left="0"><br /> <s:fill><br /> <s:SolidColor color="0x77CC22" /><br /> </s:fill><br /> <s:stroke><br /> <s:SolidColorStroke color="0x131313" weight="2"/><br /> </s:stroke><br /> </s:Ellipse><br /> </s:Skin><br />

 

使用具有状态的组件和Skin

定义好组件和Skin后，就可以使用了：

NodeSample.mxml

<?xml version="1.0" encoding="utf-8"?><br /> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:skinsample="skinsample.*"><br /> <fx:Script><br /> <!--[CDATA[<br /> import skinsample.TransitionSkin;<br /> ]]--><br /> </fx:Script><br /> <skinsample:Node skinClass="skinsample.TransitionSkin" x="10" y="30" width="50" height="50"/><br /> <skinsample:Node skinClass="skinsample.PlaceSkin" x="80" y="30" width="50" height="50"/><br /> <skinsample:Node skinClass="skinsample.TransitionSkin" x="150" y="30" width="50" height="50" isEnabled="true"/></p> <p></s:WindowedApplication><br />

 

运行效果：