|
The h:panelGrid tag
renders an HTML4 compliant table element. The h: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
h:panelGrid component, like the h:dataTable component, can
be customized extensively using Cascading Style Sheets (CSS). The h: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 h:panelGrid component
has only one column.
You can specify how many columns are used to display
the components, and the h: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 h: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 h:panelGrid tag.
This component 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 h:panelGroup component.
The h: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 h: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.
JSF Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head />
<body>
<h:form id="form">
<h:panelGrid id="panel" columns="2" border="1" cellpadding="0" cellspacing="2">
<f:facet name="header">
<h:outputText value="#{messages.signInMessage}"/>
</f:facet>
<h:outputLabel for="username" value="#{messages.usernameLabel}" />
<h:inputText id="username" value="#{userController.user.username}" />
<h:outputLabel for="password" value="#{messages.passwordLabel}" />
<h:inputText id="password" value="#{userController.user.password}" />
<f:facet name="footer">
<h:panelGroup style="display:block; text-align:center">
<h:commandButton id="submit" value="#{messages.submitLabel}" />
</h:panelGroup>
</f:facet>
</h:panelGrid>
</h:form>
</body>
</html>
This example was formatted by JSFToolbox for Dreamweaver.
com/mycompany/messages.properties
usernameLabel=Username
passwordLabel=Password
signInMessage=Please sign in
submitLabel=Submit
faces-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
version="2.0">
<application>
<resource-bundle>
<base-name>com.mycompany.messages</base-name>
<var>messages</var>
</resource-bundle>
</application>
</faces-config>
Rendered Output
HTML Output
<table border="1" cellpadding="0" cellspacing="2">
<thead>
<tr>
<th colspan="2" scope="colgroup">Please sign in</th></tr>
</thead>
<tfoot>
<tr>
<td colspan="2">
<span style="display:block; text-align:center">
<input id="form:submit" type="submit" name="form:submit" value="Submit" />
</span>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td><label for="form:username">Username</label></td>
<td><input id="form:username" type="text" name="j_idt10:username" /></td>
</tr>
<tr>
<td><label for="form:password">Password</label></td>
<td><input id="form:password" type="text" name="form:password" /></td>
</tr>
</tbody>
</table>
|
