Java Reference
In-Depth Information
Each row in our panel grid consists of an
<h:outputLabel>
tag, an input field, and
an
<h:message>
tag.
The
columnClasses
attribute of
<h:panelGrid>
allows us to assign CSS styles to
each column inside the panel grid. Its
value
attribute must consist of a comma-
separated list of CSS styles (defined in a CSS style sheet). The first style will be
applied to the first column, the second style will be applied to the second column,
the third style will be applied to the third column, and so on. Had our panel grid had
more than three columns, then the fourth column would have been styled using the
first style in the
columnClasses
attribute, the fifth column would have been styled
using the second style in the
columnClasses
attribute, and so on.
If we wish to style rows in a panel grid, we can do so with its
rowClasses
attribute,
which works the same way that the
columnClasses
works for columns.
Notice the
<h:outputStylesheet>
tag inside
<h:head>
near the top of the page.
This tag was introduced in JSF 2.0. One feature JSF 2.0 brought to the table is
standard resource directories. Resources (such as CSS, JavaScript files, and images)
can be placed under a top-level directory named
resources
, and JSF tags will have
access to those resources automatically. In our NetBeans project, we need to place the
resources
directory under the
Web Pages
folder.
Then, we need to create a subdirectory to hold our CSS style sheet (by convention, this
directory should be named
css
). We place our CSS style sheet(s) in this subdirectory.
The CSS style sheet for our example is very simple; therefore, it is not
shown. However, it is part of the code bundle for this chapter.
The value of the library attribute in
<h:outputStylesheet>
must match the
directory where our CSS file is located, and the value of its
name
attribute must
match the CSS filename.