How to understand the layers of flex skin?

Question

I'm reading the source of an example in TourDeFlex(Button With Icon), and I found it hard to understand the skin layers.

See the code of TDFPanelSkin.mxml:

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

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

<!-- layer 1: border -->
<s:Rect left="0" right="0" top="0" bottom="0">
    <s:stroke>
        <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
    </s:stroke>
</s:Rect>


<!-- layer 2: background fill -->
<!-- This layer was modified for Tour de Flex samples to have a gradient border at the bottom. -->
<s:Rect left="0" right="0" bottom="0" height="15">
    <s:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry color="0xE2E2E2" />
            <s:GradientEntry color="0x000000" />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

You can see in the comments, there are "layer 1" and "layer 2".

It's just a panel, why there are layers? How many layers a component can have? Where to know what a layer should have?

Answer 1

The short answer is:

Layers are just a useful way of thinking about Spark skins. They aren't strictly required nor is there a limit on how many you can have. The reason there are layers is because it allows you to build up the visual appearance of the component in a manner similar to how you would in an application like Photoshop. It also allows for fine-grained control of a component's appearance based on its state.

The long answer is:

RectangularDropShadow is a drop shadow that will appear beneath the component being skinned. On top of that a Rect with a solid stroke will be drawn. On top of that a Rect with a linear gradient will be drawn.

Typically these layers are entirely visual and are dictated by the design of your application. In my experience I've received Photoshop documents from designers where things like buttons where built up over many layers with varying blend modes and fills and strokes and on and on. Layering the skin allows the actual Spark skin to (mostly) match the source PSD which is nice.

Another advantage of layering the skin is that you can easily adjust layers based on the state of the skin. A common example is putting a component into a "disabled" state. You'll see your example has four states declared at the top, one of which is "disabled". By adding an alpha.disabled="0.5" attribute to the LinearGradient used in "background fill" you can update the panel to become semi-transparent when it is disabled.

I used the Adobe docs on Spark Skinning when I got started with Spark.