Java 開發人員與網頁設計人員的橋樑 DWR…呃!我懶得寫簡介了…直接來看看可以做什麼吧!…
請先到 http://getahead.ltd.uk/dwr/ 下載 dwr.jar,放到WEB-INF/lib下…
負責處理客戶端請求,並呼叫Java物件的是DWRServlet,DWR其實也有些Model 2的味道,只是View的這一層比較弱,因為放到客戶端的JavaScript應用程式中…
在web.xml中加入DWRServlet…
|
<?xml version= encoding=?> <web-app id= version= xmlns= xmlns:xsi= xsi:schemaLocation= > <display-name> ajaxDWR</display-name> <servlet> <servlet-name>dwr-invoker</servlet-name> <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class> <init-param> <description> </description> <param-name>debug</param-name> <param-value>true</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>dwr-invoker</servlet-name> <url-pattern>/dwr
|
接下來寫個簡單的Hello吧!
|
onlyfun.caterpillar; Hello String hello(String name) + name + ;
|
客戶端要呼叫這個Java物件,傳給它參數,而後傳回一個字串,客戶端再顯示這個字串,神奇?其實是要告訴DWRServlet這件事,這需要一個dwr.xml:
|
<?xml version= encoding=?> <!DOCTYPE dwr PUBLIC >
<dwr> <allow> <create creator= javascript=> <param name= value= /> </create> </allow> </dwr>
|
creator設定為new,表示使用Hello的無參數建構子來生成物件,javascript設定為Hello,表示客戶端JavaScript程式可以使用Hello來呼叫對應的onlyfun.caterpillar.Hello物件。
來寫個客戶端的網頁,當中有一個輸入欄位…
|
<!DOCTYPE HTML PUBLIC > <html> <head> <meta http-equiv= content=> <title>第一個DWR程式</title> <script type= src=></script> <script type= src=></script> <script type= src=></script> <script type= src=></script> </head> <body> <input id= type= /> <input type= value= οnclick= /> <div id=></div> </body> </html>
|
dwr/interface/Hello.js是由DWRServlet根據dwr.xml中的設定生成的,engine.js負責客戶端伺服端溝通,util.js是一些好用的JavaScript程式,可以讓您少寫很多JavaScript。
hello.js是我們自訂的函式,按下按鈕後,會呼叫當中的hello()函式:
|
function hello() var user = $().value; Hello.hello(user, callback);
function callback(msg) DWRUtil.setValue(, msg);
|
${'user'}取得輸入欄位的DOM物件,value取得當中的欄位值,而後呼叫Hello.hello(),並將value當作參數傳送… 結果是呼叫Server端的Hello Java物件,當結果傳回後,會呼叫JavaScript的callback函式,DWRUtil的setValue()方法會將傳回的msg設定給指定 id的DOM,結果就是…啥!AJAX的功能在哪…就這個而言就是發出非同步請求,而回應不用Refresh頁面啦!
好啦!這個無聊的Hello DWR可以做啥!…XD
已經可以讓您做個簡單的文字提示功能了…像這個…
http://caterpillar.onlyfun.net/Gossip/index.html
把滑鼠指到書的照片上,會顯示提示文字,這些提示文字本身不是存在網頁上的,而是在Server端,當滑鼠指到書上時,會用Request object去抓,然後顯示在框框中…
當然!我的網站只支援PHP,所以那不是DWR完成的功能,而且我是直接用Request object跟DOM去慢慢刻的…對初學者來說已經有些麻煩了…XD
不過!用DWR就可以很簡單完成這個功能…
先寫個Java類別吧!會抓properties檔案中的文字訊息,例如…
|
onlyfun.caterpillar; java.util.ResourceBundle; Book ResourceBundle resource;
Book() resource = ResourceBundle.getBundle();
String getDescription(String key) resource.getString(key);
|
從程式中就知道,它會去抓book_zh_TW.properties的資料,這不是重點啦!只是Java的一個功能,我們要看的是DWR,不過先把book_zh_TW.properties準備好…
|
java=Java 學習筆記的介紹 … BlaBla... spring=Spring 技術手冊的介紹…BlaBla... ajax=Ajax in action 中文版的介紹…
|
唔!裏頭是中文字,自己用native2ascii轉換吧…這也不是重點…我們是要看DWR怎麼做到文字提示功能…
一樣的…要開放這個Book物件,在dwr.xml中…
|
<?xml version= encoding=?> <!DOCTYPE dwr PUBLIC >
<dwr> <allow> <create creator= javascript= scope=> <param name= value=/> </create> </allow> </dwr>
|
scope設定為application,表示這個Book物件在整個應用程式階段都活著。
然後,客戶端寫個網頁…
|
<!DOCTYPE HTML PUBLIC > <html> <head> <meta http-equiv= content=> <script type= src=></script> <script type= src=></script> <script type= src=></script> <script type= src=></script> <title>個人著/譯作</title> </head> <body> <div id= οnmοuseοver= οnmοuseοut=><a href=><small><img style= alt= title= src= hspace= vspace=></small></a></div> <div id= οnmοuseοver= οnmοuseοut=><a href=><small><img style= alt= title= src= hspace= vspace=></small></a></div> <div id= οnmοuseοver= οnmοuseοut=><a href=><small><img style= alt= title= src= hspace= vspace=></small></a></div>
<br/><br/><br/><br/><br/><br/>
<div id=></div> </body> </html>
|
重點在於onmouseover跟onmouseout,滑鼠移入與移出時會呼叫的函式,還有最下面的info,抓回來的書籍介紹會放到當中…
book.js如下,簡單的很…
|
function getBookData(ele) Book.getDescription(ele.id, setBookData);
function setBookData(description) DWRUtil.setValue(, description);
function clearData() DWRUtil.setValue(, );
|
程式很簡單,我懶得解釋了…XD
看一下畫面好了…這是滑鼠移到
Ajax in action中文版 上的介紹畫面…