In this article, i am going to explain the step by step approach to create the DWR (Direct Web Remoting) application in JAVA.
DWR consists of two main parts:
- A Java Servlet running on the server that processes requests and sends responses back to the browser.
- JavaScript running in the browser that sends requests and can dynamically update the webpage.
JavaScript file that must be included in your application for DWR:
1. Auto generated Javascript of your equivalent class. in this case, my java class name is “Message”, so the javascript complete path is “/<App NAME>/dwr/interface/<YOUR CLASS NAME>.js“.
in my application the path is “/SimpleDWR/dwr/interface/Message.js”
2. DWR engine file : “/<APP NAME>/dwr/engine.js”. This is responsible for marshaling of Java objects/Values between Client and Server.
3. This is not necessary, but it provides nice set of utility methods to work with HTML code :
“/<APP NAME>/dwr/util.js“
Lets start with our project:
Step 1: Create a Dynamic Website.
Step 2: Download and add the dwr jar files in the “web-inf/ lib” folder.
Download location : http://directwebremoting.org/dwr/downloads/index.html
Step 3: add following code in web.xml.
<servlet>
<servlet-name> dwr-invoker </servlet-name>
<display-name> DWR Servlet </display-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>
Step 4: create a dwr.xml alongside the web.xml and add below code:
<!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="Message"> <param name="class" value="com.G2.POJO.Message"/> </create> </allow> </dwr>
As you can see in above code, i have added the creator attribute which will tell the dwr engine to create the javascript object named “Message”, using which we can call the server side methods.
Step 5: create Java class, which will be called by the DWR javascript:
package com.G2.POJO;
public class Message {
public String getMessage() {
return "Hello DWR from Server";
}
}
Step 6: create index.html with below code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>DWR Demo</title>
<script type='text/javascript' src='/SimpleDWR/dwr/interface/Message.js'></script>
<script type='text/javascript' src='/SimpleDWR/dwr/engine.js'></script>
<script type='text/javascript' src='/SimpleDWR/dwr/util.js'></script>
</head>
<body>
<input value="click me!!!" type="button" onclick="update();" />
<div style="background-color: #ffeaa7;font-weight: bold;width: 300px;" id="divResponse">
Message From Server</div>
<script type="text/javascript">
function update()
{
Message.getMessage(function(data) {
dwr.util.setValue("divResponse", data);
});
}
</script>
</body>
</html>
Start the application and Test by writing below URL:
http://localhost:8080/[YOUR-WEBAPP]/dwr/
You will see a page containing the information about class added in step 5.
Now start the application normally, and your program will run showing that how easy is AJAX with DWR.
Clicking on button, it will display the response coming from the java code.
You can download the war file of the examples from here and explore the DWR in depth.
Leave a Reply