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 .
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.
Name |
Required? |
Values |
Description |
---|---|---|---|
text |
optional |
one of |
Type of the input. |
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. |
Name |
Required? |
Values |
Description |
---|---|---|---|
items |
optional |
Comma seperated strings, array or collection of SelectItem's |
Suggestion values. |
<hx:inputText value="#{someBean.someField}" type="text"/>
<input type="text" value="DefaultInput" />
<hx:inputText value="#{someBean.someField}" type="search" required="true"/>
<input type="search" value="DefaultInput" required="true"/>
<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."/>
<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. -->
<hx:inputText type="text" value="#{someBean.tool}" suggestions="Hammer,Screwdriver"/>
<input type="text" value="" list="idOfDataList"/> <datalist id="idOfDataList"> <option value="Hammer" label="Hammer" /> <option value="Screwdriver" label="Screwdriver" /> </datalist>
<hx:inputText type="search" value="#{someBean.city}" suggestions="#{someBean.citySuggestions}"/>
<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>
<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>
<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>
<hx:inputText type="search" value="#{someBean.city}" suggestions="#{someBean.citySuggestions}"> <f:selectItem ..../> <f:selectItem ..../> <f:selectItem ..../> <f:selectItems ......./> </hx:inputText>
<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>
<!-- 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>
<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>
<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>
<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>
<hx:inputText type="search" value="#{someBean.city}" placeHolder="Type a city name"/>
<input type="search" value="1" placeholder="Type a city name"/> <!-- browser is expected to show 'Type a city name' when the input is empty. -->
<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>
<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>
<hx:inputText type="textarea" value="#{someBean.description}" placeHolder="#{messages['typeDescription']}" autofocus="true" required="true" rows="3" cols="30" />
<textarea placeholder="Type the description" autofocus="true" required="true" rows="3" cols="30" > DefaultValue </textarea>
<hx:inputText value="#{someBean.description}" rows="3" />
<textarea rows="3"> </textarea>
<hx:inputText type="password" value="#{someBean.password}" pattern="#{someBean.6DigitsAndOneUpperCaseAtTheEnd}" required="true" />
<input type="password" value="DefaultValue" pattern="[0-9]{6}[A-Za-z]" required="true" />
<hx:datalist items="#{someBean.suggestions}" /> <!-- someBean.suggestions is a List<SelectItem> -->
<datalist id="idOfDataList"> <option value="Istanbul" label="Istanbul-Turkey" /> <option value="Berlin" label="Berlin-Germany" /> <option value="NY" label="New York-USA" /> </datalist>
<hx:datalist items="Hammer, Screwdriver" />
<datalist id="idOfDataList"> <option value="Hammer" label="Hammer" /> <option value="Screwdriver" label="Screwdriver" /> </datalist>
<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> -->
<datalist id="idOfDataList"> <option ... /> <option ... /> <option ... /> <option ... /> </datalist>