Geek asks and answers

Add search icon inside TextInput spark in Flex

I want to add a search icon inside the spark TextInput control. Is there a way I can extend the TextInput control and add a child to it.

thank

+3
source share
2 answers

You should not distribute TextInput. The main strength of Spark architecture is the ability to skin. You can create your own skin based on the standard one TextInputSkinand place an icon there. I think there will be no problems.

+5
source

I ran into the same problem that wanted to get the search icon in TextInput sparks. It was very simple to copy the existing spark skin and add an icon to it. Here's how:

  • , .
  • FlashBuilder, "" > " MXML"
  • " " , .
  • " " TextInput, , select spark.skins.spark.TextInputSkin.
  • (, TextInputSkinWithPromptIcon) ""
  • , .

  • <!-- text -->. <!-- search icon -->, (: ):

    <s:Image id="iconDisplay" source="@Embed('path/to/image/file/MY_SEARCH_IMAGE.png')" mouseEnabled="false" mouseChildren="false" visible.normal="false" visible.normalWithPrompt="true"/>

  • , , ( : , iconDisplay , ):

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

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

  • , TextInput, , : <s:TextInput ... skinClass="path.to.skins.TextInputSkinWithPromptIcon" prompt=" "/>

  • , 9 TextInput , . , , . , , - ( ).
  • ! ...
+3

More articles:


All Articles