Flex创建自己的皮肤

使用Flex来创建自己的组件或者皮肤，只需要继承直接继承SkinnableComponent，在使用时只需要将希望改变皮肤的组件的skinClass赋值成刚才的皮肤即可。

深入的使用是在皮肤中创建state。

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

               private var _isEnabled:Boolean = false;

public function get isEnabled():Boolean
{
return _isEnabled;
}

public function set isEnabled(value:Boolean):void
{
_isEnabled = value;
}

然后定义SkinState元标签：

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

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

在组件中需要重写的方法：

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

在皮肤中作如下声明：

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

皮肤中的元素就可以这样用了：<s:Button top="0" right="0" bottom="0" left="0" alpha="0" includeIn="enable,normal" />

完整的皮肤示例：

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

在皮肤中如何引用组件的一个属性：

在皮肤组件中需要指定：

<fx:Metadata>
   [HostComponent("skinsample.Node")]//组件的位置
</fx:Metadata>

就可以这样引用：<s:SimpleText text="{hostComponent.tokenCount} ".../>

参考自：http://blog.youkuaiyun.com/thinkinside/article/details/4635116