Alternating Grid

This page is like the Styled Grid page, with the added feature of alternating coloured rows thanks to an EvenOdd class.
Id[Sortable]First Name[Sortable]Last Name[Sortable]Region[Sortable]Start Date[Sortable]
5DishySpoon1 East Coast Feb 7, 2010
1HumptyDumpty East Coast Dec 19, 0200
3Jack21Sprate West Coast Feb 28, 2007
4JillSpillage West Coast Aug 31, 2014
References: Grid.


The source for Person, PersonFinderService, @EJB handling, etc. is shown in the @EJB example.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<!-- We need a doctype to allow us to use special characters like &nbsp; 
     We use a "strict" DTD to make IE follow the alignment rules. -->
<html xmlns:t="">
    <link rel="stylesheet" type="text/css" href="${context:css/examples/tables/alternatinggrid.css}"/>
    <h1>Alternating Grid</h1>

    This page is like the Styled Grid page, with the added feature of alternating coloured rows thanks to an EvenOdd class.

    <div class="eg">
        <table t:type="grid" t:source="persons" t:exclude="version"
            t:rowsPerPage="4" t:pagerPosition="top" t:rowClass="">[Grid here]</table>

    <a href="">Grid</a>.<br/><br/>
    <a t:type="pagelink" t:page="Index" href="#">Home</a><br/><br/>
    The source for Person, PersonFinderService, @EJB handling, etc. is shown in the @EJB example.<br/><br/>

    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/pages/examples/tables/AlternatingGrid.tml"/>
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/pages/examples/tables/"/>
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/css/examples/tables/alternatinggrid.css"/>
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/commons/"/>

package jumpstart.web.pages.examples.tables;

import java.util.List;

import javax.ejb.EJB;

import jumpstart.web.commons.EvenOdd;

import org.apache.tapestry5.annotations.Property;

public class AlternatingGrid {
    static private final int MAX_RESULTS = 30;

    // Screen fields

    private List<Person> persons;

    private EvenOdd evenOdd;

    // Generally useful bits and pieces

    private IPersonFinderServiceLocal personFinderService;

    // The code

    void setupRender() {
        // Get all persons - ask business service to find them (from the database)
        persons = personFinderService.findPersons(MAX_RESULTS);
        evenOdd = new EvenOdd();


body            { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #333;
                    line-height: 17px; }
h1              { font-size: 26px; line-height: 20px; } /* For IE 7 */

.eg             { margin: 20px 0; padding: 20px; 
                    border: 1px solid #ddd; border-radius: 4px; -webkit-border-radius: 4px; -mox-border-radius: 4px; }

a               { text-decoration: none; color: #3D69B6; }
a:hover         { text-decoration: underline; }

    The following elements demonstrate one way to override Tapestry's Grid CSS.
    Another way is to assign a your own CSS class in Grid's class parameter. 

.eg img.t-sort-icon         { vertical-align: bottom; }
.eg div.t-data-grid         { font-family: Arial, Helvetica, sans-serif; }
.eg div.t-data-grid-pager   { margin: 0 0 8px; }
.eg div.t-data-grid-pager a, 
.eg div.t-data-grid-pager span.current  { font-size: 13px; }
.eg div.t-data-grid-pager span.current  { text-shadow: 0px -1px 0px #4D5F99; }

.eg table.t-data-grid th    { width: 130px; }
.eg table.t-data-grid th a  { text-decoration: none; text-shadow: 0px -1px 0px #4D5F99; }

.eg table.t-data-grid thead tr  { 
                    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8DA9FF', endColorstr='#738FE6'); /* for IE */
                    background: -webkit-gradient(linear, left top, left bottom, from(#8DA9FF), to(#738FE6)); /* for webkit browsers */
                    background: -moz-linear-gradient(top, #8DA9FF, #738FE6); /* for firefox 3.6+ */ }

.eg table.t-data-grid tbody tr.odd      { background-color: #f8f8f8; }
.eg table.t-data-grid tbody tr:hover    { background-color: #eeeeee; }

// Adapted from Tapestry 4's EvenOdd class.

package jumpstart.web.commons;

 * Used to emit a stream of alterating string values: "even", "odd", etc. This is often used in the Inspector pages to
 * make the class of a &lt;tr&gt; alternate for presentation reasons.
 * @author Howard Lewis Ship

public class EvenOdd {

    private boolean even = true;

     * Returns "even" or "odd". Whatever it returns on one invocation, it will return the opposite on the next. By
     * default, the first value returned is "even".
    public String getNext() {
        String result = getCurrent();
        even = !even;
        return result;

    public String getCurrent() {
        return even ? "even" : "odd";
    public boolean isEven() {
        return even;

     * Overrides the even flag.
    public void setEven(boolean value) {
        even = value;