How to understand the "id" attribute of flex skin?

Question

I'm reading some source of flex skin, and found there are some id attributes, which seems important. Take a "button" skin for example:

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
             minWidth="21" minHeight="21"
             alpha.disabled="0.5">

    <!-- host component -->
    <fx:Metadata>
        <![CDATA[ 
        /** 
        * @copy spark.skins.spark.ApplicationSkin#hostComponent
        */
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>

    <!-- layer 8: text -->
    <s:Group id="textGroup" verticalCenter="1" left="25">
        <s:filters>
            <s:DropShadowFilter alpha="0.5" blurX="0" blurY="0" distance="1" />
        </s:filters>  
        <s:Label id="labelDisplay" 
                 textAlign="center"
                 verticalAlign="middle"
                 maxDisplayedLines="1">
        </s:Label>
    </s:Group>

</s:SparkSkin>

You can see there are ids of textGroup and labelDisplay. They are important since if I use other ids, the styles won't be applied to button.

But how don I know what ids should I use? Why it's textGroup and labelDisplay? Where can I find the declarations?

I tried to search them in the source of spark.components.Button.as, but not found anything related.

Answer 1

The IDs textGroup and labelDisplay are part of the skinning contract. If you check the source for ButtonBase the class extended by the Button class you will notice:

[SkinPart(required="false")]

/**
 *  A skin part that defines the label of the button. 
 *  
 *  @langversion 3.0
 *  @playerversion Flash 10
 *  @playerversion AIR 1.5
 *  @productversion Flex 4
 */

public var labelDisplay:TextBase;

Here as you can see the declaration tells you that labelDisplay is a TextBase in the skin and that the labelDisplay skin part is technically not required (required="false"), but without it, Flex would not draw a label on the Button control. The default value for the required property is false. The contract between the Button class and its skin dictates that when you set the label property on a button, the value is pushed down into the skin and modifies the value of the labelDisplay skin part’s text, if the labelDisplay skin part exists.

So essentially this means that these IDs will be used in the ButtonBase class. Usually no need to change the Ids unless of course your requirement needs you to do so. In which case you need to change the skinning contract appropriately too.