BlogJava-　　　　　　　　　　　　　彬 ^_^ -文章分类-Dwrhttp://www.blogjava.net/libin2722/category/30614.html虚其心，可解天下之问；专其心，可治天下之学；静其心，可悟天下之理；恒其心，可成天下之业。zh-cnFri, 04 Apr 2008 04:48:14 GMTFri, 04 Apr 2008 04:48:14 GMT60DWR 入門與應用（三）http://www.blogjava.net/libin2722/articles/190766.html礼物礼物Fri, 04 Apr 2008 03:37:00 GMThttp://www.blogjava.net/libin2722/articles/190766.htmlhttp://www.blogjava.net/libin2722/comments/190766.htmlhttp://www.blogjava.net/libin2722/articles/190766.html#Feedback0http://www.blogjava.net/libin2722/comments/commentRss/190766.htmlhttp://www.blogjava.net/libin2722/services/trackbacks/190766.html來寫個AJAX版的聊天室吧！先看看直接使用AJAX要如何做到，首先需要一個簡單的聊天室Servlet… 
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

            41

            42

            43

            44

            45

            46

            47

            48

            49

            50

            51

            52

            53

            54

            55

            
package onlyfun.caterpillar;

             

            import java.io.IOException;

            import java.io.PrintWriter;

            import java.util.LinkedList;

            import java.util.List;

             

            import javax.servlet.ServletException;

            import javax.servlet.http.HttpServletRequest;

            import javax.servlet.http.HttpServletResponse;

             

            public class ChatRoomServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {

            private static LinkedList<Message> messages = new LinkedList<Message>();

            

            public ChatRoomServlet() {

            super(); 

            }

            

            private List<Message> addMessage(String text) {

            if (text != null && text.trim().length() > 0) {

            messages.addFirst(new Message(text));

            while (messages.size() > 10) {

            messages.removeLast();

            }

            }

             

            return messages;

            }

             

            private List<Message> getMessages() {

            return messages;

            }

            

            protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

            List<Message> list = null;

            

            if("send".equals(request.getParameter("task"))) {

            list = addMessage(request.getParameter("msg"));

            }

            else if("query".equals(request.getParameter("task"))){

            list = getMessages();

            }

             

            PrintWriter out = response.getWriter();

            response.setContentType("text/xml");

            response.setHeader("Cache-Control", "no-cache");

             

            out.println("<response>");

            for(int i = 0; i < list.size(); i++) {

            String msg = list.get(i).getText();

            out.println("<message>" + msg + "</message>");

            }

            out.println("</response>");

            }             

            }


Message物件如下… 
1

            2

            3

            4

            5

            6

            7

            8

            9

            10

            11

            12

            13

            14

            15

            16

            17

            18

            19

            20

            21

            22

            23

            
package onlyfun.caterpillar;

             

            public class Message {

            private long id = System.currentTimeMillis();

            private String text;

            

            public Message(String newtext) {

            text = newtext;

            if (text.length() > 256) {

            text = text.substring(0, 256);

            }

            text = text.replace('<', '[');

            text = text.replace('&', '_');

            }

             

            public long getId() {

            return id;

            }

             

            public String getText() {

            return text;

            }

            }


Servlet接受訊息新增與查詢，判斷的方式是檢查請求參數task是send或query。

Servlet會以XML傳回目前List當中的訊息，客戶端可以查詢或插入新訊息時，取得目前List中的訊息，接著在web.xml中設定一下… 
1

            2

            3

            4

            5

            6

            7

            8

            9

            10

            11

            12

            13

            14

            15

            16

            17

            18

            19

            20

            21

            22

            
<?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">

            <servlet>

            <description>

            </description>

            <display-name>

            ChatRoomServlet</display-name>

            <servlet-name>ChatRoomServlet</servlet-name>

            <servlet-class>

            onlyfun.caterpillar.ChatRoomServlet</servlet-class>

            </servlet>

             

            <servlet-mapping>

            <servlet-name>ChatRoomServlet</servlet-name>

            <url-pattern>/ChatRoomServlet</url-pattern>

            </servlet-mapping>

            <session-config>

            <session-timeout>

            30

            </session-timeout>

            </session-config>  

            </web-app>


在網頁中，使用者可以在輸入訊息後按下按鈕送出資訊，並在XML回應取得時，將訊息以一列一列的表格方式顯示出來，另外還設定了週期性的輪詢，即使不輸入新訊息，也可以週期性的取得新的聊天訊息… 
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

            41

            42

            43

            44

            45

            46

            47

            48

            49

            50

            51

            52

            53

            54

            55

            56

            57

            58

            59

            60

            61

            62

            63

            64

            65

            66

            67

            68

            69

            70

            71

            72

            73

            74

            75

            76

            77

            78

            79

            80

            81

            82

            83

            84

            85

            86

            87

            88

            89

            90

            91

            92

            93

            94

            95

            96

            97

            
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

            <html>

            <head>

            <meta http-equiv="Content-Type" content="text/html; charset=BIG5">

            <title>Chat Room</title>

             

            <script type="text/javascript">

            var xmlHttp;

             

            function createXMLHttpRequest() {

            if (window.ActiveXObject) {

            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

            } 

            else if (window.XMLHttpRequest) {

            xmlHttp = new XMLHttpRequest();

            }

            }

             

            function sendMessage() {

            var msg = document.getElementById("text").value;

            

            if(msg == "") {

            refreshMessage();

            return;

            }

            

            var param = "task=send&msg=" + msg;

            ajaxRequest(param);

            document.getElementById("text").value = "";

            }

             

            function queryMessage() {

            var param = "task=query";

            ajaxRequest(param);

            }

             

            function ajaxRequest(param) {

            var url = "ChatRoomServlet?timestamp" + new Date().getTime();

            createXMLHttpRequest();

            xmlHttp.onreadystatechange = refreshMessage;

            xmlHttp.open("POST", url, true);

            xmlHttp.setRequestHeader("Content-Type",

            "application/x-www-form-urlencoded;");

            xmlHttp.send(param);

            }

            

            function refreshMessage() {

            if(xmlHttp.readyState == 4) {

            if(xmlHttp.status == 200) {

            var messages = xmlHttp.responseXML.getElementsByTagName("message");

            

            var table_body = document.getElementById("dynamicUpdateArea");

            var length = table_body.childNodes.length;

            for (var i = 0; i < length; i++) {

            table_body.removeChild(table_body.childNodes[0]);

            }

            

            var length = messages.length;

            for(var i = length - 1; i >= 0 ; i--) {

            var message = messages[i].firstChild.data;

            var row = createRow(message);

            

            table_body.appendChild(row);                        

            }

            setTimeout("queryMessage()", 2000);

            }

            }

            }

             

            function createRow(message) {

            var row = document.createElement("tr");

            var cell = document.createElement("td");

            var cell_data = document.createTextNode(message);

            cell.appendChild(cell_data);

            row.appendChild(cell);

            return row;

            }

             

            </script>

             

            </head>

            <body>

             

            <p>

            Your Message:

            <input id="text"/>

            <input type="button" value="Send"

            onclick="sendMessage()"/>

            </p>

             

            <p>Messages:</p>

            <table align="left">

            <tbody id="dynamicUpdateArea"></tbody>

            </table>

             

            </body>

            </html>


簡單抓個畫面… 


直接用AJAX，後端用JSP/Servlet，您要對請求參數做些判斷，看看是新增訊息或查詢，並要自行輸出XML，有的沒的…

改成DWR的話，就很簡單了，寫個簡單的Java物件… 
1

            2

            3

            4

            5

            6

            7

            8

            9

            10

            11

            12

            13

            14

            15

            16

            17

            18

            19

            20

            21

            22

            23

            
package onlyfun.caterpillar;

             

            import java.util.LinkedList;

            import java.util.List;

             

            public class Chat {

            private static LinkedList<Message> messages = new LinkedList<Message>();

             

            public List addMessage(String text) {

            if (text != null && text.trim().length() > 0) {

            messages.addFirst(new Message(text));

            while (messages.size() > 10) {

            messages.removeLast();

            }

            }

            

            return messages;

            }

             

            public List getMessages() {

            return messages;

            }

            }


接著…在dwr.xml中開放一下… 
1

            2

            3

            4

            5

            6

            7

            8

            9

            10

            11

            12

            13

            
<?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="Chat">

            <param name="class" value="onlyfun.caterpillar.Chat"/>

            </create>

            

            <convert converter="bean" match="onlyfun.caterpillar.Message"/>      

            </allow>

            </dwr>


使用者取得訊息時，是直接傳回List物件，而List中裝的是Message物件，Message物件是自訂物件，conterver設定為 bean，表示DWR會自動將Message的getter名稱轉換為傳回客戶端的JavaScript物件中的屬性，例如Message中有 getText()，則在客戶端可以用message.text這樣的方式來存取。

接著是簡單的客戶端網頁… 
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

            41

            42

            43

            44

            45

            46

            47

            
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

            <html>

            <head>

            <meta http-equiv="Content-Type" content="text/html; charset=BIG5">

            <title>Insert title here</title>

             

            <script src="dwr/interface/Chat.js" type="text/javascript"></script>

            <script src="dwr/engine.js" type="text/javascript"></script>

            <script src="dwr/util.js" type="text/javascript"></script>

             

            <script type="text/javascript">

            function sendMessage() {

            var text = DWRUtil.getValue("text");

            DWRUtil.setValue("text", "");

            Chat.addMessage(text, gotMessages);

            }

             

            function gotMessages(messages) {

            var chatlog = "";

            for (var data in messages) {

            chatlog = "<div>" + messages[data].text +

            "</div>" + chatlog;

            }

            DWRUtil.setValue("chatlog", chatlog);

            setTimeout("queryMessage()", 2000);

            }

             

            function queryMessage() {

            Chat.getMessages(gotMessages);

            }

            </script>

             

            </head>

            <body>

             

            <p>

            Your Message:

            <input id="text"/>

            <input type="button" value="Send"

            onclick="sendMessage()"/>

            </p>

             

            <p>Messages:</p>

            <div id="chatlog"></div>

             

            </body>

            </html>


當List物件傳回時，它成為gotMessages(messages)中的messages物件，而messages物件中包括 Message物件轉換後對應的JavaScript物件，由於我們已經設定了Converter，所以可以用messages[data].text來 取得傳回的訊息…

簡單抓個畫面…


Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1311605



礼物 2008-04-04 11:37 发表评论
]]>DWR 入門與應用（二）http://www.blogjava.net/libin2722/articles/190765.html礼物礼物Fri, 04 Apr 2008 03:35:00 GMThttp://www.blogjava.net/libin2722/articles/190765.htmlhttp://www.blogjava.net/libin2722/comments/190765.htmlhttp://www.blogjava.net/libin2722/articles/190765.html#Feedback0http://www.blogjava.net/libin2722/comments/commentRss/190765.htmlhttp://www.blogjava.net/libin2722/services/trackbacks/190765.html假設您要從資料庫中查詢出一些字串，然後填寫到表單的下拉選單中。

例如一個示意的Java程式如下： 
1

            2

            3

            4

            5

            6

            7

            8

            
package onlyfun.caterpillar;

             

            public class Option {

            public String[] getOptions() {

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

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

            }

            }


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

            2

            3

            4

            5

            6

            7

            8

            9

            10

            
<?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="OPT">

            <param name="class" value="onlyfun.caterpillar.Option"/>

            </create>  

            </allow>

            </dwr>


這是我們的網頁… 
1

            2

            3

            4

            5

            6

            7

            8

            9

            10

            11

            12

            13

            14

            15

            
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

            <html>

            <head>

            <meta http-equiv="Content-Type" content="text/html; charset=BIG5">

            <script src="option.js" type="text/javascript"></script>

            <script src="dwr/interface/OPT.js" type="text/javascript"></script>

            <script src="dwr/engine.js" type="text/javascript"></script>

            <script src="dwr/util.js" type="text/javascript"></script>

             

            </head>

             

            <body>

            選項: <select id="opts"></select>

            </body>

            </html>


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

            2

            3

            4

            5

            6

            7

            8

            
window.onload = function() {

            OPT.getOptions(populate);  

            };

             

            function populate(list){

            DWRUtil.removeAllOptions("opts");

            DWRUtil.addOptions("opts", list);

            }


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

看一下結果… 


好啦！我知道有人在說了，這個程式有夠無聊…Dead

改一下！就是個不錯的範例了，例如連動方塊，唔！在Ajax in action中叫啥？Dynamic double combo？…

假設一個會去從資料庫中查詢資料的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

            
package onlyfun.caterpillar;

             

            import java.util.Map;

            import java.util.TreeMap;

             

            public class Bike {

              private Map<String, String[]> bikes;

              

              public Bike() {

                bikes = new TreeMap<String, String[]>();

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

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

                bikes.put("2002", new 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 String[bikes.size()];

                int i = 0;

                for(String key : bikes.keySet()) {

                  keys[i++] = key;

                }

                return keys; 

              }

              

              public String[] getBikes(String year) {

                return bikes.get(year);

              }

            }


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

一樣的，在dwr.xml中設定： 
1

            2

            3

            4

            5

            6

            7

            8

            9

            10

            
<?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="Bike" scope="application">

            <param name="class" value="onlyfun.caterpillar.Bike"/>

            </create>

            </allow>

            </dwr>


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

            2

            3

            4

            5

            6

            7

            8

            9

            10

            11

            12

            13

            14

            15

            
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

            <html>

            <head>

            <meta http-equiv="Content-Type" content="text/html; charset=BIG5">

            <title>Insert title here</title>

            <script type='text/javascript' src='dwr/interface/Bike.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='bike.js'></script>

            </head>

            <body onload="refreshYearList();">

              年份：<select id="years" onchange="refreshBikeList();"></select><br/><br/>

              型號：<select id="bikes"></select><br/>

            </body>

            </html>


注意，在選完第一個年份後，會觸發onchange事件，接著第二個下拉選單會自動填上對應年份的型號，而不是按鈕按下，再去取得第二個下拉選單，然後refresh...blah...blah...

bike.js如下… 
1

            2

            3

            4

            5

            6

            7

            8

            9

            10

            11

            12

            13

            14

            15

            16

            17

            18

            19

            
function refreshYearList() {

            Bike.getYears(populateYearList);

            }

             

            function populateYearList(list){

            DWRUtil.removeAllOptions("years");

            DWRUtil.addOptions("years", list);

            refreshBikeList();

            }

             

            function refreshBikeList() {

            var year = $("years").value;

            Bike.getBikes(year, populateBikeList);

            }

             

            function populateBikeList(list){

            DWRUtil.removeAllOptions("bikes");

            DWRUtil.addOptions("bikes", list);

            }


一樣很簡單…

看個無聊的畫面…XD





礼物 2008-04-04 11:35 发表评论
]]>DWR 入門與應用（一） http://www.blogjava.net/libin2722/articles/190764.html礼物礼物Fri, 04 Apr 2008 03:34:00 GMThttp://www.blogjava.net/libin2722/articles/190764.htmlhttp://www.blogjava.net/libin2722/comments/190764.htmlhttp://www.blogjava.net/libin2722/articles/190764.html#Feedback0http://www.blogjava.net/libin2722/comments/commentRss/190764.htmlhttp://www.blogjava.net/libin2722/services/trackbacks/190764.htmlhttp://getahead.ltd.uk/dwr/ 下載 dwr.jar，放到WEB-INF/lib下…

負責處理客戶端請求，並呼叫Java物件的是DWRServlet，DWR其實也有些Model 2的味道，只是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

            
<?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吧！ 
1

            2

            3

            4

            5

            6

            7

            
package onlyfun.caterpillar;

             

            public class Hello {

            public String hello(String name) {

            return "哈囉！" + name + "！您的第一個DWR！";

            }

            }


客戶端要呼叫這個Java物件，傳給它參數，而後傳回一個字串，客戶端再顯示這個字串，神奇？其實是要告訴DWRServlet這件事，這需要一個dwr.xml： 
1

            2

            3

            4

            5

            6

            7

            8

            9

            10

            11

            
<?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物件。

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

            2

            3

            4

            5

            6

            7

            8

            9

            10

            11

            12

            13

            14

            15

            16

            17

            18

            19

            
<!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()函式： 
1

            2

            3

            4

            5

            6

            7

            8

            
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檔案中的文字訊息，例如… 
1

            2

            3

            4

            5

            6

            7

            8

            9

            10

            11

            12

            13

            14

            15

            
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準備好… 
1

            2

            3

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

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

            ajax=Ajax in action 中文版的介紹…


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

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

            2

            3

            4

            5

            6

            7

            8

            9

            10

            11

            
<?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物件在整個應用程式階段都活著。

然後，客戶端寫個網頁… 
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

            
<!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如下，簡單的很… 
1

            2

            3

            4

            5

            6

            7

            8

            9

            10

            11

            
function getBookData(ele) {

            Book.getDescription(ele.id, setBookData);

            }

             

            function setBookData(description) {

            DWRUtil.setValue('info', description);

            }

             

            function clearData() {

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

            }


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

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


礼物 2008-04-04 11:34 发表评论
]]>