BlogJava-细心!用心!耐心!-文章分类-AJAX技术http://www.blogjava.net/jesson2005/category/21650.html吾非文人，乃市井一俗人也，读百卷书，跨江河千里，故申城一游； 一两滴辛酸，三四年学业，五六点粗墨，七八笔买卖，九十道人情。zh-cnWed, 18 Apr 2007 06:44:07 GMTWed, 18 Apr 2007 06:44:07 GMT60DWR 入門與應用（三） http://www.blogjava.net/jesson2005/articles/111007.html张金鹏张金鹏Mon, 16 Apr 2007 08:29:00 GMThttp://www.blogjava.net/jesson2005/articles/111007.htmlhttp://www.blogjava.net/jesson2005/comments/111007.htmlhttp://www.blogjava.net/jesson2005/articles/111007.html#Feedback0http://www.blogjava.net/jesson2005/comments/commentRss/111007.htmlhttp://www.blogjava.net/jesson2005/services/trackbacks/111007.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來 取得傳回的訊息…

簡單抓個畫面…



张金鹏 2007-04-16 16:29 发表评论
]]>DWR 入門與應用（二） http://www.blogjava.net/jesson2005/articles/111005.html张金鹏张金鹏Mon, 16 Apr 2007 08:28:00 GMThttp://www.blogjava.net/jesson2005/articles/111005.htmlhttp://www.blogjava.net/jesson2005/comments/111005.htmlhttp://www.blogjava.net/jesson2005/articles/111005.html#Feedback0http://www.blogjava.net/jesson2005/comments/commentRss/111005.htmlhttp://www.blogjava.net/jesson2005/services/trackbacks/111005.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



张金鹏 2007-04-16 16:28 发表评论
]]>DWR 入門與應用（一） http://www.blogjava.net/jesson2005/articles/110998.html张金鹏张金鹏Mon, 16 Apr 2007 08:14:00 GMThttp://www.blogjava.net/jesson2005/articles/110998.htmlhttp://www.blogjava.net/jesson2005/comments/110998.htmlhttp://www.blogjava.net/jesson2005/articles/110998.html#Feedback0http://www.blogjava.net/jesson2005/comments/commentRss/110998.htmlhttp://www.blogjava.net/jesson2005/services/trackbacks/110998.htmlJava 開發人員與網頁設計人員的橋樑 DWR…呃！我懶得寫簡介了…直接來看看可以做什麼吧！…

請先到 http://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中文版 上的介紹畫面…


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


[收藏到我的网摘]   良葛格发表于 2006年09月06日 20:06:00



特别推荐：


张金鹏 2007-04-16 16:14 发表评论
]]>dwr简介 http://www.blogjava.net/jesson2005/articles/110975.html张金鹏张金鹏Mon, 16 Apr 2007 07:34:00 GMThttp://www.blogjava.net/jesson2005/articles/110975.htmlhttp://www.blogjava.net/jesson2005/comments/110975.htmlhttp://www.blogjava.net/jesson2005/articles/110975.html#Feedback0http://www.blogjava.net/jesson2005/comments/commentRss/110975.htmlhttp://www.blogjava.net/jesson2005/services/trackbacks/110975.html最近Ajax比较火，全世界都在讨论。于是我也掺和掺和，直接用XMLHttpRequest？现在的我还没有那个水平。用Echo2或者backbase，又感觉那些纯Ajax的framework太重量级了。我要的只是一些简单的应用而已。于是寻觅的重点放在了一些对xmlhttpRequest进行轻量级包装的代码库上了。于是我找到了DWR（Direct Web Remoting）。DWR的口号是AJAX and XMLHttpRequest made easy，并且它也基本上做到了这一点。它提供了一个友好的框架和一些很有用的JavaScript库，可以让我用起Ajax更容易些。详细的信息可以到他们的网站http://www.getahead.ltd.uk/dwr/。顺便在介绍一个网站吧：http://www.ajaxmatters.com 这里也有很多关于Ajax的资源。

 

下面来简单介绍一下DWR。

其实在没有XMLHttpRequest前DWR就有了，那时它用的是IFrame，效果很差，所以我看看了就没有再diao它。现在的DWR主要用XMLHttpRequest，当然也可以选者用IFrame，但是不推荐。

DWR是个open source software，授权方式是 ASL version 2.0的。现在网站上examples and tutorials做的也不错。我就根据这些东西自己也做了一个应用，在本文的后面我会详细讲到。

现在DWR的最新版本是1.0RC1。在我的试用环境相还算比较稳定，没有出现什么问题。

DWR本身以一个dwr.jar的jar包存在，它的入口时一个Servlet（uk.ltd.getahead.dwr.DWRServlet）所以要在web.xml里配置一下就可以了。具体配置看这里http://www.getahead.ltd.uk/dwr/intro.html。比较简单。dwr为我们提供了一个framework帮我们很容易的实现JavaScript和java之间的通信。

 

howitworks.png
我还没有看过dwr的源码，具体他是怎么实现的我也不太清楚。但大致上肯定是通过xmlhttprequest来调用它的servlet然后把数据用xml打包解包了。其实我觉得这部分到不是dwr给我带来的最方便的地方。最方便的地方应该是他的那些js的库。

所以下面我要介绍一下它的两个重要js对象。

DWREngine （engine.js中），DWRUtil (util.js中)。

DWREngine中的方法是基本上是关于XMLHttpRequest的。

下面中介绍一些

DWREngine.setErrorHandler(handler)

默认的错误处理时弹出一个对话框，你可以通过这个方法改变成你需要的表现形式。

DWREngine.setWarningHandler(handler)

改变默认的警告处理形式

DWREngine.beginBatch()

Some Remote Function…

DWREngine.endBatch()

当你有几个远程调用要一起进行时，就要用到这两个方法。

如果不用这两个方法，你就会发现你的远程调用并不以你想象的顺序进行。

DWREngine中还有一些其它的方法，我没有用过。你可以通过dwr的js-doc来看。如果通过文档看不懂它是干什么用的，就看js源码，源码的注释也是比较详细的。

DWRUtil中也有一些很有用的方法。这些方法一般是编写js的辅助方法。

比如setValue和getValue。大多数html标签有value属性，这时你要获取或者设置它的值时就用$(“someid”).value就可以了。但是有些html标记是没有value属性的，它的值时在标签的中间，如<span id=”span1”>some value</span>这时你要取或设它的值的时候就用DWRUtil.setValue($(“span1”)，someValue)。这样你就可以在客户端动态的表现一些数据了。

还有很多很好用的方法，dwr的例子中有一些说明，源码中的注释也比较详细。

Dwr就介绍到这里吧。下一篇，我做了个table的例子。
screen.jpg



张金鹏 2007-04-16 15:34 发表评论
]]>把DWR的配置写到Spring的配置文件里（Spring2 新特性-自定义schema初体验） http://www.blogjava.net/jesson2005/articles/110973.html张金鹏张金鹏Mon, 16 Apr 2007 07:33:00 GMThttp://www.blogjava.net/jesson2005/articles/110973.htmlhttp://www.blogjava.net/jesson2005/comments/110973.htmlhttp://www.blogjava.net/jesson2005/articles/110973.html#Feedback0http://www.blogjava.net/jesson2005/comments/commentRss/110973.htmlhttp://www.blogjava.net/jesson2005/services/trackbacks/110973.html要读懂我这篇文章估计需要一些前期知识：
你要知道Spring是什么，并且要知道Spring已经出了2.0的版本了。
你要知道DWR是什么，并且要知道DWR也要出2.0的版本了。

呵呵，开个玩笑……。这年头在BlogJava上混的，估计没几个不知道上面这两个项了。

好了，现在言归正传。DWR本身就提供对Spring的支持，可以直接把Spring中的Bean暴露给客户端浏览器的Javascript调用。在dwr.xml中的写法是这样的：

<dwr>
    <allow>
        <create creator="spring" javascript="AjaxPortalService">
            <param name="beanName" value="AjaxPortalService"/>
            <include method="changeWondowState"/>
            <include method="changeWorkbenchState"/>
            <include method="changeWindowOrder"/>
        </create>
    </allow>
</dwr>

这样写到也没什么，只是把项目分模块以后，虽有的配置都写到一个dwr.xml文件里面维护起来比较麻烦，尤其再遇到版本管理中的代码合并。所以曾经我扩展了DWR，让它可以从多个文件读取配置信息。然后每个模块自己一个配置文件，跟着source一起走。这样做也有问题，就是现在Java应用程序的配置文件太多啦！Spring的配置，WebWork的配置，Hibernate的配置，DWR的配置，再加上一些杂七杂八的xml和properties。看着这些配置文件简直要疯掉了。

正在此时，spring2横空出世，现在你可以把一些配置文件合并到一起了。正好趁此机会体验一下Spring2的自定义schema特性。

目标：
把DWR的配置写成这样：
<?xml version="1.0" encoding="GBK"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:tx="http://www.springframework.org/schema/tx"
    xmlns:aop="http://www.springframework.org/schema/aop"
    xmlns:dwr="http://www.devside.org/schema/spring/dwr"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.0.xsd
           http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-2.0.xsd
           http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-2.0.xsd
           http://www.devside.org/schema/spring/dwr http://www.devside.org/schema/spring/dwr.xsd"
    default-autowire="byName">
    
    <bean id="departmentDao" class="cn.com.legendapl.hellostruts2.dao.DepartmentDao"/>
    <bean id="employeeDao" class="cn.com.legendapl.hellostruts2.dao.EmployeeDao"/>
    <bean id="companyService" class="cn.com.legendapl.hellostruts2.service.CompanyService"/>
    
    <aop:config>
        <aop:pointcut id="companyServiceOperation" expression="execution(* cn.com.legendapl.hellostruts2.service.ICompanyService.*(..))" />
        <aop:advisor advice-ref="txAdvice" pointcut-ref="companyServiceOperation" />
    </aop:config>    
    
    <bean id="ajaxCompanyProxy" class="cn.com.legendapl.hellostruts2.ajax.AjaxCompanyProxy"/>
    
    <dwr:allow id="ajaxCompanyProxyAllow">
        <dwr:create beanName="ajaxCompanyProxy" javascript="CompanyProxy">
            <dwr:include method="findEmployeeById"/>
        </dwr:create>
        <dwr:convert converter="bean" match="cn.com.legendapl.hellostruts2.entity.*"/>
    </dwr:allow>
</beans>


重点在这里：
    <dwr:allow id="ajaxCompanyProxyAllow">
        <dwr:create beanName="ajaxCompanyProxy" javascript="CompanyProxy">
            <dwr:include method="findEmployeeById"/>
        </dwr:create>
        <dwr:convert converter="bean" match="cn.com.legendapl.hellostruts2.entity.*"/>
    </dwr:allow>

好了现在动手开始做。

原理其实很简单，现在看张图。画的不好，敬请原谅！



spring-dwr.png

从这样图中我们可以看出我们要做如下工作：
1、做一个dwr.xsd，定义spring配置文件中的dwr这部分配置的schema。
   要做这个需要有一定xml和xsd的知识，我也是现学现用啦！

<?xml version="1.0" encoding="UTF-8"?>
<xsd:schema xmlns="http://www.devside.org/schema/spring/dwr"
    xmlns:xsd="http://www.w3.org/2001/XMLSchema"
    xmlns:beans="http://www.springframework.org/schema/beans"
    targetNamespace="http://www.devside.org/schema/spring/dwr" 
    elementFormDefault="qualified"    
    attributeFormDefault="unqualified">

    <xsd:import namespace="http://www.springframework.org/schema/beans" schemaLocation="http://www.springframework.org/schema/beans/spring-beans-2.0.xsd"/>
    
    <xsd:element name="allow">
        <xsd:complexType>
            <xsd:complexContent>
                <xsd:extension base="beans:identifiedType">
                    <xsd:sequence>
                        <xsd:element name="create" type="createType" minOccurs="0" maxOccurs="unbounded"/>                
                        <xsd:element name="convert" type="convertType" minOccurs="0" maxOccurs="unbounded"/>                
                    </xsd:sequence>  
                </xsd:extension>
            </xsd:complexContent>
        </xsd:complexType>
    </xsd:element>    
    <xsd:complexType name="createType">        
        <xsd:sequence>
            <xsd:element name="auth" type="authType" minOccurs="0" maxOccurs="unbounded"/>
            <xsd:element name="include" type="includeType" minOccurs="0" maxOccurs="unbounded"/>
            <xsd:element name="exclude" type="excludeType" minOccurs="0" maxOccurs="unbounded"/>                            
        </xsd:sequence>
        <xsd:attribute name="beanName" type="xsd:string" use="required"/>
        <xsd:attribute name="javascript" type="xsd:string" use="required"/>                                                
    </xsd:complexType>   
    
    <xsd:complexType name="convertType">
        <xsd:attribute name="converter" type="xsd:string" use="required"/>
        <xsd:attribute name="match" type="xsd:string" use="required"/>
    </xsd:complexType>  
    
    <xsd:complexType name="authType">
        <xsd:attribute name="method" type="xsd:string" use="required"/>
        <xsd:attribute name="role" type="xsd:string" use="required"/>
    </xsd:complexType>
    <xsd:complexType name="includeType">
        <xsd:attribute name="method" type="xsd:string" use="required"/>
    </xsd:complexType>
    <xsd:complexType name="excludeType">
        <xsd:attribute name="method" type="xsd:string" use="required"/>
    </xsd:complexType>
</xsd:schema>

2、我们要做一个DWRNamespaceHandler来处理DWR的配置信息，其实里面就做一件事把AllowBeanDefinitionParser注册给allow节点。因为我们dwr的配置部分根节点就一个标签allow，所以我们就做一个用于解析allow标签的AllowBeanDefinitionParser解析器就行。如果我们的根节点还有其他的标签，同样也要做相应的解析器。

public class DWRNamespaceHandler extends NamespaceHandlerSupport {

    public void init() {
        //把AllowBeanDefinitionParser注册到allow节点
        registerBeanDefinitionParser("allow", new AllowBeanDefinitionParser());
    }

}

其实难点是做AllowBeanDefinitionParser，这里你需要一些DOM模型的知识，来操作配置节点的内容。然后根据内容进行处理。在这里我们，需要做三件事：
   [1]  把配置节点的内容转换成对象模型，即AllowBean（其实就是一些POJO罢了）。
   [2]  把这个AllowBean注册给Spring的Context，这一步是可选的。因为我们主要是把这个Bean给DWR，当然顺道给Spring一份也没什么问题。
   [3] 把这个AllowBean注册到AllowBeanHolder。

3、AllowBeanHolder。
   其实这就是个简单的singleton类，整个运行期只有一个实例。它就像一个容器，AllowBeanDefinitionParser往里放，DWR的Configuration再从这里取。

4、扩展DWR的DefaultConfiguration，我们做一个SpringConfiguration。DWR的DefaultConfiguration是负责读取配置信息的。我们在其中加入从AllowBeanHolder读取配置信息的功能即可。

5、扩展DWR的DWRServlet，我们做一个SpringDWRServlet，原来的DWRServlet加载的是DefaultConfiguration，我们的Serlvet加载我们自己的SpringConfiguration即可。

6、万事俱备，只欠东风啦。就是让Spring知道我们干了这些！
   在META-INF目录下（如果没有在src目录下创建一个）加入spring.handlers和spring.schemas两个文件。
   spring.handlers中的内容：
   http\://www.devside.org/schema/spring/dwr=org.devside.core.support.dwr.DWRNamespaceHandler
   spring.schemas中的内容：
   http\://www.devside.org/schema/spring/dwr.xsd=org/devside/core/support/dwr/dwr.xsd
   
   注意不要写错字哦，我一开始就写错一个字母，结果怎么调试都不能成功，还以为Spring2有问题呢。

ok了，下面我们就可以写一个spring的配置文件来试试喽。

下面提供两个源码包，一个是spring-dwr的源码，一个是hellosturts2，一个struts2+spring2+hibernate3.2的例子，其中有用到spring-dwr的例子。

为了减小容量，我把jar都去掉了，lib目录下提供了一个列表，你可以自己去找相关的jar包。

http://www.blogjava.net/Files/mstar/HelloStruts2.zip

http://www.blogjava.net/Files/mstar/spring-dwr.zip

张金鹏 2007-04-16 15:33 发表评论
]]>dwr简介--一个例子(续二) http://www.blogjava.net/jesson2005/articles/110972.html张金鹏张金鹏Mon, 16 Apr 2007 07:32:00 GMThttp://www.blogjava.net/jesson2005/articles/110972.htmlhttp://www.blogjava.net/jesson2005/comments/110972.htmlhttp://www.blogjava.net/jesson2005/articles/110972.html#Feedback0http://www.blogjava.net/jesson2005/comments/commentRss/110972.htmlhttp://www.blogjava.net/jesson2005/services/trackbacks/110972.html阅读全文

张金鹏 2007-04-16 15:32 发表评论
]]>dwr简介--一个例子(续一) http://www.blogjava.net/jesson2005/articles/110968.html张金鹏张金鹏Mon, 16 Apr 2007 07:31:00 GMThttp://www.blogjava.net/jesson2005/articles/110968.htmlhttp://www.blogjava.net/jesson2005/comments/110968.htmlhttp://www.blogjava.net/jesson2005/articles/110968.html#Feedback0http://www.blogjava.net/jesson2005/comments/commentRss/110968.htmlhttp://www.blogjava.net/jesson2005/services/trackbacks/110968.html阅读全文

张金鹏 2007-04-16 15:31 发表评论
]]>dwr简介--一个例子(一)http://www.blogjava.net/jesson2005/articles/110966.html张金鹏张金鹏Mon, 16 Apr 2007 07:29:00 GMThttp://www.blogjava.net/jesson2005/articles/110966.htmlhttp://www.blogjava.net/jesson2005/comments/110966.htmlhttp://www.blogjava.net/jesson2005/articles/110966.html#Feedback0http://www.blogjava.net/jesson2005/comments/commentRss/110966.htmlhttp://www.blogjava.net/jesson2005/services/trackbacks/110966.html阅读全文

张金鹏 2007-04-16 15:29 发表评论
]]>DWR小结DWRUtil篇 http://www.blogjava.net/jesson2005/articles/110957.html张金鹏张金鹏Mon, 16 Apr 2007 07:14:00 GMThttp://www.blogjava.net/jesson2005/articles/110957.htmlhttp://www.blogjava.net/jesson2005/comments/110957.htmlhttp://www.blogjava.net/jesson2005/articles/110957.html#Feedback0http://www.blogjava.net/jesson2005/comments/commentRss/110957.htmlhttp://www.blogjava.net/jesson2005/services/trackbacks/110957.html$();

功能:相当于document.getElementById(id);

参数: id或name属性值;

例:

<script>

       Var ele=$(txt_test);

       Var str=DWRUtil.toDescriptiveString(ele,1)

       DWRUtil.debug(str);

</script>

 

DWRUtil.getValue();

功能:获得指定元素value值

参数: id或name属性值;

注意:该函数只能用于有value属性的元素

例:

<script>

       var val=DWRUtil.getValue(“txt_test”);

       DWRUtil.debug(val);

</script>

 

DWRUtil.getValues();

功能:获得一组指定元素的value值;

参数:id或name构成的数组对象

例:

<script>

       Var arr_=DWRUtil.getValues({“txt_name”:null,”txt_pswd”:null});

       Var str=DWRUtil.toDescriptiveString(arr,1)

       DWRUtil.debug(str);

</script>

 

DWRUtil.setValue();

功能:设置指定元素的value值

参数: id或name属性值

<script>

       DWRUtil.setValue(“txt_test”,”wiley”);

</script>

 

 

DWRUtil.setValues();

功能:设置一组指定元素的值

参数: id或name构成的数组对象

例:

<script>

       DWRUtil.setValues({“txt_name”:”wiley”,”txt_pswd”:”wiley”});

</script>

 

DWRUtil.getText();

功能:获得select元素的文本值

参数: id或name属性值

例:

<script>

       Var txt=DWRUtil.getText (“sel_test”);

       Var val=DWRUtil.getValue(“sel_test”);

       DWRUtil.debug(“Text:”+txt+”\tValue:”+val);

</script>

 

DWRUtil.addRows();

功能:指定表格添加行

格式:DWRUtil.addRows(id,items, functions);

参数:

第一个参数:table或tbody的id属性值

第二个参数:数组或链表(可能用词不是很适合)

第三个参数:函数链表

 

例1:

 

      

 

             

      

 

 

 

 

 

      

 

 

 

 

 

 

 

 

 

 

 

 

 

主题

<script>

       Var arr_={“wiley’s blog”,”wiley中国”};

       DWRUtil.addRows(“tby_test”,arr_,[function(arr_){return arr_}]);

</script>

 

 

例2:

 

 

      

 

             

             

      

 

 

 

 

 

      

 

 

 

 

 

 

 

 

 

 

 

 

 

名称 网址

<script>

       Var items=[{“name”:”wiley中国”,”add”:”wiley-cn.com”}];

       DWRUtil.addRows(“tby_test”,items,[function(item){return item.name}, function(item){return item.add}]);

</script>

 

DWRUtil.romoveAllRows();

功能:删除指定表格行

参数:table或tbody的id属性值

例

 

      

 

             

             

      

 

 

 

 

 

      

 

 

 

 

 

 

 

 

 

 

 

 

 

名称 网址

<script>

       DWRUtil.romoveAllRows(“tby_test”);//每次添加前将原有数据行删除,防止数据重叠

       Var items=[{“name”:”wiley中国”,”add”:”wiley-cn.com”}];

       DWRUtil.addRows(“tby_test”,items,[function(item){return item.name}, function(item){return item.add}]);

</script>

 

DWRUtil.addOptions();

功能:添加select元素的option子元素

格式:DWRUtil.addOption(id,items)或DWRUtil.addOption(id,items,valueProp,textProp);

参数:

第一个参数:select的id或name属性值

第二个参数:数组或链表(填充数据)

第三、四个参数:链表节点的属性,第三个填充value值，第四个填充text值

 

例：

<script>

       Var arr_={“wiley”,”wiley中国”};

       DWRUtil.addRows(“sel_test”,arr_);//此时value与text值相同

       DWRUtil.romoveAllOptions(“sel_test”);

       Var items=[{“name”:”wiley中国”,”add”:”wiley-cn.com”}];

       DWRUtil.addRows(“sel_test”,”add”,”name”);//此时value与text不相同

</script>

 

DWRUtil.romoveAllOptions();

功能:删除指定select元素的option子元素

参数:select元素的id或name属性值

例:前面例子有用到

 

DWRUtil.debug();

功能:等价于alert()

例:前面例子有用到

 

DWRUtil.toDescriptiveString();

功能:将对象序列化成字符串,主要用于调试

例:前面的例子有用到



张金鹏 2007-04-16 15:14 发表评论
]]>DWR的学习文档（Hello World,类型转换,Spring,Annotation) http://www.blogjava.net/jesson2005/articles/110956.html张金鹏张金鹏Mon, 16 Apr 2007 07:12:00 GMThttp://www.blogjava.net/jesson2005/articles/110956.htmlhttp://www.blogjava.net/jesson2005/comments/110956.htmlhttp://www.blogjava.net/jesson2005/articles/110956.html#Feedback0http://www.blogjava.net/jesson2005/comments/commentRss/110956.htmlhttp://www.blogjava.net/jesson2005/services/trackbacks/110956.html阅读全文

张金鹏 2007-04-16 15:12 发表评论
]]>用DWR2.0做的一个Server日志查看器http://www.blogjava.net/jesson2005/articles/110954.html张金鹏张金鹏Mon, 16 Apr 2007 07:02:00 GMThttp://www.blogjava.net/jesson2005/articles/110954.htmlhttp://www.blogjava.net/jesson2005/comments/110954.htmlhttp://www.blogjava.net/jesson2005/articles/110954.html#Feedback0http://www.blogjava.net/jesson2005/comments/commentRss/110954.htmlhttp://www.blogjava.net/jesson2005/services/trackbacks/110954.html用DWR2.0做的一个Server日志查看器

有时候我需要查看已经部署到服务器上的应用程序的日志，每次都要远程登录服务器感觉很麻烦，所以一般我会把log文件的目录用apache做个网站，这样通过IE就可以访问到了。但是有时要看即时输出情况，就要不断的F5，很麻烦。所以就有个想法，不如用DWR2.0的反转Ajax来做个程序，让日志有变化时自动的发送到客户端，这样就我一个劲的按F5了。

我下面就把这个程序分享给大家，希望大家提提意见。

首先是环境：
DWR 2.0.rc1
Sun JDK 1.5

先看张运行起来的图吧，大家一看就知道这是个什么东西了。
logviewer.png
你可以制定要监视的log文件，当然有哪些文件文件可以被监视，你必须在服务端的xml配置中文件设置，当然你也可以监视一个目录里的log文件，这对于而log文件是每天生成一个的情况很有用。你可以设定在浏览器上显示的行数，操作行数，屏幕会自动滚动。你还可以添加一些过滤器，过滤掉不想看见的行，我目前只做了到了过滤掉一些信息，当然如果你有兴趣，你也再添加一些更复杂的过滤器。过滤器的模式是用正则表达式表示的。

下面是点击“开始监听”，运行后样子
logviewer2.png
如果服务器上的catalina.2006-12-09.log文件发生变化，客户端的浏览器上log显示区也会自动的向上滚动。


下面我就大致的介绍一下如何用DWR2.0来实现这样的功能。在这里介绍的可能不是很详细，不清楚的地方请看我提供的源码。

先来介绍一下目录结构
├─lib  -- 编译和测试用的第三方类库
├─webapp -- 部署目录
├─test -- 测试程序
├─java -- 主程序
└─build.xml -- ant构建文件

webapp下的文件和目录
│  style.css  -- 样式表文件
│  index.html -- 主画面文件
│
├─WEB-INF
│  │  web.xml -- 部署配置文件
│  │  dwr.xml -- dwr的配置文件
│  │  conf.xml -- 我们这个应用程序配置文件，主要是配置log文件
│  │
│  ├─classes
│  │
│  └─lib
│
└─script -- javascript文件


index.html中就是我们上面的图片上能看到的页面元素。其中的控件的事件处理都写在\script\logviewer.js文件中。

当页面加载时执行startPoll()方法，复杂开始与服务器的通信，并且把log文件选择框初始化，把已经添加过滤器列表显示出来。

function  startPoll() {
    DWREngine.setActiveReverseAjax( true );

    LogManager.getLogFileNames( function  (data) {
        DWRUtil.removeAllOptions( " log_file " );
        DWRUtil.addOptions( " log_file " , data);
    });

    LogManager.getFilters( function (data) {
         for  ( var  i  =   0 ; i  <  data.length; i ++ ) {
            addFilterDiv(data[i].pattern, data[i].id);
        }
    });
}


当点击“开始监听”按钮时调用服务端的LogManager的send方法，服务端开启监听线程，开始监听做为参数传递的文件，如果文件有变动就会把最近增加的行发送到浏览器上来。

var  startWatch  =   function () {
    clearLog();
    LogManager.send(DWRUtil.getValue( " log_file " ));
}


当点击“结束监听”按钮，调用LogManager的stop()方法，结束掉监听线程。

 

function  stopWatch() {
    LogManager.stop();
}

 


当点击“清空日志”按钮，清除mainPanel中的所有子元素

function  clearLog() {
     var  mainPanel  =  $( " main_panel " );
     while  (mainPanel.hasChildNodes()) {
        mainPanel.removeChild(mainPanel.firstChild);
    }
}

当点击“添加过滤器”，填充输入框，要求输入做为过滤器的正则表达式，输入完成后，要做两件事：
1、LogManager.addFilter方法，把输入的正则表达式传送给服务端。
2、把这个正则表达式添加到页面上。

function  addFilter() {
     var  regex  =  prompt( " 输入正则表达式 " ,  "" );
     if  (regex  !=   null   &&  regex  !=   "" ) {
        LogManager.addFilter(regex,  function  (filterId) {
            addFilterDiv(regex, filterId);
        });
    }
}
注意这里，我们用到了DWR的回调模式，在调用服务端方法LogManager.addFilter成功后我们才调用客户端的addFilterDiv方法把这个输入的正则表达式显示到页面上。

如果你足够细心的话，应该会发现在这个js文件中有一个叫做addNewLine的方法在index.html中是没有被调用的。这个方法其实是给服务端的LogManager.send函数调用的。

上面这些内容就是服务端脚本的主要内容了，其实很简单。主要负责通过DWR与服务端通信和处理页面显示。

下面介绍服务端的核心类：LogManager

这个类主要就这样几个方法：
   /**
     * 停止监控
     */
    public void stop() {
        if (watcher != null) {
            watcher.halt();
        }
    }

    /**
     * 发送log信息
     */
    public void send(String filename) {
        WebContext wctx = WebContextFactory.get();
        final ScriptSession scriptSession = wctx.getScriptSession();
        if (watcher != null) {
            watcher.halt();
        }

        try {
            watcher = new LogFileWatcher(filename);
            watcher.addListener(new LogUpdateListener() {
                public void onLogUpdate(List<String> lines) {
                    for (String line : lines) {
                        if (checkFilters(line)) {
                            ScriptBuffer scriptBuffer = new ScriptBuffer();
                            scriptBuffer.appendScript("addNewLine(")
                                    .appendData(line)
                                    .appendScript(");");
                            scriptSession.addScript(scriptBuffer);
                        }
                    }
                }
            });
            watcher.start();
        } catch (IOException e) {
            ScriptBuffer scriptBuffer = new ScriptBuffer();
            scriptBuffer.appendScript("addNewLine(")
                    .appendData(e.getMessage())
                    .appendScript(");");
            scriptSession.addScript(scriptBuffer);
            log.warn(e);
        }
    }

    /**
     * 取得指定的日志文件路径
     *
     * @return 指定的日志文件路径
     */
    public List<String> getLogFileNames() {
        List<String> filenames = new ArrayList<String>();
        try {
            XMLConfiguration config = getConfiguration();
            List logfiles = config.getList("log-files.file");
            for (Object o : logfiles) {
                filenames.add((String) o);
            }
        } catch (ConfigurationException e) {
            log.warn(e);
        }

        return filenames;
    }

    /**
     * 取得指定的日志目录下的文件
     *
     * @return 指定的日志目录下的文件
     */
    public List<String> getLogFileNamesFromDir() {
        List<String> filenames = new ArrayList<String>();
        try {
            XMLConfiguration config = getConfiguration();
            String dir = config.getString("log-dir.dir");
            if (dir != null) {
                File rootDir = new File(dir);
                if (rootDir.exists()) {
                    if (rootDir.isFile()) {
                        filenames.add(rootDir.getPath().replace('\\', '/'));
                    } else if (rootDir.isDirectory()) {
                        String patternString = config.getString("log-dir.filter");
                        File[] files;
                        if (patternString != null && !patternString.equals("")) {
                            files = rootDir.listFiles(new LogFileFilter(patternString));
                        } else {
                            files = rootDir.listFiles();
                        }

                        for (File file : files) {
                            filenames.add(file.getPath().replace('\\', '/'));
                        }
                    }
                }
            }
        } catch (ConfigurationException e) {
            log.warn(e);
        }

        return filenames;
    }

    /**
     * 添加一个过滤器，返回过滤器的id
     */
    public int addFilter(String regex) {
        synchronized (filters) {
            Filter filter = new Filter(regex, SequenceGenerator.getInstance().next(), FilterType.INCLUDE);
            filters.add(filter);
            return filter.getId();
        }

    }

    /**
     * 根据id删除一个过滤器
     */
    public void removeFilter(int id) {
        synchronized (filters) {
            filters.remove(new Filter(id));
        }
    }

    /**
     * 取得现在所有的过滤器列表
     */
    public List<Map<String, Object>> getFilters() {
        List<Map<String, Object>> result = new ArrayList<Map<String, Object>>();
        synchronized (filters) {
            for (Filter filter : filters) {
                Map<String, Object> filterItem = new HashMap<String, Object>();
                filterItem.put("id", filter.getId());
                filterItem.put("pattern", filter.getPattern().pattern());
                result.add(filterItem);
            }
        }
        return result;
    }

对于大家都做过Java的朋友来说，这些代码应该很容易就能看懂，我就不多说了。大家主要注意一下ScriptSession类，这个类就是起到主要功能的类了。

其中的LogFileWatcher是一个Thread类，它是用来监视log文件的。

SequenceGenerator.java是用来生成过滤器的id的。

LogUpdateListener.java是一个接口，用于实现事件回调的。

然后看一个dwr的配置文件
<dwr>
    <allow>
        <create creator="new" javascript="LogManager" scope="session">
            <param name="class" value="org.devside.logviewer.LogManager"/>
            <include method="send"/>
            <include method="stop"/>
            <include method="getLogFileNames"/>
            <include method="getLogFileNamesFromDir"/>
            <include method="addFilter"/>
            <include method="removeFilter"/>
            <include method="getFilters"/>
        </create>
    </allow>
</dwr>

这里的配置文件和1.x几乎没什么两样，就是scope我这里设置成了session范围的。这样就可以多个人同时监视不同的log文件了。

web.xml文件也基本上是老样子
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="LogViewer" 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>Web Log Viewer</display-name>

    <servlet>
        <description>Direct Web Remoter Servlet</description>
        <display-name>DWR Servlet</display-name>
        <servlet-name>dwr-invoker</servlet-name>
        <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
        <init-param>
            <param-name>debug</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>pollAndCometEnabled</param-name>
            <param-value>true</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>dwr-invoker</servlet-name>
        <url-pattern>/dwr/*</url-pattern>
    </servlet-mapping>

    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
</web-app>
dwr的包名发生了变化，并且要开启反转ajax，就要把pollAndCometEnabled参数设置为true。

总结，总体来说DWR2.0中的反转ajax还是很容易使用的，这也是dwr的一贯风格，不用知道过多的细节就能容易的实现ajax。dwr绝对是Java开发者的首选ajax框架。
另外我这个程序其实还是为了演示用的，如果想要用户实际开发可能还需要修改，比如安全性上面，性能上面。而性能上面的主要问题是客户端浏览器，如果服务端的log文件过大，而浏览器有不能即时的回收内存，就会造成客户端浏览器内存占用过大而死掉的问题。而服务端由于java的内容回收机制已经比较成熟应该不会有什么问题。我在ie6和firefox2都试过了，firefox效果能好一些。

源码下载：
http://www.blogjava.net/Files/mstar/LogViewer.part1.rar
http://www.blogjava.net/Files/mstar/LogViewer.part2.rar

张金鹏 2007-04-16 15:02 发表评论
]]>ajax探索http://www.blogjava.net/jesson2005/articles/110143.html张金鹏张金鹏Thu, 12 Apr 2007 05:06:00 GMThttp://www.blogjava.net/jesson2005/articles/110143.htmlhttp://www.blogjava.net/jesson2005/comments/110143.htmlhttp://www.blogjava.net/jesson2005/articles/110143.html#Feedback0http://www.blogjava.net/jesson2005/comments/commentRss/110143.htmlhttp://www.blogjava.net/jesson2005/services/trackbacks/110143.html阅读全文

张金鹏 2007-04-12 13:06 发表评论
]]>GWT入门http://www.blogjava.net/jesson2005/articles/110101.html张金鹏张金鹏Thu, 12 Apr 2007 02:46:00 GMThttp://www.blogjava.net/jesson2005/articles/110101.htmlhttp://www.blogjava.net/jesson2005/comments/110101.htmlhttp://www.blogjava.net/jesson2005/articles/110101.html#Feedback0http://www.blogjava.net/jesson2005/comments/commentRss/110101.htmlhttp://www.blogjava.net/jesson2005/services/trackbacks/110101.html

面向 Java 开发人员的 Ajax: Google Web Toolkit 入门

developerWorks
文档选项
将此页作为电子邮件发送

将此页作为电子邮件发送

未显示需要 JavaScript 的文档选项

拓展 Tomcat 应用

下载 IBM 开源 J2EE 应用服务器 WAS CE 新版本 V1.1


级别: 初级

肖 菁, 唯 J 族创始人

2006 年 7 月 03 日

Ajax 被用于创建更加动态和交互性更好的 Web 应用程序。Google Web Toolkit (简称GWT) 是 Google 推出的 Ajax 应用开发包，GWT 支持开发者使用Java 语言开发 Ajax 应用。本文中作者将介绍如何使用 GWT 开发 Ajax 应用的基本方法和步骤。

Ajax简介

Ajax是 Asynchronous JavaScript and XML（以及 DHTML 等）的缩写，由XHTML、CSS、JavaScript、XMLHttpRequest、XML等技术组合而成，是当前Web应用开发领域的热门技术，用于创建更加动态和交互性更好的Web应用程序，提升用户的浏览体验。

Ajax的核心是JavaScript对象XmlHttpRequest。XmlHttpRequest处理所有服务器通信的对象，是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

Ajax并不是本文的中心关注点，因此这里不再赘述，请大家访问参考资源区的相关链接，了解更多关于Ajax技术和应用方面的知识。


回页首


为什么选择GWT？

众所周知，即使对于Ajax技术非常熟悉的开发者而言，Ajax应用的开发和调试过程也不是一件容易的事情，更困难的是，到目前为止，一直没有出现合适的开发工具能够支持Ajax应用的开发和调试。

与此相反的是，Java语言--企业应用开发的主流语言-的开发和调试过程却因为有各种各样开发工具的支持而简单的多，而且这样的开发工具我们可以免费获得，比如Eclipse、NetBeans。

如果能够应用Java语言开发Ajax，Ajax应用开发的最大难题-开发工具的缺失-就将迎刃而解。这种情况下，我们就可以既充分利用Java语言的开发优势降低Ajax应用开发的难度，加快Ajax应用的开发速度，为Ajax的大规模应用创造可能，又可以充分发挥Ajax技术的优势，创建更加动态和交互性更好的Web应用程序，提升用户的浏览体验。

Google Web Toolkit(简称GWT)的出现为我们提供了这种可能。GWT是Google推出的Ajax应用开发包，支持开发者使用Java语言开发Ajax应用。GWT框架本身是开源的，但是GWT中的开发工具仅仅提供开发用License，不允许分发。

GWT提供了一组基于Java语言的开发包，这个开发包的设计参考Java AWT包设计，类命名规则、接口设计、事件监听等都和AWT非常类似。熟悉Java AWT的开发者不需要花费多大的力气就能够快速的理解GWT开发工具包，将更多地时间投入到GWT应用的开发过程中。

开发出来的Java应用将由GWT开发包提供的编译工具编译后声生成对应的、应用了Ajax技术的Web应用，Java应用中出现的、和服务器之间的交互动作被自动生成的异步调用代码所代替。


回页首


GWT特性

GWT除了支持将应用Java语言开发的应用转化为Ajax应用，同时提供了更多的高级特性，下面是这些特性的简单描述。

1. GWT编译器

GWT编译器是GWT的核心，负责完成将Java代码翻译很Ajax内容的工作。GWT编译器能够翻译Java语言的大部分特性。包括支持Java语言中的基本类型、违例处理等，支持java.lang包和java.util包中的绝大部分类和接口，支持正则表达式和序列化。

2. 跨平台支持

如果你使用GWT中提供的显示组件(比如Button)和组装组件(比如VerticalPanel)，GWT编译生成的Ajax应用能够支持大部分的浏览器和操作系统，比如Internet Explorer、Firefox等，也能够支持Linux、Windows等不同操作系统。这是因为GWT最大限度的将这些控件翻译成浏览器内置的类型。比如Button类编译后生成的是标准HTML：<input type="button">。

GWT建议使用CSS修饰页面元素的显示效果。GWT的类中很少提供访问页面元素样式属性的方法，我们可以直接在CSS文件中通过对应的样式名称来设置页面元素的默认显示效果。比如使用 .gwt-Button { font-size: 150%; } 使用Button元素的默认显示效果。

3. 宿主模式(Hosted Mode)

宿主模式是指我们和没有转换为Ajax应用的GWT应用交互的状态。当我们开发和调试时，我们就一直处在宿主模式下。在这种情况下，Java虚拟机使用GWT内置的浏览器运行GWT应用编译后的class内容，因此能够提供"编码、测试、调试"过程的最佳速度。

我们可以运行com.google.gwt.dev.GWTShell启动宿主模式。

4. Web模式(Web Mode)

Web模式是指已经成功转化为Ajax应用的状态，这种状态下，我们已经开始通过Web方式来访问Ajax应用了。

在Web模式下运行时，不再需要GWT工具包或者JVM的支持。

5. 命令行工具

GWT工具包中提供了几个非常适用的小工具来帮助我们更快的建立GWT应用开发环境：projectCreator、applicationCreator、junitCreator。

  • projectCreator
    创建在Eclipse中开发GWT应用所需要的项目基本文件和可选的Ant buildfile文件。
  • applicationCreator
    applicationCreator命令用于创建基本的HelloWorld！应用和GWT应用开发环境。
  • junitCreator
    生成junti测试代码。

通过上面的内容，我们已经了解了GWT工具集工作的基本原理和主要特性。有些迫不及待了吧，那么就请随我一起进入GWT应用开发的过程吧，享受应用Java语言开发Ajax应用带来的简单和便利。

本文中所有的环境准备、实例开发和说明均针对Windows操作平台，如果使用其他的操作系统，请根据实际情况进行适当的调整。


回页首


环境准备

1、 下载和安装JDK1.4.X

GWT工具包的编译需要JDK支持，因此在安装GWT工具包之前请下载和安装合适的JDK。GWT工具支持Java语言1.4版本或者以下版本，因此JDK版本选择JDK1.4.X是比较合适的，不需要采用最新的JDK5.0或者更高版本。

请访问java.sun.com网站上下载安装版本，下载后安装到C:/jdk目录下，本书中的后续内容中将使用%JAVA_HOME%变量来引用这个目录。

您可以根据实际情况将JDK安装到任意目录下。但是在运行本文中例子的时候，请记住将对应的%JAVA_HOME%变量替换为您的实际安装目录。

2、 下载和安装GWT

请访问http://code.google.com/webtoolkit/下载GWT的最新版本，将下载的压缩文件解压缩到C:/GWT目录下。本书中的后续内容中将使用%GWT_HOME%变量来引用这个目录。

GWT工具包支持不同的操作系统，请根据自己的操作系统选择合适的安装包。

您可以根据实际情况将GWT安装到任意目录下。但是在运行本文中例子的时候，请记住将对应的%GWT_HOME%变量替换为您的实际安装目录。


回页首


第一个例子-Hello World！

下面的内容中我们将介绍如何使用GWT工具集来完成第一个GWT的例子-"Hello World！"，并且将使用GWT编译及将他转化为Ajax应用，在浏览器中完成测试。

我们要完成的例子要实现的功能包括：

1、 在页面上显示一个按钮

2、 点击该按钮，默认情况下，我们将在按钮后面紧跟着显示字符串"Hello World!"。

3、 如果点击按钮时，"Hello World!"字符串已经显示在浏览器中，我们要将他隐藏起来。我们现在开始使用GWT工具集完成"Hello World！"例子的开发，下面的步骤是完成"Hello World！"例子开发环境配置、应用开发、编译的基本步骤，同样适用于其他GWT应用的开发，只是根据实际情况可能有增减。

1、 创建GWT应用开发环境

从上面的GWT特性部分我们知道，GWT工具包中提供的applicationCreator命令行工具可以帮助我们创建GWT应用开发所需要的环境，因此我们可以直接使用applicationCreator帮助我们完成这项工作。

打开命令行工具，进入C:/根目录下，执行"mkdi"命令创建新的文件目录HelloWorld。


C:\> mkdir HelloWorld

执行下面的命令将%JAVA_HOME%\bin目录和%GWT_HOME%目录加入到PATH路径中。


C:\>set path=%JAVA_HOME%\bin;%GWT_HOME%

请将命令行中的%JAVA_HOME%替换为实际环境中JDK的安装目录，将%GWT_HOME%替换为GWT工具包的安装目录。

进入新创建的HelloWorld目录，然后运行applicationCreator命令创建GWT应用开发环境。

applicationCreator.cmd命令支持的语法如下。

ApplicationCreator [-eclipse projectName] [-out dir] [-overwrite] [-ignore] className 其中最重要的一个参数是classname，也就是我们创建的GWT应用中的主Java类，我们这里选择使用org.vivianj.gwt.client.HelloWorld。


C:\HelloWorld>applicationCreator.cmd org.vivianj.gwt.client.HelloWorld

根据GWT工具包的默认规则，GWT应用中的主Java类报名的最后一段必须是client。也就是说，只有xxx.client.Xxxx这样命名的Java类才能被识别为正确的GWT应用主类。

ApplicationCreator工具运行的时候，屏幕上会打印如下内容。


Created directory C:\HelloWorld\src
                        Created directory C:\HelloWorld\src\org\vivianj\gwt
                        Created directory C:\HelloWorld\src\org\vivianj\gwt\client
                        Created directory C:\HelloWorld\src\org\vivianj\gwt\public
                        Created file C:\HelloWorld\src\org\vivianj\gwt\HelloWorld.gwt.xml
                        Created file C:\HelloWorld\src\org\vivianj\gwt\public\HelloWorld.html
                        Created file C:\HelloWorld\src\org\vivianj\gwt\client\HelloWorld.java
                        Created file C:\HelloWorld\HelloWorld-shell.cmd
                        Created file C:\HelloWorld\HelloWorld-compile.cmd

2、 开发"Hello World！"例子

使用ApplicationCreator工具的时候，ApplicationCreator工具其实已经帮我们生成了符合Hello World!例子要求的全部内容。为了不打断第一个例子的演示过程，我们先简单的了解一下ApplicationCreator工具的生成内容。我们将在将在测试过程后面做出更加详细的分析。

图1中显示了ApplicationCreator工具执行后生成的目录结构。


图1 GWT应用开发环境
图1 GWT应用开发环境

图1中的src\org\vivianj\gwt\client目录中的HelloWorld.java是GWT应用的主类；src\org\vivianj\gwt\public目录中的HelloWorld.html文件是例子的默认页面；src\org\vivianj\gwt目录下的HelloWorld.gwt.xml是GWT应用的配置文件，提供GWT应用中页面和主类的配置信息；根目录下的HelloWorld-compile.cmd文件用于提供将该GWT应用编译成Ajax的命令；根目录下的HelloWorld-shell.cmd文件用于启动宿主模式(Hosted Mode)，方便测试GWT应用。

3、 在宿主模式下启动"Hello World！"例子

我们可以直接在命令行中执行HelloWorld-shell.cmd来启动宿主模式(Hosted Mode)，运行新创建的"Hello World！"例子。


C:\HelloWorld>HelloWorld-shell.cmd

这个命令将启动两个可视化界面：Google Web Toolkit Development Shell（见图2）和GWT内置的GWT应用浏览器（见图3），GWT应用浏览器中将显示"Hello World！"例子的初始界面，如果我们点击界面上的"Click Me"按钮，按钮后面将会显示"Hello World!"字符串（见图4），如果再次单击页面上的"Click Me"按钮，按钮后面的"Hello World！"字符串会消失。


图2 Google Web Toolkit Development Shell运行界面
图2 Google Web Toolkit Development Shell运行界面

图3 "Hello World！"例子初始运行界面
图3 Hello World！例子初始运行界面

图4 "Hello World！"例子-单击"Clieck Me"按钮后的界面
图4 Hello World！例子-单击Clieck Me按钮后的界面

4、 编译"Hello World！"例子

要将GWT应用编译成Ajax应用，我们可以执行HelloWorld-compile.cmd。


C:\HelloWorld>HelloWorld-compile.cmd

命令运行时，界面上将会显示下面的内容。


Output will be written into C:\HelloWorld\www\org.vivianj.gwt.HelloWorld
                        Copying all files found on public path
                        Compilation succeeded

其中的第一行显示生成的Ajax应用位于C:\HelloWorld\www\org.vivianj.gwt.HelloWorld目录下。


图5 "Hello World！"例子编译后的目录结构
图5 Hello World！例子编译后的目录结构

从上面的图中我们可以看到，新生成的www目录下有一个名为org.vivianj.gwt.HelloWorld的目录，它的命名规则是GWT主类全名(org.vivianj.gwt.client.HelloWorld)去掉其中的"client."。

org.vivianj.gwt.HelloWorld目录下的HelloWorld.html文件就是"Hello World！"例子对应的页面，以.cache.html后缀结尾的文件就是"Hello World！"例子中对应的Ajax代码部分，而gwt.js文件则是GWT提供的、Ajax代码中需要用到的JavaScript公共函数。其他还有些辅助文件。

5、 Web模式下测试"Hello World！"例子

运行HelloWorld-compile.cmd后，GWT应用就已经被编译成Ajax应用了，不再依赖于JDK和GWT环境，而仅仅依赖于浏览器。

我们打开IE浏览器，打开C:\HelloWorld\www\org.vivianj.gwt.HelloWorld\HelloWorld.html文件，就可以看到"Hello World！"例子在Web模式下的运行效果（见图6），单击页面上的"Click Me"按钮，按钮后面会出现"Hello World！"字符串（见图7），如果再次单击页面上的"Click Me"按钮，按钮后面的"Hello World！"字符串会消失。


图6 Web模式下运行"HelloWorld！"例子的默认效果
图6 Web模式下运行 HelloWorld！例子的默认效果

图7 Web模式下运行"HelloWorld！"例子-单击"Click Me"按钮后的效果
图7 Web模式下运行 HelloWorld！例子-单击 Click Me按钮后的效果




回页首


实例详细分析

上面的步骤中，我们已经完成第一个GWT应用的编译和测试，下面我们来详细的介绍一下GWT应用开发过程中涉及的几个文件：显示页面HelloWorld.html、主类HelloWorld和配置文件HelloWorld.gwt.xml。

1. 显示页面HelloWorld.html

GWT应用中的HTML内容必须存放在public目录下，public目录的全路径是"org\vivianj\gwt\ublic"，是将主类HelloWorld的包名"org.vivianj.gwt.client"中的client替换为"public"后形成的目录结构。

我们将主要介绍HelloWorld.html中和GWT相关的内容，HelloWorld.html文件的全部内容见清单1。


24.    <meta name='gwt:module' content='org.vivianj.gwt.HelloWorld'>

在HelloWorld.html文件的第24行，我们使用meta标签指定了本页面和GWT模块" org.vivianj.gwt.HelloWorld"之间的联系，meta标签的name属性是不变的，而content属性则是GWT主类全名(org.vivianj.gwt.client.HelloWorld)去掉其中的"client."后的结果。


40.	    <script language="javascript" src="gwt.js"></script>

在HelloWorld.html文件的第40行，我们使用script标记引入GWT工具提供的默认函数库。根据HTML语言的规定，我们可以选择在<head></head>之间加入这行代码，也可以选择在<body></body>之间加入这段代码。GWT建议在<head></head>之间加入这行代码，以便获得稍微快一些的起动速度。


56.	<td id="slot1"></td><td id="slot2"></td>

在HelloWorld.html文件的第56行，我们使用td标签定义了两个相邻的表格单元格，他们分别命名为"slot1"和"slot2"，根据"HelloWorld!"例子的要求，名为"slot1"的单元格中应该显示按钮，而名为"slot2"的单元格中则根据情况决定显示"HelloWorld!"字符串或者不显示任何内容。

我们将在主类HelloWorld.java的源代码中使用RootPanel.get("slot1")来获得对该单元格的引用，请参考下面的"主类HelloWorld"部分的说明。


43.	<iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>

在HelloWorld.html的第43行，我们使用iframe标签来设置当前页支持历史功能，iframe的属性必须和上面的内容保持一致，否则将不会起到任何效果。


清单1 src\org\vivianj\gwt\public\public\HelloWorld.html
1.	<html>
                        2.		<head>
                        3.
                        4.			<!--                                           -->
                        5.			<!-- Any title is fine                         -->
                        6.			<!--                                           -->
                        7.			<title>Wrapper HTML for HelloWorld</title>
                        8.
                        9.			<!--                                           -->
                        10.			<!-- Use normal html, such as style            -->
                        11.			<!--                                           -->
                        12.			<style>
                        13.				body,td,a,div,.p{font-family:arial,sans-serif}
                        14.				div,td{color:#000000}
                        15.				a:link,.w,.w a:link{color:#0000cc}
                        16.				a:visited{color:#551a8b}
                        17.				a:active{color:#ff0000}
                        18.			</style>
                        19.
                        20.			<!--                                           -->
                        21.			<!-- The module reference below is the link    -->
                        22.			<!-- between html and your Web Toolkit module  -->
                        23.			<!--                                           -->
                        24.			<meta name='gwt:module' content='org.vivianj.gwt.HelloWorld'>
                        25.
                        26.		</head>
                        27.
                        28.		<!--                                           -->
                        29.		<!-- The body can have arbitrary html, or      -->
                        30.		<!-- you can leave the body empty if you want  -->
                        31.		<!-- to create a completely dynamic ui         -->
                        32.		<!--                                           -->
                        33.		<body>
                        34.
                        35.			<!--                                            -->
                        36.			<!-- This script is required bootstrap stuff.   -->
                        37.			<!-- You can put it in the HEAD, but startup    -->
                        38.			<!-- is slightly faster if you include it here. -->
                        39.			<!--                                            -->
                        40.			<script language="javascript" src="gwt.js"></script>
                        41.
                        42.			<!-- OPTIONAL: include this if you want history support -->
                        43.			<iframe id="__gwt_historyFrame"
                        style="width:0;height:0;border:0"></iframe>
                        44.
                        45.			<h1>HelloWorld</h1>
                        46.
                        47.			<p>
                        48.			This is an example of a host page for the HelloWorld application.
                        49.			You can attach a Web Toolkit module to any HTML page you like,
                        50.			making it easy to add bits of AJAX functionality to existing
                        pages
                        51.			without starting from scratch.
                        52.			</p>
                        53.
                        54.			<table align=center>
                        55.				<tr>
                        56.					<td id="slot1"></td><td
                        id="slot2"></td>
                        57.				</tr>
                        58.			</table>
                        59.		</body>
                        60.	</html>

2. 主类HelloWorld

主类HelloWorld必须继承自com.google.gwt.core.client.EntryPoint类，并且覆盖其public void onModuleLoad()方法。

在onModuleLoad()方法中，我们使用GWT中提供的默认显示组件(比如Button)和组装组件(比如VerticalPanel)来设计需要显示的界面，所有这些组件都位于com.google.gwt.user.client.ui包下面。这些组件的命名规则和Java AWT的命名规则基本类似，使用方式也和AWT的基本一致，不过GWT中提供了不少的新组建可供选择，比如可以直接用VerticalPanel来实现垂直方向的布局管理。

HelloWorld.java中的19和20行，就声明了Button和Label两个显示组件。


19.    final Button button = new Button("Click me");
                        20.    final Label label = new Label();

onModuleLoad()方法中，我们需要把生成的显示组件或者组装组建加入到显示页面的对应显示区域。首先，我们需要在页面上使用id属性为显示区域指定唯一的名称(参见清单1中的56行)。com.google.gwt.user.client.ui.RootPanel的静态方法get可以根据传入的字符串参数（参数值就是显示区域的id属性）获取页面上对应的显示区域。

HelloWorld.java的36、37行，就使用了RootPanel的get方法分别获得页面上id为"slot1"、"slot2"的显示区域，然后调用add方法将生成的Button和Label对象加入到显示区域中。


36.    RootPanel.get("slot1").add(button);
                        37.    RootPanel.get("slot2").add(label);

Ajax最重要的功能就是为用户提供更好的交互体验，GWT中使用和AWT中相同的事件监听机制完成客户端事件监听，GWT中支持的Listener接口包括ChangeListener、ClickListener等。我们可以通过各种各样的Listener接口获得用户界面上所发生的动作，通过处理这些动作来完成对应业务逻辑。

HelloWorld.java中的第22行~29行的内容就实现了一个ClickListender接口，并且提供了对应的onClick方法实现，用于处理按钮点击后的业务逻辑（判断是否需要显示"Hello World!"字符串），然后调用Button对象的addClickListener方法增加监听器。


22.    button.addClickListener(new ClickListener() {
                        23.          public void onClick(Widget sender) {
                        24.            if (label.getText().equals(""))
                        25.              label.setText("Hello World!");
                        26.            else
                        27.              label.setText("");
                        28.          }
                        29.    });

HelloWorld类的全部源代码内容见清单2。


清单2 src\org\vivianj\gwt\client\HelloWorld.java
1.	package org.vivianj.gwt.client;
                        2.
                        3.	import com.google.gwt.core.client.EntryPoint;
                        4.	import com.google.gwt.user.client.ui.Button;
                        5.	import com.google.gwt.user.client.ui.ClickListener;
                        6.	import com.google.gwt.user.client.ui.Label;
                        7.	import com.google.gwt.user.client.ui.RootPanel;
                        8.	import com.google.gwt.user.client.ui.Widget;
                        9.
                        10.	/**
                        11.	 * Entry point classes define <code>onModuleLoad()</code>.
                        12.	 */
                        13.	public class HelloWorld implements EntryPoint {
                        14.
                        15.	  /**
                        16.	   * This is the entry point method.
                        17.	   */
                        18.	  public void onModuleLoad() {
                        19.	    final Button button = new Button("Click me");
                        20.	    final Label label = new Label();
                        21.
                        22.	    button.addClickListener(new ClickListener() {
                        23.	      public void onClick(Widget sender) {
                        24.	        if (label.getText().equals(""))
                        25.	          label.setText("Hello World!");
                        26.	        else
                        27.	          label.setText("");
                        28.	      }
                        29.	    });
                        30.
                        31.	    // Assume that the host HTML has elements defined whose
                        32.	    // IDs are "slot1", "slot2".  In a real app, you probably would not want
                        33.	    // to hard-code IDs.  Instead, you could, for example, search for all
                        34.	    // elements with a particular CSS class and replace them with widgets.
                        35.	    //
                        36.	    RootPanel.get("slot1").add(button);
                        37.	    RootPanel.get("slot2").add(label);
                        38.	  }
                        39.	}

3. 配置文件HelloWorld.gwt.xml

配置文件中包括两个元素。Inherits元素地设置GWT应用的继承信息，而entry-point元素的class属性则用于设置设置GWT应用的主类。


清单3 src\org\vivianj\gwt\HelloWorld.gwt.xml
1.	<module>
                        2.
                        3.		<!-- Inherit the core Web Toolkit stuff.                  -->
                        4.		<inherits name='com.google.gwt.user.User'/>
                        5.
                        6.		<!-- Specify the app entry point class.                   -->
                        7.		<entry-point class='org.vivianj.gwt.client.HelloWorld'/>
                        8.
                        9.	</module>





回页首


结束语

Ajax是当前热门的Web应用开发技术，Java是企业应用开发中的主流技术，GWT框架将这两种技术合二为一，是我们能够应用Java语言来开发Ajax，在保留Ajax技术的优点基础上，解决了Ajax应用开发、调试困难的缺点。

本文中介绍了GWT的基本知识、主要特性，提供了"HelloWorld！"例子说明使用Java和GWT框架开发Ajax应用的开发、编译、测试过程，并且通过对"HelloWorld！"例子中涉及文件的分析，讲解了使用GWT框架开发Ajax应用的技术细节和约束条件。


回页首


下载资源



参考资料

学习

获得产品和技术

讨论


关于作者

 

肖菁，唯 J 族创始人，开源项目BuildFileDesigner、V-Security 创始人，Open Source 推广人，主要研究 J2EE 编程技术、Web Service 技术以及他们在 WebSphere、WebLogic、 Apache 平台上的实现，拥有 IBM 的 Developing With Websphere Studio 证书。


张金鹏 2007-04-12 10:46 发表评论
]]>