Introduction to Java Server Faces(JSF) HTML Tags

1) Introduction

Development of compelling JSF applications requires a good grasp of the JSF tag libraries-core and HTML-that represent a combined total of 43 tags. Because of their prominence in the JSF framework, here you have been provided in-depth coverage of some of those HTML tags, and how you can best use them. Even simple JSF pages use tags from both libraries. Many JSF pages have a structure similar to this:

also read:

• Introduction to JSF
• JSF Interview Questions
• Request Processing Lifecycle phases in JSF

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<f:view>
<h:form>
...
</h:form>
</f:view>

To use the JSF tag libraries, you must import them with Taglib directives, as in the preceding code fragment. You can choose any name you want for the prefixes. The convention is f and h, for the core and HTML libraries, respectively.
Standard Syntax:

<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>

XML Syntax:

<anyxmlelement xmlns:h="http://java.sun.com/jsf/html" />

2)An Overview of the JSF HTML Tags

We can group the HTML tags in the following categories:

• Inputs
• Outputs
• Commands
• Selections
• Layouts
• Data Table
• Errors and messages

3) List of HTML Tags

column, commandButton, commandLink, dataTable, form, graphicImage, inputHidden, inputSecret, inputText, inputTextarea, message, messages, outputFormat, outputLabel, outputLink, outputText, panelGrid, panelGroup, selectBooleanCheckbox, selectManyCheckbox, selectManyListbox, selectManyMenu, selectOneListbox, selectOneMenu, selectOneRadio.
Here I am presenting some of the HTML Tags.

4) data Tag

The dataTable tag renders an HTML 4.01 compliant table element that can be associated with a backing bean to obtain its data as well as for event handling purposes.

The table can be customized extensively using cascading stylesheet (CSS) classes and definitions to enhance the appearance of the table’s headers, footers, columns and rows. Common formatting techniques, such as alternating row colors, can be accomplished quite easily with this tag.
The dataTable tag typically contains one or more column tags that define the columns of the table. A column component is rendered as a single td element.

A dataTable tag can also contain header and footer facets. These are rendered as a single th element in a row at the top of the table and as a single td element in a row at the bottom of the table, respectively.
Example:

<h:dataTable id="table1"value="#{shoppingCartBean.items}" var="item">
<f:facet name="header">
<h:outputText value="Your Shopping Cart" />
</f:facet>
<h:column>
<f:facet name="header">
<h:outputText value="Item Description" />
</f:facet>
<h:outputText value="#{item.description}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Price" />
</f:facet>
<h:outputText value="#{item.price}"/>
</h:column>
<f:facet name="footer">
<h:outputText value="Total: #{shoppingCartBean.total}" />
</f:facet>
</h:dataTable>

HTML Output:

<table id="table1">
<thead>
<tr><th scope="colgroup"colspan="2">Your Shopping Cart</th></tr>
<tr><th>Item Description</th><th>Price</th></tr>
</thead>
<tbody>
<tr><td>Delicious Apple</td><td>$5.00</td></tr>
<tr><td>Juicy Orange</td><td>$5.00</td></tr>
<tr><td>Tasty Melon</td><td>$5.00</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2">Total: $15.00</td></tr>
</tfoot>
</table> 

5) form Tag

The form tag renders an HTML form element. JSF forms use the post-back technique to submit form data back to the page that contains the form. The use of the POST method is also required and it is not possible to use the GET method for forms generated by this tag.

If your application requires the use of the GET method for form submission, your options include using plain HTML forms, binding request parameters to backing bean properties, and using the outputLink tag to generate dynamic hyperlinks.
Example:

<h:form id="form1">
</h:form>

HTML Output:

<form id="form1" name="form1" method="post" action="/demo/form.jsp"
enctype="application/x-www-form-urlencoded">
</form>

6) message Tag

The message tag renders a message for a specific component. You can customize the message generated by this component by applying different CSS styles to the message depending on its severity (eg. red for error, green for information) as well as the detail level of the message itself. You can also customize the standard error messages by overriding specific JSF properties in your message bundle.
Example:

<h:inputText id="username" required="#{true}"
value="#{userBean.user.username}"
errorStyle="color:red"/>
<h:message for="username" />

HTML Output:

<input type="text" id="form:username"name="form:username" value=""/>
<span style="color:red">"username": Value is required.</span>

1. <h:panelGrid>
2. <h:selectBooleanCheckbox>
3. <h:outputFormat>
4. <h:inputText&gt
5. <h:commandButton>

7) panelGrid Tag

The panelGrid tag renders an HTML 4.01 compliant table element. The panelGrid component can be used as a layout manager for a grid-based user interface. It simplifies the task of constructing a layout table to hold form fields, labels, and buttons.
The panelGrid component, like the dataTable component, can be customized extensively using Cascading Style Sheets (CSS). For more information on customizing the appearance of JSF tables using CSS styles, please see the dataTable tag documentation. The panelGrid does not use an underlying data model to provide rows of data for rendering purposes. Rather, this component is a layout container that renders other JSF components in a grid of rows and columns.

By default, a panelGrid component has only one column. You can specify how many columns are used to display the components, and the panelGrid component determines how many rows are needed at rendering time. For example, if you set the number of columns for your panelGrid to 2 and you include 4 component s inside it, the rendered table will have two rows with two columns (“td” cells) in each row.

The layout algorithm for the child components of a panelGrid is as follows. The components are laid out one at a time, from left to right and from top to bottom, starting with the first component and ending with the last component in the order in which the appear inside the panelGrid tag.

The panelGrid renders one component per column and keeps track of how many columns it has rendered. When the number of columns rendered for a particular row is the same as the value of the columns attribute, it starts a new row and continues in this manner until there are no more components to render.

If you want to combine several components into a single column, you can use a panelGroup component. The panelGroup component renders its children but still counts as one component. This is useful for cases where a component only allows one child component, such as the facet tag and the column layout algorithm described above.

You can also define header and a footer facets for the panelGrid. These are rendered as a single th element in a row at the top of the table and as a single td element in a row at the bottom of the table, respectively.
Example:

<h:panelGrid id="panel" columns="2" border="1">
<f:facet name="header">
<h:outputText value="#{bundle.signInMessage}"/>
</f:facet>
<h:outputLabel for="username" value="#{bundle.usernameLabel}" />
<h:inputText id="username" value="#{userBean.user.username}" />
<h:outputLabel for="password"value="#{bundle.passwordLabel}" />
<h:inputText id="password"value="#{userBean.user.password}" />
<f:facet name="footer">
<h:panelGroup style="display:block; text-align:center">
<h:commandButton id="submit" value="#{bundle.submitLabel}" />
</h:panelGroup>
</f:facet>
</h:panelGrid>

HTML Output:

<table id="form:panel" border="1">
<thead>
<tr>
<th scope="colgroup" colspan="2">Please sign in</th>
</tr>
</thead>
<tbody>
<tr>
<td><label for="form:username">Username</label></td>
<td><input id="form:username" name="form:username"
type="text" value=""/></td>
</tr>
<tr>
<td><label for="form:password">Password</label></td>
<td><input id="form:password" name="form:password"
type="text" value=""/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<span style="display:block; text-align:center">
<input id="form:submit" name="form:submit" type="submit"
value="Submit" onclick="clear_form();"/>
</span>
</td>
</tr>
</tfoot>
</table>

8) selectBooleanCheckbox Tag

The selectBooleanCheckbox tag renders an HTML input element of the type checkbox. This component is designed for situations where you want to display an option to the user that can be enabled or disabled, such as a remember me checkbox on a login form
Example:

<h:selectBooleanCheckbox id="remember"
value="#{userBean.user.remember}" />

HTML Output:

<input type="checkbox" id="form:remember" name="form:remember"
value="true" />

9)outputFormat Tag

The outputFormat tag renders parameterized text and allows you to customize the appearance of this text using CSS styles. Parameterized text is compound text containing placeholder values to be replaced by actual values at rendering time.
Example:

<h:outputFormat value="Welcome, {0}. You have {1} new messages.">
<f:param value="#{userBean.user.firstName}" />
<f:param value="#{userBean.user.messageCount}" />
</h:outputFormat>

HTML Output:

Welcome, John. You have 12 new messages.

10) inputText Tag

The inputText tag renders an HTML input element of the type text.
Example:

<h:inputText id="username" value="#{userBean.user.username}" />

HTML Output:

<input id="form:username" name="form:username" type="text" />

11) commandButton Tag

The commandButton tag renders an HTML submit button that can be associated with a backing bean or ActionListener class for event handling purposes. The display value of the button can also be obtained from a message bundle to support internationalization
Example:

<h:commandButton id="button1" value="#{bundle.checkoutLabel}"
action="#{shoppingCartBean.checkout}" />

HTML Output:

<input id="form:button1" name="form:button1" type="submit"
value="Check Out" onclick="someEvent();" />

12) Summary

Tags plays an important role in working with JSF Framework. Here i presented only some of the Tags with description and an Example for each. If you want more info about these tags and the remaining tags Please go through the link shown below.