Benfante: November 2008

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!

Last week the Parancoe Team (me and other smart people :) ) released the version 2.0 of the Parancoe meta-framework. With this release Parancoe achieved a great level of maturity.

In the next weeks, starting with this post, I will demonstrate how easy and pleasant is to develop applications with Parancoe.

First demonstration! :) How difficult is to start a new project with Parancoe? No difficult at all. Install Maven and type the following command:


mvn archetype:create -DarchetypeGroupId=org.parancoe \
    -DarchetypeArtifactId=parancoe-webarchetype \
    -DarchetypeVersion=2.0.1 \
    -DgroupId=com.mycompany \
    -DartifactId=testApp \
    -DpackageName=com.mycompany.testapp

It will generate a new complete project ready for your next development. I repeat, complete, the new application is already working, you can build and deploy it on your application server and use it. You'll see a simple layout, administrative tasks, debug information in page (when deployed in development mode), user authentication and authorization, user management.

With a good IDE :) the start-up task is even easier. Watch this my previous, still valid, screen-cast.

Don't miss to read the new Parancoe Reference Guide, both in HTML and in PDF.

Have fun!

Benfante

Thursday, November 13, 2008

Building an AJAX chat with Parancoe and DWR

Saturday, November 8, 2008

Parancoe 2.0

My shared items

Blog Archive