| |||||||
FRAMES NO FRAMES |
Use the webuijsf:textField
tag to create an input
field for a single line of text.
The textField component renders an XHTML <input
type="text">
element.
webuijsf:textField
TagUse the value
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.
Attribute submitForm can be used to alter the default browser behavior on form submission when Enter key is pressed within a text field. Value of true will force the form submission, value of false will prevent it, and if submitForm is not specified, the default browser behavior ( that differs for different browsers) will take an effect.
label
: use this facet to specify a custom component
for the label.document.getElementById(id).setProps({disabled:
true})
.getInputElement() |
Use this function to access the
HTML <input> element that is rendered by the
component. |
getProps() |
Use this function to get widget properties. Please see setProps()
function for a list of supported properties. |
refresh(execute) |
Use this function to
asynchronously refresh the component.
|
setProps(props) |
Use this function to change any of the following supported
properties:
|
submit(execute) |
Use this function to
asynchronously submit the component.
|
When the component is manipulated client side, some functions may
publish event topics for custom AJAX implementations to listen for.
Using the Dojo event system, listen for the refresh event topic using:
<webuijsf:script>
var processEvents =
{
update: function(props) {
//
Do something...
}
}
// Subscribe to refresh event.
dojo.subscribe(webui.suntheme.widget.textField.event.<eventname>.endTopic,
processEvents, "update");
</webuijsf:script>
The following events are supported.
webui.suntheme.widget.textField.event.refresh.beginTopic | Event topic published before asynchronously refreshing the
component. Supported properties include:
|
webui.suntheme.widget.textField.event.refresh.endTopic |
Event topic published after asynchronously refreshing the component. Supported properties include:
|
webui.suntheme.widget.textField.event.submit.beginTopic | Event topic published before asynchronously submitting the
component. Supported properties include:
|
webui.suntheme.widget.textField.event.submit.endTopic |
Event topic published after asynchronously submitting the component. Supported properties include:
|
webui.suntheme.widget.textField.event.validation.beginTopic | Event topic published before
asynchronously submitting the
component. Supported properties include:
|
webui.suntheme.widget.textField.event.validation.endTopic |
Event topic published after asynchronously submitting the component. Supported properties include:
|
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.
<webuijsf:textField id="textfield" label="Enter a value:"
text="#{FieldTest.string}"
required="true"/>
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.
<webuijsf:textField id="test2" label="Enter a number:"
text="#{FieldTest.number}"
validator="#{FieldTest.checkNumberRange}"/>
<webuijsf:textField
id="textFieldA"
text="4111 1111 1111 1111"
label="Enter Credit Card Number"
columns="20"
required="true"
autoValidate="true"
validatorExpression="#{Payment.cardValidator}"/>
Validator Payment will be invoked, and when result comes back, the
validation message is available to the developer. One can get hold of
returned validation message by subscribing to the following event and
providing a call back closure (in this case closure called processEvents
with update function) :
<webuijsf:script>
// --- Subscribe to validation event. ---
dojo.subscribe(webui.suntheme.widget.textField.validation.event.endTopic, processEvents, "update");
// --- this closure is used for validation callback ---
var processEvents = {
update: function(props) {
var domNode = document.getElementById("form1:textFieldA");
// The following data reflecting validation results is available in props:
// props.valid ( true | false )
// props.summary
// props.detail
// The default auto-validation will ONLY invalidate (make it red) the label
// on the text field.
// As an example, we will change the prefix before the label on the text field
// to display detail message of the error, or successful validation upon success
var date = (new Date()).toLocaleString();
document.getElementById('messageId').innerHTML =
((props.valid == true)
? '[validated OK]'
: '['+ props.detail+ ']' ) + ' on ' + date;
}
}
</webuijsf:script>
<webuijsf:alert id="alert1" type="error" visible="false"/>
<webuijsf:label id="label1" text="Enter Credit Card Number" for="textField1"/>
<webuijsf:textField
id="textField1"
text="4111 1111 1111 1111"
columns="20"
required="true"
autoValidate="true"
validatorExpression="#{Payment.cardValidator}"
notify="form1:alert1,form1:label1"/>
<webuijsf:radioButton id="rb1" name="rb1" label="Toggle Field Disabled" onClick="toggleDisabled()"/><webuijsf:textField id="field1" text="My Text Field" />
<webuijsf:script>
// Toggle field disabled.
function toggleDisabled() {
var domNode = document.getElementById("form1:field1
"); // Get field
return domNode.setProps({disabled: !domNode.getProps().disabled}); // Toggle disabled state
}
</webuijsf:script>
<webuijsf:radioButton id="rb1" name="rb1" label="Refresh Text Field" onClick="refreshField()"/><webuijsf:textField id="field1" text="
#{MyBean.text}" />
<webuijsf:script>
function refreshField() {
var domNode =
document.getElementById("form1:field1"); // Get field
return domNode.refresh(); //
Asynchronously refresh field
}
</webuijsf:script>
<webuijsf:radioButton id="rb1" name="rb1" label="Refresh Text Field" onClick="refreshField()"/>
<webuijsf:textField id="field1" text="#{MyBean.text}" /> // Field used to asynchronously update text.
<webuijsf:script>
function
refreshField
() {
var domNode =
document.getElementById("form1:field1"); // Get field
return
domNode.refresh("form1:rb1"); // Asynchronously refresh while
submitting radio button value
}
</webuijsf:script>
Note that the refresh function can optionally take a list of
elements
to execute. Thus, a comma-separated list of ids can be provided to
update components server-side: refresh("form1:id1,form2:id2,...")<webuijsf:radioButton id="rb1" name="rb1" label="submit Text Field" onClick="submitField()"/>
<webuijsf:textField id="field1" text="#{MyBean.text}" /> // Field used to asynchronously update text.
<webuijsf:script>
function submitField
() {
var domNode =
document.getElementById("form1:field1"); // Get field
return domNode.submit();
}
</webuijsf:script>
Note that the submit function can optionally take a list of elements
to execute. Thus, a comma-separated list of ids can be provided to
update components server-side: submit("form1:id1,form2:id2,...")
Tag Information | |
Tag Class | com.sun.webui.jsf.component.TextFieldTag |
TagExtraInfo Class | None |
Body Content | JSP |
Display Name | None |
Attributes | ||||
Name | Required | Request-time | Type | Description |
binding | false | false | java.lang.String | A ValueExpression that resolves to the UIComponent that corresponds to this tag. This binding allows the Java bean that contains the UIComponent to manipulate the UIComponent, its properties, and its children. |
submitForm | false | false | java.lang.String | Flag indicating whether pressing enter in this text field would allow
browser to submit the enclosing form ( for all input fields with the exception of TextArea
which uses enter key to open a new line) |
autoValidate | false | false | java.lang.String | Attribute indicating to turn on/off the autovalidate functionality of the TextField.
Autovalidate would trigger the AJAX request to the validator on the component.
Setting autoValidate neccessitates that component is ajaxified, and so it will
be accomplished automatically when autoValidate is set to true .
Autovalidate will submit the content of the text field for server side processing that will be processed using JSFX partial lifecycle cycle. Validation of the data remains responsibility of the developer. For example, validatorExpression still needs to be set By default autovalidate is off. |
notify | false | false | java.lang.String | The comma separated list of absolute client IDs to notify during
text field events.
Currently, this feature is only supported by label and alert components. For example, when the label attribute of the textField tag is not used. Or, when an alert is used in the page to display validation messages. During auto-validation, the text field will notify the label and alert associated with the given client IDs. If the user's input is found to be invalid, the label will change text color and display an error indicator. Likewise, if there are any messages associated with the event, the alert will display the assocaited summary, detail, and error indicator. |
onDblClick | false | false | java.lang.String | Scripting code executed when a mouse double click occurs over this component. |
trim | false | false | java.lang.String | Flag indicating that any leading and trailing blanks will be trimmed prior to conversion to the destination data type. Default value is true. |
onKeyPress | false | false | java.lang.String | Scripting code executed when the user presses and releases a key while the component has focus. |
onSelect | false | false | java.lang.String | Scripting code executed when some text in this component value is selected. |
onFocus | false | false | java.lang.String | Scripting code executed when this component receives focus. An element receives focus when the user selects the element by pressing the tab key or clicking the mouse. |
rendered | false | false | java.lang.String | Indicates whether the HTML code for the component should be included in the rendered HTML page. If set to false, the rendered HTML page does not include the HTML for the component. If the component is not rendered, it is also not processed on any subsequent form submission. |
columns | false | false | java.lang.String | Number of character columns used to render this field. The default is 20. |
id | false | true | java.lang.String | No Description |
onKeyUp | false | false | java.lang.String | Scripting code executed when the user releases a key while the component has focus. |
onMouseUp | false | false | java.lang.String | Scripting code executed when the user releases a mouse button while the mouse pointer is on the component. |
styleClass | false | false | java.lang.String | CSS style class(es) to be applied to the outermost HTML element when this component is rendered. |
style | false | false | java.lang.String | CSS style(s) to be applied to the outermost HTML element when this component is rendered. |
onClick | false | false | java.lang.String | Scripting code executed when a mouse click occurs over this component. |
onBlur | false | false | java.lang.String | Scripting code executed when this element loses focus. |
onMouseDown | false | false | java.lang.String | Scripting code executed when the user presses a mouse button while the mouse pointer is on the component. |
toolTip | false | false | java.lang.String | Sets the value of the title attribute for the HTML element. The specified text will display as a tooltip if the mouse cursor hovers over the HTML element. |
maxLength | false | false | java.lang.String | The maximum number of characters that can be entered for this field. |
converter | false | false | java.lang.String | Specifies a method to translate native
property values to String and back for this component. The converter
attribute value must be one of the following:
|
required | false | false | java.lang.String | Flag indicating that an input value for this field is mandatory, and failure to provide one will trigger a validation error. |
disabled | false | false | java.lang.String | Flag indicating that the user is not permitted to activate this component, and that the component's value will not be submitted with the form. |
validatorExpression | false | false | java.lang.String | Used to specify a method in a backing bean to validate input
to the component. The value must be a JavaServer Faces
EL expression that resolves to a public method with
return type void. The method must take three parameters:
The backing bean where the method is defined must implement
The method is invoked during the Process Validations Phase. |
onMouseOut | false | false | java.lang.String | Scripting code executed when a mouse out movement occurs over this component. |
onMouseOver | false | false | java.lang.String | Scripting code executed when the user moves the mouse pointer into the boundary of this component. |
htmlTemplate | false | false | java.lang.String | Alternative HTML template to be used by this component. |
onMouseMove | false | false | java.lang.String | Scripting code executed when the user moves the mouse pointer while over the component. |
text | false | false | java.lang.String | Literal value to be rendered in this input field. If this property is specified by a value binding expression, the corresponding value will be updated if validation succeeds. |
immediate | false | false | java.lang.String | Flag indicating that event handling for this component should be handled immediately (in Apply Request Values phase) rather than waiting until Invoke Application phase. |
label | false | false | java.lang.String | If set, a label is rendered adjacent to the component with the value of this attribute as the label text. |
onChange | false | false | java.lang.String | Scripting code executed when the element value of this component is changed. |
visible | false | false | java.lang.String | Use the visible attribute to indicate whether the component should be viewable by the user in the rendered HTML page. |
onKeyDown | false | false | java.lang.String | Scripting code executed when the user presses down on a key while the component has focus. |
readOnly | false | false | java.lang.String | Flag indicating that modification of this component by the user is not currently permitted, but that it will be included when the form is submitted. |
labelLevel | false | false | java.lang.String | Sets the style level for the generated label, provided the label attribute has been set. Valid values are 1 (largest), 2 and 3 (smallest). The default value is 2. |
valueChangeListenerExpression | false | false | java.lang.String | Specifies a method to handle a value-change event that is triggered
when the user enters data in the input component. The
attribute value must be a JavaServer Faces EL expression that
resolves to a backing bean method. The method must take a single
parameter of type javax.faces.event.ValueChangeEvent ,
and its return type must be void. The backing bean where the
method is defined must implement java.io.Serializable
or javax.faces.component.StateHolder .
|
tabIndex | false | false | java.lang.String | Position of this element in the tabbing order of the current document. Tabbing order determines the sequence in which elements receive focus when the tab key is pressed. The value must be an integer between 0 and 32767. |
Variables | No Variables Defined. |
| |||||||
FRAMES NO FRAMES |