AJAX Components CRUD

package jumpstart.web.pages.together.ajaxcomponentscrud;

import jumpstart.business.domain.person.Person;
import jumpstart.web.components.together.ajaxcomponentscrud.PersonList;

import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.InjectComponent;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.corelib.components.Zone;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.services.Request;
import org.apache.tapestry5.services.ajax.AjaxResponseRenderer;

@Import(stylesheet = "css/together/ajaxcomponentscrud.css")
public class Persons {

    public enum Function {
        CREATE, REVIEW, UPDATE;
    }

    // Screen fields

    @Property
    private Function function;

    @Property
    private Long listPersonId;

    @Property
    private Long editorPersonId;

    // Generally useful bits and pieces

    @InjectComponent
    private PersonList list;

    @InjectComponent
    private Zone editorZone;

    @Inject
    private Request request;

    @Inject
    private AjaxResponseRenderer ajaxResponseRenderer;

    // The code

    void onToCreate() {
        function = Function.CREATE;
        editorPersonId = null;

        list.doChangeOfSelectedPerson();

        if (request.isXHR()) {
            ajaxResponseRenderer.addRender(editorZone);
        }
    }

    void onPersonSelectedFromList(Long oldSelectedPersonId, Long newSelectedPersonId) {
        function = Function.REVIEW;
        editorPersonId = newSelectedPersonId;

        list.doChangeOfSelectedPerson();

        if (request.isXHR()) {
            ajaxResponseRenderer.addRender(editorZone);
        }
    }

    // /////////////////////////////////////////////////////////////////////
    // CREATE
    // /////////////////////////////////////////////////////////////////////

    void onCanceledFromPersonCreate() {
        function = null;
        editorPersonId = null;

        if (request.isXHR()) {
            ajaxResponseRenderer.addRender(editorZone);
        }
    }

    void onCreatedFromPersonCreate(Person person) {
        function = Function.REVIEW;
        editorPersonId = person.getId();
        listPersonId = person.getId();

        list.doChangeOfSelectedPerson();

        if (request.isXHR()) {
            ajaxResponseRenderer.addRender(editorZone);
        }
    }

    // /////////////////////////////////////////////////////////////////////
    // REVIEW
    // /////////////////////////////////////////////////////////////////////

    void onToUpdateFromPersonReview(Long personId) {
        function = Function.UPDATE;
        editorPersonId = personId;

        if (request.isXHR()) {
            ajaxResponseRenderer.addRender(editorZone);
        }
    }

    void onDeletedFromPersonReview(Long personId) {
        function = null;
        editorPersonId = null;
        listPersonId = null;

        list.doChangeOfSelectedPerson();

        if (request.isXHR()) {
            ajaxResponseRenderer.addRender(editorZone);
        }
    }

    // /////////////////////////////////////////////////////////////////////
    // UPDATE
    // /////////////////////////////////////////////////////////////////////

    void onCanceledFromPersonUpdate(Long personId) {
        function = Function.REVIEW;
        editorPersonId = personId;

        if (request.isXHR()) {
            ajaxResponseRenderer.addRender(editorZone);
        }
    }

    void onUpdatedFromPersonUpdate(Person person) {
        function = Function.REVIEW;
        editorPersonId = person.getId();
        listPersonId = person.getId();

        list.doChangeOfSelectedPerson();

        if (request.isXHR()) {
            ajaxResponseRenderer.addRender(editorZone);
        }
    }

    // /////////////////////////////////////////////////////////////////////
    // GETTERS ETC.
    // /////////////////////////////////////////////////////////////////////

    public boolean isFunction(Function function) {
        return this.function == function;
    }
}

.js-required {
                color: red;
                display: block;
                margin-bottom: 14px;
}

.eg {
                margin: 20px 0;
                padding: 20px;
                color: #888;
                border: 1px solid #ddd;
                border-radius: 4px;
                -webkit-border-radius: 4px;
                -mox-border-radius: 4px;
                font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                font-size: 13px;
                font-weight: normal;
                color: #333;
                line-height: 17px;
}

.eg a {
                text-decoration: none;
                color: #3D69B6;
}

.eg a:hover {
                text-decoration: underline;
}

#listAndEditor {
                width: 100%;
                max-width: 800px;
                border: none;
                margin: 10px 0 0;
}

#listSide {
                width: 25%;
                border-right: 3px solid white;
                vertical-align: top;
                padding: 0;
}

#listContainer {
                height: 328px;
                background-color: #eee;
}

#personFilter {
                width: 100%;
                padding: 5px 0 10px;
                text-align: center;
                vertical-align: middle;
                background-color: #3d69b6;
                color: white;
                font-weight: bold;
                border-bottom: 2px solid white;
}

#personFilter input[type="search"] {
                width: 90%;
                margin: 0 5%;
}

#personList {
                background-color: #eee;
}

#personList table {
                margin: 0;
}

#personList table th {
                display: none;
}

#personList table td {
                padding: 0;
                border: 0;
                border-bottom: 2px solid white;
                background-color: #eee;
}

#personList table a {
                width: 100%;
                line-height: 50px;
                display: block;
                text-align: center;
                text-decoration: none;
                color: black;
}

#personList table a:visited {
                color: inherit;
}

#personList table a:hover {
                background: #ccc;
                color: #fff;
                text-decoration: none;
}

#personList table a.active {
                background: #999;
                color: #fff;
}

#personList .pagination {
            margin: 9px 9px 7px;                
}

#noPersons {
                text-align: center;
                padding-top: 20px;
}

#editorSide {
                width: 75%;
                height: 100%;
                vertical-align: top;
                background-color: #eee;
                padding: 20px;
}

#editorSide h1 {
                font-size: large;
                text-align: center;
                margin: 0;
}

#editorSide > dl.well {
                background-color: transparent;
                border: none;
                box-shadow: none;
                margin-bottom: 0;
                padding: 19px;              
}

#editorSide form {
                padding-top: 19px;              
}

#editorSide .buttons {
                text-align: center;
}

.error {
                color: red;
                text-align: center;
                padding-top: 19px;
}

#editorSide form .error {
                padding-top: 0;
                padding-bottom: 19px;
}

<!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">
<t:content>

    <div id="listContainer">

        <div id="personFilter">
            <t:form t:id="filterForm" context="selectedPersonId" async="true">
                <div>
                    Person
                </div>
                <div>
                    <t:textfield t:id="partialName" type="search" placeholder="Filter"/>
                    <t:submit t:id="submitFilter" value="Filter" title="Filter" style="display: none;"/>
                </div>
            </t:form>
        </div>
        
        <t:zone t:id="personsZone" id="personsZone">

            <div id="personList">
                <t:gridwithcontext t:id="list" source="persons" row="person" class="table"
                    exclude="id,version,firstName,lastName,region,startDate" add="name"
                    rowsPerPage="4" pagerPosition="bottom"
                    empty="block:emptyPersons" inplace="true" context="[partialName,selectedPersonId]">
                    <p:nameCell>
                        <t:eventLink event="personSelected" context="[selectedPersonId,person.id]" class="prop:linkCSSClass" async="true">
                            ${person.firstName} ${person.lastName}
                        </t:eventLink>
                    </p:nameCell>
                </t:gridwithcontext>
            </div>
            
            <t:block t:id="emptyPersons">
                <div id="noPersons">
                    (No persons found)
                </div>
            </t:block>

        </t:zone>
    
    </div>

</t:content>
</html>

package jumpstart.web.components.together.ajaxcomponentscrud;

import javax.ejb.EJB;

import jumpstart.business.domain.person.Person;
import jumpstart.business.domain.person.iface.IPersonFinderServiceLocal;
import jumpstart.web.models.together.PersonFilteredDataSource;

import org.apache.tapestry5.ComponentResources;
import org.apache.tapestry5.EventConstants;
import org.apache.tapestry5.annotations.Events;
import org.apache.tapestry5.annotations.InjectComponent;
import org.apache.tapestry5.annotations.Parameter;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.corelib.components.Form;
import org.apache.tapestry5.corelib.components.Submit;
import org.apache.tapestry5.corelib.components.Zone;
import org.apache.tapestry5.grid.GridDataSource;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.services.Request;
import org.apache.tapestry5.services.ajax.AjaxResponseRenderer;
import org.apache.tapestry5.services.ajax.JavaScriptCallback;
import org.apache.tapestry5.services.javascript.JavaScriptSupport;

/**
 * This component will trigger the following events on its container (which in
 * this example is the page):
 * {@link jumpstart.web.components.examples.component.crud.PersonList#PERSON_SELECTED}
 * (Long personId).
 */
// @Events is applied to a component solely to document what events it may
// trigger. It is not checked at runtime.
@Events({ PersonList.PERSON_SELECTED })
public class PersonList {
    public static final String PERSON_SELECTED = "personSelected";

    // Parameters

    @Parameter(required = true)
    @Property
    private Long selectedPersonId;

    // Screen fields

    @Property
    private String partialName;

    @Property
    private Person person;

    // Generally useful bits and pieces

    @EJB
    private IPersonFinderServiceLocal personFinderService;

    @InjectComponent
    private Submit submitFilter;

    @Inject
    private JavaScriptSupport javaScriptSupport;

    @InjectComponent
    private Form filterForm;

    @InjectComponent
    private Zone personsZone;

    @Inject
    private Request request;

    @Inject
    private ComponentResources componentResources;

    @Inject
    private AjaxResponseRenderer ajaxResponseRenderer;

    // The code

    void afterRender() {
        javaScriptSupport
                .require("components/together/ajaxcomponentscrud/person-list")
                .invoke("init").with(submitFilter.getClientId());
    }

    void onPrepareForSubmit(Long selectedPersonId) {
        this.selectedPersonId = selectedPersonId;
    }

    boolean onSuccess() {

        if (request.isXHR()) {
            ajaxResponseRenderer.addRender(personsZone);
        }

        // We don't want the event to bubble up, so we return true to say we've
        // handled it.
        return true;
    }

    boolean onPersonSelected(Long oldSelectedPersonId, Long newSelectedPersonId) {
        this.selectedPersonId = newSelectedPersonId;
        // Let it bubble up.
        return false;
    }

    boolean onPaging(String partialName, Long selectedPersonId) {
        this.partialName = partialName;
        this.selectedPersonId = selectedPersonId;
        return true;
    }

    public void doChangeOfSelectedPerson() {

        if (request.isXHR()) {

            // At this point only the client-side filterForm knows the latest
            // partialName. So we'll refresh the list by
            // asking JavaScript to submit the filterForm.
            // But also at this point the client-side filterForm does not know
            // the latest selectedPersonId. So we'll
            // ask JavaScript to update the filterForm's context before
            // submitting it.

            // Updating the context is a bit messy: client-side, a Form's
            // context is within an ActionLink URI. We'll
            // generate a replacement ActionLink URI and give it to the
            // JavaScript.

            String actionURI = componentResources.createFormEventLink(
                    EventConstants.ACTION, (Object[]) null).toURI();

            String actionWithSelectedPersonURI = componentResources
                    .createFormEventLink(EventConstants.ACTION,
                            new Object[] { selectedPersonId }).toURI();

            String filterFormActionWithSelectedPersonURI = actionWithSelectedPersonURI
                    .replace(actionURI, actionURI + ".filterForm");

            ajaxResponseRenderer
                    .addCallback(makeJavaScriptCallbackToSubmitPersonList(filterFormActionWithSelectedPersonURI));
        }

    }

    private JavaScriptCallback makeJavaScriptCallbackToSubmitPersonList(
            final String updatedFilterFormAction) {

        return new JavaScriptCallback() {
            public void run(JavaScriptSupport javaScriptSupport) {
                javaScriptSupport
                        .require(
                                "components/together/ajaxcomponentscrud/person-list")
                        .invoke("submit").with(updatedFilterFormAction);
            }
        };

    }

    public GridDataSource getPersons() {
        return new PersonFilteredDataSource(personFinderService, partialName);
    }

    public String getLinkCSSClass() {
        if (person != null && person.getId().equals(selectedPersonId)) {
            return "active";
        } else {
            return "";
        }
    }
}

define(["jquery"], function($) {

    var $submit;

    var init = function(submitId) {
        $submit = $("#" + submitId);
    };
    
    var submit = function(updatedFilterFormAction) {
        $form = $submit.closest("form");
        $form.attr("action", updatedFilterFormAction);
        $submit.click();
    }
    
    return {
        init : init,
        submit : submit
    }

});

<!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">
<t:content>

    <h1>Create</h1>
    
    <t:zone t:id="formZone" id="formZone">
        <t:form t:id="form" class="form-horizontal" validate="person" async="true">

            <t:errors globalOnly="true"/>
            
            <t:together.smallercomponentscrud.PersonEditor person="person"/>
    
            <div class="form-group">
                <div class="col-sm-4 col-sm-offset-4">
                    <t:submit value="Save" />
                    <t:eventlink event="cancel" class="btn btn-default" async="true">Cancel</t:eventlink>
                </div>
            </div>
        </t:form>
    </t:zone>

</t:content>
</html>

package jumpstart.web.components.together.ajaxcomponentscrud;

import javax.ejb.EJB;

import jumpstart.business.domain.person.Person;
import jumpstart.business.domain.person.iface.IPersonFinderServiceLocal;
import jumpstart.business.domain.person.iface.IPersonManagerServiceLocal;
import jumpstart.util.ExceptionUtil;

import org.apache.tapestry5.ComponentResources;
import org.apache.tapestry5.EventConstants;
import org.apache.tapestry5.annotations.Events;
import org.apache.tapestry5.annotations.InjectComponent;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.corelib.components.Form;
import org.apache.tapestry5.corelib.components.Zone;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.services.Request;
import org.apache.tapestry5.services.ajax.AjaxResponseRenderer;

/**
 * This component will trigger the following events on its container (which in this example is the page):
 * {@link PersonCreate#CANCELED}, {@link PersonCreate#CREATED}(Long personId).
 */
// @Events is applied to a component solely to document what events it may
// trigger. It is not checked at runtime.
@Events({ EventConstants.CANCELED, PersonCreate.CREATED })
public class PersonCreate {
    public static final String CANCELED = "canceled";
    public static final String CREATED = "created";

    private final String demoModeStr = System.getProperty("jumpstart.demo-mode");

    // Parameters

    // Screen fields

    @Property
    private Person person;

    // Generally useful bits and pieces

    @EJB
    private IPersonFinderServiceLocal personFinderService;

    @EJB
    private IPersonManagerServiceLocal personManagerService;

    @InjectComponent
    private Form form;

    @InjectComponent
    private Zone formZone;

    @Inject
    private Request request;

    @Inject
    private ComponentResources componentResources;

    @Inject
    private AjaxResponseRenderer ajaxResponseRenderer;

    // The code

    boolean onCancel() {
        componentResources.triggerEvent(CANCELED, new Object[] {}, null);
        // We don't want the original event to bubble up, so we return true to
        // say we've handled it.
        return true;
    }

    void onPrepareForRender() throws Exception {

        // If fresh start, make sure there's a Person object available.

        if (form.isValid()) {
            person = new Person();
        }
    }

    void onPrepareForSubmit() throws Exception {
        // Instantiate a Person for the form data to overlay.
        person = new Person();
    }

    boolean onValidateFromForm() {

        if (demoModeStr != null && demoModeStr.equals("true")) {
            form.recordError("Sorry, but Create is not allowed in Demo mode.");
        }

        if (form.getHasErrors()) {
            return true;
        }

        try {
            person = personManagerService.createPerson(person);
        }
        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));
        }

        return true;
    }

    boolean onSuccess() {
        // We want to tell our containing page explicitly what person we've created, so we trigger a new event with a
        // parameter. It will bubble up because we don't have a handler method for it.
        componentResources.triggerEvent(CREATED, new Object[] { person }, null);

        // We don't want the original event to bubble up, so we return true to say we've handled it.
        return true;
    }

    boolean onFailure() {

        if (request.isXHR()) {
            ajaxResponseRenderer.addRender(formZone);
        }

        // We don't want the event to bubble up, so we return true to say we've handled it.
        return true;
    }
}

<!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">
<t:content>

    <h1>Review</h1>
    
    <t:form t:id="form" class="form-horizontal">

        <t:if test="person">
            <t:zone t:id="messageZone" id="messageZone">
                <div t:type="if" t:test="deleteMessage" class="error">
                    ${deleteMessage}
                </div>
            </t:zone> 
            
            <t:together.smallercomponentscrud.PersonEditor person="person" disabled="true"/>
    
            <div class="buttons">
                <t:eventlink event="toUpdate" context="person.id" async="true">Update...</t:eventlink>
                <t:eventlink event="delete" context="[person.id,person.version]" async="true" 
                    t:mixins="Confirm" Confirm.message="Delete ${person.firstName} ${person.lastName}?">Delete...</t:eventlink>
            </div>
        </t:if>
    
        <t:if test="!person">
            Person ${personId} does not exist.<br/><br/>
        </t:if>
        
    </t:form>
        
</t:content>
</html>

package jumpstart.web.components.together.ajaxcomponentscrud;

import javax.ejb.EJB;

import jumpstart.business.domain.person.Person;
import jumpstart.business.domain.person.iface.IPersonFinderServiceLocal;
import jumpstart.business.domain.person.iface.IPersonManagerServiceLocal;
import jumpstart.util.ExceptionUtil;

import org.apache.tapestry5.ComponentResources;
import org.apache.tapestry5.annotations.Events;
import org.apache.tapestry5.annotations.InjectComponent;
import org.apache.tapestry5.annotations.Parameter;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.corelib.components.Zone;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.services.Request;
import org.apache.tapestry5.services.ajax.AjaxResponseRenderer;

/**
 * This component will trigger the following events on its container (which in this example is the page):
 * {@link PersonReview#TO_UPDATE}(Long personId), {@link PersonReview#DELETED}(Long personId).
 */
// @Events is applied to a component solely to document what events it may
// trigger. It is not checked at runtime.
@Events({ PersonReview.TO_UPDATE, PersonReview.DELETED })
public class PersonReview {
    public static final String TO_UPDATE = "toUpdate";
    public static final String DELETED = "deleted";

    private final String demoModeStr = System.getProperty("jumpstart.demo-mode");

    // Parameters

    @Parameter(required = true)
    @Property
    private Long personId;

    // Screen fields

    @Property
    private Person person;

    @Property
    private String deleteMessage;

    // Generally useful bits and pieces

    @EJB
    private IPersonFinderServiceLocal personFinderService;

    @EJB
    private IPersonManagerServiceLocal personManagerService;

    @InjectComponent
    private Zone messageZone;

    @Inject
    private Request request;

    @Inject
    private ComponentResources componentResources;

    @Inject
    private AjaxResponseRenderer ajaxResponseRenderer;

    // The code

    void setupRender() {
        deleteMessage = null;

        if (personId == null) {
            person = null;
            // Handle null person in the template.
        }
        else {
            if (person == null) {
                person = personFinderService.findPerson(personId);
                // Handle null person in the template.
            }
        }

    }

    boolean onToUpdate(Long personId) {
        // Return false, which means we haven't handled the event so bubble it
        // up.
        // This method is here solely as documentation, because without this
        // method the event would bubble up anyway.
        return false;
    }

    boolean onDelete(Long personId, Integer personVersion) {
        this.personId = personId;

        if (demoModeStr != null && demoModeStr.equals("true")) {
            deleteMessage = "Sorry, but Delete is not allowed in Demo mode.";

            if (request.isXHR()) {
                ajaxResponseRenderer.addRender(messageZone);
            }

            // We don't want the event to bubble up, so we return true to say
            // we've handled it.
            return true;
        }

        try {
            personManagerService.deletePerson(personId, personVersion);
        }
        catch (Exception e) {
            // Display the cause. In a real system we would try harder to get a
            // user-friendly message.
            deleteMessage = ExceptionUtil.getRootCauseMessage(e);

            if (request.isXHR()) {
                ajaxResponseRenderer.addRender(messageZone);
            }

            // We don't want the event to bubble up, so we return true to say
            // we've handled it.
            return true;
        }

        // Trigger new event which will bubble up.
        componentResources.triggerEvent(DELETED, new Object[] { personId }, null);
        // We don't want the original event to bubble up, so we return true to
        // say we've handled it.
        return true;
    }

}

<!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">
<t:content>

    <h1>Update</h1>
    
    <t:zone t:id="formZone" id="formZone">
        <t:form t:id="form" class="form-horizontal" validate="person" context="personId" async="true">
        
            <t:errors globalOnly="true"/>
        
            <t:if test="person">
                <!-- If optimistic locking is not needed then comment out this next line. It works because Hidden fields are part of the submit. -->
                <t:hidden value="person.version"/>
                
                <t:together.smallercomponentscrud.PersonEditor person="person"/>
    
                <div class="form-group">
                    <div class="col-sm-4 col-sm-offset-4">
                        <t:submit value="Save" />
                        <t:eventlink event="cancel" context="personId" class="btn btn-default" async="true">Cancel</t:eventlink>
                    </div>
                </div>
            </t:if>
    
            <t:if test="!person">
                Person ${personId} does not exist.<br/><br/>
            </t:if>
        </t:form>
    </t:zone>
                
</t:content>
</html>

package jumpstart.web.components.together.ajaxcomponentscrud;

import javax.ejb.EJB;

import jumpstart.business.domain.person.Person;
import jumpstart.business.domain.person.iface.IPersonFinderServiceLocal;
import jumpstart.business.domain.person.iface.IPersonManagerServiceLocal;
import jumpstart.util.ExceptionUtil;

import org.apache.tapestry5.ComponentResources;
import org.apache.tapestry5.annotations.Events;
import org.apache.tapestry5.annotations.InjectComponent;
import org.apache.tapestry5.annotations.Parameter;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.corelib.components.Form;
import org.apache.tapestry5.corelib.components.Zone;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.services.Request;
import org.apache.tapestry5.services.ajax.AjaxResponseRenderer;

/**
 * This component will trigger the following events on its container (which in this example is the page):
 * {@link PersonUpdate#CANCELED}(Long personId), {@link PersonUpdate#UPDATED}(Long personId).
 */
// @Events is applied to a component solely to document what events it may
// trigger. It is not checked at runtime.
@Events({ PersonUpdate.CANCELED, PersonUpdate.UPDATED })
public class PersonUpdate {
    public static final String CANCELED = "canceled";
    public static final String UPDATED = "updated";

    // Parameters

    @Parameter(required = true)
    @Property
    private Long personId;

    // Screen fields

    @Property
    private Person person;

    // Generally useful bits and pieces

    @EJB
    private IPersonFinderServiceLocal personFinderService;

    @EJB
    private IPersonManagerServiceLocal personManagerService;

    @InjectComponent
    private Form form;

    @InjectComponent
    private Zone formZone;

    @Inject
    private Request request;

    @Inject
    private ComponentResources componentResources;

    @Inject
    private AjaxResponseRenderer ajaxResponseRenderer;

    // The code

    boolean onCancel(Long personId) {
        this.personId = personId;

        componentResources.triggerEvent(CANCELED, new Object[] { personId }, null);
        // We don't want the event to bubble up, so we return true to say we've
        // handled it.
        return true;
    }

    void onPrepareForRender() {

        // If fresh start, make sure there's a Person object available.

        if (form.isValid()) {
            person = personFinderService.findPerson(personId);
            // Handle null person in the template.
        }
    }

    void onPrepareForSubmit(Long personId) {
        this.personId = personId;

        // Get objects for the form fields to overlay.
        person = personFinderService.findPerson(personId);

        if (person == null) {
            form.recordError("Person has been deleted by another process.");
            // Instantiate an empty person to avoid NPE in the Form.
            person = new Person();
        }
    }

    boolean onValidateFromForm() {

        if (form.getHasErrors()) {
            return true;
        }

        try {
            person = personManagerService.changePerson(person);
        }
        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));
        }

        return true;
    }

    boolean onSuccess() {
        // We want to tell our containing page explicitly what person we've updated, so we trigger a new event with a
        // parameter. It will bubble up because we don't have a handler method for it.
        componentResources.triggerEvent(UPDATED, new Object[] { person }, null);

        // We don't want the original event to bubble up, so we return true to
        // say we've handled it.
        return true;
    }

    boolean onFailure() {

        if (request.isXHR()) {
            ajaxResponseRenderer.addRender(formZone);
        }

        // We don't want the event to bubble up, so we return true to say we've
        // handled it.
        return true;
    }
}

<!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">
<t:content>

    <div class="form-group">
        <t:label for="firstName" class="col-sm-4"/>
        <div class="col-sm-4">
            <t:textfield t:id="firstName" value="person.firstName" disabled="disabled"/>
        </div>
        <div class="col-sm-4">
            <p class="form-control-static">(required)</p>
        </div>
    </div>
    <div class="form-group">
        <t:label for="lastName" class="col-sm-4"/>
        <div class="col-sm-4">
            <t:textfield t:id="lastName" value="person.lastName" disabled="disabled"/>
        </div>
        <div class="col-sm-4">
            <p class="form-control-static">(required)</p>
        </div>
    </div>
    <div class="form-group">
        <t:label for="region" class="col-sm-4"/>
        <div class="col-sm-4">
            <t:select t:id="region" value="person.region" blankOption="always" disabled="disabled"/>
        </div>
        <div class="col-sm-4">
            <p class="form-control-static">(required)</p>
        </div>
    </div>
    <div class="form-group">
        <t:label for="startDate" class="col-sm-4"/>
        <div class="col-sm-4">
            <t:datefield t:id="startDate" value="person.startDate" format="prop:dateFormat" disabled="disabled"/>
        </div>
        <div class="col-sm-4">
            <p class="form-control-static">(required, ${datePattern})</p>
        </div>
    </div>

</t:content>
</html>

region-blankLabel=Choose...

## These enum conversions could be moved to the central message properties file called app.properties
## 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.components.together.ajaxcomponentscrud;

import java.text.Format;
import java.text.SimpleDateFormat;

import jumpstart.business.domain.person.Person;
import jumpstart.business.domain.person.Regions;

import org.apache.tapestry5.ComponentAction;
import org.apache.tapestry5.ValidationTracker;
import org.apache.tapestry5.annotations.Environmental;
import org.apache.tapestry5.annotations.InjectComponent;
import org.apache.tapestry5.annotations.Parameter;
import org.apache.tapestry5.annotations.Property;
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.FormSupport;

public class PersonEditor {

    // Parameters

    @Parameter(required = true, allowNull = false)
    @Property
    private Person person;

    @Parameter(value = "false")
    @Property
    private boolean disabled;

    // Generally useful bits and pieces

    @InjectComponent("firstName")
    private TextField firstNameField;
    
    @Inject
    private Messages messages;

    @Environmental
    private FormSupport formSupport;

    @Environmental
    private ValidationTracker tracker;

    private static final ProcessSubmission PROCESS_SUBMISSION = new ProcessSubmission();

    // The code

    void afterRender() {

        // If we are inside a form, ask FormSupport to store PROCESS_SUBMISSION in its list of actions to do on submit.
        // If I contain other components, their actions will already be in the list, before PROCESS_SUBMISSION. That is
        // because this method, afterRender(), is late in the sequence. This guarantees PROCESS_SUBMISSION will be
        // executed on submit AFTER the components I contain are processed (which includes their validation).

        if (formSupport != null) {
            formSupport.store(this, PROCESS_SUBMISSION);
        }

    }

    private static class ProcessSubmission implements ComponentAction<PersonEditor> {
        private static final long serialVersionUID = 1L;

        public void execute(PersonEditor component) {
            component.processSubmission();
        }

        @Override
        public String toString() {
            return this.getClass().getSimpleName() + ".ProcessSubmission";
        }
    };

    private void processSubmission() {

        // Validate. We ensured in afterRender() that the components I contain have already been validated.

        if (person.getFirstName() != null && person.getFirstName().equals("Acme")) {
            tracker.recordError(firstNameField, firstNameField.getLabel() + " must not be Acme.");
        }

        if (person.getId() != null && person.getId() == 2 && !person.getFirstName().equals("Mary")) {
            tracker.recordError(firstNameField, firstNameField.getLabel() + " for this person must be Mary.");
        }

    }

    // ////////////////////////////////////////////////////////////////////////
    // GETTERS ETC.
    // ////////////////////////////////////////////////////////////////////////

    public String getPersonRegion() {
        return messages.get(Regions.class.getSimpleName() + "." + person.getRegion().name());
    }

    public String getDatePattern() {
        return "dd/MM/yyyy";
    }

    public Format getDateFormat() {
        return new SimpleDateFormat(getDatePattern());
    }
}

package jumpstart.web.models.together;

import java.util.List;

import jumpstart.business.domain.person.Person;
import jumpstart.business.domain.person.iface.IPersonFinderServiceRemote;

import org.apache.tapestry5.grid.GridDataSource;
import org.apache.tapestry5.grid.SortConstraint;

public class PersonFilteredDataSource implements GridDataSource {
    private IPersonFinderServiceRemote personFinderService;
    private String partialName;

    private int startIndex;
    private List<Person> preparedResults;

    public PersonFilteredDataSource(IPersonFinderServiceRemote personFinderService, String partialName) {
        this.personFinderService = personFinderService;
        this.partialName = partialName;
    }

    @Override
    public int getAvailableRows() {
        return (int) personFinderService.countPersons(partialName);
    }

    @Override
    public void prepare(final int startIndex, final int endIndex, final List<SortConstraint> sortConstraints) {
        preparedResults = personFinderService.findPersons(partialName, startIndex, endIndex - startIndex + 1);
        this.startIndex = startIndex;
    }

    @Override
    public Object getRowValue(final int index) {
        return preparedResults.get(index - startIndex);
    }

    @Override
    public Class<Person> getRowType() {
        return Person.class;
    }

}

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;
}

<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
<t:content>
    <t:grid t:id="grid">
        <t:body/>
    </t:grid>
</t:content>
</html>

package jumpstart.web.components;

import javax.inject.Inject;

import org.apache.tapestry5.ClientElement;
import org.apache.tapestry5.EventContext;
import org.apache.tapestry5.MarkupWriter;
import org.apache.tapestry5.annotations.Component;
import org.apache.tapestry5.annotations.Events;
import org.apache.tapestry5.annotations.Parameter;
import org.apache.tapestry5.annotations.SupportsInformalParameters;
import org.apache.tapestry5.beaneditor.BeanModel;
import org.apache.tapestry5.corelib.components.Grid;
import org.apache.tapestry5.grid.GridDataSource;
import org.apache.tapestry5.grid.GridModel;
import org.apache.tapestry5.grid.GridSortModel;
import org.apache.tapestry5.internal.EmptyEventContext;
import org.apache.tapestry5.internal.services.ArrayEventContext;
import org.apache.tapestry5.ioc.services.TypeCoercer;
import org.apache.tapestry5.services.Environment;

/**
 * Behaves mostly the same as Grid but this component also accepts a context parameter and our modified GridPager 
 * copies that context into the links that it renders.
 */
@SupportsInformalParameters
@Events({ GridWithContext.PAGING })
public class GridWithContext implements ClientElement, GridModel {

    public static final String PAGING = "Paging";

    /**
     * This list of values will be converted into strings and included in our modified GridPager's pager links. The
     * strings will be coerced back to whatever their values are and made available in the PAGING event bubbled up by
     * our modified GridPager.
     */
    @Parameter
    private Object[] context;

    // Generally useful bits and pieces

    @Component(publishParameters = "add, class, columnIndex, empty, encoder, exclude, inPlace, include, lean, model, overrides, pagerPosition, reorder, row, rowClass, rowIndex, rowsPerPage, sortModel, source, volatile", inheritInformalParameters = true)
    private Grid grid;

    @Inject
    private Environment environment;

    @Inject
    private TypeCoercer typeCoercer;

    // The code

    /**
     * This beginRender() will execute before our inner Grid's beginRender(). We'll push our context onto the
     * Environment stack for use by our modified GridPager.
     */
    void beginRender(MarkupWriter writer) {
        EventContext gridContext = context == null ? new EmptyEventContext() : new ArrayEventContext(typeCoercer,
                context);
        environment.push(EventContext.class, gridContext);
    }

    /**
     * This afterRender() will execute after our inner Grid's beginRender(). Let's undo what we did in beforeRender().
     */
    void afterRender(MarkupWriter writer) {
        environment.pop(EventContext.class);
    }

    @Override
    public String getClientId() {
        return grid.getClientId();
    }

    @Override
    public BeanModel<?> getDataModel() {
        return grid.getDataModel();
    }

    @Override
    public GridDataSource getDataSource() {
        return grid.getDataSource();
    }

    @Override
    public GridSortModel getSortModel() {
        return grid.getSortModel();
    }

}

// Copyright 2007, 2008, 2009, 2010, 2011, 2012 The Apache Software Foundation
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

package org.apache.tapestry5.corelib.components;

import java.util.ArrayList;
import java.util.List;

import jumpstart.web.components.GridWithContext;

import org.apache.tapestry5.BindingConstants;
import org.apache.tapestry5.ComponentParameterConstants;
import org.apache.tapestry5.ComponentResources;
import org.apache.tapestry5.EventConstants;
import org.apache.tapestry5.EventContext;
import org.apache.tapestry5.Link;
import org.apache.tapestry5.MarkupWriter;
import org.apache.tapestry5.annotations.Environmental;
import org.apache.tapestry5.annotations.Events;
import org.apache.tapestry5.annotations.Parameter;
import org.apache.tapestry5.dom.Element;
import org.apache.tapestry5.grid.GridDataSource;
import org.apache.tapestry5.internal.InternalConstants;
import org.apache.tapestry5.ioc.Messages;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.ioc.util.UnknownValueException;
import org.apache.tapestry5.services.Request;

/**
 * Generates a series of links used to jump to a particular page index within the overall data set.
 * 
 * @tapestrydoc
 */
// START OF MODIFIED SOURCE.
@Events({ GridWithContext.PAGING, InternalConstants.GRID_INPLACE_UPDATE + " (internal event)" })
// END OF MODIFIED SOURCE.
public class GridPager {
    /**
     * The source of the data displayed by the grid (this is used to determine {@link GridDataSource#getAvailableRows()
     * how many rows are available}, which in turn determines the page count).
     */
    @Parameter(required = true)
    private GridDataSource source;

    /**
     * The number of rows displayed per page.
     */
    @Parameter(required = true)
    private int rowsPerPage;

    /**
     * The current page number (indexed from 1).
     */
    @Parameter(required = true)
    private int currentPage;

    /**
     * Number of pages before and after the current page in the range. The pager always displays links for 2 * range + 1
     * pages, unless that's more than the total number of available pages.
     */
    @Parameter(BindingConstants.SYMBOL + ":" + ComponentParameterConstants.GRIDPAGER_PAGE_RANGE)
    private int range;

    /**
     * If not null, then each link is output as a link to update the specified zone.
     */
    @Parameter
    private String zone;

    private int lastIndex;

    private int maxPages;

    @Inject
    private ComponentResources resources;

    @Inject
    private Messages messages;

    @Inject
    private Request request;

    @Environmental
    private EventContext gridContext;

    private List<Object> actionContextWithoutPageNum;

    void beginRender(MarkupWriter writer) {
        int availableRows = source.getAvailableRows();

        maxPages = ((availableRows - 1) / rowsPerPage) + 1;

        if (maxPages < 2)
            return;

        writer.element("ul", "class", "pagination");

        if (zone != null) {
            writer.attributes("data-inplace-grid-links", true);
        }

        lastIndex = 0;

        for (int i = 1; i <= 2; i++)
            writePageLink(writer, i);

        int low = currentPage - range;
        int high = currentPage + range;

        if (low < 1) {
            low = 1;
            high = 2 * range + 1;
        }
        else {
            if (high > maxPages) {
                high = maxPages;
                low = high - 2 * range;
            }
        }

        for (int i = low; i <= high; i++)
            writePageLink(writer, i);

        for (int i = maxPages - 1; i <= maxPages; i++)
            writePageLink(writer, i);

        writer.end(); // ul
    }

    private void writePageLink(MarkupWriter writer, int pageIndex) {
        if (pageIndex < 1 || pageIndex > maxPages)
            return;

        if (pageIndex <= lastIndex)
            return;

        if (pageIndex != lastIndex + 1) {
            writer.element("li", "class", "disabled");
            writer.element("a", "href", "#");
            writer.write(" ... ");
            writer.end();
            writer.end();
        }

        lastIndex = pageIndex;

        if (pageIndex == currentPage) {
            writer.element("li", "class", "active");
            writer.element("a", "href", "#");
            writer.write(Integer.toString(pageIndex));
            writer.end();
            writer.end();
            return;
        }

        writer.element("li");

        // START OF MODIFIED SOURCE.

        // Create link with page index and the request's context.

        List<Object> newContext = new ArrayList<>();
        newContext.add(new Integer(pageIndex));

        // If actionContextWithoutPageNum is not null, then we're rendering an AJAX response to an action. Use it.

        if (actionContextWithoutPageNum != null) {
            newContext.addAll(actionContextWithoutPageNum);
        }

        // Else, use the context put into the Environment by Grid.

        else {
            try {
                for (int i = 0; i < gridContext.getCount(); i++) {
                    newContext.add(gridContext.get(Object.class, i));
                }
            }
            catch (UnknownValueException e) {
                // This occurs when enclosed by Grid, not GridWithContext. Ignore it.
            }
        }

        Link link = resources.createEventLink(EventConstants.ACTION, newContext.toArray());

        // END OF MODIFIED SOURCE.

        if (zone != null) {
            link.addParameter("t:inplace", "true");
        }

        Element element = writer.element("a", "href", link, "data-update-zone", zone, "title",
                messages.format("core-goto-page", pageIndex));

        writer.write(Integer.toString(pageIndex));

        writer.end();

        writer.end(); // li
    }

    /**
     * Repaging event handler.
     */
    boolean onAction(EventContext actionContext) {
        // TODO: Validate newPage in range

        // START OF MODIFIED SOURCE.

        currentPage = actionContext.get(Integer.class, 0);

        actionContextWithoutPageNum = new ArrayList<>();

        for (int i = 1; i < actionContext.getCount(); i++) {
            actionContextWithoutPageNum.add(actionContext.get(Object.class, i));
        }

        resources.triggerEvent(GridWithContext.PAGING, actionContextWithoutPageNum.toArray(), null);

        // END OF MODIFIED SOURCE.

        if (request.isXHR()) {
            resources.triggerEvent(InternalConstants.GRID_INPLACE_UPDATE, null, null);
        }

        return true; // abort event
    }
}