The Java EE 5 Tutorial

Component Rendering Model

The JavaServer Faces component architecture is designed such that the functionality of the components is defined by the component classes, whereas the component rendering can be defined by a separate renderer. This design has several benefits, including:

A render kit defines how component classes map to component tags that are appropriate for a particular client. The JavaServer Faces implementation includes a standard HTML render kit for rendering to an HTML client.

The render kit defines a set of Renderer classes for each component that it supports. Each Renderer class defines a different way to render the particular component to the output defined by the render kit. For example, a UISelectOne component has three different renderers. One of them renders the component as a set of radio buttons. Another renders the component as a combo box. The third one renders the component as a list box.

Each JSP custom tag defined in the standard HTML render kit is composed of the component functionality (defined in the UIComponent class) and the rendering attributes (defined by the Renderer class). For example, the two tags in Table 10–1 represent a UICommand component rendered in two different ways.

Table 10–1 UICommand Tags

Tag 

Rendered As 

commandButton

Login button.

commandLink

Hyperlink.

The command part of the tags shown in Table 10–1 corresponds to the UICommand class, specifying the functionality, which is to fire an action. The button and hyperlink parts of the tags each correspond to a separate Renderer class, which defines how the component appears on the page.

The JavaServer Faces implementation provides a custom tag library for rendering components in HTML. It supports all the component tags listed in Table 10–2. To learn how to use the tags in an example, see Adding UI Components to a Page Using the HTML Component Tags.

Table 10–2 The UI Component Tags

Tag 

Functions 

Rendered As 

Appearance 

column

Represents a column of data in a UIData component.

A column of data in an HTML table 

A column in a table

commandButton

Submits a form to the application. 

An HTML <input type=type> element, where the type value can be submit, reset, or image

A button

commandLink

Links to another page or location on a page. 

An HTML <a href> element

A hyperlink

dataTable

Represents a data wrapper. 

An HTML <table> element

A table that can be updated dynamically

form

Represents an input form. The inner tags of the form receive the data that will be submitted with the form. 

An HTML <form> element

No appearance 

graphicImage

Displays an image. 

An HTML <img> element

An image 

inputHidden

Allows a page author to include a hidden variable in a page. 

An HTML <input type=hidden> element

No appearance

inputSecret

Allows a user to input a string without the actual string appearing in the field. 

An HTML <input type=password> element

A text field, which displays a row of characters instead of the actual string entered

inputText

Allows a user to input a string. 

An HTML <input type=text> element

A text field

inputTextarea

Allows a user to enter a multiline string. 

An HTML <textarea> element

A multi-row text field

message

Displays a localized message. 

An HTML <span> tag if styles are used

A text string 

messages

Displays localized messages. 

A set of HTML <span> tags if styles are used

A text string 

outputFormat

Displays a localized message. 

Plain text 

Plain text 

outputLabel

Displays a nested component as a label for a specified input field. 

An HTML <label> element

Plain text

outputLink

Links to another page or location on a page without generating an action event. 

An HTML <a> element

A hyperlink 

outputText

Displays a line of text. 

Plain text 

Plain text

panelGrid

Displays a table. 

An HTML <table> element with <tr> and <td> elements

A table

panelGroup

Groups a set of components under one parent. 

 

A row in a table 

selectBooleanCheckbox

Allows a user to change the value of a Boolean choice. 

An HTML <input type=checkbox> element.

A check box

selectItem

Represents one item in a list of items in a UISelectOne component.

An HTML <option> element

No appearance 

selectItems

Represents a list of items in a UISelectOne component.

A list of HTML <option> elements

No appearance 

selectManyCheckbox

Displays a set of check boxes from which the user can select multiple values. 

A set of HTML <input> elements of type checkbox

A set of check boxes

selectManyListbox

Allows a user to select multiple items from a set of items, all displayed at once. 

An HTML <select> element

A list box

selectManyMenu

Allows a user to select multiple items from a set of items. 

An HTML <select> element

A scrollable combo box

selectOneListbox

Allows a user to select one item from a set of items, all displayed at once. 

An HTML <select> element

A list box

selectOneMenu

Allows a user to select one item from a set of items. 

An HTML <select> element

A scrollable combo box

selectOneRadio

Allows a user to select one item from a set of items. 

An HTML <input type=radio> element

A set of radio buttons