h:panelGroup |
|
The panelGroup tag is a container component that renders its child
components. It is intended to be used in situations where it is desirable to
include several components but when only one child component is allowed, such as
within a panelGrid column or a facet component. The example below demonstrates
the use of a panelGroup component to nest two components inside a single
panelGrid column.
Without the panelGroup component, the two child
components of the panelGrid would have been rendered in separate rows.
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:h="http://java.sun.com/jsf/html">
<h:head>
<h:outputStylesheet library="styles" name="style.css" />
</h:head>
<body>
<h:form id="form">
<h:panelGrid id="grid" columns="1">
<h:panelGroup>
<h:outputLabel value="#{messages.usernameLabel} " />
<h:inputText label="#{messages.usernameLabel}" id="username"
value="#{userController.user.username}" required="true" />
<h:message for="username" errorClass="error" />
</h:panelGroup>
<h:panelGroup>
<h:outputLabel value="#{messages.passwordLabel} " />
<h:inputSecret label="#{messages.passwordLabel}" id="password"
value="#{userController.user.username}" required="true" />
<h:message for="password" errorClass="error" />
</h:panelGroup>
<h:commandButton id="submit" value="#{messages.submitLabel}" />
</h:panelGrid>
</h:form>
</body>
</html>
This example was formatted by JSFToolbox for Dreamweaver.
Rendered Output
HTML Output
<table id="form:grid">
<tbody>
<tr>
<td>
<label>Username</label>
<input id="form:username" type="text" name="form:username" />
</td>
</tr>
<tr>
<td>
<label>Password </label>
<input id="form:password" type="password" name="form:password" value="" />
</td>
</tr>
<tr>
<td><input type="submit" name="form:submit" value="Submit" /></td>
</tr>
</tbody>
</table>
|
