Ever since the first version of the JSF specification, many changes have been made . One of the most vastly used specifications is JSF specification version 1.2. The specification deals with various standard tags. In this section we will see the tag and their functionalities. Whereever applicable, sample code/code snippet will be provided. Also included in this section are UI tag components from the HTML render kit. Knowing the various tags and components available ensures a better and richer user interface development. Apart from the core and html tags, it is a good idea to understand other JSF UI tag libraries like Trinidad, Tomhawk, Ice Faces, etc. These tag libraries provide additional components that may address specific UI needs of a particular project. Before a particular tag library is chosen for a project, it is often a good practice to know the limitations and benefits of each of the tag libraries.

The f tag library holds the core Java Server Faces custom actions that are independent of any render kit.

The h tag library holds Java Server Faces component tags for all user interface components and HTML RenderKit renderer combinations defined in the JSF1.2 specification.

Listing 1: f:view

The f:view tag acts as the container for all components (core and custom) used in a specific JSF page. The f:view tag can also be used for setting the locale of the page. The locale attribute can take a string that represents a locale or an EL that evaluates to represent the locale.

<f:view locale=”en”> The above uses a normal string value <f:view locale = “#{beanname.locale}>

This uses the bean property locale that evaluates to the current locale. Setting the locale is useful for internationalizing an application.

This tag creates and registers a UIOutput component associated with the nearest parent UIComponent custom action, which displays nested body content. This tag is useful when creating a well-structured XML based jspx page but need to include html or free text in-between. In a well-structured JSPX page, if html/free text are included outside the verbatim tag, it will result in errors.

Listing 2: f:verbatim

<%@ tagliburi=<http://java.sun.com/jsf/html>prefix="h"%> <%@ tagliburi="http://java.sun.com/jsf/core" prefix="f"%> <f:view> <html> <body> <h:form> <f:verbatim> <p><h3>This is the testing of verbatim tag of jsf.</p></h3> </f:verbatim> </h:form> </body> </html> </f:view>

The above code includes html and free text that is contained within the f:verbatim tag, making it still a well-formed xml document.

h:commandLink

The h:commandLink tag renders an HTML anchor “a” tag. There are few key attributes to this tag. This is a list of just the most commonly used attributes. For a complete listing, refer to the java doc of the tag library.

The first one is action attribute which allows for configuring the application action to be invoked on click of the link. The expression in the action attribute must evaluate to a public method that takes no parameters and returns an Object.

The second one is the actionListener attribute which allows for configuring the action listener method that will be notified when the user invokes the component. The expression for the attribute must evaluate to a public method that takes an ActionEvent parameter and returns void.

The rendered attribute allows hiding or showing the component based on whether the EL expression evaluates to true or false. When true, the component is rendered. When false, the component is not rendered.

Onclick attribute is similar to the onclick attribute on the HTML anchor tag, in that it allows calling a javascript function.

h:commandButton

This tag renders an HTML input element of type button. This tag also has attributes similar to that of the h:commandLink, including but not limited to action, actionListener, rendered, and onClick.

This tag can be used when the user should select only one input from a list of available items. This tag actually renders an html select element that allows the user to select just one input. The choices to be displayed are rendered by the f:selectItem or f:selectItems tags. selectOneListBox by default lists all the options available but setting the attribute size to a number less than the number of options available, restricts the size of the select component.

Here is a sample use of h:selectOneListBox

Listing 3: h:selectOneListBox

<%@ tagliburi="http://java.sun.com/jsf/html" prefix="h"%> <%@ tagliburi="http://java.sun.com/jsf/core" prefix="f"%> <f:view> <html> <body> <h:form> <h:selectOneListbox id="sol" value="mybean.selection" size="3" title="select one option"> <f:selectItem id="si1" itemLabel="Apple" itemValue="11" /> <f:selectItem id="si2" itemLabel="Banana" itemValue="22" /> <f:selectItem id="si3" itemLabel="Orange" itemValue="33" /> <f:selectItem id="si4" itemLabel="Strawberry" itemValue="44" /> <f:selectItem id="si5" itemLabel="Mango" itemValue="55" /> <f:selectItem id="si6" itemLabel="Pineapple" itemValue="66" /> </h:selectOneListbox> </h:form> </body> </html> </f:view>

The above sample has 6 options but since the size is mentioned as 3, only 3 options will be displayed. The selected value (example 33 on choosing Orange) will be stored in the managed bean’s “selection” property. If this request is a postback, then the value attribute will be used to set the current state of the component.

This tag is similar to the selectOneListBox but it allows the selection of more than one value from the list of available options. This tag renders an HTML select element with multiple attribute set.

Listing 4: h:selectManyListBox

<%@ tagliburi="http://java.sun.com/jsf/html" prefix="h"%> <%@ tagliburi="http://java.sun.com/jsf/core" prefix="f"%> <f:view> <html> <body> <h:form> <h:selectManyListbox id="sol" value="mybean.selection" size="5" title="select one or more options"> <f:selectItem id="si1" itemLabel="Apple" itemValue="11" /> <f:selectItem id="si2" itemLabel="Banana" itemValue="22" /> <f:selectItem id="si3" itemLabel="Orange" itemValue="33" /> <f:selectItem id="si4" itemLabel="Strawberry" itemValue="44" /> <f:selectItem id="si5" itemLabel="Mango" itemValue="55" /> <f:selectItem id="si6" itemLabel="Pineapple" itemValue="66" /> </h:selectManyListbox> </h:form> </body> </html> </f:view>

This tag helps in gridding/ arranging the components on a page. This component actually renders an HTML table with specified set of columns. The components contained within the panelGrid (child components) are enclosed with the cells of a table. By default, the number of columns is 1. However, the number of columns can be specified explicitly to control the layout. For example if there 4 elements and the column number is specified as 3, then, automatically, the first 3 components are arranged in the first row and the 4th component is arranged in the first cell of the 2nd row. The 2nd and 3rd cells of the second row are left blank.

Listing 5: h:panelGrid

<%@ tagliburi="http://java.sun.com/jsf/html" prefix="h"%> <%@ tagliburi="http://java.sun.com/jsf/core" prefix="f"%> <f:view> <html> <body> <h:form> <h:panelGrid columns="3" border="1" rules="all" title="Panel Grid Sample"> <f:facet name="header"> <h:outputText value="One"/> </f:facet> <h:outputText value= ”Two”/> <h:outputText value= ”Three”/> <h:outputText value= ”Four”/> <h:outputText value= ”Five”/> <h:outputText value= ”Six”/> <h:outputText value= ”Seven”/> <h:outputText value= ”Eight”/> <h:outputText value= ”Nine”/> </h:panelGrid> </h:form> </body> </html> </f:view>

The above code displays a 3x3 grid with the words One, Two… Nine. The Grid will have grid lines at both columns and rows. The nature of the grid lines are defined by the rules attribute. It can take one of the five values

none - no grid lines (This is the default value.)

groups - between row groups

rows - between rows only

cols - between columns only

all - between rows and columns

This tutorial has covered few of the important tags commonly used in building a successful JSF page. These tags should enable getting started with the creation of a simple JSF application. However, for complex application creation, exploring other available tags will be useful. There are complex components like calendar, table, radios, and more - some available within core and html and many available in extended tag libraries like Trinidad, Tobago, Tomhawk, IceFaces and the like. Choose the tag library that best suits the project’s UI needs.

This is all for today’s article. Hope you liked it.