An Overview of the JSF HTML Tags

Chapter 4. Standard JSF Tags

Topics in This Chapter

• "An Overview of the JSF Core Tags" on page 92

• "An Overview of the JSF HTML Tags" on page 94

• "Forms" on page 103

• "Text Fields and Text Areas" on page 108

• "Buttons and Links" on page 119

• "Selection Tags" on page 130

• "Messages" on page 157

• "Panels" on page 163

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

Tag	Description	See Chapter
view	Creates the top-level view	1
subview	Creates a subview of a view	8
attribute	Sets an attribute (key/value) in its parent component	4
param	Adds a parameter child component to its parent component	4
facet	Adds a facet to a component	4
actionListener	Adds an action listener to a component	7
setPropertyActionListener (JSF 1.2)	Adds an action listener that sets a property	7
valueChangeListener	Adds a value change listener to a component	7
phaseListener (JSF 1.2)	Adds a phase listener to the parent view	7
converter	Adds an arbitrary converter to a component	6
convertDateTime	Adds a datetime converter to a component	6
convertNumber	Adds a number converter to a component	6
validator	Adds a validator to a component	6
validateDoubleRange	Validates a double range for a component's value	6
validateLength	Validates the length of a component's value	6
validateLongRange	Validates a long range for a component's value	6
loadBundle	Loads a resource bundle, stores properties as a Map	2
selectitems	Specifies items for a select one or select many component	4
selectitem	Specifies an item for a select one or select many component	4
verbatim	Turns text containing markup into a component	4

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

Attribute	Description
name	The attribute, parameter component, or facet name
value	The attribute or parameter component value (does not apply to f:facet)
binding, id	See Table 4-4 on page 97 (f:param only)

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.