Flex4中的皮肤(3): 使用组件数据

前面说了如何自定义SkinnableComponent 以及 定义State 。

在Skin中还可以引用Component中的数据。

 

首先在Node中增加属性tokenCount：

private var _tokenCount:int; [Bindable("tokenChange")] public function get tokenCount():int { return _tokenCount; } public function set tokenCount(value:int):void { _tokenCount = value; }

 

在Skin中，需要先指定HostComponent：

<fx:Metadata> [HostComponent("skinsample.Node")] </fx:Metadata>

这样就可以在需要的地方引用组件的属性了：

<s:SimpleText text="{hostComponent.tokenCount} ".../>

 

代码如下：

TransitionSkin.mxml

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

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

 

运行结果：