Tapestry 集成 Ajax,作者：李金峰,,修改web.xml,新建一个动态Web工程“AjaxAndTypestry”，修改web.xml成如下： Spring tapestry.app-package com.li contextConfigLocation /WEB-INF/spring-service.xml app org.apache.tapestry5.spring.TapestrySpringFilter app /* ,,添加spring-service.xml 和jar文件,在WEB-INF下添加spring-service.xml 在lib下添加jar包：,,建实体类Entry.java,在com.li.pojo下建立Entry.java public class Entry private String name; private String address; public Entry() public Entry(String name, String address) this.name = name; this.address = address; public String getName() return name; ... ...,,Address.java构造函数中添加通讯录,在com.li.pojo 中，建立类Address.java public class Address public List entries; /** * 添加通讯录。
*/ public Address() entries = new ArrayList(); entries.add(new Entry(莫言,山东.高密)); entries.add(new Entry(李逵, 山东.梁山)); entries.add(new Entry(李清照, 山东.济南)); entries.add(new Entry(李金峰, 华夏.蓉城)); entries.add(new Entry(张学友, 中国.香港)); entries.add(new Entry(张飞, 河北.涿郡)); ... ... ,,Address.selectNamesByKey(key),selectNamesByKey返回相同开头的人名列表 public class Address ... ... /** * 返回形同开头的名字列表 * param key 人名开头 * return 人名列表 */ public List selectNamesByKey(String key) List matches = new ArrayList(); for (Iterator iter = entries.iterator(); iter.hasNext();) Entry entry = iter.next(); if (entry.getName().toLowerCase().startsWith(key.toLowerCase())) matches.add(entry.getName()); return matches; ... ... ,,Address.selectByName(name),selectByName返回人名对应的实体 public class Address ... ... /** * 返回人名对应的实体 * param name 人名 * return 实体 */ public Entry selectByName(String name) for (Iterator iter = entries.iterator(); iter.hasNext();) Entry entry = iter.next(); if (entry.getName().equals(name)) return entry; return null; ... ... ,,Address.update(key，newEntry),update按照人名索引更新实体。
public class Address ... ... /** * 按照人名索引更新 * param key 人名 * param newEntry 实体 */ public void update(String key, Entry newEntry) for (Iterator iter = entries.iterator(); iter.hasNext();) Entry e = iter.next(); if (e.getName().equals(key)) e.setName(newEntry.getName()); e.setAddress(newEntry.getAddress()); ,,建立页面模板Start.tml,页面上有一个文本输入框和一个超链接，在文本输入框输入一个名字，点击超链接查看本中有没有这个名字 查询 这里用一个Any组件来生成超链接Html标签来定义组件，在生成Html代码时，标签和里面的非正式参数都会被输出建立页面类Start.java,public class Start SessionState private Address address; StreamResponse onActionFromChecker(String name) String result; if (address.selectByName(name) != null) result = 通讯录中有此联系人。
else result = 通讯录中没有此联系人 return new TextStreamResponse(text/html, result); ,,Start.java解析,Any组件的id为“checker”，在Start类中与之对应的事件方法是onActionFromChecker(String name)，我们将在此方法中检查本中是否有某个联系人此方法有一个参数name，表示姓名，我们将通过请求类似http://localhost:8080/AjaxAndTapestry/Start.checker/name的URL来触发onActionFromChecker(String name)方法 onActionFromChecker(String name)方法将返回org.apache.tapestry5.StreamResponse，StreamResponse用于直接向客户端输出流，不会有重定向发生页面展示,把“Ajax”加入Tomcat服务器，重启服务器在浏览器中打开http://localhost:8080/AjaxAndTapestry/和http://localhost:8080/AjaxAndTapestry/Start.checker/MoYan，显示分别如图1和图2：,图1,图2,,添加Javascript,当点击Start页面中的查询超链接，发送Ajax请求到http://localhost:8080/Ajax/Start.checker/name，把返回的内容显示在Start页面的下方。
在Start.java中添加如下代码： ... ... Environmental private RenderSupport renderSupport; void setupRender() renderSupport.addScript(check = function(source, result) + new Ajax.Request(Start.checker/ + $F(source), + method: get, + onSuccess: function(transport) + $(result).update(transport.responseText); + + ); + ); ... ...,,新添代码解析,RenderSupport#addScript(String format, Object... arguments)方法用于往页面中添加javascript代码，此方法调用String.format(String format, Object arguments)方法生成格式化字符串，其中的arguments用于替换format中的参数（例如“%s”）。
我们把此类操作放在SetupRender阶段执行 当点击查询超链接，调用javascript函数check(source, result)修改Start.tml,修改Start.tml，代码如下： 查询 刷新Start页面，在文本框输入 “MoYan”，点击查询，页面效果 如图右图：,,基础Javascript库,回头看javascript函数check(source, result)，它并非是原始的javascript，实际上它是基于Prototype的，也就是说，只有在页面引入了Prototype库的情况下才能正确执行这个函数但是我们无需自己为页面引入Prototype库，因为Tapestry已经自动为我们完成了这个工作右键查看IE源代码，我们发现如下代码： 画红线的部分就是框架做的引入，它实际上是多个javascript库的联合体，包括Tapestry自己的javascript库以及Prototype、Scriptaculous等Tapestry所依赖的第三方javascript库，把它们放到一个库中，可以减少请求次数另外，如果客户端浏览器支持gzip压缩，这个库也将会被压缩。
添加Javascript库,有时候，要把javascript放在外部文件中，这样更便于管理和维护，也便于代码重用我们把Start页面中的javascript代码放到外部文件中 在WebContent目录下新建子目录js，在js下新建文件main.js，其内容如下： check = function(source, result) new Ajax.Request(Start.checker/ + $F(source), method : get, onSuccess : function(transport) $(result).update(transport.responseText); ); ;,,修改Start.java,修改Start类下setupRender()函数，代码如下： ... ... Inject Path(context:js/main.js) private Asset mainJs; void setupRender() renderSupport.addScriptLink(mainJs); ... ... RenderSupport#addScriptLink(Asset... scriptAssets)方法用于往页面中添加javascript库。
刷新页面，页面运行效果和刚才还是一样的查看Html源代码，你会看到main.js已经和Tapestry的那些基础javascript库一起被打包成一个库文件了使用IncludeJavaScriptLibrary注释,修改Start.java代码如下： IncludeJavaScriptLibrary(context:js/main.js) public class Start SessionState private Address address; StreamResponse onActionFromChecker(String name) String result; if (address.selectByName(name) != null) result = 通讯录中有此联系人 else result = 通讯录中没有此联系人 return new TextStreamResponse(text/html, result); 访问效果和之前一样Autocomplete,我们经常会在一些网页上看到这样的功能：在文本框中输入一些字符，文本框下方就会出现一系列候选项供我们选择。
Tapestry 5内置了一个Mixin叫做Autocomplete，可以让我们方便的实现这样的功能新建页面模板Edit.tml,新建一个Edit页面，页面里有一个表单，表单里有一个文本框，我们在这个文本框上使用Autocomplete代码如下： AutoComplete的事件名称是“providecompletions”，其事件方法返回数组、List或者单个对象，如果对象不是String类型，则用toString()方法转换成String新建页面类Edit.java,在com.li.pages下新建页面类Edit.java,代码如下： public class Edit Property private String name; SessionState private Address address; List onProvideCompletionsFromName(String key) return address.selectNamesByKey(key); ,,页面显示,重启服务器打开http://localhost:8080/Ajax/Edit，在文本框中输入“l”，文本框下方会显示所有以“l”开头的姓名,,Zone组件,Zone组件可以让我们方便的通过Ajax动态更新客户端。
下面我们要实现的功能是：输入一个姓名，点击确定按钮，则显示此人的详细信息修改Edit.tml,代码如下： $entry.name $entry.address ,,修改Edit.java,修改Edit.java加入如下代码： ... ... Property(write = false) private Entry entry; Inject private Block viewBlock; Block onSuccessFromLoadForm() entry = address.selectByName(name); return viewBlock; ... ... Form组件有一个zone参数，把它设置为“theZone”，提交表单，就会有一个Ajax请求被发送到服务器，触发Edit页面实例的onSuccessFromLoadForm()方法，此方法返回一个Block（其ID为“viewBlock”），这个Block的内容直接被发送给客户端用来更新“theZone”Name of your presentation,LOGO,,页面效果,刷新页面，输入“MoYan”，按确定按钮，页面效果如图:,Name of your presentation,LOGO,,增加一个超链接,接下来我们在详细信息后面增加一个超链接，点击超链接，进入编辑状态。
修改Edit.tml,加入代码如下： 修改 与Form组件类似，ActionLink组件也有zone参数Name of your presentation,LOGO,,修改Edit.java,修改Edit.java添加如下代码： ... ... Component private Form editForm; Form onActionFromEdit(String aName) entry = address.selectByName(aName); return editForm; ... ...,Name of your presentation,LOGO,,页面效果,刷新Edit页面，输入“ZhangFei”，点击确定，页面效果如图1，点击修改，页面效果如图2.,表1,表2,Name of your presentation,LOGO,,修改Edit.tml,修改Edit.tml，增加一行代码： ... ... ... ... 在editForm表单中，我们增加了一个Hidden组件用于保存修改之前的姓名。
Name of your presentation,LOGO,,修改Edit.java,修改Edit.java，增加如下代码： ... ... Property private String oldName; Form onActionFromEdit(String aName) oldName = aName; entry = address.selectByName(aName); return editForm; Block onSuccessFromEditForm() address.update(oldName, entry); return viewBlock; ... ...,,页面效果,刷新页面，修改姓名和地址，如图1；点击保存，页面效果如图2.,图1,图2,,更新多个Zone,最后，我们再对Edit页面做一点改进：当点击图1的保存按钮，图2上方的文本框中的内容也变成“LiFei” 修改Edit.tml，添加代码如下 ... ...,,修改Edit.java,修改Edit.java，添加代码如下 ...... Object onSuccessFromEditForm() address.update(oldName, entry); // return viewBlock; name = entry.getName(); return new MultiZoneUpdate(theZone, viewBlock).add(loadZone, loadZone.getBody()); ... ...,,页面效果,刷新页面，修改姓名和地址，如图1；点击保存，页面效果如图2.,图1,图2,谢谢观澜！,。