Direct Web Remoting (DWR)

Hi I am Laxmi Kiran, lead of JAVA team at Globussoft. I have about three and a half years of experience in JAVA. Here I’d like to introduce Direct Web Remoting (DWR) Technology to the common mass.

What is DWR?

Direct Web Remoting (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. It gives the AJAX implementation of XML HTTP Request to the DWR library and allows developers to concentrate on business objects.

AJAX made simple with DWR

AJAX helps to build a good desktop-like user interface in the browser and helps for interactive interfaces that can even replace traditional user interfaces.

Communication between browser and server is done in the background and because only the data is transferred between the browser and the server, AJAX applications seem to be, and are actually, fast and responsive to the users.

DWR will generate the JavaScript to allow web browsers to securely call into Java code almost as if it is running locally. It can marshal virtually any data including collections, POJO’s, XML and binary data like images and PDF files.

With Reverse Ajax, DWR allows java code running on a server to use client side API’s to publish updates to arbitrary groups of browsers. This allows interaction 2 ways – browser calling server and server calling browser. DWR supports Comet, Polling and Piggyback (sending data in with normal requests) as ways to publish to browser.

DWR consists of two parts:

•A Java Servlet running on the server that processes requests and sends responses back to browser
•JavaScript running on the browser that sends request and dynamically updates the browser

Here is how it works:

As browser sends a request dynamically.

DWR allows Java code running on the server to find out what clients are viewing certain pages, and to send to them JavaScript, generated either manually or using Java API.

Example of DWR in 7 steps

1.Download dwr.jar file. Place it in your WEB-INF/lib directory of your web application. ( http://directwebremoting.org/dwr/downloads/index.html)

2.Download commons-logging jar files and place it in your WEB-INF/lib directory along with dwr.jar (http://commons.apache.org/proper/commons-logging/download_logging.cgi).

3.Add the DWR Servlet definition and mapping to your applications web.xml

<?xml version=”1.0″ encoding=”UTF-8″?>
<web-app>
<servlet>
<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>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
</web-app>

4.Write your business logic (Java code)

This is an example java code for a java class Calculator.java

5.Create the DWR configuration file (dwr.xml) place it with your web.xml dwr.xml contains the mapping of your Java code to the front end. Where ever you want to call the java code you can just call the value in ‘javascript’ attribute as shown.

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE dwr PUBLIC “-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN” “http://getahead.org/dwr/dwr30.dtd”>

6.Open default page to check

Now clean and build the project and run the project. Browser opens with URL— ‘http://localhost:8090/DWRExample/’. Just add ‘dwr’ in the URL and press enter. You will be redirected to this URL—http://localhost:8090/DWRExample/dwr/index.html
(Note: If end of URL contains some ‘index.jsp’ or ‘index.html’ just remove it and type ‘dwr’ (http://localhost:8090/DWRExample/dwr))

Click on hyperlink, you will be redirected to another page as shown below:

Ex:<script type=’text/javascript’ src=’/DWRExample/dwr/engine.js’></script>
<script type=’text/javascript’ src=’/DWRExample/dwr/interface/Calculator.js’>
</script>

This page contains the external JavaScript file links developed by DWR framework. Just copy the three script tags and place in your specified jsp(front end). Above links in the image are given below.

7.Create front end

Write the html code for the required page and place the special JavaScript code links as shown below:
At the end of this file you can find the html code.

Now your front end is ready with dynamic JavaScript generated by DWR Framework. Now you can run your project which gives dynamic responses.

Finally end page after running the project as below:

Addition

Subtraction

Multiplication

Division

<%@page contentType=”text/html” pageEncoding=”UTF-8″%><!DOCTYPE html>
<html> <head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>My First DWR Page</title>
<script type=’text/javascript’ src=’/DWRExample/dwr/engine.js’></script>
<script type=’text/javascript’ src=’/DWRExample/dwr/interface/Calculator.js’></script>
<script type=’text/javascript’ src=’/DWRExample/dwr/util.js’></script>
</head>
<body>
A:<input type=”text” id=”a”/>
B:<input type=”text” id=”b”/>
<hr/>
<br/>
<input type=”button” value=”Add” onclick=”Calculator.add(a.value,b.value,response)”/>
<input type=”button” value=”Subtract” onclick=”Calculator.subtract(a.value,b.value,response)”/>
<input type=”button” value=”Multiply” onclick=”Calculator.multiply(a.value,b.value,response)”/>
<input type=”button” value=”Divide” onclick=”Calculator.divide(a.value,b.value,response)”/>
<script type=”text/javascript”>
var response=function(data){
if(data != null && typeof data==’object’){ alert(dwr.util.toDescriptiveString(data,2)); }
else{ dwr.util.setValue(“answerdiv”,dwr.util.toDescriptiveString(data,1)); }
}
</script>
<hr/>
Answer:<div id=”answerdiv”></div>
</body>
</html>