flex4皮肤

1.都继承SparkSkin类

2.都要指定HostComponet[]

3.Group绝对定位来层叠显示

4.描述边框：

<s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="red"/>
<s:GradientEntry color="blue"/>
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>

 <s:Rect id="border" left="0" right="0" top="0" bottom="0">
            <s:stroke>
                <!--- @private -->
                <s:SolidColorStroke id="borderStroke" weight="1"/>
            </s:stroke>
    </s:Rect>

5.描述填充：

<s:Rect id="tbFill" left="20" right="20" top="20" bottom="20">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="blue"/>
<s:GradientEntry color="yellow"/>
</s:LinearGradient>
</s:fill>
</s:Rect>

 <s:Rect id="tbDiv" left="0" right="0" bottom="0" height="1">
                    <s:fill>
                        <s:SolidColor color="0xC0C0C0"/>
                    </s:fill>
 </s:Rect>

6.设置矩形投影（阴影）:

<s:RectangularDropShadow id="dropShadow" left="0" right="0" top="0" bottom="0" alpha="0.32"
angle="90" blurX="20" blurY="20" color="#000000" distance="11"/>

7.  设置状态：

<s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
        <s:State name="normalWithControlBar" stateGroups="withControls"/>
        <s:State name="disabledWithControlBar" stateGroups="withControls"/>
    </s:states>

那么如何通过设置组件的状态来改变皮肤的显示呢？

下面举个例子：

TextInput 组件的enabled设置方法源码：

 override public function set enabled(value:Boolean):void
    {
        if (textDisplay)
            textDisplay.enabled = value;
        
        if (value == super.enabled)
            return;
        
        super.enabled = value;
  }

 override protected function getCurrentSkinState():String
    {
        var showPromptWhenFocused:Boolean = getStyle("showPromptWhenFocused");
        
        if ((showPromptWhenFocused || 
            focusManager && focusManager.getFocus() != focusManager.findFocusManagerComponent(this)) && 
            prompt != null && prompt != "")
        {
            if (text.length == 0)
            {
                if (enabled && skin && skin.hasState("normalWithPrompt"))
                    return "normalWithPrompt";
                if (!enabled && skin && skin.hasState("disabledWithPrompt"))
                    return "disabledWithPrompt";
            }
        }
        return enabled ? "normal" : "disabled";
    }

getCurrentSkinState  enabled属性应该是绑定好的，而这个方法也可能是绑定好的，一旦属性变化，就会调用此方法。

可以看出组件的属性变动，会修改相应的状态，而状态的变动则会影响皮肤的显示

8.皮肤中的文本域通常由如下组件实现：

<s:RichEditableText id="textDisplay"
              verticalAlign="middle"
              widthInChars="10"
              left="1" right="1" top="1" bottom="1" />

TextArea组件跟TextInput组件的区别就是在这个文本域上加了个Scroller