Add search icon inside spark TextInput in Flex

Question

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

Thanks

Answer 1

You shouldn't extend TextInput itself. The main power of Spark architecture is skinning possibility. You can create your own skin based on standard TextInputSkin and place icon there. I think there will not any problems.

Answer 2

I faced the same problem wanting to get a search icon in a spark TextInput. It was very simple to copy the existing spark skin and add the icon to it. Here's how:

1. create a skins folder in your workspace if you don't already have one
2. select that folder in FlashBuilder, then right click on it, and from the menu that appears select New > MXML Skin
3. Select "Create as copy of" in the window that appears if not already selected by default.
4. In the Host Component field, type TextInput, and you should see an option appear to select spark.skins.spark.TextInputSkin.
5. Enter a name (e.g. TextInputSkinWithPromptIcon) for your component and click Finish
6. Open this file, which should appear in your skins folder now.

7. The last section in the skin file is <!-- text -->. AFTER this section, create a new section for <!-- search icon --> that includes the following (note: this will be the last section in the skin):

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

8. Modify the exclusions arrays that appear earlier in the file so it appears as follows (note: the following code already exists in the file, just add iconDisplay to it as shown):

   /* 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",];

9. Go your application code where you have the TextInput component, and link it to the skin using: <s:TextInput ... skinClass="path.to.skins.TextInputSkinWithPromptIcon" prompt=" "/>

10. Make sure you have a prompt included in the TextInput component in step 9 as shown. I didn't want text there, so I simply included a prompt that is a blank space. You can use whatever you want, but there must be SOMETHING in the prompt field (otherwise the icon doesn't get displayed).
11. That's it! Run it...