FLEX皮肤实例2_自定义节点上添加skinstate

转载：http://blog.csdn.net/thinkinside/article/details/4635077

1.概述
      在《FLEX皮肤实例1_自定义圆形和方形节点》中，定义了一个最简单的SkinnableComponent并为其定义了两个Skin。
      现在，对于TransitionSkin，需要在enable时有不同的展现方式，这可以通过Skin State实现。

2.修改ode类
      为了让用户可以通过定义Node节点的属性显示不同的状态，比如
            isEnabled="true"/>
      我们需要在Node类上定义一个isEnable属性和可能具有的状态集，并重载

2.1 添加isEnabled属性
      private var _isEnabled:Boolean = false; 

2.2 SkinState元标签
    [SkinState("normal")]  
    [SkinState("enable")] 
    表示目前节点具有了二个状态

2.3 添加isEnabled属性
      为了将属性值和组件状态关联起来，通过覆盖SkinnableComponent的getCurrentSkinState方法实现的。
      该方法定义于SkinnableComponent

      //返回当前skin的名称
      protected function getCurrentSkinState():String
     {
        return null;
    }

具体Node类代码如下

import spark.components.supportClasses.SkinnableComponent;

    [SkinState("normal")]
    [SkinState("enable")]

    public class Node extends SkinnableComponent {

        private var _isEnabled:Boolean = false;
        public function Node() {
            super();
        }
        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";
        }
    }

3.修改皮肤
      现在Node节点具有了二个皮肤状态和属性_isEnabled来控制皮肤的设置

3.1 添加皮肤状态
      在两个皮肤文件PlaceSkin.mxml和TransitionSkin.mxml中都必须添加皮肤的状态
     
         
         
     

3.2 指定Skin元素在哪个状态中出现
      默认情况下，skin元素在所有状态中出现。也可以增加includeIn属性进行指定。比如：
            includeIn="enable,normal" />

3.3 指定特定状态下的属性值
      color.enable="0xff0000" />
      指定在enable状态下，节点填充色为红色

TransitionSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx=""
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">

    <!-- host component -->
    <fx:Metadata>
        [HostComponent("nodeexam.Node")]
    </fx:Metadata>

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

4.使用具有状态的组件和Skin
代码如下

<?xml version="1.0" encoding="utf-8"?>
<s:Application
    xmlns:fx=""
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    xmlns:skinsample="nodeexam.*">


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

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