tapestry集成aja.ppt

Tapestry 集成 Ajax,作者：李金峰,修改web.xml,新建一個動態(tài)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構(gòu)造函數(shù)中添加通訊錄,在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(“張學(xué)友“, “中國.香港“); 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返回人名對應(yīng)的實體 public class Address . . /* * 返回人名對應(yīng)的實體 * 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標(biāo)簽來定義組件，在生成Html代碼時，標(biāo)簽和里面的非正式參數(shù)都會被輸出。,建立頁面類Start.java,public class Start SessionState private Address address; StreamResponse onActionFromChecker(String name) String result; if (address.selectByName(name) != null) result = “通訊錄中有此聯(lián)系人?！? else result = “通訊錄中沒有此聯(lián)系人?！? return new TextStreamResponse(“text/html“, result); ,Start.java解析,Any組件的id為“checker”，在Start類中與之對應(yīng)的事件方法是onActionFromChecker(String name)，我們將在此方法中檢查電話本中是否有某個聯(lián)系人。此方法有一個參數(shù)name，表示姓名，我們將通過請求類似http:/localhost:8080/AjaxAndTapestry/Start.checker/name的URL來觸發(fā)onActionFromChecker(String name)方法。 onActionFromChecker(String name)方法將返回org.apache.tapestry5.StreamResponse，StreamResponse用于直接向客戶端輸出流，不會有重定向發(fā)生。,頁面展示,把“Ajax”加入Tomcat服務(wù)器，重啟服務(wù)器。在瀏覽器中打開http:/localhost:8080/AjaxAndTapestry/和http:/localhost:8080/AjaxAndTapestry/Start.checker/MoYan，顯示分別如圖1和圖2：,圖1,圖2,添加Javascript,當(dāng)點擊Start頁面中的查詢超鏈接，發(fā)送Ajax請求到http:/localhost:8080/Ajax/Start.checker/name，把返回的內(nèi)容顯示在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代碼，此方法調(diào)用String.format(String format, Object arguments)方法生成格式化字符串，其中的arguments用于替換format中的參數(shù)（例如“%s”）。 我們把此類操作放在SetupRender階段執(zhí)行。 當(dāng)點擊查詢超鏈接，調(diào)用javascript函數(shù)check(source, result)。,修改Start.tml,修改Start.tml，代碼如下： 查詢 刷新Start頁面，在文本框輸入 “MoYan”，點擊查詢，頁面效果 如圖右圖：,基礎(chǔ)Javascript庫,回頭看javascript函數(shù)check(source, result)，它并非是原始的javascript，實際上它是基于Prototype的，也就是說，只有在頁面引入了Prototype庫的情況下才能正確執(zhí)行這個函數(shù)。但是我們無需自己為頁面引入Prototype庫，因為Tapestry已經(jīng)自動為我們完成了這個工作。右鍵查看IE源代碼，我們發(fā)現(xiàn)如下代碼： 畫紅線的部分就是框架做的引入，它實際上是多個javascript庫的聯(lián)合體，包括Tapestry自己的javascript庫以及Prototype、Scriptaculous等Tapestry所依賴的第三方j(luò)avascript庫，把它們放到一個庫中，可以減少請求次數(shù)。另外，如果客戶端瀏覽器支持gzip壓縮，這個庫也將會被壓縮。,添加Javascript庫,有時候，要把javascript放在外部文件中，這樣更便于管理和維護，也便于代碼重用。我們把Start頁面中的javascript代碼放到外部文件中。 在WebContent目錄下新建子目錄js，在js下新建文件main.js，其內(nèi)容如下： check = function(source, result) new Ajax.Request(Start.checker/ + $F(source), method : get, onSuccess : function(transport) $(result).update(transport.responseText); ); ;,修改Start.java,修改Start類下setupRender()函數(shù)，代碼如下： . . Inject Path(“context:js/main.js“) private Asset mainJs; void setupRender() renderSupport.addScriptLink(mainJs); . . RenderSupport#addScriptLink(Asset. scriptAssets)方法用于往頁面中添加javascript庫。 刷新頁面，頁面運行效果和剛才還是一樣的。查看Html源代碼，你會看到main.js已經(jīng)和Tapestry的那些基礎(chǔ)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 = “通訊錄中有此聯(lián)系人。“; else result = “通訊錄中沒有此聯(lián)系人?！? return new TextStreamResponse(“text/html“, result); 訪問效果和之前一樣。,Autocomplete,我們經(jīng)常會在一些網(wǎng)頁上看到這樣的功能：在文本框中輸入一些字符，文本框下方就會出現(xiàn)一系列候選項供我們選擇。 Tapestry 5內(nèi)置了一個Mixin叫做Autocomplete，可以讓我們方便的實現(xiàn)這樣的功能。,新建頁面模板Edit.tml,新建一個Edit頁面，頁面里有一個表單，表單里有一個文本框，我們在這個文本框上使用Autocomplete。代碼如下： AutoComplete的事件名稱是“providecompletions”，其事件方法返回數(shù)組、List或者單個對象，如果對象不是String類型，則用toString()方法轉(zhuǎn)換成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); ,頁面顯示,重啟服務(wù)器。打開http:/localhost:8080/Ajax/Edit，在文本框中輸入“l(fā)”，文本框下方會顯示所有以“l(fā)”開頭的姓名,Zone組件,Zone組件可以讓我們方便的通過Ajax動態(tài)更新客戶端。 下面我們要實現(xiàn)的功能是：輸入一個姓名，點擊確定按鈕，則顯示此人的詳細信息。修改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參數(shù)，把它設(shè)置為“theZone”，提交表單，就會有一個Ajax請求被發(fā)送到服務(wù)器，觸發(fā)Edit頁面實例的onSuccessFromLoadForm()方法，此方法返回一個Block（其ID為“viewBlock”），這個Block的內(nèi)容直接被發(fā)送給客戶端用來更新“theZone”。,Name of your presentation,LOGO,頁面效果,刷新頁面，輸入“MoYan”，按確定按鈕，頁面效果如圖:,Name of your presentation,LOGO,增加一個超鏈接,接下來我們在詳細信息后面增加一個超鏈接，點擊超鏈接，進入編輯狀態(tài)。修改Edit.tml,加入代碼如下： 修改 與Form組件類似，ActionLink組件也有zone參數(shù)。,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，增加一行代碼： . . . . 在