（转）Flex4中的皮肤（2）：Skin State

在上一篇 中，定义了一个最简单的SkinnableComponent并为其定义了两个Skin。

对于TransitionSkin，需要在enable时有不同的展现方式，这可以通过Skin State实现。

对自定义的SkinnableComponent的修改

首先在组件中定义isEnabled属性：

 

view plain copy to clipboard print ?

1. private var _isEnabled:Boolean = false;   
2.            
3.         public function get isEnabled():Boolean   
4.         {   
5.             return _isEnabled;   
6.         }   
7.            
8.         public function set isEnabled(value:Boolean):void  
9.         {   
10.             _isEnabled = value;   
11.         }  

private var _isEnabled:Boolean = false; public function get isEnabled():Boolean { return _isEnabled; } public function set isEnabled(value:Boolean):void { _isEnabled = value; }

 

 

然后定义SkinState元标签：

 

view plain copy to clipboard print ?

1. [SkinState("normal")]   
2. [SkinState("enable")]  

[SkinState("normal")] [SkinState("enable")]

 

 

最后需要将属性值和组件状态关联起来，这是通过覆盖SkinnableComponent的getCurrentSkinState方法实现的。

该方法的最初定义如下：

 

view plain copy to clipboard print ?

1. /**  
2.      *  Returns the name of the state to be applied to the skin. For example, a  
3.      *  Button component could return the String "up", "down", "over", or "disabled"  
4.      *  to specify the state.  
5.      *  
6.      *  <p>A subclass of SkinnableComponent must override this method to return a value.</p>  
7.      *  
8.      *  @return A string specifying the name of the state to apply to the skin.  
9.      *   
10.      *  @langversion 3.0  
11.      *  @playerversion Flash 10  
12.      *  @playerversion AIR 1.5  
13.      *  @productversion Flex 4  
14.      */  
15.     protected function getCurrentSkinState():String   
16.     {   
17.         return null;   
18.     }  

/** * Returns the name of the state to be applied to the skin. For example, a * Button component could return the String "up", "down", "over", or "disabled" * to specify the state. * * <p>A subclass of SkinnableComponent must override this method to return a value.</p> * * @return A string specifying the name of the state to apply to the skin. * * @langversion 3.0 * @playerversion Flash 10 * @playerversion AIR 1.5 * @productversion Flex 4 */ protected function getCurrentSkinState():String { return null; }

 

 

在Node中需要覆盖该方法：

 

view plain copy to clipboard print ?

1. override protected function getCurrentSkinState():String   
2.         {   
3.             if(isEnabled)   
4.                 return "enable";   
5.             return "normal";   
6.         }  

override protected function getCurrentSkinState():String { if(isEnabled) return "enable"; return "normal"; }

 

 

完整的Node代码如下：

Node.as

 

view plain copy to clipboard print ?

1. package skinsample   
2. {   
3.     [SkinState("normal")]   
4.     [SkinState("enable")]   
5.     import spark.components.supportClasses.SkinnableComponent;   
6.        
7.     public class Node extends SkinnableComponent   
8.     {   
9.            
10.         public function Node()   
11.         {   
12.             super();   
13.         }   
14.            
15.            
16.         private var _isEnabled:Boolean = false;   
17.            
18.         public function get isEnabled():Boolean   
19.         {   
20.             return _isEnabled;   
21.         }   
22.            
23.         public function set isEnabled(value:Boolean):void  
24.         {   
25.             _isEnabled = value;   
26.         }   
27.            
28.         override protected function getCurrentSkinState():String   
29.         {   
30.             if(isEnabled)   
31.                 return "enable";   
32.             return "normal";   
33.         }   
34.     }   
35. }  

package skinsample { [SkinState("normal")] [SkinState("enable")] import spark.components.supportClasses.SkinnableComponent; public class Node extends SkinnableComponent { public function Node() { super(); } private var _isEnabled:Boolean = false; public function get isEnabled():Boolean { return _isEnabled; } public function set isEnabled(value:Boolean):void { _isEnabled = value; } override protected function getCurrentSkinState():String { if(isEnabled) return "enable"; return "normal"; } } }

 

 

对Skin的修改

Skin中首先需要增加状态的声明：

 

view plain copy to clipboard print ?

1. <s:states>  
2.     <s:State name="normal" />  
3.     <s:State name="enable" />  
4. </s:states>  

<s:states> <s:State name="normal" /> <s:State name="enable" /> </s:states>

 

接下来可以指定Skin元素在哪个状态中出现，默认是在所有状态中出现。XML节点和属性都可以进行指定。

对于XML节点，增加includeIn属性，如：

<s:Button top="0" right="0" bottom="0" left="0" alpha="0" includeIn="enable,normal" />

对于XML属性，增加 属性名称.状态名称 指定特定状态下的属性值，如：

<s:SolidColor color="0x131313" color.enable="0xff0000" />

完整的Skin代码如下：

TransitionSkin.mxml

 

view plain copy to clipboard 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.     <s:states>  
4.         <s:State name="normal" />  
5.         <s:State name="enable" />  
6.     </s:states>  
7.     <s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0"    
8.          bottom="0" left="0">  
9.         <s:fill>  
10.            <s:SolidColor color="0x131313" color.enable="0xff0000" />  
11.         </s:fill>  
12.         <s:stroke>  
13.            <s:SolidColorStroke color="0x131313" weight="2"/>              
14.         </s:stroke>  
15.     </s:Rect>  
16.     <s:Button top="0" right="0" bottom="0" left="0" alpha="0" includeIn="enable,normal"/>  
17. </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"> <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:Button top="0" right="0" bottom="0" left="0" alpha="0" includeIn="enable,normal"/> </s:Skin>

 

PlaceSkin.mxml

 

view plain copy to clipboard 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.     <s:states>  
4.         <s:State name="normal" />  
5.         <s:State name="enable" />  
6.     </s:states>  
7.     <s:Ellipse id="ellipse"  top="0" right="0" bottom="0" left="0">  
8.         <s:fill>  
9.            <s:SolidColor color="0x77CC22" />  
10.         </s:fill>  
11.         <s:stroke>  
12.            <s:SolidColorStroke color="0x131313" weight="2"/>  
13.         </s:stroke>  
14.     </s:Ellipse>  
15. </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"> <s:states> <s:State name="normal" /> <s:State name="enable" /> </s:states> <s:Ellipse id="ellipse" top="0" right="0" bottom="0" left="0"> <s:fill> <s:SolidColor color="0x77CC22" /> </s:fill> <s:stroke> <s:SolidColorStroke color="0x131313" weight="2"/> </s:stroke> </s:Ellipse> </s:Skin>

 

使用具有状态的组件和Skin

定义好组件和Skin后，就可以使用了：

NodeSample.mxml

 

view plain copy to clipboard 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"/>  
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"/>  
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"/> <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"/> </s:WindowedApplication>

 

运行效果：

转载于:https://www.cnblogs.com/gisera/archive/2010/12/28/1919110.html