Here are some quick steps to creating a Grails app using jQuery Mobile.
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
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
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
grails.views.javascript.library="jquery"
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:
web-app/cssjquery.mobile-1.0b1.min.css
web-app/js/jquery.mobile-1.0b1.min.js
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
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