< Jewel Components list

Jewel TextInput

Reference

Available since version 0.9.4.

^{Note: This component is currently only available for JavaScript.}

Overview

The Jewel TextInput control implements the Jewel control for a single-line text field. It dispatches a change event when the user inputs text.

For a multi-line text input control see TextArea

Example of use

In MXML declare a TextInput like this:

<j:TextInput/>

In ActionScript we can do the same in the following way:

var textInput:TextInput = new TextInput();
parent.addElement(textInput);

where parent is the container where the control will be added.

Here is an example of the default text input:

code here

Relevant Properties and Methods

Check the reference of org.apache.royale.jewel.TextInput for a more detailed list of properties and methods.

Properties

Methods

None.

Relevant Events

The TextInput component has change event of type org.apache.royale.events.Event. This event is dispatched when text in the component changes through user input. Note that programatic changes do not trigger this event.

You can attach callback listeners to the change event in MXML as follows:

<j:TextInput change="changeHandler(event)"/>

the change event uses the changeHandler callback function you provide in ActionScript:

<fx:Script>
    <![CDATA[      
        private function changeHandler(event:Event):void {
            trace("new text is: " + event.target.text);
        }
    ]]>
</fx:Script>

When the user adds text to the input field, the message “new text is: “ plus the text added appears in the console log.

In ActionScript we can add an event handler this way:

var textInput:TextInput = new TextInput();
textInput.addEventListener('change', changeHandler);
parent.addElement(textInput);

Relevant Beads

Unlike other components in Royale, the Jewel TextInput component does not have beads for View, Controller or Model in the JavaScript platform.

On the other hand, you can add to it beads specially crafted for this control, or other common Jewel control beads (shared with other controls) to provide more functionality.

TextInput Beads

Common Beads

More examples

• Binding the text property of a Jewel TextInput to update a text Label
• Using View States to show or hide content
• Dividing an Apache Royale application with modules

Related controls

Related Jewel components are:

• TextArea