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
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.
