Flex4中的皮肤（3）

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

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

?

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

?

首先在Node中增加属性tokenCount：

?

view plaincopy to clipboardprint?

private var _tokenCount:int;??

??????? [Bindable("tokenChange")]??

??????? public function get tokenCount():int?

??????? {??

??????????? return _tokenCount;??

??????? }??

??????????

??????? public function set tokenCount(value:int):void?

??????? {??

??????????? _tokenCount = value;??

??????? }?

private var _tokenCount:int;

?????????????????? [Bindable("tokenChange")]

?????????????????? public function get tokenCount():int

?????????????????? {

??????????????????????????? return _tokenCount;

?????????????????? }

??????????????????

?????????????????? public function set tokenCount(value:int):void

?????????????????? {

??????????????????????????? _tokenCount = value;

?????????????????? }

?

在Skin中，需要先指定HostComponent：

?

view plaincopy to clipboardprint?

<fx:Metadata>?

?? [HostComponent("skinsample.Node")]??

</fx:Metadata>?

<fx:Metadata>

?? [HostComponent("skinsample.Node")]

</fx:Metadata>

?

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

?

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

?

代码如下：

?

TransitionSkin.mxml

?

view plaincopy to clipboardprint?

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

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

?

view plaincopy to clipboardprint?

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

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

?

?

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/ThinkInside/archive/2009/10/06/4635116.aspx