Tuesday, April 18, 2006

A Simple Ajax enabled Spring & DWR example

written by Marcel Panse

DWR allows Javascript in a browser to interact with Java on a server and helps you manipulate web pages with the results. DWR makes it easy for you to Ajax enable your website.

DWR stands for Direct Web Remoting.

Lets explain it a little more with a simple example:

Step 1: First you have to create the dwr servlet in your web.xml:

This servlet captures all incoming request at http://yourserver.com/dwr/ and forwards it to the dwr engine
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<display-name>DWR Servlet</display-name>
<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>false</param-value>
</init-param>
<init-param>
<param-name>logLevel</param-name>
<param-value>WARN</param-value>
</init-param>
</servlet>

<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
Step 2: We have to create a dwr.xml file describing what Java classes we want to expose and convert to javascript

In the following example we convert a simple hibernate POJO. The converted POJO can be used in javascript code. We also grab a manager bean from our Spring context. We can call methods from these spring wired manager beans in our javascript.

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
"http://www.getahead.ltd.uk/dwr/dwr10.dtd">

<dwr>
<allow>
<convert converter="hibernate" match="com.nefli.webdigital.domain.User">
<param name="exclude" value="groups"/>
</convert>

<convert converter="bean" match="com.nefli.webdigital.manager.*"/>

<create creator="spring" javascript="userManager">
<param name="beanName" value="userManager"/>
</create>
</allow>
</dwr>

Step 3: Create a JSP file with our dwr/ajax

Include the javascripts in the <head> section of your code. Notice that our manager class can be included as a javascript file. This javascript file will be generated by dwr when our application loads and the dwr.xml gets loaded. The engine and utils classes are needed to do anything and are also retrieved from our dwr servlet.

<script type='text/javascript' src='/dwr/interface/userManager.js'></script>
<script type='text/javascript' src='/dwr/engine.js'></script>
<script type='text/javascript' src='/dwr/util.js'></script>

Create a javascript function to handle the callback, also in our <head> section.

This function will create a table filled with information from our (hibernate) user object, which will be returned from the userManager. userTable is the id of the table to be filled. And the cellFuncts represends the columns in the table.

<script type="text/javascript">
var cellFuncs = [ function(data) { return data.username; }, function(data) { return data.firstName + ' ' + data.lastName; } ];
var userCallback = function(users) {
DWRUtil.addRows( "userTable", users, cellFuncs);
}
</script>

At last we will create the buttons and the table (in the <body> section) to complete our first ajax-enabled dwr example:

<input type="button" onclick="userManager.getAllUsers(userCallback);" value="Get all users"/>
<br />
<br />
<table>
<thead>
<tr><th width="200">Username</th><th width="300">Naam</th></tr>
</thead>
<tbody id="userTable"> </tbody>
</table>

More usefull information can be found at:

1 comment:

Gvenez said...

I wonder if DWR is still preferable now that Spring 3.0 supports RESTful JSON.