Editable Grid (1)

A table built with a Form around a Grid to allow creation of up to 5 persons.
First NameLast NameRegionStart Date
Refresh

Grid doesn't support JSR-303 validation, so we're demonstrating 3 workarounds:

For more flexibility, see the Editable Loop examples.

References: Grid, Forms and Validation.

Home

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" "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_4.xsd" xmlns:p="tapestry:parameter">
<body class="container">
    <h3>Editable Grid (1)</h3>

    A table built with a Form around a Grid to allow creation of up to ${LIST_SIZE} persons.
    
    <div class="eg">
        <t:form t:id="personsCreate">
            <t:errors globalOnly="true"/>
            <t:grid source="persons" row="person" model="model" include="firstname,lastname,region,startdate">
                <p:firstNameCell>
                    <t:textfield t:id="firstName" value="person.firstName" t:validate="maxlength=10"/>
                </p:firstNameCell>
                <p:lastNameCell>
                    <t:textfield t:id="lastName" value="person.lastName" t:validate="maxlength=10"/>
                </p:lastNameCell>
                <p:regionCell>
                    <t:select t:id="region" value="person.region"/>
                </p:regionCell>
                <p:startDateCell>
                    <t:datefield t:id="startDate" class="date" value="person.startDate" format="prop:dateFormat"/>
                </p:startDateCell>
            </t:grid>
            <t:submit value="Save"/>
            <t:eventlink event="refresh" class="btn btn-default">Refresh</t:eventlink>
        </t:form>
    </div>

    <p>Grid doesn't support JSR-303 validation, so we're demonstrating 3 workarounds:</p>
    <ul>
        <li>Client-side, we're validating field lengths with traditional Tapestry validators specified in the template.</li>
        <li>Server-side, we're invoking the validator for each field, which includes JSR-303 validation.</li>
        <li>Server-side, we're checking First Name is not <em>${BAD_NAME}</em>, which is a custom validation.</li>
    </ul> 

    For more flexibility, see the Editable Loop examples.<br/><br/>
    
    References: 
    <a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/Grid.html">Grid</a>,
    <a href="http://tapestry.apache.org/forms-and-validation.html">Forms and Validation</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:tabgroup>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/tables/EditableGrid1.tml"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/tables/EditableGrid1.java"/>
        <t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/editablegrid.css"/>
        <t:sourcecodetab src="/web/src/main/java/jumpstart/web/commons/FieldCopy.java"/>
        <t:sourcecodetab src="/business/src/main/java/jumpstart/business/domain/person/Person.java"/>
        <t:sourcecodetab src="/business/src/main/java/jumpstart/business/domain/person/Regions.java"/>
    </t:tabgroup>
</body>
</html>


package jumpstart.web.pages.examples.tables;

import java.text.DateFormat;
import java.text.Format;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Date;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Locale;
import java.util.Map;
import java.util.Set;

import javax.ejb.EJB;
import javax.validation.ConstraintViolation;
import javax.validation.Validator;
import javax.validation.ValidatorFactory;

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

import org.apache.tapestry5.Field;
import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.InjectComponent;
import org.apache.tapestry5.annotations.InjectPage;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.beaneditor.BeanModel;
import org.apache.tapestry5.corelib.components.DateField;
import org.apache.tapestry5.corelib.components.Form;
import org.apache.tapestry5.corelib.components.Select;
import org.apache.tapestry5.corelib.components.TextField;
import org.apache.tapestry5.ioc.Messages;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.services.BeanModelSource;

@Import(stylesheet = "css/examples/editablegrid.css")
public class EditableGrid1 {

    // Screen fields

    @Property
    private List<Person> persons;

    @Property
    private Person person;

    @Property
    private BeanModel<Person> model;

    @Property
    private final int LIST_SIZE = 5;

    @Property
    private final String BAD_NAME = "Acme";

    // Work fields

    private int rowNum;
    private Map<Integer, FieldCopy> firstNameFieldCopyByRowNum;
    private Map<Integer, FieldCopy> lastNameFieldCopyByRowNum;
    private Map<Integer, FieldCopy> regionFieldCopyByRowNum;
    private Map<Integer, FieldCopy> startDateFieldCopyByRowNum;

    private List<Person> personsToCreate;

    // Other pages

    @InjectPage
    private EditableGrid2 page2;

    // Generally useful bits and pieces

    @InjectComponent("personsCreate")
    private Form form;

    @InjectComponent("firstName")
    private TextField firstNameField;

    @InjectComponent("lastName")
    private TextField lastNameField;

    @InjectComponent("region")
    private Select regionField;

    @InjectComponent("startDate")
    private DateField startDateField;

    @Inject
    private BeanModelSource beanModelSource;

    @Inject
    private Messages messages;

    @EJB
    private IPersonFinderServiceLocal personFinderService;

    @Inject
    private Locale currentLocale;

    @Inject
    private ValidatorFactory validatorFactory;

    // The code

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

    void onPrepareForRender() {
        createPersonsList();

        // If fresh start (ie. not rendering after a redirect), add an example person.

        if (form.isValid()) {
            persons.set(0, new Person("Example", "Person", Regions.EAST_COAST, getTodayDate()));
        }
    }

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

    void onPrepareForSubmit() {
        // Create the same list as was rendered.
        // Loop will write its input field values into the list's objects.

        createPersonsList();

        // Prepare to take a copy of each field.

        rowNum = -1;
        firstNameFieldCopyByRowNum = new HashMap<Integer, FieldCopy>();
        lastNameFieldCopyByRowNum = new HashMap<Integer, FieldCopy>();
        regionFieldCopyByRowNum = new HashMap<Integer, FieldCopy>();
        startDateFieldCopyByRowNum = new HashMap<Integer, FieldCopy>();
    }

    // Form bubbles up the PREPARE event during form render and form submission.

    void onPrepare() {

        // Configure the Grid to be unsortable

        model = beanModelSource.createDisplayModel(Person.class, messages);

        for (String propertyName : model.getPropertyNames()) {
            model.get(propertyName).sortable(false);
        }
    }

    void createPersonsList() {
        persons = new ArrayList<Person>();

        // Populate the list with as many empty objects as you want displayed.

        for (int i = 0; i < LIST_SIZE; i++) {
            persons.add(new Person());
        }
    }

    void onValidateFromFirstName() {
        rowNum++;
        firstNameFieldCopyByRowNum.put(rowNum, new FieldCopy(firstNameField));
    }

    void onValidateFromLastName() {
        lastNameFieldCopyByRowNum.put(rowNum, new FieldCopy(lastNameField));
    }

    void onValidateFromRegion() {
        regionFieldCopyByRowNum.put(rowNum, new FieldCopy(regionField));
    }

    void onValidateFromStartDate() {
        startDateFieldCopyByRowNum.put(rowNum, new FieldCopy(startDateField));
    }

    void onValidateFromPersonsCreate() {

        personsToCreate = new ArrayList<Person>();

        // Error if any person has fields entered but not all of them.

        rowNum = -1;

        for (Person person : persons) {
            rowNum++;

            if (StringUtil.isNotEmpty(person.getFirstName()) || StringUtil.isNotEmpty(person.getLastName())
                    || person.getRegion() != null || person.getStartDate() != null) {

                // Unfortunately, at this point the fields firstNameField, lastNameField, etc. are from the final row of
                // the Grid. Fortunately, we have a copy of the correct fields, so we can record the error with those.

                validate(person, "firstName", firstNameFieldCopyByRowNum.get(rowNum), form);
                validate(person, "lastName", lastNameFieldCopyByRowNum.get(rowNum), form);
                validate(person, "region", regionFieldCopyByRowNum.get(rowNum), form);
                validate(person, "startDate", startDateFieldCopyByRowNum.get(rowNum), form);

                if (person.getFirstName() != null && person.getFirstName().equals(BAD_NAME)) {
                    Field field = firstNameFieldCopyByRowNum.get(rowNum);
                    form.recordError(field, "First name cannot be " + BAD_NAME + ".");
                }

                personsToCreate.add(person);
            }
        }

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

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

    Object onSuccess() {
        page2.set(personsToCreate);
        return page2;
    }

    void onFailure() {
        // Unnecessary method. Loop will carry the submitted input field values through the redirect.
    }

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

    private void validate(Object bean, String propertyName, Field field, Form form) {
        String errorMessage = validate(bean, propertyName, field);

        if (errorMessage != null) {
            form.recordError(field, errorMessage);
        }
    }

    /**
     * Use this method to validate fields that aren't being validated elsewhere, eg. derived fields, or fields that are
     * disabled in screen (because disabled input fields are not submitted or validated). Based on Tapestry's
     * BeanFieldValidator#validate(Object).
     * 
     * @param bean
     * @param propertyName
     * @param field
     * @return Error message string to use in Form#recordError or Tracker#recordError.
     */
    private <T> String validate(T bean, String propertyName, Field field) {
        Validator validator = validatorFactory.getValidator();
        Set<ConstraintViolation<T>> constraintViolations = validator.validateProperty(bean, propertyName);

        if (constraintViolations.isEmpty()) {
            return null;
        }

        final StringBuilder builder = new StringBuilder();

        for (Iterator<ConstraintViolation<T>> iterator = constraintViolations.iterator(); iterator.hasNext();) {
            ConstraintViolation<T> violation = (ConstraintViolation<T>) iterator.next();

            builder.append(String.format("%s %s", field.getLabel(), violation.getMessage()));

            if (iterator.hasNext()) {
                builder.append(", ");
            }
        }

        return builder.toString();
    }

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

    private Date getTodayDate() {
        Calendar now = Calendar.getInstance();
        Calendar today = Calendar.getInstance();
        today.clear();
        today.set(now.get(Calendar.YEAR), now.get(Calendar.MONTH), now.get(Calendar.DAY_OF_MONTH));
        return today.getTime();
    }

}


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

.eg input { 
                width: auto;
}

.eg select { 
                width: auto;
}

.eg [data-grid-property="startDate"] {
                width: 200px;
}


// 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();
    }

    @Override
    public String getClientId() {
        return clientId;
    }

    @Override
    public String getControlName() {
        return controlName;
    }

    @Override
    public String getLabel() {
        return label;
    }

    @Override
    public boolean isDisabled() {
        return disabled;
    }

    @Override
    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;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;


/**
 * The Person entity.
 */
@Entity
@SuppressWarnings("serial")
public class Person implements Serializable {

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

    @Version
    @Column(nullable = false)
    private Integer version;

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

    @Column(length = 10, nullable = false)
    @NotNull
    @Size(max = 10)
    private String lastName;
    
    @Enumerated(EnumType.STRING)
    @NotNull
    private Regions region;

    @Temporal(TemporalType.DATE)
    @NotNull
    private Date startDate;

    public String toString() {
        final String DIVIDER = ", ";
        
        StringBuilder buf = new StringBuilder();
        buf.append(this.getClass().getSimpleName() + ": ");
        buf.append("[");
        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);
        buf.append("]");
        return buf.toString();
    }

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

    public Person(String firstName, String lastName, Regions region, Date startDate) {
        super();
        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
    
    @Override
    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

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

    @PrePersist
    @PreUpdate
    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;
    }

}


package jumpstart.business.domain.person;

public enum Regions {
    EAST_COAST, WEST_COAST;
}