An Overview of the JSF HTML Tags

Development of compelling JSF applications requires a good grasp of the JSF tag libraries—core and HTML—that represent a combined total of 45 tags. Because of the prominence of those tags in the JSF framework, this chapter and Chapter 5, "Data Tables," provide in-depth coverage of tags, their attributes, 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:

<%@ 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.

This chapter starts with a brief look at the core library. That library, with 18 tags, is smaller than its HTML sibling, which has 25. It is also considerably simpler than the HTML library. Because of that simplicity and because most of the core tags are discussed elsewhere in this book, the majority of this chapter focuses on the HTML library.

We then move to the HTML library with a look at common attributes shared by most JSF HTML tags. Finally, we discuss each tag individually with attribute tables for reference and useful code examples that you can adapt to your own applications.

Note

The core library has an average of 3.5 attributes per tag; the HTML library has 28.9.

An Overview of the JSF Core Tags

The core library contains the tags that are independent of the rendering technology. The core tags are listed in Table 4-1.

Table 4-1. JSF Core Tags

Most of the core tags represent objects you add to components :

• Attributes

• Listeners

• Converters

• Validators

• Facets

• Parameters

• Select items

The core library also contains tags for defining views and subviews, loading resource bundles, and adding arbitrary text to a page.

All of the core tags are discussed at length elsewhere in this book, as shown in Table 4-1.

We briefly describe the f:attribute , f:param , and f:facet tags here. Any component can store artibrary name/value pairs in its attribute map . You can set an attribute in a page and later retrieve it programatically. For example, in "Supplying Attributes to Converters" on page 260 of Chapter 6, we set the separator character for credit card digit groups like this:

<h:outputText value = "#{payment.card}">
      <f:attribute name = "separator" vlude = "-" />
   </h:outputText>

The converter that formats the output retrieves the attribute from the component.

The f:param tag also lets you define a name/value pair, but the value is placed in a separate child component, a much bulkier storage mechanism. However, the child components form a list, not a map. You use f:param if you need to supply a number of values with the same name (or no name at all). You saw an example in "Messages with Variable Parts" on page 44 of Chapter 2, where the h:outputFormat component contains a list of f:param children.

Note

the h:commandlink component turns its f:param children into HTTP request name/value pairs. The event listener that is activated when the user clicks the link can then retrieve the name/value pairs from the request map. We demonstrate this technique in Chapter 7.

Finally, f:facet adds a named component to a component's facet map . A facet is not a child component; each component has both a list of child components and a map of named facet components. The facet components are usually rendered in a special place. You will see in "Headers, Footers, and Captions" on page 178 of Chapter 5 how to use facets named "header" and "footer" in data tables.

Table 4-2 shows the attributes for the f:attribute , f:param , and f:facet tags.

Table 4-2. Attributes for f:attribute , f:param , and f:facet

Note

All tag attributes, except for var and id , accept value or method expressions. The var attribute must be a string. The id attribute can be a string or an immediate ${...} expression.