The AJAX integration through DWR 3 is not the main feature in Parancoe, but it's easy and funny. Let's see how simple is building a Web chat.
Starting from a project generated with Maven using the Parancoe Web Archetype, you need to add the Parancoe DWR Plugin to the dependencies in your
pom.xml:
<dependency>
<groupId>org.parancoe</groupId>
<artifactId>parancoe-plugin-dwr</artifactId>
<version>2.0.2</version>
</dependency>
Then add the
/dwr/* pattern to the mapping of the parancoe servlet in your
web.xml.
Now DWR is ready to be used in your application. You check it building and deploying your application, and pointing your browser to
<your_base_address>/dwr/index.html. You should see the DWR Test Page.
Then add a class with methods (a single method in this example) that will be invoked through AJAX:
package com.mycompany.testapp.ajax;
import org.directwebremoting.Browser;
import org.directwebremoting.annotations.RemoteMethod;
import org.directwebremoting.annotations.RemoteProxy;
import org.directwebremoting.ui.dwr.Util;
import org.springframework.stereotype.Component;
@Component
@RemoteProxy(name = "chat")
public class Chat {
@RemoteMethod
public void send(final String nickname, final String message) {
Browser.withCurrentPage(new Runnable() {
public void run() {
Util.addRows("chatLog", new String[][]{{nickname, message}});
}
});
}
}
Simple, isn't it? ...but powerful. When invoked that method will add a row to the table with id
chatLog, in all browsers that are visualizing that page.
Let's see the page
chat.jsp in which that method is invoked:
<%@ include file="WEB-INF/jsp/common.jspf" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<%@ include file="WEB-INF/jsp/head.jspf" %>
<script src="${cp}/dwr/interface/chat.js" type="text/javascript"/>
<script src="${cp}/dwr/engine.js" type="text/javascript" />
<script src="${cp}/dwr/util.js" type="text/javascript" />
<title>Parancoe DWR chat</title>
</head>
<body>
<h1>DWR Chat</h1>
<table id="chatLog">
<thead>
<tr><th>Nickname</th><th>Message</th></tr>
</thead>
<tbody> </tbody>
</table>
<form id="chatForm" method="post" action="/sendMessage">
Nickname: <input id="nickname" type="text" /><br/>
Say: <input id="say" type="text" /><br/>
<input type="submit">
</form>
<script type="text/javascript">
function bindUI() {
$('chatForm').observe('submit', chatSubmit);
}
function chatSubmit(event) {
event.stop();
chat.send($F('nickname'), $F('say'));
}
dwr.engine.setActiveReverseAjax(true);
document.observe('dom:loaded', bindUI);
</script>
</body>
</html>
In your
parancoe-servlet.xml file add the following configuration for enabling the active reverse AJAX in DWR:
Build and deploy your application. Open multiple windows of your browser(s) to
<your_base_address>/chat.jsp, and start chatting:
Have fun with Parancoe!
