You've got a great GWT web-client application but you can't figure out why all your custom, server-side exceptions are rolling into your client app as anything but your custom exception. Yes, GWT supports custom exceptions as valid 'failure' responses back to your GWT client, but when they get to your handler all you see is IvocationTargetException: see server log." If you've done some research you may end up with: "Service method com.my.private.company.project.rpc.service.Classname.processLogin(java.lang.String) threw an unexpected exception: Invalid username / password." Dangit Scotty!

I am on the mailing list for Artima Devleoper, which is one of my favorite websites that cover Java/JEE, Dynalangs, and C++. Today's e-mail had a link to a talk by Douglas Crockford who created JSON and Yahoo UI (which I used on my last project) on the state of Ajax. He goes through a bit of computing history (for some reason), and much of the talk is about stuff an experienced web developer would already know.

Over the last few weeks, I’ve been playing with two of the latest web framework offerings. Of course both advertise to dramatically increase the ease of web application development (while shouting the obligatory, "AJAX!"), yet they are quite different.

Adobe Spry framework for Ajax
Although I found the Adobe Spry demo applications to be compelling, they ran a bit slow for me (yes, running locally). I also didn’t see much new here; just a combination of things that had wowed me previously. For example, the transitions between images in the Photo Gallery were a bit rougher than LightBox. The RSS Reader was well put together, although I can’t see myself using (and maintaining) something like this when so may other (integrated) options exist. The Product Table seemed a lot like the Accordian example found on the Rico web site.

I was recently sent an article from the current issue of eWeek titled Gosling Outlines the Trouble With AJAX. Don’t get me wrong, I have tremendous respect for Dr. Gosling. He’s fantastic if you ever get the chance to see him speak live. I’m also a fan of the eWeek publication. But...

I have a couple of problems with this particular interview. I think it’s fair to say Dr. Gosling has an agenda, (Sun most certainly does).

In a recent project, we have decided to incorporate and AJAX functionality to create a dynamic and interactive user experience in the browser.  With information learned from Stuart Halloway's presentation at one of Platinum Solutions' training events, I decided to utilize Prototype (http://prototype.conio.net/) as a helper library for implementing AJAX functionality and making the Javascript cleaner.  

AJAX

My primary goal for utilizing Prototype was to assist with AJAX.  Although the creating AJAX requests in the browser is not complex, Prototype hides browser variations in the process and makes implementation extremely simple.  To implement the loading of data upon click, I utilized Prototype’s Ajax.Request object.

    new Ajax.Request(this.getDataUrl, {
            method: 'post',
            postBody: 'fromDate=' + fromDate + ‘&toDate=’ + toDate,
            onSuccess: this.processDataJSON.bind(this),
            onFailure: this.ajaxError.bind(this),
            asynchronous: true
        });

This simple AJAX call just requires the url and an associative array of self explanatory parameters.  The only unintuitive part of this call to developers of other languages is the bind call.  This is covered later in the discussion on classes.  This AJAX call gets initiated in a ‘click’ event handler, and the processDataJSON and ajaxError callback functions were written to process the success or failure of the AJAX call.

This request calls a URL which could be implemented in any server-side language such as Java, PHP, or Perl.  For this project, we implemented the server as a Java Servlet and chose JavaScript Object Notation (JSON) as the data protocol.  JSON is a very simple, yet effective way to deliver data to the client in the form of JavaScript objects.  This eliminates any conversion or translation on the client side.  However, a small amount of work is performed on the server side to create the objects.

Once the client receives the AJAX response, the JSON is parsed to create a standard JavaScript object.  You can use a standard JavaScript eval to create the objects, but it is recommended to use JSON.org’s JSON parser available at http://www.json.org/js.html.  This parser will only process and create JavaScript objects from the JSON response as opposed to eval which will run any JavaScript code.  Here is the processDataJSON callback function:

    processDateJSON: function(response) {
        // create collect array from JSON text returned
        var newData = JSON.parse(response.responseText);
        
        // process new data here...
    }

There is no translation or conversion necessary.  The JSON parse function simply returns a JavaScript object for use.

Classes

Another purpose for using Prototype was to use basic object oriented programming.  Prototype offers a Class object for creating and defining classes.  Use Class.create() to create a Class object, then define the class functions by assigning an associative array of functions to class_name.prototype.  A special function called initialize is used to act as the object’s constructor.

    var CalendarData = Class.create();

CalendarData.prototype = {
        initialize: function(year, month, day) {
        },

        processDataJSON: function(request) {
        ...
        }
    };

To harness the power of inheritance, use Class.extend to create an object oriented hierarchy of objects.  My primary complaint of JavaScript objects is the notion of context.  Object oriented programmers are used to calling functions on objects with the assumption that the target object is executing its own function.  In other words, car.explode() called from a class called Person might not cause the car object to explode.  Instead, the car.explode function would be executed in the context of Person, thus causing the Person to explode.  This is likely not the intended result.  To solve this issue, Prototype offers the bind function.  In the car example, the Person would call car.explode.bind(car)().  This notation is definitely less clean but necessary.  Bind causes the function to be executed in the context of car.  When the function uses the ‘this’ keyword, ‘this’ will refer to car and NOT the Person object calling the function.  This issue of context may be simple to fix, however it can waste much time debugging function calls missing binds.

Iterators

One of the UIX view layer niceties is that you can setup your web pages to use popular AJAX-style events almost effortlessly.  And you don’t have to write a single line of JavaScript. This is because most of the common web page components; buttons, links, text input boxes, check and radio buttons, and drop-down lists are enabled to send asynchronous events to your controller class and have just about any part of the current page redrawn/updated. You don’t implement any special or extraordinary code to handle the asynchronous event; actually, it can be totally transparent to your server code. Combining this with the ADF active data model, you can really polish your Oracle web application to have that thick-client feel. Oracle calls this asynchronous event handling Partial Page Rendering, or PPR.