Java 开发人员与网页设计人员的桥梁 DWR.docx

1、Java 开发人员与网页设计人员的桥梁 DWRJava 開發人員與網頁設計人員的橋樑 DWR請先到 http:/getahead.ltd.uk/dwr/ 下載 dwr.jar，放到WEB-INF/lib下 負責處理客戶端請求，並呼叫Java物件的是DWRServlet，DWR其實也有些Model 2的味道，只是View的這一層比較弱，因為放到客戶端的JavaScript應用程式中 在web.xml中加入DWRServlet1234567891011121314151617181920212223web-app id=WebApp_ID version=2.4 xmlns= xmlns:xsi=

2、http:/www.w3.org/2001/XMLSchema-instance xsi:schemaLocation= ajaxDWR dwr-invoker uk.ltd.getahead.dwr.DWRServlet debug true dwr-invoker /dwr/* 接下來寫個簡單的Hello吧！ 1234567package onlyfun.caterpillar;public class Hello public String hello(String name) return 哈囉！ + name + ！您的第一個DWR！; 客戶端要呼叫這個Java物件，傳給它參數，而後

3、傳回一個字串，客戶端再顯示這個字串，神奇？其實是要告訴DWRServlet這件事，這需要一個dwr.xml： 12345678910 creator設定為new，表示使用Hello的無參數建構子來生成物件，javascript設定為Hello，表示客戶端JavaScript程式可以使用Hello來呼叫對應的onlyfun.caterpillar.Hello物件。 來寫個客戶端的網頁，當中有一個輸入欄位 1234567891011121314151617 第一個DWR程式 dwr/interface/Hello.js是由DWRServlet根據dwr.xml中的設定生成的，engine.js負責

4、客戶端伺服端溝通，util.js是一些好用的JavaScript程式，可以讓您少寫很多JavaScript。 hello.js是我們自訂的函式，按下按鈕後，會呼叫當中的hello()函式： 12345678function hello() var user = $(user).value; Hello.hello(user, callback);function callback(msg) DWRUtil.setValue(result, msg); $user取得輸入欄位的DOM物件，value取得當中的欄位值，而後呼叫Hello.hello()，並將value當作參數傳送 結果是呼叫Ser

5、ver端的Hello Java物件，當結果傳回後，會呼叫JavaScript的callback函式，DWRUtil的setValue()方法會將傳回的msg設定給指定 id的DOM，結果就是啥！AJAX的功能在哪就這個而言就是發出非同步請求，而回應不用Refresh頁面啦！ 把滑鼠指到書的照片上，會顯示提示文字，這些提示文字本身不是存在網頁上的，而是在Server端，當滑鼠指到書上時，會用Request object去抓，然後顯示在框框中 先寫個Java類別吧！會抓properties檔案中的文字訊息，例如 12345678910111213package onlyfun.caterpilla

6、r;import java.util.ResourceBundle;public class Book private ResourceBundle resource; public Book() resource = ResourceBundle.getBundle(book); public String getDescription(String key) return resource.getString(key); 從程式中就知道，它會去抓book_zh_TW.properties的資料，這不是重點啦！只是Java的一個功能，我們要看的是DWR，不過先把book_zh_TW.prop

7、erties準備好 123java=Java 學習筆記的介紹 BlaBla.spring=Spring 技術手冊的介紹BlaBla.ajax=Ajax in action 中文版的介紹唔！裏頭是中文字，自己用native2ascii轉換吧這也不是重點我們是要看DWR怎麼做到文字提示功能一樣的要開放這個Book物件，在dwr.xml中 12345678910 scope設定為application，表示這個Book物件在整個應用程式階段都活著。 然後，客戶端寫個網頁 1234567891011121314151617181920212223242526272829 個人著譯作 重點在於onmou

8、seover跟onmouseout，滑鼠移入與移出時會呼叫的函式，還有最下面的info，抓回來的書籍介紹會放到當中 book.js如下，簡單的很 1234567891011function getBookData(ele) Book.getDescription(ele.id, setBookData);function setBookData(description) DWRUtil.setValue(info, description);function clearData() DWRUtil.setValue(info, ); 程式很簡單，我懶得解釋了XD 看一下畫面好了這是滑鼠移到 A

9、jax in action中文版 上的介紹畫面 填寫表單的下拉選單。 例如一個示意的Java程式如下： 12345678package onlyfun.caterpillar;public class Option public String getOptions() / 實際上這些字串是從資料庫中查到的啦 return new String 良葛格, 毛美眉, 米小狗; 傳回的字串陣列，您要填寫到下拉選單中，當然，首先我們要在dwr.xml中開發這個物件 12345678910 這是我們的網頁 123456789101112131415 選項: 傳回的字串陣列會填入opts這個select中

10、，我們的option.js如下 12345678window.onload = function() OPT.getOptions(populate); ;function populate(list) DWRUtil.removeAllOptions(opts); DWRUtil.addOptions(opts, list); 看一下結果 好啦！我知道有人在說了，這個程式有夠無聊 改一下！就是個不錯的範例了，例如連動方塊，唔！在Ajax in action中叫啥？Dynamic double combo？ 假設一個會去從資料庫中查詢資料的Java程式示意如下： 123456789101112

11、131415161718192021222324252627282930package onlyfun.caterpillar;import java.util.Map;import java.util.TreeMap;public class Bike private Map bikes;public Bike() bikes = new TreeMap();bikes.put(2000, new String 2000 T1, 2000 T2, 2000 T3);bikes.put(2001, new String 2001 A1, 2001 A2);bikes.put(2002, new

12、 String 2002 BW1, 2002 BW2, 2002 BW);bikes.put(2003, new String 2003 S320);bikes.put(2004, new String 2004 TA1, 2004 TA2, 2004 TA3);public String getYears() String keys = new Stringbikes.size();int i = 0;for(String key : bikes.keySet() keysi+ = key;return keys; public String getBikes(String year) return bikes.get(year); getYears()跟getBkies()分別表示產品的年份跟型號，這邊用Map模擬，實際上資料是來自資料庫的查詢。 一樣的，在dwr.xml中設定： 12345678910 我們會有個腳踏車年份與型號查詢頁面： 123456789101112131415Insert title here 年份：型號：