TextInput

Overview

Extended TextInput that adds styling support for an icon, as well as a button to clear the text when the text is non-null.

Creating the TextInput Component

The TextInput extends the TextInput class so it can be added to any container that implements IVisualElementContainer.

Using the TextInput Component

This component functions just like the Spark TextInput, but an icon can be added via the "iconClass" style and a clear button will be displayed to make it easier for users to clear the text field.

Focus

On focus, if text is non-null, the clear button skin part will be displayed, if it exists. On focusOut, the clear button will be hidden unless the "hideClearButtonOnFocusOut" property is false.

Accessibility

Same as a Flex SDK TextInput.

Selected Custom Events

CLEAR
ardisia.components.textInput.events.TextInputEvent
Dispatched when the optional clear button skin part is clicked and the text is cleared.

Selected Custom Styles

iconClass
Embedded graphics class for the icon. Expects the data in a format that a BitmapImage element will understand.

Themes & Skinning

A skin for the Spark theme is provided. Styling will change the border color depending on the theme used.

Example

<textInput:TextInput hideClearButtonOnFocusOut="true"
	iconClass="@Embed(source='search.png')"
	hideClearButtonOnFocusOut="true"
   	prompt="Enter Text Here"
	iconPaddingTop="1"
	iconPaddingRight="0"
	iconPaddingBottom="0"
	iconPaddingLeft="4" />

See the TextInput demo application for additional example code.

Back To Top