Sunday, March 25, 2012

Ajax Examples upgraded to Grails 2.0.0

Overview
A little over a year ago, I wrote a blog posting providing a complete set of working code showing ajax examples for each of the Grails tags that supports Ajax.   Now, I finally found time to upgrade that code to Grails 2.0.0 (from Grails 1.3.7).   There are plenty of article out there helping point users in the right direction when upgrading to Grails 2.0.0 and most of them are helpful.  Seems like no one wants to RTFM, we just want to get at it!  My recommendation is RTFM, and checkout some of the helpful postings out there, especially when the upgrade includes as many changes and new features as Grails 2.0.0.

I have to confess, I tried to just "get at it" with my ajax application and Grails 2.0.0 and it got me part of the way there.  To finish the job, I needed to read the excellent documentation produced by the Grails team and also the documentation accompanying some of the plugins.

Steps for my upgrade
In order to get my application running under Grails 2.0, I needed 5 basic steps:

  1. Run the 'grails upgrade' against my project.
  2. Upgrade database to use H2 - instructions under Persistence here
  3. Install plugins: prototype and resources plugin.
  4. Modify the main.gsp layout to accommodate the plugins (resource, prototype).
  5. Modify Config.groovy to set the java script library to prototype.
Step 1
This step is required for any application being upgraded from an earlier version of Grails.  I am not going to say anything else about this step.

Step 2
Follow Peter Ledbrook's instructions on upgrading the persistence layer to use H2 database instead of the HSQLDB.  If you want to continue to use HSQLDB, there are instructions for that too!

Step 3
I consider myself 'javascript-challenged', so I decided to stick with the prototype library for javascript for this upgrade rather than attempting to use jQuery, which is the new default library.  If all goes well and I get some free time, maybe I will upgrade the application to use jQuery too, but for now, I am sticking with prototype - less changes too!

Make sure the plugins are installed, and then verify that they all got installed successfully (last statement).

grails install-plugin resources
grails install-plugin prototype
grails list-plugins -installed

Step 4
One of the tricky parts here was including plugin="prototype" on the javascript tag in the header section of this page.  Below is a copy of my layout\main.gsp.  (Be careful using cut/paste on the page below, I had problems with the syntax highligher or blogger (not sure which) adjusting my  html tags as it sees fit).  Best option, grab the code from GitHub. Also be sure to understand the changes needed for the Resources Plugin.
  
 
        <g:layoutTitle default="Grails" />
        
        
        
        
        
           function showSpinner(visible) {
              $('spinner').style.display = visible ? "inline" : "none";
           }
           Ajax.Responders.register({
           onLoading: function() {
                 showSpinner(true);
           },
           onComplete: function() {
             if(!Ajax.activeRequestCount) showSpinner(false);
           }
           });
        
        
    
     
        



        

      
Step 5
Update Config.groovy to define prototype as the javascript library to use.

... 
grails.views.javascript.library = "prototype"
...
The project has been updated  and now available on GitHub.

Hope this helps!