《tapestry集成ajax》PPT课件.ppt

Tapestry集成Ajax,作者：李金峰,修改web.xml,新建一个动态Web工程“AjaxAndTypestry”，修改web.xml成如下：Springtapestry.app-packagecom.licontextConfigLocation/WEB-INF/spring-service.xmlapporg.apache.tapestry5.spring.TapestrySpringFilterapp/*,添加spring-service.xml和jar文件,在WEB-INF下添加spring-service.xml在lib下添加jar包：,建实体类Entry.java,在com.li.pojo下建立Entry.javapublicclassEntryprivateStringname;privateStringaddress;publicEntry()publicEntry(Stringname,Stringaddress)=name;this.address=address;publicStringgetName()returnname;.,Address.java构造函数中添加通讯录,在com.li.pojo中，建立类Address.javapublicclassAddresspublicListentries;/*添加通讯录。*/publicAddress()entries=newArrayList();entries.add(newEntry(莫言,山东.高密);entries.add(newEntry(李逵,山东.梁山);entries.add(newEntry(李清照,山东.济南);entries.add(newEntry(李金峰,华夏.蓉城);entries.add(newEntry(张学友,中国.香港);entries.add(newEntry(张飞,河北.涿郡);.,Address.selectNamesByKey(key),selectNamesByKey返回相同开头的人名列表publicclassAddress./*返回形同开头的名字列表*paramkey人名开头*return人名列表*/publicListselectNamesByKey(Stringkey)Listmatches=newArrayList();for(Iteratoriter=entries.iterator();iter.hasNext();)Entryentry=iter.next();if(entry.getName().toLowerCase().startsWith(key.toLowerCase()matches.add(entry.getName();returnmatches;.,Address.selectByName(name),selectByName返回人名对应的实体publicclassAddress./*返回人名对应的实体*paramname人名*return实体*/publicEntryselectByName(Stringname)for(Iteratoriter=entries.iterator();iter.hasNext();)Entryentry=iter.next();if(entry.getName().equals(name)returnentry;returnnull;.,Address.update(key，newEntry),update按照人名索引更新实体。publicclassAddress./*按照人名索引更新*paramkey人名*paramnewEntry实体*/publicvoidupdate(Stringkey,EntrynewEntry)for(Iteratoriter=entries.iterator();iter.hasNext();)Entrye=iter.next();if(e.getName().equals(key)e.setName(newEntry.getName();e.setAddress(newEntry.getAddress();,建立页面模板Start.tml,页面上有一个文本输入框和一个超链接，在文本输入框输入一个名字，点击超链接查看电话本中有没有这个名字。查询这里用一个Any组件来生成超链接。Html标签来定义组件，在生成Html代码时，标签和里面的非正式参数都会被输出。,建立页面类Start.java,publicclassStartSessionStateprivateAddressaddress;StreamResponseonActionFromChecker(Stringname)Stringresult;if(address.selectByName(name)!=null)result=通讯录中有此联系人。;elseresult=通讯录中没有此联系人。;returnnewTextStreamResponse(text/html,result);,Start.java解析,Any组件的id为“checker”，在Start类中与之对应的事件方法是onActionFromChecker(Stringname)，我们将在此方法中检查电话本中是否有某个联系人。此方法有一个参数name，表示姓名，我们将通过请求类似http:/localhost:8080/AjaxAndTapestry/Start.checker/name的URL来触发onActionFromChecker(Stringname)方法。onActionFromChecker(Stringname)方法将返回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中添加如下代码：.EnvironmentalprivateRenderSupportrenderSupport;voidsetupRender()renderSupport.addScript(check=function(source,result)+newAjax.Request(Start.checker/+$F(source),+method:get,+onSuccess:function(transport)+$(result).update(transport.responseText);+);+);.,新添代码解析,RenderSupport#addScript(Stringformat,Object.arguments)方法用于往页面中添加javascript代码，此方法调用String.format(Stringformat,Objectarguments)方法生成格式化字符串，其中的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)newAjax.Request(Start.checker/+$F(source),method:get,onSuccess:function(transport)$(result).update(transport.responseText););,修改Start.java,修改Start类下setupRender()函数，代码如下：.InjectPath(context:js/main.js)privateAssetmainJs;voidsetupRender()renderSupport.addScriptLink(mainJs);.RenderSupport#addScriptLink(Asset.scriptAssets)方法用于往页面中添加javascript库。刷新页面，页面运行效果和刚才还是一样的。查看Html源代码，你会看到main.js已经和Tapestry的那些基础javascript库一起被打包成一个库文件了。,使用IncludeJavaScriptLibrary注释,修改Start.java代码如下：IncludeJavaScriptLibrary(context:js/main.js)publicclassStartSessionStateprivateAddressaddress;StreamResponseonActionFromChecker(Stringname)Stringresult;if(address.selectByName(name)!=null)result=通讯录中有此联系人。;elseresult=通讯录中没有此联系人。;returnnewTextStreamResponse(text/html,result);访问效果和之前一样。,Autocomplete,我们经常会在一些网页上看到这样的功能：在文本框中输入一些字符，文本框下方就会出现一系列候选项供我们选择。Tapestry5内置了一个Mixin叫做Autocomplete，可以让我们方便的实现这样的功能。,新建页面模板Edit.tml,新建一个Edit页面，页面里有一个表单，表单里有一个文本框，我们在这个文本框上使用Autocomplete。代码如下：AutoComplete的事件名称是“providecompletions”，其事件方法返回数组、List或者单个对象，如果对象不是String类型，则用toString()方法转换成String。,新建页面类Edit.java,在com.li.pages下新建页面类Edit.java,代码如下：publicclassEditPropertyprivateStringname;SessionStateprivateAddressaddress;ListonProvideCompletionsFromName(Stringkey)returnaddress.selectNamesByKey(key);,页面显示,重启服务器。打开http:/localhost:8080/Ajax/Edit，在文本框中输入“l”，文本框下方会显示所有以“l”开头的姓名,Zone组件,Zone组件可以让我们方便的通过Ajax动态更新客户端。下面我们要实现的功能是：输入一个姓名，点击确定按钮，则显示此人的详细信息。修改Edit.tml,代码如下：$$entry.address,修改Edit.java,修改Edit.java加入如下代码：.Property(write=false)privateEntryentry;InjectprivateBlockviewBlock;BlockonSuccessFromLoadForm()entry=address.selectByName(name);returnviewBlock;.Form组件有一个zone参数，把它设置为“theZone”，提交表单，就会有一个Ajax请求被发送到服务器，触发Edit页面实例的onSuccessFromLoadForm()方法，此方法返回一个Block（其ID为“viewBlock”），这个Block的内容直接被发送给客户端用来更新“theZone”。,Nameofyourpresentation,LOGO,页面效果,刷新页面，输入“MoYan”，按确定按钮，页面效果如图:,Nameofyourpresentation,LOGO,增加一个超链接,接下来我们在详细信息后面增加一个超链接，点击超链接，进入编辑状态。修改Edit.tml,加入代码如下：修改与Form组件类似，ActionLink组件也有zone参数。,Nameofyourpresentation,LOGO,修改Edit.java,修改Edit.java添加如下代码：.ComponentprivateFormeditForm;FormonActionFromEdit(StringaName)entry=address.selectByName(aName);returneditForm;.,Nameofyourpresentation,LOGO,页面效果,刷新Edit页面，输入“ZhangFei”，点击确定，页面效果如图1，点击修改，页面效果如图2.,表1,表2,Nameofyourpresentation,LOGO,修改Edit.tml,修改Edit.tml，增加一行代码：.在ed