小菜毛毛技术分享

与大家共同成长

  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  164 Posts :: 141 Stories :: 94 Comments :: 0 Trackbacks

Java 開發人員與網頁設計人員的橋樑 DWR…呃!我懶得寫簡介了…直接來看看可以做什麼吧!…

請先到 http://getahead.ltd.uk/dwr/ 下載 dwr.jar,放到WEB-INF/lib下…

負責處理客戶端請求,並呼叫Java物件的是DWRServlet,DWR其實也有些Model 2的味道,只是View的這一層比較弱,因為放到客戶端的JavaScript應用程式中…

在web.xml中加入DWRServlet…
1234567891011121314151617181920212223 <?xml version="1.0" encoding="UTF-8"?><web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">  <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/*</url-pattern>  </servlet-mapping></web-app>


接下來寫個簡單的Hello吧!
1234567 package onlyfun.caterpillar; public class Hello {  public String hello(String name) {      return "哈囉!" + name + "!您的第一個DWR!";    }} 


客戶端要呼叫這個Java物件,傳給它參數,而後傳回一個字串,客戶端再顯示這個字串,神奇?其實是要告訴DWRServlet這件事,這需要一個dwr.xml:
1234567891011 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd"> <dwr>  <allow>    <create creator="new" javascript="Hello">      <param name="class" value="onlyfun.caterpillar.Hello" />    </create>  </allow></dwr>


creator設定為new,表示使用Hello的無參數建構子來生成物件,javascript設定為Hello,表示客戶端JavaScript程式可以使用Hello來呼叫對應的onlyfun.caterpillar.Hello物件。

來寫個客戶端的網頁,當中有一個輸入欄位…
12345678910111213141516171819 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=BIG5">  <title>第一個DWR程式</title>  <script type='text/javascript' src='dwr/interface/Hello.js'></script>  <script type='text/javascript' src='dwr/engine.js'></script>  <script type='text/javascript' src='dwr/util.js'></script>  <script type='text/javascript' src='hello.js'></script></head><body> <input id="user" type="text" /><input type='button' value='哈囉' onclick='hello();' />  <div id="result"></div> </body></html>


dwr/interface/Hello.js是由DWRServlet根據dwr.xml中的設定生成的,engine.js負責客戶端伺服端溝通,util.js是一些好用的JavaScript程式,可以讓您少寫很多JavaScript。

hello.js是我們自訂的函式,按下按鈕後,會呼叫當中的hello()函式:
12345678 function hello() {    var user = $('user').value;    Hello.hello(user, callback);} function callback(msg) {   DWRUtil.setValue('result', 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檔案中的文字訊息,例如…
123456789101112131415 package onlyfun.caterpillar; 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.properties準備好…
123 java=Java 學習筆記的介紹 … BlaBla...spring=Spring 技術手冊的介紹…BlaBla...ajax=Ajax in action 中文版的介紹…


唔!裏頭是中文字,自己用native2ascii轉換吧…這也不是重點…我們是要看DWR怎麼做到文字提示功能…

一樣的…要開放這個Book物件,在dwr.xml中…
1234567891011 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd"> <dwr>  <allow>  <create creator="new" javascript="Book" scope="application">            <param name="class" value="onlyfun.caterpillar.Book"/>        </create>    </allow></dwr>


scope設定為application,表示這個Book物件在整個應用程式階段都活著。

然後,客戶端寫個網頁…
12345678910111213141516171819202122232425262728293031323334353637383940 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=BIG5">  <script type='text/javascript' src='dwr/interface/Book.js'></script>  <script type='text/javascript' src='dwr/engine.js'></script>  <script type='text/javascript' src='dwr/util.js'></script>  <script type='text/javascript' src='book.js'></script><title>個人著/譯作</title></head><body>       <div id="ajax" onmouseover="getBookData(this);" onmouseout="clearData();"><a href="http://www.gotop.com.tw/waweb2004/home/home.aspx?pg=HM010X&bn=AXP011800"><small><img style="border: 0px solid ; width: 80px; height: 110px; float: left;" alt="Ajax in action 中文版" title="Ajax in action 中文版" src="images/ajax_in_action_c.jpg" hspace="10" vspace="2"></small></a></div>       <div id="spring" onmouseover="getBookData(this);" onmouseout="clearData();"><a href="http://www.gotop.com.tw/waweb2004/home/home.aspx?pg=HM010X&bn=ACL021000"><small><img style="border: 0px solid ; width: 80px; height: 110px; float: left;" alt="Spring 技術手冊" title="Spring 技術手冊" src="images/SpringTech_S.jpg" hspace="10" vspace="2"></small></a></div>       <div id="java" onmouseover="getBookData(this);" onmouseout="clearData();"><a href="http://www.gotop.com.tw/waweb2004/home/home.aspx?pg=HM010X&bn=ACL020931"><small><img style="border: 0px solid ; width: 80px; height: 110px; float: left;" alt="Java 學習筆記" title="Java 學習筆記" src="images/JavaGossip_Cover_Small.jpg" hspace="10" vspace="2"></small></a></div>     <br/><br/><br/><br/><br/><br/>     <div id="info"></div> </body></html>


重點在於onmouseover跟onmouseout,滑鼠移入與移出時會呼叫的函式,還有最下面的info,抓回來的書籍介紹會放到當中…

book.js如下,簡單的很…
1234567891011 function getBookData(ele) {  Book.getDescription(ele.id, setBookData);} function setBookData(description) {  DWRUtil.setValue('info', description);} function clearData() {  DWRUtil.setValue('info', '');} 


程式很簡單,我懶得解釋了…XD

看一下畫面好了…這是滑鼠移到 Ajax in action中文版 上的介紹畫面…


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/caterpillar_here/archive/2006/09/06/1186566.aspx

posted on 2009-06-02 13:53 小菜毛毛 阅读(3275) 评论(0)  编辑  收藏 所属分类: AJAX

只有注册用户登录后才能发表评论。


网站导航: