Database Tables

Styles

h:dataTable has attributes that specify CSS classes for the following:

  • The table as a whole (styleClass)

  • Column headers and footers (headerClass and footerClass)

  • Individual columns (columnClasses)

  • Individual rows (rowClasses)

The table shown in Figure 5-8 uses styleClass, headerClass, and columnClasses.

Figure 5-8. Applying styles to columns and headers


Note

The h:dataTable rowClasses and columnClasses attributes are mutually exclusive. If you specify both, columnClasses has priority.


Styles by Column

Here is how the CSS classes in Figure 5-8 are specified:

  <link href='styles.css' rel='stylesheet' type='text/css'/>   ...   <h:dataTable value="#{order.all}" var="order"      style      header      columnClasses="oddColumn,evenColumn">

Those CSS classes are listed below.

  .orders {      border: thin solid black;   }   .ordersHeader {      text-align: center;      font-style: italic;      color: Snow;      background: Teal;   }   .oddColumn {      height: 25px;      text-align: center;      background: MediumTurquoise;   }   .evenColumn {      text-align: center;      background: PowderBlue;   }

We specified only two column classes, but notice that we have five columns. In this case, h:dataTable reuses the column classes, starting with the first. By specifying only the first two column classes, we can set the CSS classes for even and odd columns (1-based counting).

Styles by Row

You can use the rowClasses attribute to specify CSS classes by rows instead of columns, as illustrated in Figure 5-9. That data table is implemented like this:

  <link href='styles.css' rel='stylesheet' type='text/css'/>   ...   <h:dataTable value="#{order.all}" var="order"      style      header      rowClasses="oddRow,evenRow">

Figure 5-9. Applying styles to rows


Like column classes, h:dataTable reuses row classes when the number of classes is less than the number of rows. In the preceding code fragment, we have taken advantage of this feature to specify CSS classes for even and odd rows.

Caution

We use color names, such as PowderBlue and Medium-Turquoise, in our style classes for the sake of illustration. You should prefer the equivalent hex constants because they are portable, whereas color names are not.




Core JavaServerT Faces
Core JavaServer(TM) Faces (2nd Edition)
ISBN: 0131738860
EAN: 2147483647
Year: 2004
Pages: 84

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net