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

Question

Flex 4/AS3: я создал собственный скин для TextInput, выбрав New-> MXML Skin и выбрав «TextInput - spark.components» в качестве компонента Host. Поэтому отправной точкой стал «класс скинов по умолчанию для компонента 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 это идентификатор моей группы, которая рисует графический элемент.