Direct Web Remoting (DWR) Hello World Example

This page describes the process of setting up a very simple hello world application using direct web remoting (DWR) Java library. At the end of this you will have a working DWR enabled application running in jetty.

Background

DWR is used along with other AJAX technologies to allow for creation of rich internet applications. Often times you will find yourself using frameworks like Dojo or extJS to display the data. If your working with Java, getting the data to those frameworks often involves working with JSON or XML data and writing Servlets or something similar. DWR allows you avoid the pain and hassle of all that and allows you to directly surface your data from Java Code (possibly SpringBeans). DWR does this by wrapping your Java Beans with Javascript Objects. These objects make Ajax calls to your back end Java code right from your html page. Since these are asynchronous Javascript calls, data from your Java code can be used to update your html page without requiring your web page be refreshed.

Requirements

• Maven Installed and configured

Procedure

We start by generating the web application using Maven 2.

mvn archetype:generate -DarchetypeArtifactId=maven-archetype-webapp

Answer the questions like seen below.

[INFO] Generating project in Interactive mode
Define value for groupId: : com.test
Define value for artifactId: : dwrHelloWorld
Define value for version:  1.0-SNAPSHOT: :
Define value for package:  com.test: :
Confirm properties configuration:
groupId: com.test
artifactId: dwrHelloWorld
version: 1.0-SNAPSHOT
package: com.test
 Y: : Y

Hit enter for the rest of the defaults.

cd to the project’s folder and modify the pom.xml so that it looks like the one below.

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.test</groupId>
	<artifactId>dwrHelloWorld</artifactId>
	<packaging>war</packaging>
	<version>1.0-SNAPSHOT</version>
	<name>dwrHelloWorld Maven Webapp</name>
	<url>http://maven.apache.org</url>
	<dependencies>
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>3.8.1</version>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>org.directwebremoting</groupId>
			<artifactId>dwr</artifactId>
			<version>2.0.3</version>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.1.2</version>
		</dependency>
		<dependency>
			<groupId>taglibs</groupId>
			<artifactId>standard</artifactId>
			<version>1.1.2</version>
		</dependency>
		<dependency>
			<groupId>org.apache.geronimo.specs</groupId>
			<artifactId>geronimo-servlet_2.5_spec</artifactId>
			<version>1.2</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>log4j</groupId>
			<artifactId>log4j</artifactId>
			<version>1.2.15</version>
			<exclusions>
				<exclusion>
					<groupId>javax.mail</groupId>
					<artifactId>mail</artifactId>
				</exclusion>
				<exclusion>
					<groupId>javax.jms</groupId>
					<artifactId>jms</artifactId>
				</exclusion>
				<exclusion>
					<groupId>com.sun.jdmk</groupId>
					<artifactId>jmxtools</artifactId>
				</exclusion>
				<exclusion>
					<groupId>com.sun.jmx</groupId>
					<artifactId>jmxri</artifactId>
				</exclusion>
				<exclusion>
					<groupId>javax.activation</groupId>
					<artifactId>activation</artifactId>
				</exclusion>
			</exclusions>
		</dependency>
		<dependency>
			<groupId>commons-logging</groupId>
			<artifactId>commons-logging</artifactId>
			<version>1.0.4</version>
		</dependency>

	</dependencies>
	<build>
		<finalName>dwrHelloWorld</finalName>
		<plugins>
			<plugin>
				<groupId>org.mortbay.jetty</groupId>
				<artifactId>jetty-maven-plugin</artifactId>
				<version>7.0.0.v20091005</version>
				<configuration>
					<scanIntervalSeconds>2</scanIntervalSeconds>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

Next we create the src/main/java folder since this is not done for us using the archetype.

on unix you type: mkdir src/main/java

Next we will modify the web.xml file

src/main/webapp/WEB-INF/web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5">
	<display-name>dwrHelloWorld</display-name>

	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>
<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>

</web-app>

The following maps your java classs to the JavaScript object. The DWR library uses reflection to identify the public methods and creates javascript functions that wrap the functionality they provide.

src/main/webapp/WEB-INF/dwr.xml

<?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>
    <create creator="new" javascript="HelloWorldModelImpl">
      <param name="class" value="com.test.HelloWorldModelImpl"/>
    </create>
  </allow>
</dwr>

src/main/java/com/test/HelloWorldModelImpl.java

public class HelloWorldModelImpl {
    public String getData() {
        return "Hello World";
    }
}

Next we will create the JSP’s used to display the pages.

src/main/webapp/index.jsp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>Hello World with Direct Web Remoting</title>

<script type="text/javascript"
    src="${request.contextPath}/dwr/interface/HelloWorldModelImpl.js"> </script>
<script type="text/javascript"
    src="${request.contextPath}/dwr/engine.js"> </script>

</head>
<body>
<script type="text/javascript">
function handleGetData(str) {
  alert(str);
}

HelloWorldModelImpl.getData(handleGetData);
</script>
</body>
</html>

Test Your Application

Start up jetty and test your application

cd to your project’s base folder and type:

mvn jetty:run

navigate to http://localhost:8080/

You should see a Hello World alert pop-up on your screen.

Subscribe to this blog to get more articles on this topic in the future.

That’s all for now.

About these ads