前面说了如何自定义SkinnableComponent以及 定义State。
在Skin中还可以引用Component中的数据。
首先在Node中增加属性tokenCount：
[javascript]
view plain
copy
print
?
- private var _tokenCount:int;?
- ??????? [Bindable("tokenChange")]?
- ??????? public function get tokenCount():int?
- ??????? {?
- ??????????? return _tokenCount;?
- ??????? }?
- ?????????
- ??????? public function set tokenCount(value:int):void?
- ??????? {?
- ??????????? _tokenCount = value;?
- ??????? }?
在Skin中，需要先指定HostComponent：
[xhtml]
view plain
copy
print
?
- <fx:Metadata>?
- ?? [HostComponent("skinsample.Node")]?
- </fx:Metadata>?
这样就可以在需要的地方引用组件的属性了：
<s:SimpleText text="{hostComponent.tokenCount}".../>
代码如下：
TransitionSkin.mxml
[xhtml]
view plain
copy
print
?
- <?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">?
- ??? <fx:Metadata>?
- ?????? [HostComponent("skinsample.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:SimpleText text="{hostComponent.tokenCount}" color="0x131313" color.normal="0xffffff"?
- ??????????? textAlign="center"?
- ??????????? verticalAlign="middle"?
- ??????????? horizontalCenter="0" verticalCenter="0"?????????????
- ???? />?
- ??? <s:Button top="0" right="0" bottom="0" left="0" alpha="0" includeIn="enable,normal"/>?
- </s:Skin>?
NodeSample.mxml
[xhtml]
view plain
copy
print
?
- <?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" tokenCount="5"/>?
- ??? <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" tokenCount="2"/>?
- ?????
- </s:WindowedApplication>?
转自：http://blog.csdn.net/thinkinside/article/details/4635138
运行结果：
