Documentation
JSFToolbox

Search 

Contents

  1. Introduction
  2. Getting Started
  3. Developing Web Sites
  4. Using Components
  5. Internationalization
  6. Code View Support
  7. Design View Support
  8. Keyboard Shortcuts
  9. Tag Object Toolbars
  10. JSF Server Behaviors
  11. Property Inspectors
Selected 12. JSF Tag Reference

12. JSF Tag Reference

Contents > JSF Tag Reference > JSF HTML Tags

10. JSF HTML Tag Reference

Contents > JSF HTML Tag Reference > h:panelGrid

< h:outputText h:panelGroup >

h:panelGrid

The panelGrid tag renders an HTML 4.01 compliant table element. The panelGrid component can be used as a layout manager for a grid-based user interface. It simplifies the task of constructing a layout table to hold form fields, labels, and buttons.

The panelGrid component, like the dataTable component, can be customized extensively using Cascading Style Sheets (CSS). For more information on customizing the appearance of JSF tables using CSS styles, please see the dataTable tag documentation.

The panelGrid does not use an underlying data model to provide rows of data for rendering purposes. Rather, this component is a layout container that renders other JSF components in a grid of rows and columns.

By default, a panelGrid component has only one column. You can specify how many columns are used to display the components, and the panelGrid component determines how many rows are needed at rendering time. For example, if you set the number of columns for your panelGrid to 2 and you include 4 components inside it, the rendered table will have two rows with two columns ("td" cells) in each row.

The layout algorithm for the child components of a panelGrid is as follows. The components are laid out one at a time, from left to right and from top to bottom, starting with the first component and ending with the last component in the order in which the appear inside the panelGrid tag.

The panelGrid renders one component per column and keeps track of how many columns it has rendered. When the number of columns rendered for a particular row is the same as the value of the "columns" attribute, it starts a new row and continues in this manner until there are no more components to render.

If you want to combine several components into a single column, you can use a panelGroup component. The panelGroup component renders its children but still counts as one component. This is useful for cases where a component only allows one child component, such as the facet tag and the column layout algorithm described above.

You can also define header and a footer facets for the panelGrid. These are rendered as a single "th" element in a row at the top of the table and as a single "td" element in a row at the bottom of the table, respectively.

Example:

<h:panelGrid id="panel" columns="2" border="1">
  <f:facet name="header">
    <h:outputText value="#{bundle.signInMessage}"/>
  </f:facet>
  <h:outputLabel for="username" value="#{bundle.usernameLabel}" />
  <h:inputText id="username" value="#{userBean.user.username}" />
  <h:outputLabel for="password" value="#{bundle.passwordLabel}" />
  <h:inputText id="password" value="#{userBean.user.password}" />
  <f:facet name="footer">
    <h:panelGroup style="display:block; text-align:center">
      <h:commandButton id="submit" value="#{bundle.submitLabel}" />
    </h:panelGroup>
  </f:facet>
</h:panelGrid>

HTML Output

<table id="form:panel" border="1">
  <thead>
    <tr>
      <th scope="colgroup" colspan="2">Please sign in</th>
   </tr>
  </thead>
  <tbody>
    <tr>
      <td><label for="form:username">Username</label></td>
      <td><input id="form:username" name="form:username" type="text" value=""/></td>
    </tr>
    <tr>
      <td><label for="form:password">Password</label></td>
      <td><input id="form:password" name="form:password" type="text" value=""/></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">
        <span style="display:block; text-align:center">
          <input id="form:submit" name="form:submit" type="submit" value="Submit" onclick="clear_form();"/>
        </span>
      </td>
    </tr>
  </tfoot>
</table>

Tag Attributes

bgcolor String
 
The bgcolor attribute sets the background color for the table. This value can be the name or the hexadecimal value of the color.
binding String
 
The value-binding expression linking this component tag to a backing bean property.
border String
 
The border attribute sets the pixel width of the border to be drawn around the table.
cellpadding String
 
The cellpadding attribute sets the width between the border of each cell and its contents.
cellspacing String
 
The cellspacing attribute sets the width of the space between the outside and inside edges of the table as well as the space between cells.
columnClasses String
 

The columnClasses attribute accepts a comma-delimited list of CSS style classes that will be applied to the columns of the table. Style classes for an individual column may also be defined in a space separated list. A style class is applied to a table column as the value for the class attribute of rendered td or th element.

The algorithm used to apply the CSS style classes to the table columns is simple. In the table rendering process, style classes are applied to columns one at a time until (a) there are no more columns to display or (b) there are no more style classes to apply.

  • If (a) happens at the same time as (b), the next row in the table is rendered.
  • If (a) happens before (b), the remaining style classes are ignored.
  • If (b) happens before (a), the remaining columns will not have style classes.
columns String
 
The columns attribute sets the number of columns to render before starting a new row.
dir String
 
The dir attribute is a standard HTML attribute that overrides the default text directionality for this component. The values accepted for this component are "LTR" (left-to-right) and "RTL" (right-to-left).
footerClass String
 
The footerClass attribute accepts a space-separated list of CSS style classes (or simply a style class) to be applied to the table footer if one has been defined.
frame String
 

The frame attribute sets the code specifying which sides of the frame around this table will be visible. The valid values for this attribute are:

  • none (no sides, default value)
  • above (top side only)
  • below (bottom side only)
  • hsides (top and bottom sides only)
  • vsides (right and left sides only)
  • lhs (left hand side only)
  • rhs (right hand side only)
  • box (all four sides) and
  • border (all four sides)
headerClass String
 
The headerClass attribute accepts a space-separated list of CSS style classes (or a single style class) to be applied to any header generated for this table.
id String
 
The unique identifier value for this component. The value must be unique within the closest naming container.
lang String
 
The lang attribute is a standard HTML attribute that sets the code describing the language to be used in the markup generated by this component.
onclick String
 
The onclick attribute sets the JavaScript code to execute when the mouse pointer is clicked over this element.
ondblclick String
 
The ondblclick attribute sets the JavaScript code to execute when the mouse pointer is double-clicked over this element.
onkeydown String
 
The onkeydown attribute sets the JavaScript code to execute when a key is pressed down over this element.
onkeypress String
 
The onkeypress attribute sets the JavaScript code to execute when a key is pressed and released over this element.
onkeyup String
 
The onkeyup attribute sets the JavaScript code to execute when a key is released over this element.
onmousedown String
 
The onmousedown attribute sets the JavaScript code to execute when the mouse pointer is pressed down over this element.
onmousemove String
 
The onmousemove attribute sets the JavaScript code to execute when the mouse pointer is moved within this element.
onmouseout String
 
The onmouseout attribute sets the JavaScript code to execute when the mouse pointer is moved away from this element.
onmouseover String
 
The onmouseover attribute sets the JavaScript code to execute when the mouse pointer is moved onto this element.
onmouseup String
 
The onmouseup attribute sets the JavaScript code to execute when the mouse button is released over this element.
rendered String
 
A value-binding expression that evaluates to a Boolean condition indicating if this component should be rendered.
rowClasses String
 

The rowClasses attribute accepts a comma-delimited list of CSS style classes to be applied to the rows of the table. Style classes for an individual row may also be defined in a space separated list. A style class is applied to a table row as the value for the class attribute of rendered tr element.

Style classes are applied to rows in the same order that they are defined. For example, if there are two style classes, the first is applied to the first row, the second is applied to the second row, the first is applied to the third row, the second is applied to the fourth row, and so on. The list of styles is looped over from the beginning until there are no more rows to display.

rules String
 

The rules attribute specifies which lines will appear between cells in the table. The valid values for this attribute are:

  • none (no rules, default value)
  • groups (between row groups)
  • rows (between rows only)
  • cols (between columns only)
  • and all (between all rows and columns)
style String
 
The style attribute sets the CSS style definition to be applied to this component when it is rendered.
styleClass String
 
The styleClass attribute sets the CSS class to apply to this component when it is rendered.
summary String
 
The summary attribute describes the purpose and structure of the table for accessibility support for assistive devices and non-visual user agents.
title String
 
The title attribute is a standard HTML attribute that sets the tooltip text to display for the rendered component.
width String
 
< h:outputText h:panelGroup >