Licensed to the Apache Software Foundation (ASF) under one or more

contributor license agreements. See the NOTICE file distributed with

this work for additional information regarding copyright ownership.

The ASF licenses this file to You under the Apache License, Version 2.0

(the “License”); you may not use this file except in compliance with

the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software

distributed under the License is distributed on an “AS IS” BASIS,

WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

See the License for the specific language governing permissions and

limitations under the License.

layout: docpage title: Jewel TextInput description: The Jewel TextInput is a control for single-line text field permalink: /component-sets/jewel/textinput

< Jewel Components list

Jewel TextInput

Reference

Available since version 0.9.4.

Class	Extends
org.apache.royale.jewel.TextInput{:target=‘_blank’}	org.apache.royale.jewel.supportClasses.textinput.TextInputBase{:target=‘_blank’}

Note: This component is currently only available for JavaScript.

Overview

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

For 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{:target=‘_blank’}

Relevant Properties and Methods

Check the Reference of org.apache.royale.jewel.TextInput{:target=‘_blank’} for a more detailed list of properties and methods.

Properties

PROPERTY	Type	Description
text	String	The text inside the text field.
html	String	The html text inside the text field.

Methods

None.

Relevant Events

The TextInput has change event of type org.apache.royale.events.Event{:target=‘_blank’}. This event is dispatched when text in the control changes through user input. Notice that programatic changes will 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 will use 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 introduce text in the input field, the message "new text is: " plus the text introduced will appear 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 does not have beads for View, Controller or Model in the Javascript platform.

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

TextInput Beads

Bead Type	Implementation	Description
LowerCase{:target=‘_blank’}	org.apache.royale.core.IBead{:target=‘_blank’}	Add this bead to makes all text change to lower case.
MaxNumberCharacters{:target=‘_blank’}	org.apache.royale.core.IBead{:target=‘_blank’}	Add this bead to set the maximun number of characters the text field can hold.
PasswordInput{:target=‘_blank’}	org.apache.royale.core.IBead{:target=‘_blank’}	Add this bead to secures the text field by masking the input as it is typed.
Restrict{:target=‘_blank’}	org.apache.royale.core.IBead{:target=‘_blank’}	Add this bead to use a regular expresion pattern to validate input from user.
SearchFilterForList{:target=‘_blank’}	org.apache.royale.core.IBead{:target=‘_blank’}	Add this bead to filter options in other Jewel List component used in combo with the text input.
TextPrompt{:target=‘_blank’}	org.apache.royale.core.IBead{:target=‘_blank’}	Add this bead to place a string into the input field when there is no value associated with the text property.
UpperCase{:target=‘_blank’}	org.apache.royale.core.IBead{:target=‘_blank’}	Add this bead to makes all text change to upper case.

Common Beads

Bead Type	Implementation	Description
Disabled{:target=‘_blank’}	org.apache.royale.core.IBead{:target=‘_blank’}	This bead lets you disable and enable a Jewel control.
SizeControl{:target=‘_blank’}	org.apache.royale.core.IBead{:target=‘_blank’}	Add this bead to give the Jewel control a custom size.
ToolTip{:target=‘_blank’}	org.apache.royale.core.IBead{:target=‘_blank’}	Add this bead to enable floating a text string over the control when the user hovers the mouse cursor over it.

More examples

Binding the text property of a Jewel TextInput to update a text Label{:target=‘_blank’}
Using View States to show or hide content{:target=‘_blank’}
Dividing an Apache Royale application with modules{:target=‘_blank’}

Related controls

Other related Jewel components are:

TextArea