Brief introduction of DWR
The DWR (Direct Web Remoting) project is an open source solution under the Apache license for the developer who wants to use AJAX and XMLHttpRequest in an easy way. It has a set of JavaScript functions that remove the complexity from calling methods in a Java object running on the application server from the HTML page. It handles parameters of different types and helps keep the HTML code readable.
DWR is not intrusive to one's design, as it does not force any sort of inheritance architecture for objects to be exposed. It fits well in any application that runs in a servlet framework. For the less DHTML-experienced developers, DWR also provides a JavaScript library to help with frequently used DHTML tasks, like populating tables, filling select boxes with items, and changing the content of HTML elements such as and.
The DWR Website is comprehensive and has a fair amount of documentation, which has served as a foundation for this article. Some examples are provided to demonstrate how DWR can be used and what can be accomplished with the library.
Reference: Java World
I am going to show you about how to integrate DWR framework in your running J2EE application. Below are the steps to configure DWR framework.
Step 1: Download required files
For integrating DWR in your application, you need some supported files. You can easily find these files on official page of DWR.
http://directwebremoting.org/dwr/index.html
You need to download below files,
1) dwr.jar [http://directwebremoting.org/dwr/downloads/index.html] [deploy in your respective WEB-INF/lib dir]
2) commons-logging.jar [deploy in your respective WEB-INF/lib dir]
3) util.js [deploy in your respective folder where your jsp and js files resides]
4) engine.js [deploy in your respective folder where your jsp and js files resides]
Step 2: Configuration in your web application
We need to create dwr.xml file where your DWR related configuration and put this file in dir where your web.xml of your application reside.
I am showing the structure of the dwr.xml.
// DWR XML Content
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd">
<dwr>
<!-- init is only needed if you are extending DWR
<init>
<creator id="..." class="..." />
<converter id="..." class="..." />
</init> -->
<!-- without allow, DWR isn't allowed to do anything -->
<allow>
<filter class="com.makhir.filters.DWRFilter" /><!-- Your DWR filter here which manage the request/response to DWR servlet -->
<create creator="new" javascript="DWRInvoker"><!-- Your DWR Servlet class which handles the actual request and response -->
<param name="class" value="com.makhir.servlets.DWRInvoker"/>
</create>
<convert converter="bean" match="com.makhir.vo.UserRegisterVO" /> <!-- POJO entry for transferring along network if any-->
</allow>
<!-- you may need to tell DWR about method signatures
<signatures>
...
</signatures> -->
Now make an entry for dwr servlet in web.xml for URL mapping as below,
// web.xml entry
<servlet>
<servlet-name>dwr-starter</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-starter</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
Thats it as point of configuration.
Step 3: Code changes for Server side management
A) Create one filter with name DWRFilter whose entry is already available in dwr.xml with name DWRFilter
Note: We need not make this filter entry in our web.xml as we do traditionally
Below is the code snippet of for the filter,
//DWRFilter.java
import java.lang.reflect.Method;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.directwebremoting.AjaxFilter;
import org.directwebremoting.AjaxFilterChain;
public class DWRFilter implements AjaxFilter{
private static Log logger = LogFactory.getLog(DWRFilter.class);
@Override
public Object doFilter(Object object, Method method, Object[] params, AjaxFilterChain filterChain) throws Exception {
logger.debug("Enter : Entering into DWRFilter");
// TODO: Add code for some filteration on methods and params which are interchange between server and client
logger.debug("Exit : Entering into DWRFilter");
return filterChain.doFilter(object, method, params);
}
}
B) Create class for which is going to responsible for handling your reqeust of dwr call from the client
Here i made a class with name DWRInvoker.java as its entry already available in dwr.xml
Below is the code snippet of for the filter,
//DWRInvoker.java
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import com.makhir.vo.UserRegisterVO;
public class DWRInvoker {
private static Log logger = LogFactory.getLog(DWRInvoker.class);
public DWRInvoker(){} // Default Constructor
public Object getUserInfo(String userId){
logger.debug("Enter : getUserInfo()");
UserRegisterVO registerVO = new UserRegisterVO(); //UserRegisterVO which is going to transfer on network.Its entry available in dwr.xml
registerVO.setUserName("Ashish Mishra");
registerVO.setUserId(userId);
registerVO.setDepartment("Development");
logger.debug("Exit : getUserInfo()");
return registerVO;
}
}
C) Create POJO class which is also your value object. Here i have created with name UserRegistrationVO.java.
Make an entry in dwr.xml in convert element.
Step 4: Code changes for client side management
Now its time make some changes on client side.
Here we need to create jsp files in which you want to manage your interaction with client and server with help of DWR call.
A) Download engine.js file from official DWR home page and depoly it in your dir where your jsp resides
B) Download util.js file from official DWR home page and depoly it in your dir where your jsp resides
C) Creating DWRInvoker.js in your application where your jsp and scripting files resides
Below is script snippet for your reference,
//DWRInvoker.js
if (typeof dwr == 'undefined' || dwr.engine == undefined) throw new Error('You must include DWR engine before including this file');
(function() {
if (dwr.engine._getObject("DWRInvoker") == undefined) {
var p;
p = {};
p._path = '/extreme/dwr';
/**
* @param {class java.awt.image.BufferedImage} p0 a param
* @param {class java.lang.String} p1 a param
* @param {class java.lang.String} p2 a param
* @param {function|Object} callback callback function or options object
*/
p.getUserInfo = function(p0, callback) {
return dwr.engine._execute(p._path, 'DWRInvoker', 'getUserInfo', arguments);
};
dwr.engine._setObject("DWRInvoker", p);
}
})();
/**
function DWRInvoker(){}
DWRInvoker.getUserInfo = function(p0,callback){
DWREngine._execute('/extreme/dwr','DWRInvoker','getUserInfo',p0,callback);
}
*/
D) Create your JSP page from where actual DWR calling will happen
Here, i my case i have created the jsp file for your reference with name profilePage.jsp which load the profile details.
DWR call will made by the client when profilePage.jsp is load and fetch specific user profile data from server and display it onto client
browser without refreshing the page.
You can make DWR call through any of events supported by the HTML component.
Below is code snippet of the jsp file.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!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>Extreme Application</title>
<script type="text/javascript" src="engine.js"> </script> <%-- engine.js which should always be first script file to be included [Mandatory] --%>
<script type="text/javascript" src="DWRInvoker.js"> </script> <%-- DWRInvoker.js needs to be included [Mandatory]--%>
<script type="text/javascript" src="util.js"> </script> <%-- util.js needs to be included for enhance the feature provided by DWR[Optional] --%>
<script type="text/javascript">
function loadProfile(){
dwr.util.useLoadingImage('images/ajax-loader.gif'); <%-- Progress image for showing the progress of dwr call on client side --%>
DWRInvoker.getUserInfo(<%=userid%>, getinfo); <%-- Actual DWR call to get user's profile data from the server --%>
}
function getinfo(data){ <%-- scripting method which handles the server response from DWR call--%>
document.getElementById("txtUserName").value = data.userName;
document.getElementById("txtDept").value = data.department;
document.getElementById("txtCity").value = data.city;
}
</script>
</head>
<body onload="loadProfile();">
<form action="#" method="post" name="updateFrom" id="updateFrom" enctype="multipart/form-data">
<table align="left" id="regisTable" style="border-color: gray;">
<tr>
<td class="td">Name</td>
<td class="td">:</td>
<td class="td"><input type="text" name="txtUserName" id="txtUserName" value="''"/></td>
</tr>
<tr>
<td class="td">Department</td>
<td class="td">:</td>
<td class="td"><input type="text" name="txtDept" id="txtDept" value="''"/></td>
</tr>
<tr>
<td class="td">City</td>
<td class="td">:</td>
<td class="td"><input type="text" name="txtCity" id="txtCity" value="''" /></td>
</tr>
</table>
</form>
</body>
</html>
I think i might have covered all those things which required to configure DWR in J2EE application.
Regards,
Ashish Mishra
The DWR (Direct Web Remoting) project is an open source solution under the Apache license for the developer who wants to use AJAX and XMLHttpRequest in an easy way. It has a set of JavaScript functions that remove the complexity from calling methods in a Java object running on the application server from the HTML page. It handles parameters of different types and helps keep the HTML code readable.
DWR is not intrusive to one's design, as it does not force any sort of inheritance architecture for objects to be exposed. It fits well in any application that runs in a servlet framework. For the less DHTML-experienced developers, DWR also provides a JavaScript library to help with frequently used DHTML tasks, like populating tables, filling select boxes with items, and changing the content of HTML elements such as and.
The DWR Website is comprehensive and has a fair amount of documentation, which has served as a foundation for this article. Some examples are provided to demonstrate how DWR can be used and what can be accomplished with the library.
Reference: Java World
I am going to show you about how to integrate DWR framework in your running J2EE application. Below are the steps to configure DWR framework.
Step 1: Download required files
For integrating DWR in your application, you need some supported files. You can easily find these files on official page of DWR.
http://directwebremoting.org/dwr/index.html
You need to download below files,
1) dwr.jar [http://directwebremoting.org/dwr/downloads/index.html] [deploy in your respective WEB-INF/lib dir]
2) commons-logging.jar [deploy in your respective WEB-INF/lib dir]
3) util.js [deploy in your respective folder where your jsp and js files resides]
4) engine.js [deploy in your respective folder where your jsp and js files resides]
Step 2: Configuration in your web application
We need to create dwr.xml file where your DWR related configuration and put this file in dir where your web.xml of your application reside.
I am showing the structure of the dwr.xml.
// DWR XML Content
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd">
<dwr>
<!-- init is only needed if you are extending DWR
<init>
<creator id="..." class="..." />
<converter id="..." class="..." />
</init> -->
<!-- without allow, DWR isn't allowed to do anything -->
<allow>
<filter class="com.makhir.filters.DWRFilter" /><!-- Your DWR filter here which manage the request/response to DWR servlet -->
<create creator="new" javascript="DWRInvoker"><!-- Your DWR Servlet class which handles the actual request and response -->
<param name="class" value="com.makhir.servlets.DWRInvoker"/>
</create>
<convert converter="bean" match="com.makhir.vo.UserRegisterVO" /> <!-- POJO entry for transferring along network if any-->
</allow>
<!-- you may need to tell DWR about method signatures
<signatures>
...
</signatures> -->
</dwr>
Now make an entry for dwr servlet in web.xml for URL mapping as below,
// web.xml entry
<servlet>
<servlet-name>dwr-starter</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-starter</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
Thats it as point of configuration.
Step 3: Code changes for Server side management
A) Create one filter with name DWRFilter whose entry is already available in dwr.xml with name DWRFilter
Note: We need not make this filter entry in our web.xml as we do traditionally
Below is the code snippet of for the filter,
//DWRFilter.java
import java.lang.reflect.Method;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.directwebremoting.AjaxFilter;
import org.directwebremoting.AjaxFilterChain;
public class DWRFilter implements AjaxFilter{
private static Log logger = LogFactory.getLog(DWRFilter.class);
@Override
public Object doFilter(Object object, Method method, Object[] params, AjaxFilterChain filterChain) throws Exception {
logger.debug("Enter : Entering into DWRFilter");
// TODO: Add code for some filteration on methods and params which are interchange between server and client
logger.debug("Exit : Entering into DWRFilter");
return filterChain.doFilter(object, method, params);
}
}
B) Create class for which is going to responsible for handling your reqeust of dwr call from the client
Here i made a class with name DWRInvoker.java as its entry already available in dwr.xml
Below is the code snippet of for the filter,
//DWRInvoker.java
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import com.makhir.vo.UserRegisterVO;
public class DWRInvoker {
private static Log logger = LogFactory.getLog(DWRInvoker.class);
public DWRInvoker(){} // Default Constructor
public Object getUserInfo(String userId){
logger.debug("Enter : getUserInfo()");
UserRegisterVO registerVO = new UserRegisterVO(); //UserRegisterVO which is going to transfer on network.Its entry available in dwr.xml
registerVO.setUserName("Ashish Mishra");
registerVO.setUserId(userId);
registerVO.setDepartment("Development");
logger.debug("Exit : getUserInfo()");
return registerVO;
}
}
C) Create POJO class which is also your value object. Here i have created with name UserRegistrationVO.java.
Make an entry in dwr.xml in convert element.
Step 4: Code changes for client side management
Now its time make some changes on client side.
Here we need to create jsp files in which you want to manage your interaction with client and server with help of DWR call.
A) Download engine.js file from official DWR home page and depoly it in your dir where your jsp resides
B) Download util.js file from official DWR home page and depoly it in your dir where your jsp resides
C) Creating DWRInvoker.js in your application where your jsp and scripting files resides
Below is script snippet for your reference,
//DWRInvoker.js
if (typeof dwr == 'undefined' || dwr.engine == undefined) throw new Error('You must include DWR engine before including this file');
(function() {
if (dwr.engine._getObject("DWRInvoker") == undefined) {
var p;
p = {};
p._path = '/extreme/dwr';
/**
* @param {class java.awt.image.BufferedImage} p0 a param
* @param {class java.lang.String} p1 a param
* @param {class java.lang.String} p2 a param
* @param {function|Object} callback callback function or options object
*/
p.getUserInfo = function(p0, callback) {
return dwr.engine._execute(p._path, 'DWRInvoker', 'getUserInfo', arguments);
};
dwr.engine._setObject("DWRInvoker", p);
}
})();
/**
function DWRInvoker(){}
DWRInvoker.getUserInfo = function(p0,callback){
DWREngine._execute('/extreme/dwr','DWRInvoker','getUserInfo',p0,callback);
}
*/
D) Create your JSP page from where actual DWR calling will happen
Here, i my case i have created the jsp file for your reference with name profilePage.jsp which load the profile details.
DWR call will made by the client when profilePage.jsp is load and fetch specific user profile data from server and display it onto client
browser without refreshing the page.
You can make DWR call through any of events supported by the HTML component.
Below is code snippet of the jsp file.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!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>Extreme Application</title>
<script type="text/javascript" src="engine.js"> </script> <%-- engine.js which should always be first script file to be included [Mandatory] --%>
<script type="text/javascript" src="DWRInvoker.js"> </script> <%-- DWRInvoker.js needs to be included [Mandatory]--%>
<script type="text/javascript" src="util.js"> </script> <%-- util.js needs to be included for enhance the feature provided by DWR[Optional] --%>
<script type="text/javascript">
function loadProfile(){
dwr.util.useLoadingImage('images/ajax-loader.gif'); <%-- Progress image for showing the progress of dwr call on client side --%>
DWRInvoker.getUserInfo(<%=userid%>, getinfo); <%-- Actual DWR call to get user's profile data from the server --%>
}
function getinfo(data){ <%-- scripting method which handles the server response from DWR call--%>
document.getElementById("txtUserName").value = data.userName;
document.getElementById("txtDept").value = data.department;
document.getElementById("txtCity").value = data.city;
}
</script>
</head>
<body onload="loadProfile();">
<form action="#" method="post" name="updateFrom" id="updateFrom" enctype="multipart/form-data">
<table align="left" id="regisTable" style="border-color: gray;">
<tr>
<td class="td">Name</td>
<td class="td">:</td>
<td class="td"><input type="text" name="txtUserName" id="txtUserName" value="''"/></td>
</tr>
<tr>
<td class="td">Department</td>
<td class="td">:</td>
<td class="td"><input type="text" name="txtDept" id="txtDept" value="''"/></td>
</tr>
<tr>
<td class="td">City</td>
<td class="td">:</td>
<td class="td"><input type="text" name="txtCity" id="txtCity" value="''" /></td>
</tr>
</table>
</form>
</body>
</html>
I think i might have covered all those things which required to configure DWR in J2EE application.
Regards,
Ashish Mishra
