7 Aug 2011

Adding jQuery Mobile to an Existing Grails App

Here are some quick steps to creating a Grails app using jQuery Mobile.

Create A Sample App

I'm going to start by creating a simple grails app with scaffolding interface

$ grails create-app MobiGolf
$ grails create-domain-class com.MobiGolf.golfer

- Edit the Golfer domain and create some fields

$ grails create-domain-class com.MobiGolf.round

- Create some fields in the Round domain

$ grails generate-all com.MobiGolf.golfer
$ grails generate-all com.MobiGolf.round
$ grails run-app

- Verify the CRUD functions work with the standard scaffolding interface

Setup git and save current state

I've become a big fan of Git and the SmartGit client so I'm going to install both and commit the app in it's current state:

$ grails install-plugin git 1.0-SNAPSHOT
$ grails git-init

Now for the jQuery steps

Time to get the base jQuery installed as well as the Grails templates.

$ grails install-templates

I'd never used this feature of grails before. This command added the files MobiGolf/src/artifacts/Controller.groovy, DomainClass.groovy and many others including MobiGolf/src/scaffolding/Controller.groovy, create.gsp, edit.gsp, list.gsp, show.gsp

$ grails install-plugin jquery

Make a copy of the main.gsp layout template called main.mobile.gsp

$ cp grails-app/views/layouts/main.gsp grails-app/views/layouts/main.mobile.gsp

Add the following line to grails-app/views/layouts/main.mobile.gsp in the <head> section

<g:javascript library="jquery" plugin="jquery"/>

and add the following to your grails-app/conf/config.groovy


Installing jQuery Mobile Templates Plugin v0.1

Download the jQuery mobile css and js files. Place the css file in web-app/css/ and the js file in web-app/js. You should end up with the following files:


There is an early jQuery Mobile plugin by Rob Fletcher on GitHub. At this point in time, it is a work in progress and I found some nice improvements to the plug-in that were done by Aaron Eischeid. I've since created my own branch with some improvements in the list view. To get a good idea of where the three versions of the jQuery Mobile plug-in stand, github generates a nice graphical view of the genealogy. Install the latest jQuery mobile development code of your choice.  Here's the command to download my version.

$ git clone https://github.com/rgstephens/grails-jquery-mobile.git

Create the plug-in from the development files:

$ cd grails-jquery-mobile
$ grails package-plugin

CD to the home directory of your grails project and install the plugin:

$ grails install-plugin ../grails-jquery-mobile/grails-jquery-mobile-0.1.zip

Normally, you would install the templates that are part of the plugin but that will over-ride the standard grails templates. Since I want to keep the standard grails scaffolding for desktop browser users, I'm going to manually copy jQuery Mobile templates to a separate directory later (see below). If you don't want the standard scaffolding, you can continue with these commands.

$ grails install-mobile-templates

The install-mobile-templates command copies the files from ${jqueryMobilePluginDir}/src/templates to ${basedir}/src/templates.

$ grails generate-views

Generating Separate Mobile Views

I'd like to use the Grails Scaffolding feature to generate a second set of views for Mobile users but I couldn't find a supported means of generating views beyond the standard CRUD views in Grails 1.3.7. I found the Regen Plugin by Richard Lemieux and decided to give it a try. In addition to the ability to generate additional views, it also allows you to manage the list of fields for each views. The scaffolding feature of Grails is intended to provide a starting point for app generation but I'm quite enamored with it - why not try and take a good thing too far - and it looks like Richard is too.

$ grails install-plugin regen

Create a new directory for your mobile views:

$ mkdir -p <project>/src/templates/scaffolding/regen/greg

Update all domain classes with the following:

static regenTemplates = 'regen.greg'

In the new directory, make a copy of the existing create.gsp but rename it create_m.gsp. Then change the title of the page so you can see when the this version of create is used.

$ grails regen view-create_m com.MobiGolf.Golfer

Now that I've confirmed that regen is working, I'm going to copy the jQuery Mobile templates to my regen/greg directory and rename the templates using my _m.gsp convention:

$ cd <project>/src/templates/scaffolding/src/templates
$ cp .grails/1.3.7/projects/<project>/plugins/jquery-mobile-0.1/src/templates/scaffolding .
$ for a in *.gsp; do mv "$a" "$(echo "$a" | sed 's/.gsp$/_m.gsp/')"; done

(re)Generate the new views:

$ grails regen views com.MobiGolf.Golfer