tapestry using ajax
请参看tapestry的官方文档，这里只是总结性的备忘录。
http://tapestry.apache.org/ajax-and-zones.html
http://www.w3cschool.cc/jquery/jquery-dom-set.html
相关内容：
t:zone组件: 决定ajax请求完成后，更新的区域。
触发ajax请求的方式：
1) 通过组件的的事件函数，返回局部更新的内容。
定义t:zone组件，组件参数 id 和 t:id
在下面的4个组件的事件处理方法中，返回更新的内容。component中添加zone属性，指向定义的t:zone组件。
EventLink ActionLink Select Form
page.tml
//------------------------
<t:actionlink t:id="someLink" zone="myzone">update</t:actionlink>
<t:zone t:id="myZone" id="myzone">
The current time is ${currentTime}
</t:zone>
page.java
//------------------------
Object onActionFromSomeLink() {
return request.isXHR() ? myZone.getBody() : null;
}
可以一次更新多个zone （区域的内容）
@InjectComponent
private Zone userInput;
@InjectComponent
private Zone helpPanel;
@Inject
private AjaxResponseRenderer ajaxResponseRenderer;
void onActionFromRegister()
{
ajaxResponseRenderer.addRender("userInput",
userInput).addRender("helpPanel", helpPanel);
}
2) 通过调用javascript （jquery）的ajax方式来进行调用。（和其他框架一样，内容以后补充）
通过动态创建EventLink, 通过jquery的ajax调用，实现局部刷新功能。
1）META-INF/modules/ajaxjson.js (一定要注意路径，当初放在了assets/modules下面了，找不到js文件）
define(['jquery'], function($) {
return {
update : function(url) {
$('#update').click(function() {
$.getJSON(url,function(result){
$("#address").text(result.address);
$("#id").text(result.id);
$("#name").text(result.name);
});
});
}
};
});
2）AjaxJson.java
public class AjaxJson {
@Property
@Persist
private int count;
@Property
private int id;
@Property
private String name;
@Property
private String address;
@Property
private Date now;
@Inject
private ComponentResources resources;
@Inject
private JavaScriptSupport javaScriptSupport;
void setupRender() {
now = new Date();
id = 42;
name = "xxxxx";
address = "yyyyy";
}
@Inject
private Logger log;
@AfterRender
void afterRender() {
Link link = resources.createEventLink("AjaxJson");
javaScriptSupport.require("ajaxjson").invoke("update").with(link.toAbsoluteURI());
}
JSONObject onAjaxJson() {
count++;
JSONObject myData = new JSONObject();
myData.put("id", 100);
myData.put("name", "lichunhua" + count);
myData.put("address", "dalian" + count);
return myData;
}
}
3) AjaxJson.tml
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
xmlns:p="tapestry:parameter">
<table>
<tr>
<td>id</td>
<td id="id">${id}</td>
</tr>
<tr>
<td>name</td>
<td id="name">${name}</td>
</tr>
<tr>
<td>address</td>
<td id="address">${address}</td>
</tr>
</table>
<hr />
${now}
<input type="button" id="update" value="AjaxJson" />
</html>
3) eventlink返回block，实现局部更新的ajax功能
3.1）AjaxBlock.tml
<html
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
xmlns:p="tapestry:parameter">
<t:Zone t:id="br" id="br" />
<t:block id="detail">
ajax appliction from return Block ${count}
</t:block>
<hr />${now}
<t:EventLink event="Ajax" zone="br">AjaxReturnBlock</t:EventLink>
</html>
public class AjaxBlock {
@Inject
private Block detail;
@Property
@Persist
private int count;
@Property
private Date now;
@Inject
private ComponentResources componentResource;
void setupRender() {
now = new Date();
}
Block onAjax() {
count++;
return detail;
}
}