Flex 4 custom TextInput skin -> new graphical element is darkened for some reason?

Question

Flex 4 / AS3: I made a custom skin for TextInput by selecting New->MXML Skin and choosing 'TextInput - spark.components' as the Host Component. Therefore my starting point was the 'default skin class for Spark TextInput component'.

Within the new skin (called 'textinput_skin') I added a new visual element that I want to appear to the left of the text in the Text Input.

The 'button shape' should look pretty much exactly like this: http://www.adobe.com/content/dotcom/en/devnet/flex/articles/flex4_skinning/_jcr_content/articlecontentAdobe/image_2.adimg.mw.125.jpg/1279877300467.jpg (because I copied the code for drawing it from an Adobe example).

Instead inside my TextInput it looks like this: http://i.imgur.com/8aWE7HB.png

This is my code in the custom TextInput skin (most is now new, but I added the new visual element):

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

<!-- fill - NOT NEW STUFF -->
<!--- Defines the appearance of the TextInput component's background. -->
<s:Rect id="background" left="1" right="1" top="1" bottom="1">
    <s:fill>
        <!--- @private Defines the background fill color. -->
        <s:SolidColor id="bgFill" color="0xFFFFFF" />
    </s:fill>
</s:Rect>

<!-- shadow - NOT NEW STUFF -->
<!--- @private -->
<s:Rect left="1" top="1" right="1" height="1" id="shadow">
    <s:fill>
        <s:SolidColor color="0x000000" alpha="0.12" />
    </s:fill>
</s:Rect>

<s:Group> <!-- NEW PART: group with horizontal layout, to get graphical element to the left of the text in the text input -->
    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>

    <s:Group> <!-- a second group that defines the 'image' shape and interior text (looks like a green rect with rounded corners and text inside)'
        <!-- border and fill -->
        <s:Rect id="rect" radiusX="4" radiusY="4" 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:Rect>

        <!-- highlight on top -->
        <s:Rect radiusX="4" radiusY="4" top="2" right="2" left="2" height="50%">
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry color="0xFFFFFF" alpha=".5"/>
                    <s:GradientEntry color="0xFFFFFF" alpha=".1"/>
                </s:LinearGradient>
            </s:fill>
        </s:Rect>

        <!-- text -->
        <s:Label text="txt" color="0xFFFFFF" 
                 textAlign="center"
                 verticalAlign="middle"
                 horizontalCenter="0" verticalCenter="1"
                 left="6" right="6" top="6" bottom="6" 
                 />
    </s:Group>

    <!-- text - NOT NEW STUFF - the normal textDisplay element for the Text Input -->
    <!--- @copy spark.components.supportClasses.SkinnableTextBase#textDisplay -->
    <s:RichEditableText id="textDisplay"
                        verticalAlign="middle"
                        widthInChars="10"
                        left="1" right="1" top="1" bottom="1" />
</s:Group>

<!--- Defines the Label that is used for prompt text. The includeInLayout property is false so the prompt text does not affect measurement. -->
<s:Label id="promptDisplay" maxDisplayedLines="1"
            verticalAlign="middle"
            mouseEnabled="false" mouseChildren="false"
            includeIn="normalWithPrompt,disabledWithPrompt" 
            includeInLayout="false"
            />

And I use the skin, like so:

<s:TextInput skinClass="model.textinput_skin" fontFamily="Arial" id="textinputid" name="item3" visible="true" editable="true" />            

The problem is that the graphical element is dimmed. It looks like it might have an alpha < 1, or has another transparent item in front of it. As you can see in the code I made my text color 0xFFFFFF, yet it clearly displays as darker than white.

Can anyone help me determine what is darkening my element?

By the way, I'm aware there is the 'shadow' element. But in updateDisplayList() shadow is set visible only if borderVisible == true. I tried setting borderVisible = false, and I tried completely removing the shadow element from the skin. It doesn't seem to be the problem.

Also, at one point I was using an image instead of drawing the shape programatically. Even the image was darkened.

Many thanks.

Answer 1

I found the answer.

Elsewhere in the skin was this block of code:

<fx:Script fb:purpose="styling">
    <![CDATA[
    import mx.core.FlexVersion;

    private var paddingChanged:Boolean;

    /* Define the skin elements that should not be colorized. */
    static private const exclusions:Array = ["background", "textDisplay", "promptDisplay", "border"];

    /* exclusions before Flex 4.5 for backwards-compatibility purposes */
    static private const exclusions_4_0:Array = ["background", "textDisplay", "promptDisplay"];
... etc.

I needed to add my new element to the exclusions array, to make it one of "the skin elements that should not be colorized". I have no idea why but this fixed it.

New code:

<fx:Script fb:purpose="styling">
    <![CDATA[
    import mx.core.FlexVersion;

    private var paddingChanged:Boolean;

    /* Define the skin elements that should not be colorized. */
    static private const exclusions:Array = ["text_img", "background", "textDisplay", "promptDisplay", "border"];

    /* exclusions before Flex 4.5 for backwards-compatibility purposes */
    static private const exclusions_4_0:Array = ["text_img", "background", "textDisplay", "promptDisplay"];

Where text_img is the id of my group that draws the graphical element.