| Use the ui:textField tag to create an input field for a single line of text.
HTML Elements and Layout
The textField component renders an XHTML <input
type="text">element.
Configuring the ui:textField Tag
Use the text attribute to associate the component with
a model object that represents the current value, by setting the
attribute's value to an EL expression that corresponds to a property
of a backing bean.
To optionally specify a label for the component, use the
label attribute, or specify a label facet.
Facets
label: use this facet to specify a custom
component for the label.readOnly: use this facet to specify a custom
component for displaying the value of this component when it is
marked as readonly. The default is a ui:staticText.
Client-side JavaScript functions
In all the functions below, <id> should be
the generated id of the TextField component.
field_setDisabled(<id>, <disabled>)
|
Enable/disable the field. Set <disabled>
to true to disable the component, or false to enable it.
|
field_setValue(<id>, <newValue>)
|
Set the value of the field to <newValue>.
|
field_getValue(<id>)
|
Get the value of the field. |
field_getInputElement(<id>) |
Get hold of a reference to the input element rendered by this
component.
|
component_setVisible(<id>)
|
Hide or show this component.
|
Examples
Example 1: Text field with label and required icon
This example uses a backing bean FieldTest with a
property string. The tag generates a label followed by
text input field. The required attribute is set to true, which causes
an icon to be rendered next to the label to indicate that the
application user must enter a value in the text field. The icon, label
and input elements are enclosed by a span.
<ui:textField id="textfield" label="Enter a value:"
text="#{FieldTest.string}"
required="true"/>
Example 2: Text field using a validator
This example uses a backing bean FieldTest with a
property number. The number property is an
int, which means that the value must be converted to
be displayed. It is not necessary to specify a Converter instance,
however, since standard JSF conversion deals with this case. A
Validator has been set to verify that any value entered by the
user is within a certain range. The HTML elements are rendered as
in example 1.
<ui:textField id="test2" label="Enter a number:"
text="#{FieldTest.number}"
validator="#{FieldTest.checkNumberRange}"/>
Auto-generated component class.
Do NOT modify; all changes
will be lost!
| 