Editable Grid For Update (1)

A table built with a Form around a Grid to allow update of persons.

To demonstrate a server-side error, change any First Name to Acme.

The key difference from the Editable Grid example is that now we are dealing with existing entities, so we give the Grid a custom ValueEncoder.
Id[Sortable]First Name[Sortable]Last Name[Sortable]Start Date[Sortable]
2 ContraryFeb 16, 2008
1 CasalApr 1, 2014
4 fsfssApr 4, 2014
3 SssFeb 28, 2004
5 GraweFeb 14, 2008

References: Grid, ValueEncoder, Forms and Validation.


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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- 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="http://tapestry.apache.org/schema/tapestry_5_3.xsd" xmlns:p="tapestry:parameter">
    <link rel="stylesheet" type="text/css" href="${context:css/examples/tables/styledgrid.css}"/>
    <h1>Editable Grid For Update (1)</h1>

    A table built with a Form around a Grid to allow update of persons.<br/><br/>
    To demonstrate a server-side error, change any First Name to <em>${BAD_NAME}</em>.<br/><br/>
    The key difference from the Editable Grid example is that now we are dealing with existing entities, so we give the Grid a custom ValueEncoder.<br/>
    <div class="eg">
        <form t:type="form" t:id="personsEdit">
            <table t:type="Grid" t:source="persons" t:row="person" t:encoder="personEncoder" 
                t:include="id,firstname,lastname,startdate">[Persons Grid here]
                    <input t:id="firstName" t:type="TextField" t:value="person.firstName" t:validate="required, maxlength=10" size="10"/>

                    <!-- We shadow each output-only with a hidden field to enable redisplay of the list exactly as it was submitted. -->
                    <t:hidden value="person.lastName"/>
                    <t:hidden value="person.startDate" t:encoder="dateEncoder"/>

                    <!-- We ensure version is submitted, to ensure optimistic locking. Optimistic locking is essential for this solution. -->
                    <t:hidden value="person.version"/>
            <input t:type="submit" value="Save"/>
            <a t:type="eventlink" t:event="refresh" href="#" style="margin-left: 5px;">Refresh</a>

    <li>If another process creates a person by the time you submit, we ignore it. The encoder ensures we target the submitted persons only.</li>
    <li>If another process updates a person by the time you submit, your update will be rejected by the business layer (optimistic locking exception).</li>
    <li>If another process deletes a person by the time you submit, we treat it as an error.</li>
    <li>On error, we redisplay the list with the same persons and values you submitted. Here's how:
        <li>Form doesn't submit output-only fields but it does submit hidden fields, so we shadow each output-only field with a Hidden.</li>
        <li>Form doesn't carry Hidden values through to redisplay, so we do it ourselves use FLASH-persistence - see onFailure() and onPrepareForRender().</li>
    <a href="http://tapestry.apache.org/5.3/apidocs/org/apache/tapestry5/corelib/components/Grid.html">Grid</a>, 
    <a href="http://tapestry.apache.org/5.3/apidocs/org/apache/tapestry5/ValueEncoder.html">ValueEncoder</a>, 
    <a href="http://tapestry.apache.org/forms-and-validation.html">Forms and Validation</a>.<br/><br/> 
    <a t:type="pagelink" t:page="Index" href="#">Home</a><br/><br/>
    The source for PersonFinderService, @EJB handling, etc. is shown in the @EJB example.<br/><br/>

    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/pages/examples/tables/EditableGridForUpdate1.tml"/>
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/pages/examples/tables/EditableGridForUpdate1.java"/>
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/css/examples/tables/styledgrid.css"/>
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/commons/FieldCopy.java"/>
    <t:sourcecodedisplay src="/business/src/main/java/jumpstart/business/domain/person/Person.java"/>
    <t:sourcecodedisplay src="/business/src/main/java/jumpstart/business/domain/person/Regions.java"/>


package jumpstart.web.pages.examples.tables;

import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.ejb.EJB;

import jumpstart.business.domain.person.Person;
import jumpstart.business.domain.person.iface.IPersonFinderServiceLocal;
import jumpstart.util.ExceptionUtil;
import jumpstart.web.commons.FieldCopy;

import org.apache.tapestry5.Field;
import org.apache.tapestry5.PersistenceConstants;
import org.apache.tapestry5.ValueEncoder;
import org.apache.tapestry5.annotations.Component;
import org.apache.tapestry5.annotations.InjectComponent;
import org.apache.tapestry5.annotations.InjectPage;
import org.apache.tapestry5.annotations.Persist;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.corelib.components.Form;
import org.apache.tapestry5.corelib.components.TextField;

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

    // Screen fields

    private List<Person> persons;

    private Person person;

    private final PersonEncoder personEncoder = new PersonEncoder();

    private final DateEncoder dateEncoder = new DateEncoder();

    private final String BAD_NAME = "Acme";

    // Work fields

    private List<Person> personsInDB;

    private boolean inFormSubmission;

    private List<Person> personsSubmitted;

    // This carries the list of submitted persons through the redirect that follows a server-side validation failure.
    // We do this to compensate for the fact that Form doesn't carry Hidden component values through a redirect.
    private List<Person> personsSubmittedFlash;

    private int rowNum;
    private Map<Integer, FieldCopy> firstNameCopyByRowNum;

    // Other pages

    private EditableGridForUpdate2 page2;

    // Generally useful bits and pieces

    @Component(id = "personsEdit")
    private Form form;

    private TextField firstName;

    private IPersonFinderServiceLocal personFinderService;

    // The code

    void onActivate() {
        inFormSubmission = false;

    // Form bubbles up the PREPARE_FOR_RENDER event during form render.

    void onPrepareForRender() {

        // If fresh start, populate screen with all persons from the database

        if (form.isValid()) {
            // Get all persons - ask business service to find them (from the database)
            personsInDB = personFinderService.findPersons(MAX_RESULTS);

            persons = new ArrayList<Person>();

            for (Person personInDB : personsInDB) {

        // Else, we're rendering after a redirect, so rebuild the list with the same persons as were submitted

        else {
            persons = new ArrayList<Person>(personsSubmittedFlash);

    // Form bubbles up the PREPARE_FOR_SUBMIT event during form submission.

    void onPrepareForSubmit() {
        inFormSubmission = true;
        personsSubmitted = new ArrayList<Person>();

        // Get all persons - ask business service to find them (from the database)
        personsInDB = personFinderService.findPersons(MAX_RESULTS);

        // Prepare to take a copy of each editable field.
        rowNum = 0;
        firstNameCopyByRowNum = new HashMap<Integer, FieldCopy>();

    void onValidateFromFirstName() {
        firstNameCopyByRowNum.put(rowNum, new FieldCopy(firstName));

    void onValidateFromPersonsEdit() {

        if (form.getHasErrors()) {
            // We get here only if a server-side validator detected an error.

        // Error if any person submitted has a null id - it means toValue(...) found they are no longer in the database.

        for (Person personSubmitted : personsSubmitted) {
            if (personSubmitted.getId() == null) {
                form.recordError("The list of persons is out of date. Please refresh and try again.");

        // Simulate a server-side validation error: return error if anyone's first name is BAD_NAME.

        rowNum = 0;

        for (Person personSubmitted : personsSubmitted) {

            if (personSubmitted.getFirstName() != null && personSubmitted.getFirstName().equals(BAD_NAME)) {
                // Unfortunately, at this point the field firstName is from the final row of the Grid.
                // Fortunately, we have a copy of the correct field, so we can record the error with that.

                Field field = firstNameCopyByRowNum.get(rowNum);
                form.recordError(field, "First name cannot be " + BAD_NAME + ".");

        try {
            System.out.println(">>> personsSubmitted = " + personsSubmitted);
            // In a real application we would persist them to the database instead of printing them
            // personManagerService.changePersons(personsSubmitted);
        catch (Exception e) {
            // Display the cause. In a real system we would try harder to get a user-friendly message.

    Object onSuccess() {
        return page2;

    void onFailure() {
        personsSubmittedFlash = new ArrayList<Person>(personsSubmitted);

    void onRefresh() {
        // By doing nothing the page will be displayed afresh.

    public Person getPerson() {
        return person;

    public void setPerson(Person person) {
        this.person = person;

        if (inFormSubmission) {

    // This encoder is used by our Grid:
    // - during render, to convert each person to an id (Grid then stores the ids in the form, hidden).
    // - during form submission, to convert each id back to a person which it puts in our person field.
    // Grid will overwrite the firstName of the person returned.

    private class PersonEncoder implements ValueEncoder<Person> {

        public String toClient(Person person) {
            Long id = person.getId();
            return id == null ? null : id.toString();

        public Person toValue(String idAsString) {
            Person person = null;

            if (idAsString == null) {
                person = new Person();
            else {
                Long id = new Long(idAsString);
                person = findPerson(id);

                // If person has since been deleted from the DB. Create a skeleton person.
                if (person == null) {
                    person = new Person();

            // Loop will overwrite the firstName of the person returned.
            return person;

        private Person findPerson(Long id) {

            // We could find the person in the database, but it's cheaper to search the list we got in
            // onPrepareForSubmit().

            for (Person personInDB : personsInDB) {
                if (personInDB.getId().equals(id)) {
                    return personInDB;
            return null;


    private class DateEncoder implements ValueEncoder<Date> {

        public String toClient(Date date) {
            long timeMillis = date.getTime();
            return Long.toString(timeMillis);

        public Date toValue(String timeMillisAsString) {
            long timeMillis = Long.parseLong(timeMillisAsString);
            Date date = new Date(timeMillis);
            return date;




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    { min-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+ */ }


// Based on a solution by Stephan Windmüller in http://tapestry.1045711.n5.nabble.com/Cross-Validation-in-dynamic-Forms-td2427275.html 
// and Shing Hing Man in http://tapestry.1045711.n5.nabble.com/how-to-recordError-against-a-form-field-in-a-loop-td5719832.html .

package jumpstart.web.commons;

import org.apache.tapestry5.Field;

 * An immutable copy of a Field. Handy for taking a copy of a Field in a row as a Loop iterates through them.
public class FieldCopy implements Field {
    private String clientId;
    private String controlName;
    private String label;
    private boolean disabled;
    private boolean required;

    public FieldCopy(Field field) {
        clientId = field.getClientId();
        controlName = field.getControlName();
        label = field.getLabel();
        disabled = field.isDisabled();
        required = field.isRequired();

    public String getClientId() {
        return clientId;

    public String getControlName() {
        return controlName;

    public String getLabel() {
        return label;

    public boolean isDisabled() {
        return disabled;

    public boolean isRequired() {
        return required;



package jumpstart.business.domain.person;

import java.io.Serializable;
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;

 * 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)
    private String firstName;

    @Column(length = 10, nullable = false)
    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 EJB3.
    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 http://www.hibernate.org/109.html
    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 http://www.hibernate.org/109.html

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

    public void validate() throws ValidationException {

        // Validate syntax...

        if ((firstName == null) || (firstName.trim().length() == 0)) {
            throw new ValidationException("First name is required.");

        if ((lastName == null) || (lastName.trim().length() == 0)) {
            throw new ValidationException("Last name is required.");

        if (region == null) {
            throw new ValidationException("Region is required.");

        if (startDate == null) {
            throw new ValidationException("Start date is required.");


    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;



package jumpstart.business.domain.person;

public enum Regions {