Пользовательский скин TextInput в Flex 4 -> новый графический элемент по какой-то причине потемнел?

Question

Flex 4 / AS3: я создал собственный скин для TextInput, выбрав New->MXML Skin и выбрав "TextInput - spark.components" в качестве хост-компонента. Поэтому моей отправной точкой был "класс скина по умолчанию для компонента Spark TextInput".

В новом скине (называемом textinput_skin) я добавил новый визуальный элемент, который я хочу отображать слева от текста при вводе текста.

"Форма кнопки" должна выглядеть примерно так: http://www.adobe.com/content/dotcom/en/devnet/flex/articles/flex4_skinning/_jcr_content/articlecontentAdobe/image_2.adimg.mw.125.jpg/1279877300467.jpg(потому что я скопировал код для рисования из примера Adobe).

Вместо этого внутри моего TextInput это выглядит так: http://i.imgur.com/8aWE7HB.png

Это мой код в пользовательском скине TextInput (большая часть теперь новая, но я добавил новый визуальный элемент):

<!-- 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"
            />

И я пользуюсь кожей, вот так:

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

Проблема в том, что графический элемент недоступен. Похоже, у него может быть альфа < 1 или другой прозрачный элемент перед ним. Как вы можете видеть из кода, я сделал цвет текста 0xFFFFFF, но он явно отображается темнее белого.

Может ли кто-нибудь помочь мне определить, что затемняет мою стихию?

Кстати, я знаю, что есть элемент "тень". Но в updateDisplayList() тень устанавливается видимой, только если borderVisible == true. Я попытался установить borderVisible = false, и я попытался полностью удалить теневой элемент из кожи. Кажется, это не проблема.

Кроме того, в какой-то момент я использовал изображение вместо того, чтобы рисовать форму программно. Даже изображение было затемнено.

Большое спасибо.

Answer 1

Я нашел ответ.

В другом месте в скине был этот блок кода:

<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.

Мне нужно было добавить мой новый элемент в массив исключений, чтобы сделать его одним из "элементов скина, которые не должны быть окрашены". Я понятия не имею, почему, но это исправило это.

Новый код:

<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"];

Где text_img - это идентификатор моей группы, которая рисует графический элемент.