Some web designers or UI programmers use HTML tables to lay out components. In general, creating table markup by hand is a tedious task. In a JavaServer Faces application, you use a panel as a layout container for a set of other components. A panel is rendered as an HTML table. The following table lists the tags used to create panels (the following picture is from the Oracle Java EE 7 online documentation).
The h:panelGrid is used to represent an entire table. The h:panelGroup tag is used to represent rows in a table. Other tags are used to represent individual cells in the rows.
The columns attribute defines how to group the data in the table and therefore is required if you want your table to have more than one column, like this:
The columns attribute is not mandatory, which means that if you do not specify it, the number of columns defaults to 1. The h:panelGrid tag places components in columns from left to right and top to bottom.
The h:panelGrid tag also has a set of optional attributes that specify CSS classes: columnClasses, footerClass, headerClass, panelClass, and rowClasses. The role attribute can have the value “presentation” to indicate that the purpose of the table is to format the display rather than to show data.
We go back to our Guess_A_Number JSF application (see Lesson 5) and we modify it to include a h:panelGrid tag to represent the entire form.
Here is how the output of our application looks before we add the h:panelGrid tag.
We add the h:panelGrid tag inside the form. Let's define 2 columns.
Let's now change the value of columns to 3
As we have already mentioned, The columns attribute defines how to group the data in the table and therefore is required if you want your table to have more than one column. We also mentioned that the h:panelGrid tag also has a set of optional attributes that specify CSS classes. If the headerClass attribute is specified, the h:panelGrid tag must have a header as its first child. Similarly, if a footerClass attribute value is specified, the h:panelGrid tag must have a footer as its last child.
This is the updated version of the greeting.xhtml
This is the updated version of the CSS file.
You can specify CSS classes for different parts of the table: header, footer, rows, and columns. Because the h:panelGrid tag specifies a headerClass, the h:panelGrid tag must contain a header. The example h:panelGrid tag uses an f:facet tag for the header. Facets can have only one child.
The h:panelGrid is often used with h:panelGroup, which groups two or more components so they are treated as one. For example, you might group an input field and its error message. Let's add the h:panelGroup tag to our application and delete the code for the CSS that refers to the second message. This is the new version of the greeting.xhtml