uiTextInput

uiTextInput

The uiTextInput component is used to create a single-line editable version of the uiText. This UI element allows end-users of your application to enter text (that will presumably be processed and used by your application to perform tasks). If you need a multiline editable text field, use the uiTextArea instead.

Using uiTextInput

ActionScript 3.0 Example

import com.ghostwire.ui.containers.uiBox;
import com.ghostwire.ui.containers.uiForm;
import com.ghostwire.ui.controls.uiPushButton;
import com.ghostwire.ui.controls.uiText;
import com.ghostwire.ui.controls.uiTextInput;
import com.ghostwire.ui.enums.ALIGN;
 
// ** label **
var nameLabel:uiText = new uiText("Name:");
nameLabel.alignY = ALIGN.CENTER;
 
// ** text input **
var nameInput:uiTextInput = new uiTextInput();
nameInput.alignY = ALIGN.CENTER;
 
// ** push button **
var nameBtn:uiPushButton = new uiPushButton("Submit");
nameBtn.alignY = ALIGN.CENTER;
 
// ** box layout container **
var nameBox:uiBox = new uiBox();
nameBox.spacing = 10;
nameBox.addChild(nameLabel);
nameBox.addChild(nameInput);
nameBox.addChild(nameBtn);
 
// ** top level form container **
var nameForm:uiForm = new uiForm();
nameForm.defaultButton = nameBtn;
nameForm.addChild(nameBox);
 
// ** add to display list **
addChild(nameForm);

Editable

The text rendered in the uiTextInput component is intended to be user editable. If for whatever reasons you need to set a uiTextInput instance to be non-editable, you can do so by setting the editable property to false (default value is true). However, the instance will remain focusable and included in the tab focus chain. To make the uiTextInput instance completely non-interactive, consider disabling the control by setting enabled property to false instead.

Size

The default desired size of uiTextInput depends on the text style used, ie the font face and font size affects this default size. The default width is computed using a prototype text string of 10 characters (“WWWWWWWWWW”).

You can also use the setSize(width,height) method to set preferred dimensions. It is recommended that you do not set the height explicitly. For example, the code below sets the width to 100px and allow the component to compute its own preferred height.

var txt:uiTextInput = new uiTextInput();
txt.setSize(100,-1);

User Interaction

When a uiTextInput instance is focused, the user can type inside the text field, or use the following keys to interact with the control:

Key	Action
Arrow Keys	Moves the insertion caret position.*
Shift+Tab	Moves focus to previous UI control in the tab focus chain.
Tab	Moves focus to next UI control in the tab focus chain.

* If the editable property is set to false, the control is still focusable, but the Arrow Keys will have no effect.

API Reference

For more information on the members of the com.ghostwire.ui.controls.uiTextInput class, please refer to the API Reference.