tapestry集成aja.ppt

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) = 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.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，增加一行代码： . . . . 在