Flex4中的皮肤（2）

Flex4中的皮肤（2）：Skin State 收藏

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

?

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

?

对自定义的SkinnableComponent的修改

?

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

?

view plaincopy to clipboardprint?

private var _isEnabled:Boolean = false;??

??????????

??????? public function get isEnabled():Boolean??

??????? {??

??????????? return _isEnabled;??

??????? }??

??????????

??????? public function set isEnabled(value:Boolean):void?

??????? {??

???? ???????_isEnabled = value;??

??????? }?

private var _isEnabled:Boolean = false;

??????????????????

?????????????????? public function get isEnabled():Boolean

?????????????????? {

??????????????????????????? return _isEnabled;

?????????????????? }

??????????????????

?????????????????? public function set isEnabled(value:Boolean):void

?????????????????? {

??????????????????????????? _isEnabled = value;

?????????????????? }

?

?

?

然后定义SkinState元标签：

?

view plaincopy to clipboardprint?

[SkinState("normal")]??

[SkinState("enable")]?

???????? [SkinState("normal")]

???????? [SkinState("enable")]

?

?

?

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

?

该方法的最初定义如下：

?

view plaincopy to clipboardprint?

/**?

???? *? Returns the name of the state to be applied to the skin. For example,a?

???? *? Button component could return the String "up","down","over",or "disabled"?

???? *? to specify the state.?

???? *?

???? *? <p>A subclass of SkinnableComponent must override this method to return a value.</p>?

???? *?

???? *? @return A string specifying the name of the state to apply to the skin.?

???? *??

???? *? @langversion 3.0?

???? *? @playerversion Flash 10?

???? *? @playerversion AIR 1.5?

???? *? @productversion Flex 4?

???? */?

??? protected function getCurrentSkinState():String??

??? {??

??????? return null;??

??? }?

/**

???? *? Returns the name of the state to be applied to the skin. For example,a

???? *? Button component could return the String "up",or "disabled"

???? *? to specify the state.

???? *

???? *? <p>A subclass of SkinnableComponent must override this method to return a value.</p>

???? *

???? *? @return A string specifying the name of the state to apply to the skin.

???? *

???? *? @langversion 3.0

???? *? @playerversion Flash 10

???? *? @playerversion AIR 1.5

???? *? @productversion Flex 4

???? */

??? protected function getCurrentSkinState():String

??? {

??????? return null;

??? }

?

?

?

在Node中需要覆盖该方法：

?

view plaincopy to clipboardprint?

override protected function getCurrentSkinState():String??

??????? {??

??????????? if(isEnabled)??

??????????????? return "enable";??

??????????? return "normal";??

??????? }?

override protected function getCurrentSkinState():String

??? ???????? {

??? ?????????????????? if(isEnabled)

??? ??????????????????????????? return "enable";

??? ?????????????????? return "normal";

??? ???????? }

?

?

?

完整的Node代码如下：

?

Node.as

?

view plaincopy to clipboardprint?

package skinsample??

{??

??? [SkinState("normal")]??

??? [SkinState("enable")]??

??? import spark.components.supportClasses.SkinnableComponent;??

??????

??? public class Node extends SkinnableComponent??

??? {??

??????????

??????? public function Node()??

??????? {??

??????????? super();??

??????? }??

??????????

??????????

??????? private var _isEnabled:Boolean = false;??

??????????

??????? public function get isEnabled():Boolean??

??????? {??

??????????? return _isEnabled;??

??????? }??

??????????

??????? public function set isEnabled(value:Boolean):void?

??????? {??

??????????? _isEnabled = value;??

??????? }??

??????????

??????? override protected function getCurrentSkinState():String??

??????? {??

??????????? if(isEnabled)??

??????????????? return "enable";??

??????????? return "normal";??

??????? }??

??? }??

}?

package skinsample

{

???????? [SkinState("normal")]

???????? [SkinState("enable")]

???????? import spark.components.supportClasses.SkinnableComponent;

????????

???????? public class Node extends SkinnableComponent

???????? {

??????????????????

?????????????????? public function Node()

?????????????????? {

??????????????????????????? super();

?????????????????? }

??????????????????

??????????????????

?????????????????? private var _isEnabled:Boolean = false;

??????????????????

?????????????????? public function get isEnabled():Boolean

?????????????????? {

??????????????????????????? return _isEnabled;

?????????????????? }

??????????????????

?????????????????? public function set isEnabled(value:Boolean):void

?????????????????? {

??????????????????????????? _isEnabled = value;

?????????????????? }

??????????????????

?????????????????? override protected function getCurrentSkinState():String

??? ???????? {

??? ?????????????????? if(isEnabled)

??? ??????????????????????????? return "enable";

??? ?????????????????? return "normal";

??? ???????? }

???????? }

}

?

?

?

?

对Skin的修改

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

?

view plaincopy to clipboardprint?

<s:states>?

??? <s:State name="normal" />?

??? <s:State name="enable" />?

</s:states>?

??? <s:states>

??????? <s:State name="normal" />

??????? <s:State name="enable" />

??? </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

?

view plaincopy to clipboardprint?

<?xml version="1.0" encoding="utf-8"?>?

<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">?

??? <s:states>?

??????? <s:State name="normal" />?

??????? <s:State name="enable" />?

??? </s:states>?

??? <s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0"???

???????? bottom="0" left="0">?

??????? <s:fill>?

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

??????? </s:fill>?

??????? <s:stroke>?

?????????? <s:SolidColorStroke color="0x131313" weight="2"/>?????????????

??????? </s:stroke>?

??? </s:Rect>?

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

</s:Skin>?

<?xml version="1.0" encoding="utf-8"?>

<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">

??? <s:states>

??????? <s:State name="normal" />

??????? <s:State name="enable" />

??? </s:states>

??? <s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0"

???????? bottom="0" left="0">

??????? <s:fill>

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

??????? </s:fill>

??????? <s:stroke>

?????????? <s:SolidColorStroke color="0x131313" weight="2"/>??????????

??????? </s:stroke>

??? </s:Rect>

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

</s:Skin>

?

?

PlaceSkin.mxml

?

view plaincopy to clipboardprint?

<?xml version="1.0" encoding="utf-8"?>?

<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">?

??? <s:states>?

??????? <s:State name="normal" />?

??????? <s:State name="enable" />?

??? </s:states>?

??? <s:Ellipse id="ellipse"? top="0" right="0" bottom="0" left="0">?

??????? <s:fill>?

?????????? <s:SolidColor color="0x77CC22" />?

??????? </s:fill>?

??????? <s:stroke>?

?????????? <s:SolidColorStroke color="0x131313" weight="2"/>?

??????? </s:stroke>?

??? </s:Ellipse>?

</s:Skin>?

<?xml version="1.0" encoding="utf-8"?>

<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">

??? <s:states>

??????? <s:State name="normal" />

??????? <s:State name="enable" />

??? </s:states>

???????? <s:Ellipse id="ellipse"? top="0" right="0" bottom="0" left="0">

??????? <s:fill>

?????????? <s:SolidColor color="0x77CC22" />

??????? </s:fill>

??????? <s:stroke>

?????????? <s:SolidColorStroke color="0x131313" weight="2"/>

??????? </s:stroke>

??? </s:Ellipse>

</s:Skin>

?

?

使用具有状态的组件和Skin

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

?

NodeSample.mxml

?

view plaincopy to clipboardprint?

<?xml version="1.0" encoding="utf-8"?>?

<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.*">?

??? <fx:Script>?

??????? <!--[CDATA[??

??????????? import skinsample.TransitionSkin;??

??????? ]]-->?

??? </fx:Script>?

??? <skinsample:Node skinClass="skinsample.TransitionSkin" x="10" y="30" width="50" height="50"/>?

??? <skinsample:Node skinClass="skinsample.PlaceSkin" x="80" y="30" width="50" height="50"/>?

??? <skinsample:Node skinClass="skinsample.TransitionSkin" x="150" y="30" width="50" height="50" isEnabled="true"/>?

??????

</s:WindowedApplication>?

<?xml version="1.0" encoding="utf-8"?>

<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.*">

???????? <fx:Script>

?????????????????? <!--[CDATA[

??????????????????????????? import skinsample.TransitionSkin;

?????????????????? ]]-->

???????? </fx:Script>

???????? <skinsample:Node skinClass="skinsample.TransitionSkin" x="10" y="30" width="50" height="50"/>

???????? <skinsample:Node skinClass="skinsample.PlaceSkin" x="80" y="30" width="50" height="50"/>

???????? <skinsample:Node skinClass="skinsample.TransitionSkin" x="150" y="30" width="50" height="50" isEnabled="true"/>

????????

</s:WindowedApplication>

?

?

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/ThinkInside/archive/2009/10/06/4635077.aspx