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:

Code Block

lang	xml
title	simple usage

<hx:inputText value="#{someBean.someField}" type="text"/>

Code Block

lang	xml
title	expected HTML5 code

<input type="text" value="DefaultInput" />

Code Block

lang	xml
title	using search type and required attribute

<hx:inputText value="#{someBean.someField}" type="search" required="true"/>

Code Block

lang	xml
title	expected HTML5 code

<input type="search" value="DefaultInput" required="true"/>

Code Block

lang	xml
title	using pattern attribute

<hx:inputText value="#{someBean.someField}" type="text" pattern="[0-9][A-Z]{3}" title="A part number is a digit followed by three uppercase letters."/>

Code Block

lang	xml
title	expected HTML5 code

	<input type="text" value="DefaultInput" pattern="[0-9][A-Z]{3}" title="A part number is a digit followed by three uppercase letters."/>
	<!-- Not typing the input can result a browser alert:
	     A part number is a digit followed by three uppercase letters.
	     You cannot complete this form until the field is correct.
	-->

Code Block

lang	xml
title	using suggestions attribute with static text

<hx:inputText type="text" value="#{someBean.tool}" suggestions="Hammer,Screwdriver"/>

Code Block

lang	xml
title	expected HTML5 code

<input type="text" value="" list="idOfDataList"/>
<datalist id="idOfDataList">
	<option value="Hammer" label="Hammer" />
	<option value="Screwdriver" label="Screwdriver" />
</datalist>

Code Block

lang	xml
title	using suggestions attribute

<hx:inputText type="search" value="#{someBean.city}" suggestions="#{someBean.citySuggestions}"/>

Code Block

lang	xml
title	expected HTML5 code

<input type="search" value="1" list="idOfDataList"/>
<datalist id="idOfDataList">
	<option value="0" label="Istanbul" />
	<option value="1" label="New York" />
	<option value="2" label="Berlin" />
</datalist>

Code Block

lang	xml
title	using <f:selectItem> and <f:selectItems> suggestions

<hx:inputText type="search" value="#{someBean.city}">
	<f:selectItem ..../>
	<f:selectItem ..../>
	<f:selectItem ..../>
	<f:selectItems ......./>
	<s:selectItems ......./>		<!-- see: http://jsf-comp.sourceforge.net/components/easysi/index.html -->
</hx:inputText>

Code Block

lang	xml
title	expected HTML5 code

<input type="search" value="1" list="idOfGeneratedDataList"/>
<datalist id="idOfGeneratedDataList">
	<option value="0" label="Istanbul" />
	<option value="1" label="New York" />
	<option value="2" label="Berlin" />
	<option .../>
	<option .../>
</datalist>

Code Block

lang	xml
title	mixing 'suggestions' attribute and <f:selectItem> and <f:selectItems> suggestions

<hx:inputText type="search" value="#{someBean.city}" suggestions="#{someBean.citySuggestions}">
	<f:selectItem ..../>
	<f:selectItem ..../>
	<f:selectItem ..../>
	<f:selectItems ......./>
</hx:inputText>

Code Block

lang	xml
title	expected HTML5 code

<input type="search" value="1" list="idOfGeneratedDataList"/>
<datalist id="idOfGeneratedDataList">
	<option value="0" label="SuggestionAttributeSuggestion1" />
	<option value="1" label="SuggestionAttributeSuggestion2" />
	<option value="2" label="F_SelectItemSuggestion1" />
	<option .../>
	<option .../>
</datalist>

Code Block

lang	xml
title	using <hx:datalist> for suggestions

<!--  this example demonstrates shared suggestion list for two input fields. -->
<hx:inputText id="sourceCityInput" type="text" value="#{transportation.sourceCity}" datalist="sharedSuggestionDatalist"/>
<hx:inputText id="destCityInput"   type="text" value="#{transportation.destCity}"   datalist="sharedSuggestionDatalist"/>

<hx:datalist id="sharedSuggestionDatalist" items="#{someBean.citySuggestions}">
	<f:selectItem ..../>
	<f:selectItem ..../>
	<f:selectItem ..../>
	<f:selectItems ......./>
</hx:datalist>

Code Block

lang	xml
title	expected HTML5 code

<input id="sourceCityInput" type="text" value="0" list="sharedSuggestionDatalist"/>
<input id="destCityInput"   type="text" value="0" list="sharedSuggestionDatalist"/>
<datalist id="sharedSuggestionDatalist">
	<option value="0" label="SuggestionAttributeSuggestion1" />
	<option value="1" label="SuggestionAttributeSuggestion2" />
	<option value="2" label="F_SelectItemSuggestion1" />
	<option .../>
	<option .../>
</datalist>

Code Block

lang	xml
title	using Ajax suggestions with standard <f:ajax>

<hx:inputText id="sourceCityInput" type="text" value="#{transportation.sourceCity}" datalist="sharedSuggestionDatalist">
	<f:ajax event="keypress" execute="@this" render="suggestionDatalist"/>
</hx:inputText>
<hx:datalist id="suggestionDatalist" items="#{someBean.citySuggestions}"> <!-- Ajax-Dynamic part will be  #{someBean.citySuggestions} -->
	<f:selectItem ..../>		<!-- These will be sent on response to ajax request anyway. -->
	<f:selectItem ..../>
	<f:selectItem ..../>
	<f:selectItems ......./>
</hx:datalist>

Code Block

lang	xml
title	expected HTML5 code

<input type="search" value="1" list="idOfGeneratedDataList" onkeypress="jsf.ajax.request(....)"/>
<datalist id="suggestionDatalist">
	<option value="0" label="SuggestionAttributeSuggestion1" />
	<option value="1" label="SuggestionAttributeSuggestion2" />
	<option value="2" label="F_SelectItemSuggestion1" />
	<option .../>
	<option .../>
</datalist>

Code Block

lang	xml
title	using placeholder attribute

<hx:inputText type="search" value="#{someBean.city}" placeHolder="Type a city name"/>

Code Block

lang	xml
title	expected HTML5 code

<input type="search" value="1" placeholder="Type a city name"/>
<!-- browser is expected to show 'Type a city name' when the input is empty. -->

Code Block

lang	xml
title	more complex usage

<hx:inputText type="text" value="#{someBean.city}" suggestions="#{someBean.citySuggestions}"
	placeHolder="#{messages['typeCity']}" autofocus="true" pattern="#{someBean.CityNamePattern}" required="true">
	<f:selectItem ..../>
	<f:selectItem ..../>
	<f:selectItem ..../>
	<f:selectItems ......./>
</hx:inputText>

Code Block

lang	xml
title	expected HTML5 code

<input type="text" value="DefaultValue" list="idOfGeneratedDataList"
	  placeholder="Type a city name" autofocus pattern="[A-Za-z ]{3}" required />
<datalist id="idOfGeneratedDataList">
	<option value="0" label="Istanbul" />
	<option value="1" label="New York" />
	<option value="2" label="Berlin" />
	<option .../>
	<option .../>
</datalist>

Code Block

lang	xml
title	usage: textarea

<hx:inputText type="textarea" value="#{someBean.description}"
	placeHolder="#{messages['typeDescription']}" autofocus="true" required="true" rows="3" cols="30" />

Code Block

lang	xml
title	expected HTML5 code

<textarea placeholder="Type the description" autofocus="true" required="true" rows="3" cols="30" >
	DefaultValue
</textarea>

Code Block

lang	xml
title	usage: textarea determined by no type attr, but rows attr

<hx:inputText value="#{someBean.description}" rows="3" />

Code Block

lang	xml
title	expected HTML5 code

<textarea rows="3">
</textarea>

Code Block

lang	xml
title	usage: password type

<hx:inputText type="password" value="#{someBean.password}" pattern="#{someBean.6DigitsAndOneUpperCaseAtTheEnd}" required="true" />

Code Block

lang	xml
title	expected HTML5 code

<input type="password" value="DefaultValue" pattern="[0-9]{6}[A-Za-z]" required="true" />

Code Block

lang	xml
title	usage: <hx:datalist>

<hx:datalist items="#{someBean.suggestions}" />	<!-- someBean.suggestions is a List<SelectItem> -->

Code Block

lang	xml
title	expected HTML5 code

<datalist id="idOfDataList">
	<option value="Istanbul" label="Istanbul-Turkey" />
	<option value="Berlin" label="Berlin-Germany" />
	<option value="NY" label="New York-USA" />
</datalist>

Code Block

lang	xml
title	usage: <hx:datalist> with static suggestions

<hx:datalist items="Hammer, Screwdriver" />

Code Block

lang	xml
title	expected HTML5 code

<datalist id="idOfDataList">
	<option value="Hammer" label="Hammer" />
	<option value="Screwdriver" label="Screwdriver" />
</datalist>

Code Block

lang	xml
title	<hx:datalist> with different suggestion cases

<hx:datalist items="#{someBean.suggestions}" >	<!-- someBean.suggestions is a List<SelectItem> -->
	<f:selectItem .../>
	<f:selectItems .../>
	<s:selectItems value="#{EasysiDemo.players}" var="Player" itemLabel="#{Player.name}" itemValue="#{Player.no}"/>
</hx:datalist>
<!-- see http://jsf-comp.sourceforge.net/components/easysi/index.html for <s:selectItems> -->

Code Block

lang	xml
title	expected HTML5 code

<datalist id="idOfDataList">
	<option ... />
	<option ... />
	<option ... />
	<option ... />
</datalist>

Overview

Community

Development

Sponsorship

Child pages

Versions Compared

Old Version 4

New Version Current

Key

<hx:inputText>

Extends: h:inputText or some middle-component that other input components extend

Attributes not present in ancestor:

Potential Children:

References:

<hx:datalist>

Extends: UIComponent

Attributes:

Potential Children:

Notes:

References:

Usage of prototypes:

Overview

Community

Development

Sponsorship

Child pages

Page History

Versions Compared

Old Version 4

New Version Current

Key

<hx:inputText>

Extends: h:inputText or some middle-component that other input components extend

Attributes not present in ancestor:

Potential Children:

References:

<hx:datalist>

Extends: UIComponent

Attributes:

Potential Children:

Notes:

References:

Usage of prototypes: