Styles for Rows and Columns

   

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-7 uses the styleClass, headerClass, and rowClasses.

Figure 5-7. Applying Styles by Column

graphics/05fig07.jpg


NOTE

graphics/note_icon.gif

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


Styles by Column

Here's how the CSS classes in Figure 5-7 are specified:

 

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

Those CSS classes are listed below.

 

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

We only specified two column classes, but notice we have five columns. In that 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.

Styles by Row

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

 

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

Figure 5-8. Specifying Styles by Row

graphics/05fig08.jpg


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've taken advantage of this feature to specify CSS classes for even and odd rows.

CAUTION

graphics/caution_icon.gif

We use color names, such as PowderBlue and MediumTurquoise, 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 JavaServer Faces
Core JavaServer Faces
ISBN: 0131463055
EAN: 2147483647
Year: 2003
Pages: 121

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