Styled Loop

As with Grid, with a bit of CSS you can make a Loop look however you want.
Id First Name Last Name Region Start Date
3 11 km West Coast Feb 28, 2007
1 Acme2e 456 West Coast Jun 19, 1952
5 ksdsad De scoop East Coast Jul 7, 2007
2 Mary dgzfgdf West Coast Jun 10, 2024
4 yuno 3clover West Coast Feb 12, 2008
References: Loop, Output.


The source for IPersonFinderServiceLocal and @EJB is shown in the Session Beans and @EJB examples.

<!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="">
<body class="container">
    <h3>Styled Loop</h3>
    As with Grid, with a bit of CSS you can make a Loop look however you want.
    <div class="eg">
        <table class="grid">
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Start Date</th>
                <tr t:type="loop" t:source="persons" t:value="person">
                    <td><t:output value="person.startDate" format="dateFormat"/></td>

    <a href="">Loop</a>, 
    <a href="">Output</a>.<br/><br/>
    <t:pagelink page="Index">Home</t:pagelink><br/><br/>
    The source for IPersonFinderServiceLocal and @EJB is shown in the Session Beans and @EJB examples.<br/><br/>

        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/tables/StyledLoop.tml"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/tables/"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/tables/"/>
        <t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/tables/styledloop.css"/>
        <t:sourcecodetab src="/business/src/main/java/jumpstart/business/domain/person/"/>
        <t:sourcecodetab src="/business/src/main/java/jumpstart/business/domain/person/"/>

## These enum conversions could be moved to the central message properties file called
## The structure we've chosen (enum class name, dot, enum value) is the same as expected by the Select component.
Regions.EAST_COAST=East Coast
Regions.WEST_COAST=West Coast

package jumpstart.web.pages.examples.tables;

import java.text.DateFormat;
import java.text.Format;
import java.util.List;
import java.util.Locale;

import javax.ejb.EJB;


import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.ioc.Messages;
import org.apache.tapestry5.ioc.annotations.Inject;

@Import(stylesheet = "css/examples/tables/styledloop.css")
public class StyledLoop {
    static private final int MAX_RESULTS = 30;

    // Screen fields

    private List<Person> persons;

    private Person person;

    // Generally useful bits and pieces

    private IPersonFinderServiceLocal personFinderService;

    private Messages messages;

    private Locale currentLocale;
    // The code

    void setupRender() {
        // Get all persons - ask business service to find them (from the database)
        persons = personFinderService.findPersons(MAX_RESULTS);
    public String getPersonRegion() {
        return messages.get(Regions.class.getSimpleName() + "." + person.getRegion().name());

    public Format getDateFormat() {
        return DateFormat.getDateInstance(DateFormat.MEDIUM, currentLocale);

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

.grid {
                border-collapse: collapse;
                border-spacing: 0;
                border: 1px solid #ddd;
                font-size: 13px;

.grid tr {
                border-top: 1px solid #f8f8f8;

.grid th {
                padding: 3px 5px;
                text-align: left;
                width: 130px;
                border: 1px solid #ddd;
                font-weight: normal;
                color: #444;
                text-shadow: 0px -1px 0px #e4e4e4;
                background-color: #eee;
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb',
                                endColorstr='#e4e4e4'); /* for IE */
                background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb),
                                to(#e4e4e4)); /* for webkit browsers */
                background: -moz-linear-gradient(top, #fbfbfb, #e4e4e4);
                /* for firefox 3.6+ */

.grid td {
                padding: 3px 5px;
                text-align: left;


import java.util.Date;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.EnumType;
import javax.persistence.Enumerated;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.PrePersist;
import javax.persistence.PreUpdate;
import javax.persistence.Temporal;
import javax.persistence.TemporalType;
import javax.persistence.Version;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;

 * The Person entity.
public class Person implements Serializable {

    @GeneratedValue(strategy = GenerationType.AUTO)
    @Column(nullable = false)
    private Long id;

    @Column(nullable = false)
    private Integer version;

    @Column(length = 10, nullable = false)
    @Size(max = 10)
    private String firstName;

    @Column(length = 10, nullable = false)
    @Size(max = 10)
    private String lastName;
    private Regions region;

    private Date startDate;

    public String toString() {
        final String DIVIDER = ", ";
        StringBuilder buf = new StringBuilder();
        buf.append(this.getClass().getSimpleName() + ": ");
        buf.append("id=" + id + DIVIDER);
        buf.append("version=" + version + DIVIDER);
        buf.append("firstName=" + firstName + DIVIDER);
        buf.append("lastName=" + lastName + DIVIDER);
        buf.append("region=" + region + DIVIDER);
        buf.append("startDate=" + startDate);
        return buf.toString();

    // Default constructor is required by JPA.
    public Person() {

    public Person(String firstName, String lastName, Regions region, Date startDate) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.region = region;
        this.startDate = startDate;

    // The need for an equals() method is discussed at
    public boolean equals(Object obj) {
        return (obj == this) || (obj instanceof Person) && id != null && id.equals(((Person) obj).getId());

    // The need for a hashCode() method is discussed at

    public int hashCode() {
        return id == null ? super.hashCode() : id.hashCode();

    public void validate() throws ValidationException {


    public Long getId() {
        return id;

    public Integer getVersion() {
        return version;

    public void setVersion(Integer version) {
        this.version = version;

    public String getFirstName() {
        return firstName;

    public void setFirstName(String firstName) {
        this.firstName = firstName;

    public String getLastName() {
        return lastName;

    public void setLastName(String lastName) {
        this.lastName = lastName;

    public Regions getRegion() {
        return region;

    public void setRegion(Regions region) {
        this.region = region;

    public Date getStartDate() {
        return startDate;

    public void setStartDate(Date startDate) {
        this.startDate = startDate;



public enum Regions {