DWR入门文档.docx

上传人:b****5 文档编号:5665345 上传时间:2022-12-31 格式:DOCX 页数:21 大小:121.55KB
下载 相关 举报
DWR入门文档.docx_第1页
第1页 / 共21页
DWR入门文档.docx_第2页
第2页 / 共21页
DWR入门文档.docx_第3页
第3页 / 共21页
DWR入门文档.docx_第4页
第4页 / 共21页
DWR入门文档.docx_第5页
第5页 / 共21页
点击查看更多>>
下载资源
资源描述

DWR入门文档.docx

《DWR入门文档.docx》由会员分享,可在线阅读,更多相关《DWR入门文档.docx(21页珍藏版)》请在冰豆网上搜索。

DWR入门文档.docx

DWR入门文档

Java開發人員與網頁設計人員的橋樑DWR…呃!

我懶得寫簡介了…直接來看看可以做什麼吧!

請先到http:

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

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

在web.xml中加入DWRServlet…

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

xmlversion="1.0"encoding="UTF-8"?

>

xmlns="

xmlns:

xsi="http:

//www.w3.org/2001/XMLSchema-instance"

xsi:

schemaLocation=

"

ajaxDWR

dwr-invoker

uk.ltd.getahead.dwr.DWRServlet

debug

true

dwr-invoker

/dwr/*

接下來寫個簡單的Hello吧!

1

2

3

4

5

6

7

packageonlyfun.caterpillar;

 

publicclassHello{

publicStringhello(Stringname){

return"哈囉!

"+name+"!

您的第一個DWR!

";

}

}

客戶端要呼叫這個Java物件,傳給它參數,而後傳回一個字串,客戶端再顯示這個字串,神奇?

其實是要告訴DWRServlet這件事,這需要一個dwr.xml:

1

2

3

4

5

6

7

8

9

10

11

xmlversion="1.0"encoding="UTF-8"?

>

DOCTYPEdwrPUBLIC"-//GetAheadLimited//DTDDirectWebRemoting1.0//EN"

"http:

//www.getahead.ltd.uk/dwr/dwr10.dtd">

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

來寫個客戶端的網頁,當中有一個輸入欄位…

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

第一個DWR程式

 

 

 

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

hello.js是我們自訂的函式,按下按鈕後,會呼叫當中的hello()函式:

1

2

3

4

5

6

7

8

functionhello(){

varuser=$('user').value;

Hello.hello(user,callback);

}

 

functioncallback(msg){

DWRUtil.setValue('result',msg);

}

${'user'}取得輸入欄位的DOM物件,value取得當中的欄位值,而後呼叫Hello.hello(),並將value當作參數傳送…結果是呼叫Server端的HelloJava物件,當結果傳回後,會呼叫JavaScript的callback函式,DWRUtil的setValue()方法會將傳回的msg設定給指定id的DOM,結果就是…啥!

AJAX的功能在哪…就這個而言就是發出非同步請求,而回應不用Refresh頁面啦!

 

好啦!

這個無聊的HelloDWR可以做啥!

…XD

已經可以讓您做個簡單的文字提示功能了…像這個…

把滑鼠指到書的照片上,會顯示提示文字,這些提示文字本身不是存在網頁上的,而是在Server端,當滑鼠指到書上時,會用Requestobject去抓,然後顯示在框框中…

當然!

我的網站只支援PHP,所以那不是DWR完成的功能,而且我是直接用Requestobject跟DOM去慢慢刻的…對初學者來說已經有些麻煩了…XD

不過!

用DWR就可以很簡單完成這個功能…

先寫個Java類別吧!

會抓properties檔案中的文字訊息,例如…

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

packageonlyfun.caterpillar;

 

importjava.util.ResourceBundle;

 

publicclassBook{

privateResourceBundleresource;

publicBook(){

resource=ResourceBundle.getBundle("book");

}

publicStringgetDescription(Stringkey){

returnresource.getString(key);

}

}

從程式中就知道,它會去抓book_zh_TW.properties的資料,這不是重點啦!

只是Java的一個功能,我們要看的是DWR,不過先把book_zh_TW.properties準備好…

1

2

3

java=Java學習筆記的介紹…BlaBla...

spring=Spring技術手冊的介紹…BlaBla...

ajax=Ajaxinaction中文版的介紹…

唔!

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

一樣的…要開放這個Book物件,在dwr.xml中…

1

2

3

4

5

6

7

8

9

10

11

xmlversion="1.0"encoding="UTF-8"?

>

DOCTYPEdwrPUBLIC"-//GetAheadLimited//DTDDirectWebRemoting1.0//EN"

"http:

//www.getahead.ltd.uk/dwr/dwr10.dtd">

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

然後,客戶端寫個網頁…

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

個人著/譯作

 

onmouseout="clearData();">

href=".tw/waweb2004/home/home.aspx?

pg=HM010X&bn=AXP011800">

style="border:

0pxsolid;width:

80px;height:

110px;float:

left;"

alt="Ajaxinaction中文版"title="Ajaxinaction中文版"

src="images/ajax_in_action_c.jpg"hspace="10"vspace="2">

 

onmouseout="clearData();">

href=".tw/waweb2004/home/home.aspx?

pg=HM010X&bn=ACL021000">

style="border:

0pxsolid;width:

80px;height:

110px;float:

left;"

alt="Spring技術手冊"title="Spring技術手冊"

src="images/SpringTech_S.jpg"hspace="10"vspace="2">

 

onmouseout="clearData();">

href=".tw/waweb2004/home/home.aspx?

pg=HM010X&bn=ACL020931">

style="border:

0pxsolid;width:

80px;height:

110px;float:

left;"

alt="Java學習筆記"title="Java學習筆記"

src="images/JavaGossip_Cover_Small.jpg"hspace="10"

vspace="2">







 

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

book.js如下,簡單的很…

1

2

3

4

5

6

7

8

9

10

11

functiongetBookData(ele){

Book.getDescription(ele.id,setBookData);

}

 

functionsetBookData(description){

DWRUtil.setValue('info',description);

}

 

functionclearData(){

DWRUtil.setValue('info','');

}

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

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

假設您要從資料庫中查詢出一些字串,然後填寫到表單的下拉選單中。

例如一個示意的Java程式如下:

1

2

3

4

5

6

7

8

packageonlyfun.caterpillar;

 

publicclassOption{

publicString[]getOptions(){

//實際上這些字串是從資料庫中查到的啦…

returnnewString[]{"良葛格","毛美眉","米小狗"};

}

}

傳回的字串陣列,您要填寫到下拉選單中,當然,首先我們要在dwr.xml中開發這個物件…

1

2

3

4

5

6

7

8

9

10

xmlversion="1.0"encoding="UTF-8"?

>

DOCTYPEdwrPUBLIC"-//GetAheadLimited//DTDDirectWebRemoting1.0//EN""http:

//www.getahead.ltd.uk/dwr/dwr10.dtd">

這是我們的網頁…

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

 

 

選項:

傳回的字串陣列會填入opts這個select中,我們的option.js如下…

1

2

3

4

5

6

7

8

window.onload=function(){

OPT.getOptions(populate);

};

 

functionpopulate(list){

DWRUtil.removeAllOptions("opts");

DWRUtil.addOptions("opts",list);

}

夠簡單了…不需要解釋了…

看一下結果… 

好啦!

我知道有人在說了,這個程式有夠無聊…

改一下!

就是個不錯的範例了,例如連動方塊,唔!

在Ajaxinaction中叫啥?

Dynamicdoublecombo?

假設一個會去從資料庫中查詢資料的Java程式示意如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

packageonlyfun.caterpillar;

 

importjava.util.Map;

importjava.util.TreeMap;

 

publicclassBike{

  privateMapbikes;

  

  publicBike(){

    bikes=newTreeMap();

    bikes.put("2000",newString[]{"2000T1","2000T2","2000T3"});

    bikes.put("2001",newString[]{"2001A1","2001A2"});

    bikes.put("2002",newString[]{"2002BW1","2002BW2","2002BW"});

    bikes.put("2003",newString[]{"2003S320"});

    bikes.put("2004",newString[]{"2004TA1","2004TA2","2004TA3"});

  }

  

  publicString[]getYears(){

    String[]keys=newString[bikes.size()];

    inti=0;

    for(Stringkey:

bikes.keySet()){

      keys[i++]=key;

    }

    returnkeys;

  }

  

  publicString[]getBikes(Stringyear){

    returnbikes.get(year);

  }

}

getYears()跟getBkies()分別表示產品的年份跟型號,這邊用Map模擬,實際上資料是來自資料庫的查詢。

一樣的,在dwr.xml中設定:

1

2

3

4

5

6

7

8

9

10

xmlversion="1.0"encoding="UTF-8"?

>

DOCTYPEdwrPUBLIC"-//GetAheadLimited//DTDDirectWebRemoting1.0//EN""http:

//www.getahead.ltd.uk/dwr/dwr10.dtd">

我們會有個腳踏車年份與型號查詢頁面:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

Inserttitlehere

相关资源
猜你喜欢
相关搜索

当前位置:首页 > 医药卫生 > 基础医学

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1