background image

The UIPanel Component

<< The first Attribute | The panelGrid Tag >>
<< The first Attribute | The panelGrid Tag >>

The UIPanel Component

The url attribute specifies the path to the image. It also corresponds to the local value of the
UIGraphic
component so that the URL can be retrieved, possibly from a backing bean. The
URL of the example tag begins with a /, which adds the relative context path of the web
application to the beginning of the path to the image.
The title attribute specifies the alternative text displayed when the user mouses over the
image. In this example, the title attribute refers to a localized message. See
"Performing
Localization" on page 390
for details on how to localize your JavaServer Faces application.
The usemap attribute refers to the image map defined by the custom component,
MapComponent
, which is on the same page. See
Chapter 13, "Creating Custom UI Components"
for more information on the image map.
Laying Out Components with the UIPanel Component
In a JavaServer Faces application, you use the UIPanel component as a layout container for a set
of component components. When you use the renderers from the HTML render kit, UIPanel is
rendered as an HTML table. This component differs from UIData in that UIData can
dynamically add or delete rows to accommodate the underlying data source, whereas UIPanel
must have the number of rows predetermined.
Table 11­4
lists all the renderers and tags
corresponding to the UIPanel component.
TABLE 11­4
UIPanel
Renderers and Tags
Renderer
Tag
Renderer Attributes
Function
Grid
panelGrid
columnClasses
, columns, footerClass,
headerClass
, panelClass, rowClasses
Displays a table
Group
panelGroup
layout
Groups a set of components
under one parent
The panelGrid tag is used to represent an entire table. The panelGroup tag is used to represent
rows in a table. Other UI component tags are used to represent individual cells in the rows.
The panelGrid tag has a set of attributes that specify CSS stylesheet classes: columnClasses,
footerClass
, headerClass, panelClass, and rowClasses. These stylesheet attributes are
optional. The panelGrid tag also has a columns attribute. The columns attribute is required if
you want your table to have more than one column because the columns attribute tells the
renderer how to group the data in the table.
If the headerClass attribute value is specified, the panelGrid must have a header as its first
child. Similarly, if a footerClass attribute value is specified, the panelGrid must have a footer
as its last child.
The Duke's Bookstore application includes three panelGrid tags on the bookcashier.jsp page.
Here is a portion of one of them:
Adding UI Components to a Page Using the HTML Component Tags
Chapter 11 · Using JavaServer Faces Technology in JSP Pages
341