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

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

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.

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 ดังนี้

<servlet>
	<display-name>DWR Ajax</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>
	<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
	<servlet-name>dwr-invoker</servlet-name>
	<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

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


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


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

package com.fun4station.model;

public class Customer {
	private int id;
	private String name;
	private String address;

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

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

	public String getAddress() {
		return address;
	}

	public void setAddress(String address) {
		this.address = address;
	}

}

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

package com.fun4station.service;
import com.fun4station.model.Customer;

public class CustomerService {

	/**
	 * Example service for return bean
	 * @param id
	 * @return
	 */
	public Customer getCustomer(int id){
		Customer cust = new Customer();
		cust.setId(id);
		cust.setName("Customer Name");
		cust.setAddress("Example Address");
		
		return cust;
	}
	
	/**
	 * Example service for return String
	 * @return
	 */
	public String getServiceName(){
		return "CustomerService";
	}
}

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

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
    "http://getahead.org/dwr/dwr20.dtd">
<dwr>
  <allow>
  	<convert converter="bean" match="com.fun4station.model.Customer" />
    <create creator="new" javascript="CustomerService">
      <param name="class" value="com.fun4station.service.CustomerService"/>
    </create>
  </allow>
</dwr>

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

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

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

<create creator="new" javascript="CustomerService">
	<param name="class" value="com.fun4station.service.CustomerService"/>
</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 ดังรูป

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

To use this class in your javascript you will need the following script includes:
  <script type='text/javascript' src='/DWRWeb/dwr/interface/CustomerService.js'></script>
  <script type='text/javascript' src='/DWRWeb/dwr/engine.js'></script>
In addition there is an optional utility script:
  <script type='text/javascript' src='/DWRWeb/dwr/util.js'></script>

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

<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example DWR</title>
<script type='text/javascript' src='/DWRWeb/dwr/engine.js'></script>
<script type='text/javascript' src='/DWRWeb/dwr/util.js'></script>
<script type='text/javascript' src='/DWRWeb/dwr/interface/CustomerService.js'></script>

<script type='text/javascript'>
function getCustomerData(){
	var id = DWRUtil.getValue('customerId');
	CustomerService.getCustomer(id, function(data){
		DWRUtil.setValue("display_data",data.id+" - "+data.name+ " - "+data.address);
	});
}
</script>
</head>
<body>
Input Id : <input type="text" name="customerId" id="customerId" /> 
<input type="button" value="GetCustomer" onclick="getCustomerData();" /><br/>
<p id="display_data"></p>
</body>
</html>

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

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

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

<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

  1. No comments yet.

  1. No trackbacks yet.