There are two kinds of grids (tables) that are very often used in JSF, h:panelGrid and h:dataTable. Both of them can be styled with CSS in detail using a set of dedicated attributes. In this recipe you will see these attributes at work for h:panelGrid, but it is very simple to extrapolate this to h:dataTable.
We have developed this recipe with NetBeans 6.8, JSF 2.0, and GlassFish v3. The JSF 2.0 classes were obtained from the NetBeans JSF 2.0 bundled library.
Suppose that we have an h:panelGrid. We can "populate" it with CSS styles, using the following set of attributes:
|
Name |
Description |
|---|---|
|
|
This is used to specify the comma-separated list of CSS style classes to be applied on the columns of the table. |
|
|
This is used to specify the spaces-separated list of CSS style classes to be applied on the header of the table. |
|
|
This is used to specify the spaces-separated list of CSS style classes to be applied on the footer of the table. |
|
|
This is used to specify the comma-separated list of CSS style classes to be applied on the rows of the table. |
|
|
This is used to set the CSS class for the component. |
|
|
This is used to set the CSS style definition for the component. |
Knowing these attributes, we build a JSF page to show you how to use them in practice (notice where we have placed the attributes):
<?xml version='1.0' encoding='UTF-8' ?>
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>JSF and CSS example</title>
<style type="text/css">
.message { text-align: left;
letter-spacing:5px;
color:#000099
}
.message-font { font-family:georgia,garamond,serif;
font-size:20px;
font-style:italic;
}
.odd { background-color: blue }
.even { background-color: red }
</style>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="3" border="1" footerClass="message"
headerClass="message-font" rowClasses="odd, even"
title="PanelGrid and CSS">
<f:facet name="header">
<h:outputText value="Fill Names Below"/>
</f:facet>
<h:inputText/>
<h:inputText/>
<h:inputText/>
<h:inputText/>
<h:inputText/>
<h:inputText/>
<h:inputText/>
<h:inputText/>
<h:inputText/>
<h:inputText/>
<h:inputText/>
<h:inputText/>
<f:facet name="footer">
<h:outputText value="The End"/>
</f:facet>
</h:panelGrid>
</h:form>
</h:body>
</html>
Since we have an attribute for each part of a grid, we can easily specify CSS styles to customize the design of each of these parts. JSF will combine the specified CSS styles to render a cool grid to the user.
The h:dataTable allows you to use the same CSS attributes for table header, footer, and so on.