JSF provides various tags to render standard HTML tags. In this section, we shall see which JSF tags are available to generate HTML tags and how to use them. To use these tags, we need to use the following namespaces of URI in html node.
<html xmlns:h=”http://java.sun.com/jsf/html”>
…
</html>
<h:outputText>
This tag is used to render a piece of text. Here is an example:
<h:outputText value=”Hello World!”/>
It is rendered in HTML as:
Hello World!
<h:inputText>
Renders an HTML <input> element of type-‘text”. It renders the current value of the component as the value of the “value” attribute. Here is an example:
<h:inputText size=”10” value=”Type your name”/>
It is rendered as:
<input type=”text” name=”j_idt4” value=”Type your name” size=”10” />
<h:inputSecret>
Renders an HTML <input> element of type-‘password”. The characters entered in this element are not echoed. Here is an example:
<h:inputSecret size=”10”/>
It is rendered as:
<input type=”password” name=”j_idt6” value=”” size=”10” />
<h:inputTextarea>
Renders an HTML <textarea> element. The current value of the component is displayed inside the element. Here is an example:
<h:inputTextarea value=”Hello World!” readonly=”true”/>
It is rendered as:
<textarea name=”j_idt8” readonly=”readonly”>Hello World!</textarea>
<h:inputHidden>
Renders an HTML <input> element of type=“hidden”. It renders the current value of the component as the value of the “value” attribute. Here is an example:
<h:inputHidden value=”next”/>
It is rendered as:
<input type=”hidden” name=”j_idt10” value=”next” />
<h:commandButton>
Renders an HTML <input> element of type-‘submit” button. It renders the current value of the component as the value of the “value” attribute. Here is an example:
<h:commandButton value=”Logout” onclick=”alert(‘Are to sure to logout?’);” />
It is rendered as:
<input type=”submit” name=”j_idt12” value=”Logout” onclick=”alert(‘Are to sure to logout?’);” />
<h:commandLink>
Render an HTML <a> anchor element that acts like a form submit button when clicked. Here is an example:
<h:commandLink value=”Help” action=”help” />
It is rendered as:
<a href=”#
”onclick=”mojarra.jsfcljs(document.getElementById (‘j_idt14’),{‘j_idt14:j_idt17’:
‘j_idt14:j_idt17’},”);return false”>Help</a>
<h:outputLink>
Renders an HTML anchor. The value of the component is rendered as the value of the href attribute. Here is an example:
<h:outputLink value=”help.xhtml” >Help</h:outputLink>
It is rendered as:
<a href=”help.xhtml”>Help</a>
<h:selectBooleanCheckbox>
Renders a single HTML check box. Here is an example:
<h:selectBooleanCheckbox value=”Encrypt” id=”encrypt”/>
It is rendered as:
<input id=”encrypt” type=”checkbox” name=”encrypt” />
<h:selectManyCheckbox>
Renders a group of HTML check boxes. Here is an example:
<h:selectManyCheckbox >
<f:selectItem itemValue=”hdd” itemLabel=”HDD” /> <f:selectItem itemValue=”monitor” itemLabel=”Monitor” /> </h:selectManyCheckbox>
It is rendered as:
<table>
<tr>
<td>
<input name=”j_idt24″ id=”j_idt24:0″ value=”hdd” type=”checkbox” /><label
for=”j_idt24:0″ class=””> HDD</label></td>
<td>
<input name=”j_idt24″ id=”j_idt24:1″ value=”monitor” type=”checkbox” /><label
for=”j_idt24:1″ class=””> Monitor</label></td>
</tr>
</table>
<h:selectOneRadio>
Renders a single HTML radio button. Here is an example:
<h:selectOneRadio:<h:selectOneRadio >
<f:selectItem itemValue=”cheque” itemLabel=”Cheque” />
<f:selectItem itemValue=”cash” itemLabel=”Cash” /> </h:selectOneRadio><br/>
It is rendered as:
<table>
<tr>
<td>
<input type=”radio” name=”j_idt28″ id=”j_idt28:0″ value=”cheque” /><label for=”j_idt28:0″> Cheque</label></td>
<td>
<input type=”radio” name=”j_idt28″ id=”j_idt28:1″ value=”cash” /><label for=”j_idt28:1″> Cash</label></td>
</tr>
</table>
<h:selectOneListbox>
Renders a single HTML list box. Here is an example:
<h:selectOneListbox >
<f:selectItem itemValue=”cheque” itemLabel=”Cheque” />
<f:selectItem itemValue=”cash” itemLabel=”Cash” /> </h:selectOneListbox>
It is rendered as:
<select name=”j_idt32” size=”2”> <option value=”cheque”>Cheque</option> <option value=”cash”>Cash</option>
</select>
<h:selectManyListbox>
Renders multiple HTML list boxes. Here is an example:
<h:selectManyListbox >
<f:selectItem itemValue=”hdd” itemLabel=”HDD” />
<f:selectItem itemValue=”monitor” itemLabel=”Monitor” /> </h:selectManyListbox>
It is rendered as:
<select name=”j_idt36” multiple=”multiple” size=”2”> <option value=”hdd”>HDD</option>
<option value=”monitor”>Monitor</option>
</select>
<h:selectOneMenu>
Renders an HTML combo box. Here is an example:
<h:selectOneMenu >
<f:selectItem itemValue=”cheque” itemLabel=”Cheque” />
<f:selectItem itemValue=”cash” itemLabel=”Cash” />
</h:selectOneMenu>
It is rendered as:
<select name=”j_idt40” size=”1”> <option value=”cheque”>Cheque</option> <option value=”cash”>Cash</option>
</select> <h:graphicImage>
Renders an image. Here is an example:
<h:graphicImage value=”back.jpg”/>
It is rendered as:
<img src=”back.jpg” />
<h:outputStylesheet>
Includes a CSS style sheet in HTML output. Here is an example:
<h:head>
<h:outputStylesheet library=”css” name=”myStyles.css”/>
</h:head>
It is rendered as:
<link type=”text/css” rel=”stylesheet”
href=”/jsf/javax.faces.resource/myStyles.css.xhtml?ln=css” />
The <h:outputStylesheet> requires a <h:head>. Also note that myStyles.css file must be put in the directory webapps/resources/css/.
<h:outputScript>
Includes a script in HTML output. Here is an example:
<h:head>
<h:outputScript library=”js” name=”fn.js” />
</h:head>
It is rendered as:
<script type=”text/javascript”
src=”/jsf/javax.faces.resource/fn.js.xhtml?ln=js”></script>
The <h:outputScript> also requires a <h:head>. Also note that fn.js file must be put in the directory webapps/resources/js/.
Source: Uttam Kumar Roy (2015), Advanced Java programming, Oxford University Press.