The Java EE 5 Tutorial

User Interface Component Model

JavaServer Faces UI components are configurable, reusable elements that compose the user interfaces of JavaServer Faces applications. A component can be simple, such as a button, or compound, such as a table, which can be composed of multiple components.

JavaServer Faces technology provides a rich, flexible component architecture that includes the following:

This section briefly describes each of these pieces of the component architecture.

User Interface Component Classes





These behavioral interfaces are as follows:




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:


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


Rendered As 


Login button.



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



Rendered As 



Represents a column of data in a UIData component.

A column of data in an HTML table 

A column in a table


Submits a form to the application. 

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

A button


Links to another page or location on a page. 

An HTML <a href> element

A hyperlink


Represents a data wrapper. 

An HTML <table> element

A table that can be updated dynamically


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 


Displays an image. 

An HTML <img> element

An image 


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

An HTML <input type=hidden> element

No appearance


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


Allows a user to input a string. 

An HTML <input type=text> element

A text field


Allows a user to enter a multiline string. 

An HTML <textarea> element

A multi-row text field


Displays a localized message. 

An HTML <span> tag if styles are used

A text string 


Displays localized messages. 

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

A text string 


Displays a localized message. 

Plain text 

Plain text 


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

An HTML <label> element

Plain text


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

An HTML <a> element

A hyperlink 


Displays a line of text. 

Plain text 

Plain text


Displays a table. 

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

A table


Groups a set of components under one parent. 


A row in a table 


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

An HTML <input type=checkbox> element.

A check box


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

An HTML <option> element

No appearance 


Represents a list of items in a UISelectOne component.

A list of HTML <option> elements

No appearance 


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


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

An HTML <select> element

A list box


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

An HTML <select> element

A scrollable combo box


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

An HTML <select> element

A list box


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

An HTML <select> element

A scrollable combo box



An HTML <input type=radio> element

A set of radio buttons

Conversion Model

A JavaServer Faces application can optionally associate a component with server-side object data. This object is a JavaBeans component, such as a backing bean. An application gets and sets the object data for a component by calling the appropriate object properties for that component.

When a component is bound to an object, the application has two views of the component’s data:

The JavaServer Faces implementation automatically converts component data between these two views when the bean property associated with the component is of one of the types supported by the component’s data. For example, if a UISelectBoolean component is associated with a bean property of type java.lang.Boolean, the JavaServer Faces implementation will automatically convert the component’s data from String to Boolean. In addition, some component data must be bound to properties of a particular type. For example, a UISelectBoolean component must be bound to a property of type boolean or java.lang.Boolean.

Sometimes you might want to convert a component’s data to a type other than a standard type, or you might want to convert the format of the data. To facilitate this, JavaServer Faces technology allows you to register a Converter implementation on UIOutput components and components whose classes subclass UIOutput. If you register the Converter implementation on a component, the Converter implementation converts the component’s data between the two views.

You can either use the standard converters supplied with the JavaServer Faces implementation or create your own custom converter.

To create and use a custom converter in your application, three things must happen:

Event and Listener Model













Validation Model





If you are implementing a Validator interface, you must also:
