Id | First Name | Last Name | Status | Action |
---|---|---|---|---|
3 | 11444iii | km | Start | |
5 | asd | De scoop | Start | |
1 | Lost | eeeeasdas | Start | |
2 | Mary | dgzfgdf | Start | |
4 | yuno | 3clover | Start |
<!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
We use a "strict" DTD to make IE follow the alignment rules. -->
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd">
<body class="container">
<h3>Ajax EventLinks in a Loop</h3>
<noscript class="js-required">
${message:javascript_required}
</noscript>
<div class="eg">
<table class="table table-striped table-hover table-condensed">
<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">
<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="${asset:images/led_circle_green.svg.thumb.png}" style="height: 16px;"/>
</t:if>
<t:if test="!started">
<img src="${asset:images/led_circle_red.svg.thumb.png}" style="height: 16px;"/>
</t:if>
</td>
<td>
<t:if test="started">
<t:eventlink event="stop" context="person.id" async="true">Stop</t:eventlink>
</t:if>
<t:if test="!started">
<t:eventlink event="start" context="person.id" async="true">Start</t:eventlink>
</t:if>
</td>
</tr>
</t:loop>
</tbody>
</table>
</div>
References:
<a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/corelib/components/Loop.html">Loop</a>,
<a href="http://tapestry.apache.org/5.4/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.4/apidocs/org/apache/tapestry5/corelib/components/EventLink.html">EventLink</a>,
<a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/Request.html">Request</a>,
<a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/services/ajax/AjaxResponseRenderer.html">AjaxResponseRenderer</a>,
<a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/ioc/annotations/Inject.html">@Inject</a>,
<a href="http://tapestry.apache.org/5.4/apidocs/org/apache/tapestry5/annotations/InjectComponent.html">@InjectComponent</a>,
<a href="http://tapestry.apache.org/5.4/coffeescript/zone.html">t5/core/zone</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/ajax/AjaxEventLinksInALoop.tml"/>
<t:sourcecodetab src="/web/src/main/java/jumpstart/web/pages/examples/ajax/AjaxEventLinksInALoop.java"/>
<t:sourcecodetab src="/web/src/main/resources/META-INF/assets/css/examples/js.css"/>
</t:tabgroup>
</body>
</html>
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 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/examples/js.css")
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;
// 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;
}
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();
}
}
.eg {
margin: 20px 0;
padding: 14px;
color: #888;
border: 1px solid #ddd;
border-radius: 6px;
-webkit-border-radius: 6px;
-mox-border-radius: 6px;
}
.js-required {
color: red;
display: block;
margin-bottom: 14px;
}
.js-recommended {
color: red;
display: block;
margin-bottom: 14px;
}