AJAX Frameworks: Mixing Dojo & DWR

Right now is complex to determine which AJAX (Asynchronous JavaScript And XML) framework is the right choice for a project. This is it because AJAX is a complex mix of different scenarios and technologies. So when looking to the various options available it's important to understand where do they can be best applied. Currently there's a course over Java Passion that has a lesson dedicated to this. In summary these are the things to understand:

• AJAX is composed of client side technologies (Javascript), server side technologies and XML requests


• On the client side, one should ask for a library that facilitates the work with Javascript (provides an abstraction layer), has a rich widget set, manages the communications and, really important, is browser independent


• On the server side the choices are limited by other constraints. At least, the selected option should offer a good integration with your web framework and handle the low level incoming requests


• Both sides of the equation should be in equilibrium, that is, you have to bridge the gap between client and server

The available interesting (a personal point of view, there are more) frameworks, usable with Java, are:

• dojo: It can handle everything on the client side and offers a good selection of widgets. It can work with any server side technology. It's the most used Javascript framework probably.


• scriptaculous: The most appealing AJAX widgets I've seen. They are few though.


• Honorable mentions go for DHTML Goodies (nice!) and Rico aswell


• As appointed Yahoo! UI Library is a very well documented and supported client side library. I would endorse it specially for people that find dojo's documentation a little nightmare!


• Looking into the future there's the Sun backed jMaki, a framework to wrap JS widgets in JSP tags (or JSF components). It's still under heavy development but I expect very interesting things to show up this year.


• DWR: It offers a different approach. It's neither client nor server technology but the glue between them. It shows its power managing communications and exposing server code in the browser.


• GWT: want to create your own gmail?

Once known the alternatives an informed decision can be made. I'm gonna stand and recommend something, keep your Java server code untouched (and I would recommend using Spring), select the widget library (dojo this time but you can even mix and match) and glue everything with DWR. The advantages are obvious, the code will work with or without AJAX calls, no extra work is needed to expose the beans and the look&feel is highly improved.

I'm quite sure a lot of people are successfully using this scheme lately but I haven't really found a simple tutorial to help beginners. Here's a little example to start. Fortunately, there's not much you need to do. DWR has put a lot of effort to handle the communications and move the logic to the server side. Just rely on it.

If you have already defined a widget in your screen:

<script type='text/javascript' src='/TestBeanAnnotation/dojo/dojo.js'></script>
<script language="javascript">
   dojo.require("dojo.event.*");
   dojo.require("dojo.widget.Button");
   dojo.require("dojo.widget.DatePicker");
</script>
<div dojoType="datepicker" id="datepickerbox"></div>
<button dojoType="Button" widgetId="dwrCaller" id="dwrCaller">
      Invoke DWR
</button>

The DWR code can be added independently:

<script type='text/javascript' src='[APP]/interface/DayFromDate.js'></script>
<script type='text/javascript' src='[APP]/engine.js'></script>
<script type='text/javascript' src='[APP]/util.js'></script>
<script language="javascript">
   function dwrDoCall(evt) {
      DayFromDate.getDay(dojo.widget.byId("datepickerbox").getValue(),
                        dwrResult);
   }

   function dwrResult(data) {
      var day = ["", "Sunday", "Monday",
                     "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
      for (var prop in data) {
         alert(prop + " is a " + day[data[prop]]);
      }
   }
</script>

And now everything can be wired together. To do it we take advantage of the dojo event model.

function init() {
   var caller = dojo.widget.byId('dwrCaller');
   dojo.event.connect(caller, 'onClick', dwrDoCall);
}

dojo.addOnLoad(init);

The code above is very simple. It adds a hook on the load of the page. Whenever the button is pressed the event will invoke the JS function which happens to be a DWR call. Everything is tied together. Remember you can download the full source code and an example application at our repository