Home > Articles > Programming > Java

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Panels

Up to this point, we have used HTML tables to lay out components. Creating table markup by hand is tedious, so now we'll look at alleviating some of that tedium with h:panelGrid, which generates the HTML markup for laying out components in rows and columns.

You can specify the number of columns with the columns attribute, like this:

<h:panelGrid columns="3">
   ...
</h:panelGrid>

The columns attribute is not mandatory—if you do not specify it, the number of columns defaults to 1. The h:panelGrid tag places components in columns from left to right and top to bottom. For example, if you have a panel grid with three columns and nine components, you will wind up with three rows, each containing three columns. If you specify three columns and 10 components, you will have four rows, and in the last row only the first column will contain the tenth component.

Table 4–8 lists h:panelGrid attributes.

Table 4–8. Attributes for h:panelGrid

Attributes

Description

bgcolor

Background color for the table

border

Width of the table's border

cellpadding

Padding around table cells

cellspacing

Spacing between table cells

columnClasses

Comma-separated list of CSS classes for columns

columns

Number of columns in the table

footerClass

CSS class for the table footer

frame

Specification for sides of the frame surrounding the table that are to be drawn; valid values: none, above, below, hsides, vsides, lhs, rhs, box, border

headerClass

CSS class for the table header

rowClasses

Comma-separated list of CSS classes for rows

rules

Specification for lines drawn between cells; valid values: groups, rows, columns, all

summary

Summary of the table's purpose and structure used for nonvisual feedback, such as speech

captionClass jsf-1-2.jpg, captionStyle jsf-1-2.jpg

CSS class or style for the caption; a panel caption is optionally supplied by a facet named "caption"

binding, id, rendered, value

Basic attributesa

dir, lang, style, styleClass, title, width

HTML 4.0b

onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup

DHTML eventsc

You can specify CSS classes for different parts of the table: header, footer, rows, and columns. The columnClasses and rowClasses specify lists of CSS classes that are applied to columns and rows, respectively. If those lists contain fewer class names than rows or columns, the CSS classes are reused. That makes it possible to specify classes, like this:

rowClasses="evenRows, oddRows"

and

columnClasses="evenColumns, oddColumns"

The cellpadding, cellspacing, frame, rules, and summary attributes are HTML pass-through attributes that apply only to tables. See the HTML 4.0 specification for more information.

h:panelGrid is often used with h:panelGroup, which groups two or more components so they are treated as one. For example, you might group an input field and its error message, like this:

<h:panelGrid columns="2">
   ...
   <h:panelGroup>
      <h:inputText id="name" value="#{user.name}">
      <h:message for="name"/>
   </h:panelGroup>
   ...
</h:panelGrid>

Grouping the text field and error message puts them in the same table cell. (We discuss the h:message tag in the section "Messages" on page 171.)

h:panelGroup is a simple tag with only a handful of attributes. Those attributes are listed in Table 4–9.

Table 4–9. Attributes for h:panelGroup

Attributes

Description

layout jsf-1-2.jpg

If the value is "block", use an HTML div to lay out the children; otherwise, use a span

binding, id, rendered

Basic attributesa

style, styleClass

HTML 4.0 b

  • + Share This
  • 🔖 Save To Your Account