h2. Overview
_Since 3.1_
_TextEntry_ is a component for entering single line text. It has additional styling and functional features. Styling is controlled via the theme style sheet using predefined style classes. Additional attributes add functional features.
{tip}See the ICEfaces Showcase [Live Demo|http://icefaces-showcase.icesoft.org/showcase.jsf?grp=aceMenu&exp=textEntryBean] of this component, complete with source code.{tip}
h2. Getting Started
{panel}
{code:xml|borderStyle=dashed}<ace:textEntry id="firstNameInput" value="#{textEntryBean.firstName}" label="First Name" labelPosition="left" required="true" requiredIndicator="(*)" indicatorPosition="right"/>
{code}
{panel}
h2. Attributes
{tip:title=TagLib Documentation}This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available [here|http://www.icefaces.org/docs/v4_latest/ace/tld/ace/textEntry.html].{tip}{panel}
*value* is the input text.
{panel}
{panel}
*label* and *labelPosition* specify the label text and its position relative to the input field. Positions can be "left/right/top/bottom/inField/none". Default is "none".
{panel}
{panel}
*required* indicates whether the user is required to provide a non-empty submitted value for this component. Default = "false".
{panel}
{panel}
The *secret* boolean attribute can be set to "true" to display asterisks in place of the actual entered text, such as when capturing a password, etc. Default = 'false'.
{panel}
{panel}
The *type* attribute for the input element. Currently supports text, phone, url, email, number, date, time, datetime. Depending on device capability, a type-specific keyboard may be displayed.
{panel}
{panel}
Depending on whether input is required, an *optionalIndicator* or *requiredIndicator* can be supplied. The position of the indicator is specified by *indicatorPosition*. Positions can be "left/right/top/bottom/labelLeft/labelRight/none". Default is "labelRight" if labelPosition is "inField", "right" otherwise.
{panel}
h2. Event Listeners
| valueChangeListener | Listener method that will be notified when a new value has been set for this input component. |
h2. Client Behavior Events
| blur | Fired when the text input field loses focus (default event). |
h2. JavaScript API
The client side text entry object is exposed through the global variable named by the *widgetVar* attribute, but currently there is no API useful to the user.
h2. Labels
This component supports built-in labels. The text specified in the {{label}} attribute will be rendered next to the main input field of this component. The position specified by {{labelPosition}} will determine where this label is going to be rendered; the possible values are left, right, top, bottom, none and inField (to render the label in the field itself).
h2. Required Indicator
The {{requiredIndicator}} attribute specifies the text to be displayed next to the main input field when this component is marked as {{required}}. When, this component is not marked as {{required}}, then the text specified in the {{optionalIndicator}} is going to be rendered. The {{indicatorPosition}} attribute determines where this indicator text is going to the rendered; the possible values are left, right, top, bottom, labelLeft, labelRight, and none.
h2. Required Styling
Then this component is marked as {{required}}, the main input field receives the CSS class {{ui-state-required}}, otherwise, it receives the CSS class {{ui-state-optional}}. When this component is marked as invalid by the app, it will be rendered with the CSS class {{ui-state-error}}. These CSS classes can be used to add custom styling to this component, in order indicate its current state in a more visual way.
h2. CSS Classes
The following markup represents the basic HTML structure of the component and the CSS classes it uses.
{code:xml}
<span>
<span>
<input class="ui-inputfield ui-textentry ui-widget ui-state-default ui-corner-all [user defined classes]" style="[user defined styles]" />
<span class="ui-required-indicator ui-required-indicator-right">*</span>
</span>
</span>
{code}
h2. Keyboard and ARIA Support
The following ARIA roles are supported: textbox.
h2. Known Issues
{info}The "secret" attribute is not supported on IE8 browsers.{info}
h2. Additional Resources
_Since 3.1_
_TextEntry_ is a component for entering single line text. It has additional styling and functional features. Styling is controlled via the theme style sheet using predefined style classes. Additional attributes add functional features.
{tip}See the ICEfaces Showcase [Live Demo|http://icefaces-showcase.icesoft.org/showcase.jsf?grp=aceMenu&exp=textEntryBean] of this component, complete with source code.{tip}
h2. Getting Started
{panel}
{code:xml|borderStyle=dashed}<ace:textEntry id="firstNameInput" value="#{textEntryBean.firstName}" label="First Name" labelPosition="left" required="true" requiredIndicator="(*)" indicatorPosition="right"/>
{code}
{panel}
h2. Attributes
{tip:title=TagLib Documentation}This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available [here|http://www.icefaces.org/docs/v4_latest/ace/tld/ace/textEntry.html].{tip}{panel}
*value* is the input text.
{panel}
{panel}
*label* and *labelPosition* specify the label text and its position relative to the input field. Positions can be "left/right/top/bottom/inField/none". Default is "none".
{panel}
{panel}
*required* indicates whether the user is required to provide a non-empty submitted value for this component. Default = "false".
{panel}
{panel}
The *secret* boolean attribute can be set to "true" to display asterisks in place of the actual entered text, such as when capturing a password, etc. Default = 'false'.
{panel}
{panel}
The *type* attribute for the input element. Currently supports text, phone, url, email, number, date, time, datetime. Depending on device capability, a type-specific keyboard may be displayed.
{panel}
{panel}
Depending on whether input is required, an *optionalIndicator* or *requiredIndicator* can be supplied. The position of the indicator is specified by *indicatorPosition*. Positions can be "left/right/top/bottom/labelLeft/labelRight/none". Default is "labelRight" if labelPosition is "inField", "right" otherwise.
{panel}
h2. Event Listeners
| valueChangeListener | Listener method that will be notified when a new value has been set for this input component. |
h2. Client Behavior Events
| blur | Fired when the text input field loses focus (default event). |
h2. JavaScript API
The client side text entry object is exposed through the global variable named by the *widgetVar* attribute, but currently there is no API useful to the user.
h2. Labels
This component supports built-in labels. The text specified in the {{label}} attribute will be rendered next to the main input field of this component. The position specified by {{labelPosition}} will determine where this label is going to be rendered; the possible values are left, right, top, bottom, none and inField (to render the label in the field itself).
h2. Required Indicator
The {{requiredIndicator}} attribute specifies the text to be displayed next to the main input field when this component is marked as {{required}}. When, this component is not marked as {{required}}, then the text specified in the {{optionalIndicator}} is going to be rendered. The {{indicatorPosition}} attribute determines where this indicator text is going to the rendered; the possible values are left, right, top, bottom, labelLeft, labelRight, and none.
h2. Required Styling
Then this component is marked as {{required}}, the main input field receives the CSS class {{ui-state-required}}, otherwise, it receives the CSS class {{ui-state-optional}}. When this component is marked as invalid by the app, it will be rendered with the CSS class {{ui-state-error}}. These CSS classes can be used to add custom styling to this component, in order indicate its current state in a more visual way.
h2. CSS Classes
The following markup represents the basic HTML structure of the component and the CSS classes it uses.
{code:xml}
<span>
<span>
<input class="ui-inputfield ui-textentry ui-widget ui-state-default ui-corner-all [user defined classes]" style="[user defined styles]" />
<span class="ui-required-indicator ui-required-indicator-right">*</span>
</span>
</span>
{code}
h2. Keyboard and ARIA Support
The following ARIA roles are supported: textbox.
h2. Known Issues
{info}The "secret" attribute is not supported on IE8 browsers.{info}
h2. Additional Resources