DWR Auto Suggestion 備忘記

DWR (Direct Web Remoting) 運作原理為將 java object 轉換成 javascript 能讀取的 object,
這中間 javascript 的 object 與 java object 溝通間橋樑依靠 Ajax 的運作模式.
有了以上的概念,可以簡單地了解到 java object 是運作於 server 端, 即 weblogic 或 tomcat.
而 javascript object 則運作於 client 端, 即 html 裡.

所以實作 DWR 有以下幾種步驟:
(1) 對 DWR 作一些簡單的 web 配置
(2) dwr.xml 定義 java object 及 javascript object.
(3) client 端呼叫對應的 javascript object.

開始備忘記:
[1] 安裝 jdk 5：
[2] 安裝 Tomcat:
[3] 安裝 Eclipse WTP：
[4] Eclipse WTP 建立第一個 Dynamic Web Project

[1] 安裝 jdk 5：
下載 jdk-1_5_0_07-nb-5_0-win-ml.exe
http://java.sun.com/j2se/1.5.0/download-netbeans.html
安裝至 C:\jdk1.5.0_07
新增環境變數 JAVA_HOME=C:\jdk1.5.0_07
C:\jdk1.5.0_07\bin 加入至 PATH 中
C:\jdk1.5.0_07\lib\dt.jar 及 C:\jdk1.5.0_07\lib\tools.jar 加入至 CLASSPATH 中
執行 C:\>java -version
輸出 java version "1.5.0_07" 即安裝成功.

[2] 安裝 Tomcat：
下載 apache-tomcat-5.5.20.exe
http://apache.seekmeup.com/tomcat/tomcat-5/v5.5.20/bin/apache-tomcat-5.5.20.exe
下載後直接安裝到目錄 C:\apache-tomcat-5.5.20
預設port是8080
http://localhost:8080/ 測試是否安裝成功.

[3] 安裝 Eclipse WTP：
下載 wtp-all-in-one-sdk-R-1.5.0-200606281455-win32.zip
http://www.eclipse.org/webtools/
http://www.eclipse.org/downloads/download.php?file=/webtools/downloads/drops/R-1.5.0-200606281455/wtp-all-in-one-sdk-R-1.5.0-200606281455-win32.zip
解壓至 C:\eclipse_wtp

[4] Eclipse WTP 建立第一個 Dynamic Web Project：
Eclipse： File -> New -> Other ->> web -> Dynamic Web Project
Project Name： AutoSuggest
按 Finish 完成

下載 dwr.jar , Version 2.0 RC 2
http://getahead.ltd.uk/dwr/download
使用 Eclipse Navigator View (Window -> Show View -> Navigator)
直接將 dwr.jar 放進 Project 的 AutoSuggest/WebContent/WEB-INF/lib

修改 web.xml
<!------ AutoSuggest/WebContent/WEB-INF/web.xml ---->
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app id="dwr">

<display-name>Auto Suggest Demo</display-name>
<description>Test for Auto Suggest</description>

<filter>
<filter-name>CharacterEncodingFilter</filter-name>
<filter-class>test.joeyta.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CharacterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

<servlet>
<servlet-name>dwr-invoker</servlet-name>
<display-name>DWR Servlet</display-name>
<description>Direct Web Remoter Servlet</description>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>debug</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>

</web-app>
<!------ AutoSuggest/WebContent/WEB-INF/web.xml ---->

建立 dwr.xml
<!------ AutoSuggest/WebContent/WEB-INF/dwr.xml ---->
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.ltd.uk/dwr/dwr20.dtd">

<dwr>
<allow>
<create creator="new" javascript="AutoSuggest">
<param name="class" value="test.joeyta.AutoSuggest"/>
</create>
<convert match="test.joeyta.User" converter="bean"></convert>
</allow>
</dwr>
<!------ AutoSuggest/WebContent/WEB-INF/dwr.xml ---->

/************** User.java ************************/
package test.joeyta;

public class User implements Comparable {
private String name;

private String tel;

public User(){}

public User(String name, String tel){
this.name = name;
this.tel = tel;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String getTel() {
return tel;
}

public void setTel(String tel) {
this.tel = tel;
}

public int compareTo(Object object) {
return this.name.compareTo(((User)object).name);
}
}
/************** User.java ************************/

/************** AutoSuggest.java ************************/
package test.joeyta;

import java.util.ArrayList;
import java.util.Collections;
import java.util.Iterator;
import java.util.List;

public class AutoSuggest {

public List users;

public AutoSuggest(){
users = new ArrayList();
users.add(new User("Joeyta","123456"));
users.add(new User("陳大強","無電話"));
users.add(new User("李小強","太多電話"));
users.add(new User("Peter","23456"));
users.add(new User("Mary","34567"));
users.add(new User("Andy","45678"));
users.add(new User("Andrew","78900"));
users.add(new User("Anthory","89000"));
users.add(new User("jane","654321"));
}

public List getSuggestions(String sSuggestValue) {
System.out.println(sSuggestValue);
List returnList = new ArrayList();
if (sSuggestValue != null && !sSuggestValue.equals("")) {
for (Iterator iter = users.iterator(); iter.hasNext();) {
User user = (User) iter.next();
if(user.getName().toLowerCase().indexOf(sSuggestValue.toLowerCase()) >= 0){
returnList.add(user);
}
}
Collections.sort(returnList);
}
return returnList;
}

}
/************** AutoSuggest.java ************************/

/************** CharacterEncodingFilter.java ************/
package test.joeyta;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;

public class CharacterEncodingFilter implements Filter {
protected String encoding = null;

protected FilterConfig filterConfig = null;

protected boolean ignore = true;

public void destroy() {
this.encoding = null;
this.filterConfig = null;
}

public void doFilter(ServletRequest request, ServletResponse response,
FilterChain chain) throws IOException, ServletException {
if (ignore (request.getCharacterEncoding() == null)) {
String encoding = selectEncoding(request);
if (encoding != null)
request.setCharacterEncoding(encoding);
}
chain.doFilter(request, response);
}

public void init(FilterConfig filterConfig) throws ServletException {
this.filterConfig = filterConfig;
this.encoding = filterConfig.getInitParameter("encoding");
String value = filterConfig.getInitParameter("ignore");
if (value == null)
this.ignore = true;
else if (value.equalsIgnoreCase("true"))
this.ignore = true;
else if (value.equalsIgnoreCase("yes"))
this.ignore = true;
else
this.ignore = false;

}

protected String selectEncoding(ServletRequest request) {
return this.encoding;
}
}
/************** CharacterEncodingFilter.java ************/

/************** autosuggest.css ************/
div.suggestions {
background-color: #ffffff;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid black;
position: absolute;
}

div.suggestions div {
cursor: default;
padding: 0px 3px;
}

div.suggestions div.current {
background-color: #3366cc;
color: white;
}
/************** autosuggest.css ************/

/************** autosuggest.js ************/
function AutoSuggestControl(oTextbox /*:HTMLInputElement*/) {
this.cur /*:int*/ = -1;
this.layer = null;
this.textbox /*:HTMLInputElement*/ = oTextbox;
this.init();

this.requestSuggestions = function (oAutoSuggestControl /*:AutoSuggestControl*/) {
var sSuggestValue = oAutoSuggestControl.textbox.value;
AutoSuggest.getSuggestions(sSuggestValue, function(list) {
oAutoSuggestControl.autosuggest(list);
});
};
}

AutoSuggestControl.prototype.autosuggest = function (aSuggestions /*:Array*/) {

//make sure there's at least one suggestion
if (aSuggestions.length > 0) {
this.showSuggestions(aSuggestions);
} else {
this.hideSuggestions();
}
};

/**
* Creates the dropdown layer to display multiple suggestions.
* @scope private
*/
AutoSuggestControl.prototype.createDropDown = function () {

var oThis = this;

//create the layer and assign styles
this.layer = document.createElement("div");
this.layer.className = "suggestions";
this.layer.style.visibility = "hidden";
this.layer.style.width = this.textbox.offsetWidth;

//when the user clicks on the a suggestion, get the text (innerHTML)
//and place it into a textbox
this.layer.onmousedown =
this.layer.onmouseup =
this.layer.onmouseover = function (oEvent) {
oEvent = oEvent window.event;
oTarget = oEvent.target oEvent.srcElement;

if (oEvent.type == "mousedown") {
oThis.textbox.value = oTarget.firstChild.nodeValue;
oThis.hideSuggestions();
} else if (oEvent.type == "mouseover") {
oThis.highlightSuggestion(oTarget);
} else {
oThis.textbox.focus();
}
};

document.body.appendChild(this.layer);
};

AutoSuggestControl.prototype.getLeft = function () /*:int*/ {

var oNode = this.textbox;
var iLeft = 0;

while(oNode.tagName != "BODY") {
iLeft += oNode.offsetLeft;
oNode = oNode.offsetParent;
}

return iLeft;
};

AutoSuggestControl.prototype.getTop = function () /*:int*/ {

var oNode = this.textbox;
var iTop = 0;

while(oNode.tagName != "BODY") {
iTop += oNode.offsetTop;
oNode = oNode.offsetParent;
}

return iTop;
};

AutoSuggestControl.prototype.handleKeyDown = function (oEvent /*:Event*/) {

switch(oEvent.keyCode) {
case 38: //up arrow
this.previousSuggestion();
break;
case 40: //down arrow
this.nextSuggestion();
break;
case 13: //enter
this.hideSuggestions();
break;
}

};

AutoSuggestControl.prototype.handleKeyUp = function (oEvent /*:Event*/) {

var iKeyCode = oEvent.keyCode;

//make sure not to interfere with non-character keys
if ((iKeyCode != 8 && iKeyCode < 32) (iKeyCode >= 33 && iKeyCode < 46) (iKeyCode >= 112 && iKeyCode <= 123)) {
//ignore
} else {
//request suggestions from the suggestion provider with typeahead
this.requestSuggestions(this);
}
};

AutoSuggestControl.prototype.hideSuggestions = function () {
this.layer.style.visibility = "hidden";
};

AutoSuggestControl.prototype.highlightSuggestion = function (oSuggestionNode) {

for (var i=0; i < this.layer.childNodes.length; i++) {
var oNode = this.layer.childNodes[i];
if (oNode == oSuggestionNode) {
oNode.className = "current"
} else if (oNode.className == "current") {
oNode.className = "";
}
}
};

AutoSuggestControl.prototype.init = function () {

//save a reference to this object
var oThis = this;

//assign the onkeyup event handler
this.textbox.onkeyup = function (oEvent) {

//check for the proper location of the event object
if (!oEvent) {
oEvent = window.event;
}

//call the handleKeyUp() method with the event object
oThis.handleKeyUp(oEvent);
};

//assign onkeydown event handler
this.textbox.onkeydown = function (oEvent) {

//check for the proper location of the event object
if (!oEvent) {
oEvent = window.event;
}

//call the handleKeyDown() method with the event object
oThis.handleKeyDown(oEvent);
};

//assign onblur event handler (hides suggestions)
this.textbox.onblur = function () {
oThis.hideSuggestions();
};

//create the suggestions dropdown
this.createDropDown();
};

AutoSuggestControl.prototype.nextSuggestion = function () {
var cSuggestionNodes = this.layer.childNodes;

if (cSuggestionNodes.length > 0 && this.cur <= cSuggestionNodes.length-1) {
if(this.cur != cSuggestionNodes.length-1){
++this.cur;
}
var oNode = cSuggestionNodes[this.cur];
this.highlightSuggestion(oNode);
this.textbox.value = oNode.firstChild.nodeValue;
dwr.util.setValue("tel", oNode.getAttribute("tel"));
}
};

AutoSuggestControl.prototype.previousSuggestion = function () {
var cSuggestionNodes = this.layer.childNodes;

if (cSuggestionNodes.length > 0 && this.cur >= 0) {
if(this.cur != 0){
--this.cur;
}
var oNode = cSuggestionNodes[this.cur];
this.highlightSuggestion(oNode);
this.textbox.value = oNode.firstChild.nodeValue;
dwr.util.setValue("tel", oNode.getAttribute("tel"));
}
};

AutoSuggestControl.prototype.showSuggestions = function (aSuggestions /*:Array*/) {

var oDiv = null;
this.layer.innerHTML = ""; //clear contents of the layer

var user;
for (var i=0; i < aSuggestions.length; i++) {
user = aSuggestions[i];
oDiv = document.createElement("div");
oDiv.appendChild(document.createTextNode(user.name));
oDiv.setAttribute("tel",user.tel);
this.layer.appendChild(oDiv);
}

this.layer.style.left = this.getLeft() + "px";
this.layer.style.top = (this.getTop()+this.textbox.offsetHeight) + "px";
this.layer.style.visibility = "visible";

var oIFrame = document.createElement("iframe");
oIFrame.src = "javascript:false";
oIFrame.style.position = "absolute";
oIFrame.style.visibility = "inherit";
oIFrame.style.top = "0px";
oIFrame.style.left = "0px";

oIFrame.style.width = this.textbox.offsetWidth + "px";
oIFrame.style.height = this.layer.offsetHeight + "px";
oIFrame.style.zIndex = "-1";
oIFrame.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";
this.layer.appendChild(oIFrame);

};
/************** autosuggest.js ************/

<!------------- index.html -------------->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Autosuggest Example</title>
<script src='dwr/interface/AutoSuggest.js'></script>
<script src='dwr/engine.js'></script>
<script src='dwr/util.js'></script>

<script type="text/javascript" src="autosuggest.js"></script>
<link rel="stylesheet" type="text/css" href="autosuggest.css" />

</head>
<body>
<br/>
Name:<input type="text" id="name" onfocus="new AutoSuggestControl(this)" />
Tel:<input type="text" id="tel" /></p>
</body>
</html>
<!------------- index.html -------------->

項目結構如下所示:


Export Web Archie file 至 tomcat (亦可在 Eclipse 裡配置 Tomcat):
右鍵點選 AutoSuggest -> Export ->> Web -> WAR file
Destination 指向 C:\apache-tomcat-5.5.20\webapps
點選 Overwrite existing file
然後按 Finish
然後啟動 Tomcat

IE 輸入 http://localhost:8080/AutoSuggest/index.html , 如下圖所示:

在 Name 欄位裡輸入 "a" , 然後選擇 "Joeyta" 如下圖所示:

Request header：
從 header 中可以看見, httpSessionId 為 jSessionId , 由於這裡是 html, 所以沒有顯示.
在服務器端可以使用 WebContextFactory.get().getSession().getId() 取得.
DWR 對 script 亦有一個 script SessionId , 所以在 script 中亦可保持 session 狀態.
在服務器端可以使用 WebContextFactory.get().geScripttSession().getId() 取得.

Response header：
從 header 中可以看見所有回傳 beans 的值, 都儲存成 javascript 的 array.


在 Name 欄位裡輸入 "強" , 然後選擇 "陳大強" 如下圖所示:


Request header：


Response header：


這個 Suggestion 大部份 javascript 參考至：
http://www.nczonline.net/downloads/

參考文檔：
http://getahead.ltd.uk/dwr/documentation