|
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>
|