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

上传人:b****3 文档编号:10260686 上传时间:2023-05-24 格式:DOCX 页数:22 大小:121.06KB
下载 相关 举报
Java 开发人员与网页设计人员的桥梁 DWR.docx_第1页
第1页 / 共22页
Java 开发人员与网页设计人员的桥梁 DWR.docx_第2页
第2页 / 共22页
Java 开发人员与网页设计人员的桥梁 DWR.docx_第3页
第3页 / 共22页
Java 开发人员与网页设计人员的桥梁 DWR.docx_第4页
第4页 / 共22页
Java 开发人员与网页设计人员的桥梁 DWR.docx_第5页
第5页 / 共22页
Java 开发人员与网页设计人员的桥梁 DWR.docx_第6页
第6页 / 共22页
Java 开发人员与网页设计人员的桥梁 DWR.docx_第7页
第7页 / 共22页
Java 开发人员与网页设计人员的桥梁 DWR.docx_第8页
第8页 / 共22页
Java 开发人员与网页设计人员的桥梁 DWR.docx_第9页
第9页 / 共22页
Java 开发人员与网页设计人员的桥梁 DWR.docx_第10页
第10页 / 共22页
Java 开发人员与网页设计人员的桥梁 DWR.docx_第11页
第11页 / 共22页
Java 开发人员与网页设计人员的桥梁 DWR.docx_第12页
第12页 / 共22页
Java 开发人员与网页设计人员的桥梁 DWR.docx_第13页
第13页 / 共22页
Java 开发人员与网页设计人员的桥梁 DWR.docx_第14页
第14页 / 共22页
Java 开发人员与网页设计人员的桥梁 DWR.docx_第15页
第15页 / 共22页
Java 开发人员与网页设计人员的桥梁 DWR.docx_第16页
第16页 / 共22页
Java 开发人员与网页设计人员的桥梁 DWR.docx_第17页
第17页 / 共22页
Java 开发人员与网页设计人员的桥梁 DWR.docx_第18页
第18页 / 共22页
Java 开发人员与网页设计人员的桥梁 DWR.docx_第19页
第19页 / 共22页
Java 开发人员与网页设计人员的桥梁 DWR.docx_第20页
第20页 / 共22页
亲,该文档总共22页,到这儿已超出免费预览范围,如果喜欢就下载吧!
下载资源
资源描述

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

《Java 开发人员与网页设计人员的桥梁 DWR.docx》由会员分享,可在线阅读,更多相关《Java 开发人员与网页设计人员的桥梁 DWR.docx(22页珍藏版)》请在冰点文库上搜索。

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

Java开发人员与网页设计人员的桥梁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

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

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頁面啦!

 

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

先寫個Java類別吧!

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

1

2

3

4

5

6

7

8

9

10

11

12

13

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

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

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-2023 冰点文库 网站版权所有

经营许可证编号:鄂ICP备19020893号-2