Tutorial : การใช้งาน DWR เบื้องต้น

สำหรับ DWR(Direct Web Remoting) เป็น Java library ที่ทำการ Convert Service ของ Java ไปเป็น JavaScript ทำให้ในฝั่งของ JavaScript สามารถเรียกใช้ method ใน class java ได้โดยตรง คำอธิบายสั้นๆจาก เว็บไซต์ DWR

1	DWR is a Java library that enables Java on the server and JavaScript in a browser to interact and call each other as simply as possible.

2

3	DWR is Easy Ajax for Java

สำหรับการทำงานโดยคร่าวๆเป็นดังภาพ

หรืออ่านแบบเต็มๆได้จาก DWR: Easy AJAX for JAVA
เครื่องไม้เครื่องมือที่ใช้
1. Windows XP Professional SP3
2. DWR Library Version 2.0.5
3. Eclipse IDE 3.5
4. Tomcat 6.0.18
ขั้นตอนในการพัฒนา
0. ขอข้ามขั้นตอนการติดตั้ง Tomcat , การ Download Eclipse ซึ่งคิดว่าน่าจะติดตั้งกันเป็นอยู่
1. ทำการ Download DWR จากเว็บ http://directwebremoting.org/dwr/download.html Downlaod เฉพาะ .jar มา

2. เปิด Eclipse ขึ้นมาแล้วสร้าง Dynamic Web Project ขึ้นมาตามภาพเลยครับ







3. จากนั้น copy dwr.jar,commons-logging-xx.jar (Download จาก http://commons.apache.org/logging/) ใน WEB-INF/lib ของ Web Application
4. เปิด /WEB-INF/web.xml และเพิ่ม Servlet ดังนี้

1

<servlet>

2	<display-name>DWR Ajax</display-name>

3	<servlet-name>dwr-invoker</servlet-name>

4	<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>

5	<init-param>

6	<param-name>debug</param-name>

7	<param-value>true</param-value>

8	</init-param>

9	<load-on-startup>1</load-on-startup>

10	</servlet>

11	<servlet-mapping>

12	<servlet-name>dwr-invoker</servlet-name>

13	<url-pattern>/dwr/*</url-pattern>

14	</servlet-mapping>

6. สร้าง Class ขึ้นมาสอง Class ในที่นี้ขอใช้ตัวอย่าง ในการดึงข้อมูล Customer จากฝั่ง Java มาแสดง (ไม่ติดต่อ Database) ดังนั้นผมจะสร้าง Class มาดังนี้
- Customer.java


พิมพ์ Code ดังรูป แล้วคลิกขวา


Code ที่เสร็จแล้วจะเป็นดังนี้

1	package com.fun4station.model;

2

3	public class Customer {

4	private int id;

5	private String name;

6	private String address;

7

8	public int getId() {

9	return id;

10

}

11

12	public void setId(int id) {

13	this.id = id;

14

}

15

16	public String getName() {

17	return name;

18

}

19

20	public void setName(String name) {

21	this.name = name;

22

}

23

24	public String getAddress() {

25	return address;

26

}

27

28	public void setAddress(String address) {

29	this.address = address;

30

}

31

32

}

- CustomerService.java ทำเช่นเดียวกับ Customer.java แต่เราจะเขียน Code เองดังนี้

1	package com.fun4station.service;

2	import com.fun4station.model.Customer;

3

4	public class CustomerService {

5

6

/**

7	* Example service for return bean

8	* @param id

9

* @return

10

*/

11	public Customer getCustomer(int id){

12	Customer cust = new Customer();

13	cust.setId(id);

14	cust.setName("Customer Name");

15	cust.setAddress("Example Address");

16

17	return cust;

18

}

19

20

/**

21	* Example service for return String

22

* @return

23

*/

24	public String getServiceName(){

25	return "CustomerService";

26

}

27

}

7. สร้าง file ชื่อ dwr.xml ใน WEB-INF เพื่อใช้ในการ Configuration CustomerService.java, Customer.java ดังนี้

1	<?xml version="1.0" encoding="UTF-8"?>

2	<!DOCTYPE dwr PUBLIC

3	"-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"

4	"http://getahead.org/dwr/dwr20.dtd">

5

<dwr>

6

<allow>

7	<convert converter="bean" match="com.fun4station.model.Customer" />

8	<create creator="new" javascript="CustomerService">

9	<param name="class" value="com.fun4station.service.CustomerService"/>

10

</create>

11

</allow>

12

</dwr>

ส่วนสำคัญที่ต้องดูคือ

1	<convert converter="bean" match="com.fun4station.model.Customer" />

เป็นการบอกให้ DWR Framework ทำการ convert class com.fun4station.model.Customer ไปเป็น bean ซึ่งสามารถเรียกใช้ได้เหมือน Object หนึ่ง ใน JavaScript
และ

1	<create creator="new" javascript="CustomerService">

2	<param name="class" value="com.fun4station.service.CustomerService"/>

3

</create>

เป็นการสร้าง JavaScript ชื่อ CustomerService(ชื่อนี้จะถูกเรียกใช้ในหน้า JSP โดย JavaScript) จาก class com.fun4station.service.CustomerService
8. เมื่อเสร็จแล้วจะได้โครงสร้าง Project ดังรูป



10. Start Web Server

11. เปิด Browser ขึ้นมาแล้วพิมพ์ http://localhost:port/DWRWeb/dwr ถ้าไม่มีข้อผิดพลาดจะได้หน้าจอดังนี้

12. Click CustomerService เพื่อ Test

13. กรอกข้อมูลหมายเลขลงในช่อง getCustomer แล้วกดปุ่ม Execute ถ้าไม่ผิดพลาดอะไรจะได้ Message ดังรูป

สำหรับการนำไปใช้ ก็ตามนี้เลยครับ

1	To use this class in your javascript you will need the following script includes:

2	<script type='text/javascript' src='/DWRWeb/dwr/interface/CustomerService.js'></script>

3	<script type='text/javascript' src='/DWRWeb/dwr/engine.js'></script>

4	In addition there is an optional utility script:

5	<script type='text/javascript' src='/DWRWeb/dwr/util.js'></script>

14. สร้าง File index.jsp ขึ้นมาใน path WebContent จากนั้นเขียน Code ดังนี้

1	<?xml version="1.0" encoding="UTF-8" ?>

2	<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

3	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

4	<html xmlns="http://www.w3.org/1999/xhtml">

5

<head>

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

7	<title>Example DWR</title>

8	<script type='text/javascript' src='/DWRWeb/dwr/engine.js'></script>

9	<script type='text/javascript' src='/DWRWeb/dwr/util.js'></script>

10	<script type='text/javascript' src='/DWRWeb/dwr/interface/CustomerService.js'></script>

11

12	<script type='text/javascript'>

13	function getCustomerData(){

14	var id = DWRUtil.getValue('customerId');

15	CustomerService.getCustomer(id, function(data){

16	DWRUtil.setValue("display_data",data.id+" - "+data.name+ " - "+data.address);

17

});

18

}

19

</script>

20

</head>

21

<body>

22	Input Id : <input type="text" name="customerId" id="customerId" />

23	<input type="button" value="GetCustomer" onclick="getCustomerData();" /><br/>

24	<p id="display_data"></p>

25

</body>

26

</html>

ข้อสำคัญที่ควรจำคือ ต้องเรียกใช้ JavaScript

1	<script type='text/javascript' src='/DWRWeb/dwr/engine.js'></script>

สำหรับ util.js แล้วแต่ว่าจะใช้หรือไม่ และที่สำคัญที่สุดคือ การเรียกใช้ JavaScript ที่ Convert มาจาก Java

1	<script type='text/javascript' src='/DWRWeb/dwr/interface/CustomerService.js'></script>

สังเกตว่า Server ที่เป็น JavaScript ที่ทำการ convert มานั้นจะอยู่ใน /interface/ชื่อ Service ที่ตั้งใน dwr.xml
15. ทดลอง Run ตัวอย่างโดยเปิด Browser ไปที่ http://localhost:port/DWRWeb/ จะได้หน้าจอดังรูป

เมื่อลองกรอกข้อมูล จะได้ผลลัพท์ ดังนี้

จากตัวอย่างจะเป็นการ Config และใช้งานอย่างง่ายๆตามตัวอย่างจากเว็บ DWR ซึ่งสามารถอ่านและทำตามได้ หรือ จะอ่านเพิ่มเติมจากเว็บ ของ DWR เองเลยก็ได้
Code ตัวอย่าง
ข้อมูลจาก
Direct Web Remoting