Ajax EventLinks in a Loop

Highlight zone updates? This shows you which zones are updated by the Ajax response.
Note that it upsets our hover highlighting due to TAP5-2014.

Id First Name Last Name Status Action
2 23iij kumar Start
1 sdf sdfsdff Start
4 test Bandaa Start
3 toto Momma Start
5 xwang Spoon12 Start
References: Loop, Zone, Ajax and Zones, EventLink, Request, @Inject, @InjectComponent.

Home

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

AjaxEventLinksInALoop.tml 

<!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">
<head>
    <link rel="stylesheet" type="text/css" href="${context:css/examples/js.css}"/>
</head>
<body>
    <h1>Ajax EventLinks in a Loop</h1>

    <noscript class="js-required">
        ${message:javascript_required}
    </noscript>     

    <div class="eg">
        <form t:type="form" t:id="preferencesForm">
            Highlight zone updates? 
             <input t:type="checkbox" t:id="highlightZoneUpdates" value="highlightZoneUpdates" onclick="this.form.submit()"/>
            This shows you which zones are updated by the Ajax response. <br/>
            Note that it upsets our hover highlighting due to <a href="https://issues.apache.org/jira/browse/TAP5-2014">TAP5-2014</a>.
        </form><br/>
    
        <table class="grid">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <t:Loop t:source="persons" t:value="person">
                    <tr t:type="Zone" t:id="rowZone" id="prop:currentRowZoneId" class="prop:evenodd.next" t:update="prop:zoneUpdateFunction">
                        <td>${person.id}</td>
                        <td>${person.firstName}</td>
                        <td>${person.lastName}</td>
                        <td>
                            <!-- Using images from http://www.clker.com/clipart-6514.html and http://www.clker.com/clipart-6518.htm -->
                            <t:if test="started">
                                <img src="${context:images/led_circle_green.svg.thumb.png}" style="height: 16px;"/> 
                            </t:if> 
                            <t:if test="!started">
                                <img src="${context:images/led_circle_red.svg.thumb.png}" style="height: 16px;"/> 
                            </t:if>
                        </td>
                        <td>
                            <t:if test="started">
                                <a t:type="eventlink" t:event="stop" t:context="person.id" t:zone="^" href="#">Stop</a>
                            </t:if>
                            <t:if test="!started">
                                <a t:type="eventlink" t:event="start" t:context="person.id" t:zone="^" href="#">Start</a>
                            </t:if>
                        </td>
                    </tr>
                </t:Loop>
            </tbody>
        </table>
     </div>

    References: 
    <a href="http://tapestry.apache.org/5.3.7/apidocs/org/apache/tapestry5/corelib/components/Loop.html">Loop</a>, 
    <a href="http://tapestry.apache.org/5.3.7/apidocs/org/apache/tapestry5/corelib/components/Zone.html">Zone</a>, 
    <a href="http://tapestry.apache.org/ajax-and-zones.html">Ajax and Zones</a>, 
    <a href="http://tapestry.apache.org/5.3.7/apidocs/org/apache/tapestry5/corelib/components/EventLink.html">EventLink</a>, 
    <a href="http://tapestry.apache.org/5.3.7/apidocs/org/apache/tapestry5/services/Request.html">Request</a>, 
    <a href="http://tapestry.apache.org/5.3.7/apidocs/org/apache/tapestry5/ioc/annotations/Inject.html">@Inject</a>, 
    <a href="http://tapestry.apache.org/5.3.7/apidocs/org/apache/tapestry5/annotations/InjectComponent.html">@InjectComponent</a>.<br/><br/> 

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

    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/pages/examples/ajax/AjaxEventLinksInALoop.tml"/>
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/pages/examples/ajax/AjaxEventLinksInALoop.java"/>
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/css/examples/js.css"/>
    <t:sourcecodedisplay src="/web/src/main/java/jumpstart/web/commons/EvenOdd.java"/>
</body>
</html>
AjaxEventLinksInALoop.java 

package jumpstart.web.pages.examples.ajax;

import java.util.List;

import javax.ejb.EJB;

import jumpstart.business.domain.person.Person;
import jumpstart.business.domain.person.iface.IPersonFinderServiceLocal;
import jumpstart.web.commons.EvenOdd;

import org.apache.tapestry5.annotations.InjectComponent;
import org.apache.tapestry5.annotations.Persist;
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;

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

    // Screen fields

    @Property
    private List<Person> persons;

    @Property
    private Person person;

    @Property
    private boolean started;

    @Property
    private EvenOdd evenOdd;

    @Property
    @Persist
    private boolean highlightZoneUpdates;

    // Generally useful bits and pieces

    @EJB
    private IPersonFinderServiceLocal personFinderService;

    @InjectComponent
    private Zone rowZone;

    @Inject
    private Request request;

    @Inject
    private AjaxResponseRenderer ajaxResponseRenderer;

    // The code

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

    void onStart(Long personId) {
        person = personFinderService.findPerson(personId);

        // In a real app we would probably update the person in some way, but we'll just switch a boolean...

        started = true;

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

    void onStop(Long personId) {
        person = personFinderService.findPerson(personId);

        // In a real app we would probably update the person in some way, but we'll just switch a boolean...

        started = false;

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

    public String getCurrentRowZoneId() {
        // The id attribute of a row must be the same every time that row asks for it and unique on the page.
        return "rowZone_" + person.getId();
    }

    public String getZoneUpdateFunction() {
        return highlightZoneUpdates ? "highlight" : "show";
    }
}
js.css 

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 */
form            { margin: 0; }

.eg             { margin: 20px 0; padding: 20px; color: #888; 
                    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; }

/* For javascript examples. */
.js-required    { color: red; display: block; margin-bottom: 14px; }
.js-recommended { color: red; display: block; margin-bottom: 14px; }

.grid           { border-collapse: collapse; border-spacing: 0; border: 1px solid #dddddd; font-size: 13px; }
.grid tr.odd        { background-color: #f8f8f8; }
.grid tr:hover      { background-color: #eeeeee; }
.grid th        { padding: 3px 5px; text-align: left; width: 130px; border: 1px solid #dddddd; 
                    font-weight: normal; background-color: #eeeeee; 
                    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; }
EvenOdd.java 

// Adapted from Tapestry 4's EvenOdd class.

package jumpstart.web.commons;

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

public class EvenOdd {

    private boolean even = true;

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

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

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