The panelGrid Tag
The panelGrid Tag
<h:panelGrid columns=
"3" headerClass="list-header"
rowClasses=
"list-row-even, list-row-odd"
styleClass=
"list-background"
title=
"#{bundle.Checkout}">
<f:facet name=
"header">
<h:outputText value=
"#{bundle.Checkout}"/>
</f:facet>
<h:outputText value=
"#{bundle.Name}" />
<h:inputText id=
"name" size="50"
value=
"#{cashier.name}"
required=
"true">
<f:valueChangeListener
type=
"listeners.NameChanged" />
</h:inputText>
<h:message styleClass=
"validationMessage" for="name"/>
<h:outputText value=
"#{bundle.CCNumber}"/>
<h:inputText id=
"ccno" size="19"
converter=
"CreditCardConverter" required="true">
<bookstore:formatValidator
formatPatterns=
"9999999999999999|
9999 9999 9999 9999|9999-9999-9999-9999
"/>
</h:inputText>
<h:message styleClass=
"validationMessage"
for=
"ccno"/>
...
</h:panelGrid>
This panelGrid tag is rendered to a table that contains components for the customer of the
bookstore to input personal information. This panelGrid tag uses stylesheet classes to format
the table. The CSS classes are defined in the stylesheet.css file in the
tut-install/javaeetutorial5/examples/web/bookstore6/web/ directory. The list-header
definition is
.list-header {
background-color: #ffffff;
color: #000000;
text-align: center;
}
Because the panelGrid tag specifies a headerClass, the panelGrid must contain a header. The
example panelGrid tag uses a facet tag for the header. Facets can have only one child, and so a
panelGroup
tag is needed if you want to group more than one component within a facet.
Because the example panelGrid tag has only one cell of data, a panelGroup tag is not needed.
The panelGroup tag has one attribute, called layout, in addition to those listed in
. If the layout attribute has the value block then an
HTML div element is rendered to enclose the row; otherwise, an HTML span element is
rendered to enclose the row. If you are specifying styles for the panelGroup tag, you should set
the layout attribute to block in order for the styles to be applied to the components within the
Adding UI Components to a Page Using the HTML Component Tags
The Java EE 5 Tutorial · September 2007
342
