FLEX皮肤实例3_自定义类与皮肤交互数据

转载：http://blog.csdn.net/thinkinside/article/details/4635116
1.概述
    上一篇文章《FLEX皮肤实例2_自定义节点上添加skinstate》描述了如何定义皮肤，本章描述类如何与皮肤交互数据

2.在Skin中还可以引用Component中的数据
2.1 在Node中增加属性tokenCount

      变量_tokenCount用于在节点上显示数字
     

        private var _tokenCount:int;
        [Bindable("tokenChange")] //表示
        public function get tokenCount():int
        {
            return _tokenCount;
        }

        public function set tokenCount(value:int):void
        {
            _tokenCount = value;
        }

2.2 在skin中指定HostComponent
      只有指定了hostcomponent，皮肤与类之间才能交互数据
     
       [HostComponent("skinsample.Node")]  
     

      皮肤使用类的属性例子如下
        

详细代码如下：

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" /><!--enable状态下为红色 -->
        </s:fill>
        <s:stroke>
            <s:SolidColorStroke color="0x131313" weight="2" />
        </s:stroke>
    </s:Rect>

    <!-- text，normal状态下为白色，否则为蓝色 -->
    <s:Label text="{hostComponent.tokenCount}" color="0x0000ff" color.normal="0xffffff"
                  textAlign="center" verticalAlign="middle"
                  horizontalCenter="0" verticalCenter="0"
                 />

    <!--界面上不显示任何东西-->
    <s:Button top="4" right="4" bottom="4" left="4" alpha="0" color="0x00ff00" includeIn="enable,normal"/>

</s:Skin>

3. 程序演示
主程序代码如下

<?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" tokenCount="5"/>
    <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" tokenCount="2"/>
</s:Application>

运行结果如下