Flex4中的皮肤（3）：使用组件数据

 

        分类：            2009-10-06 02:54 1810人阅读 评论(1) 收藏 举报

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

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

首先在Node中增加属性tokenCount：

[javascript] view plain copy print ?

1. private var _tokenCount:int; 
2.         [Bindable("tokenChange")] 
3.         public function get tokenCount():int 
4.         { 
5.             return _tokenCount; 
6.         } 
7.          
8.         public function set tokenCount(value:int):void 
9.         { 
10.             _tokenCount = value; 
11.         } 

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 ?

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

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

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

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

代码如下：

TransitionSkin.mxml

[xhtml] view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?> 
2. <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"> 
3.     <fx:Metadata> 
4.        [HostComponent("skinsample.Node")] 
5.     </fx:Metadata> 
6.     <s:states> 
7.         <s:State name="normal" /> 
8.         <s:State name="enable" /> 
9.     </s:states> 
10.     <s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0"  
11.          bottom="0" left="0"> 
12.         <s:fill> 
13.            <s:SolidColor color="0x131313" color.enable="0xff0000" /> 
14.         </s:fill> 
15.         <s:stroke> 
16.            <s:SolidColorStroke color="0x131313" weight="2"/>            
17.         </s:stroke> 
18.     </s:Rect> 
19.     <!-- text --> 
20.     <s:SimpleText text="{hostComponent.tokenCount}" color="0x131313" color.normal="0xffffff" 
21.             textAlign="center" 
22.             verticalAlign="middle" 
23.             horizontalCenter="0" verticalCenter="0"             
24.      /> 
25.     <s:Button top="0" right="0" bottom="0" left="0" alpha="0" includeIn="enable,normal"/> 
26. </s:Skin> 

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

[xhtml] view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?> 
2. <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.*"> 
3.     <fx:Script> 
4.         <!--[CDATA[ 
5.             import skinsample.TransitionSkin; 
6.         ]]--> 
7.     </fx:Script> 
8.     <skinsample:Node skinClass="skinsample.TransitionSkin" x="10" y="30" width="50" height="50" tokenCount="5"/> 
9.     <skinsample:Node skinClass="skinsample.PlaceSkin" x="80" y="30" width="50" height="50"/> 
10.     <skinsample:Node skinClass="skinsample.TransitionSkin" x="150" y="30" width="50" height="50" isEnabled="true" tokenCount="2"/> 
11.      
12. </s:WindowedApplication> 

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

运行结果：