Skip to end of metadata
Go to start of metadata

The prototypes here were used for getting the feedback of other developers, during the first part (design part) of GSOC project. They are all obsolete now, and only kept as a reference example for future students .

<hx:inputText>

This component is an HTML5 enabled extension of standard <h:inputText> and Trinidad's <tr:inputText>.

This component is able to render plain-text (types of text, search, url and tel), textarea and password inputs, just like <tr:inputText>. Plus new Html5 stuff is supported.

Extends: h:inputText or some middle-component that other input components extend
Attributes not present in ancestor:

Name

Required?

Values

Description

text

optional

one of
'text'(default), 'search', 'url', 'tel', 'textarea' and 'password'

Type of the input.
Same rules apply for 'text', 'search', 'url' and 'tel' on browsers, except the new browser-side validation. see this.

required

optional

true or false(default).

Same with <h:inputText> 'required' except, 'required' attribute of HTML 'input' element is also used this time.

pattern

optional

EL and literal

Pattern to validate the typed input on browser-side and the server-side. This attribute should not be set and is ignored if "type" is 'textarea'.

suggestions

optional

Comma seperated strings, array or collection of SelectItem's

Suggestion values. This attribute should not be defined if "datalist" property is set. This property should not be set and is ignored if "type" is 'password' or 'textarea'.

autofocus

optional

boolean

If true, as soon as the page is loaded, allows the user to just start typing without having to manually focus the main control. Defaults to false.

placeholder

optional

EL and literal

Hint to show on the input, when nothing is typed

datalist

optional

EL and literal

Id of <hx:datalist> for suggestions mechanism. By this way, suggestion options(datalist) can be shared across several input elements. This attribute should not be set and is ignored if "type" is 'textarea' or 'password'.

cols

optional

int

Number of columns to set width of input element.

rows

optional

int

Number of rows to set height of input element. This attribute should not be set and is ignored if "type" is not 'textarea'. If "type" is not set, and "rows" is set to a number that is greater than 1, type will be set to 'textarea' and a textarea element will be rendered.

Potential Children:
  • <f:selectItem> and <f:selectItems> : For suggestions (not applicable for 'textarea' and 'password' types)
  • Potential children <h:inputText> (including behaviors, validators...)
References:

<hx:datalist>

Extends: UIComponent
Attributes:

Name

Required?

Values

Description

items

optional

Comma seperated strings, array or collection of SelectItem's

Suggestion values.

Potential Children:
  • <f:selectItem> and <f:selectItems> and their extensions.
Notes:
  • "datalist" element definition from HTML5 spec: The datalist element represents a set of option elements that represent predefined options for other controls.
References:

Usage of prototypes:

simple usage
expected HTML5 code



using search type and required attribute
expected HTML5 code



using pattern attribute
expected HTML5 code



using suggestions attribute with static text
expected HTML5 code



using suggestions attribute
expected HTML5 code



using <f:selectItem> and <f:selectItems> suggestions
expected HTML5 code



mixing 'suggestions' attribute and <f:selectItem> and <f:selectItems> suggestions
expected HTML5 code



using <hx:datalist> for suggestions
expected HTML5 code



using Ajax suggestions with standard <f:ajax>
expected HTML5 code



using placeholder attribute
expected HTML5 code



more complex usage
expected HTML5 code



usage: textarea
expected HTML5 code



usage: textarea determined by no type attr, but rows attr
expected HTML5 code



usage: password type
expected HTML5 code



usage: <hx:datalist>
expected HTML5 code



usage: <hx:datalist> with static suggestions
expected HTML5 code



<hx:datalist> with different suggestion cases
expected HTML5 code



Labels
  • No labels