Webflow on Grails and jQuery UI with Grails at the Philly on Grails User Group Meeting

Note - what follows is incoherent. It was a long day. I hope to edit this and make more sense in the article tomorrow. For the intrepid, there's cool projects lurking in here...

Today Jason Gritman @gritman and Bob Rodini had a Philly Grails meeting at Chariot Solutions.

Spring Webflow under Grails

Bob Rodini showing Grails and WebFlowWe started with Bob Rodini's presentation on using the Spring WebFlow framework, which in typical Grails fashion is provided using a Groovy-based DSL. Bob is working on Grails in his work-a-day life, and walked us through the conventions, communication with the scopes, and other things.

We discussed the Grails approach for WebFlow -vs- regular XML WebFlow as well. A good summary of the benefits of this unique platform.

Bob is offering a Grails continuing education course at Penn State Great Valley Campus - if you are near that area, register and you can benefit from evening training from him.

jQuery and Grails

Jason (JSON?) Gritman answering UG questionsJason Gritman's talk on jQuery and Grails was very useful. He gave us a great tutorial on jQuery, jQuery UI and jQuery validator. Cool things to remember:

• jQuery UI Theme Roller/Builder - Don't forget to Bookmark the URL when you are done theming - you can run that bookmark (a very long URL) to restore your settings and continue theming.
• jQuery validator - you have control over where and when the validation fires. It has internationalization. etc...
• Looking forward to jQuery UI's upcoming table component - sounds interesting to me!
• Apparently custom validators can work - such as validating a credit card using Ajax - according to a discussion here at the talk.

Then Jason showed the validator user interface - before with Grails, after with jQuery validator.

Grails 2.0 Static Resources

Jason showed us how you can create a modules element in Grails 2.0 - create a resource set - closures:

modules = {
  validation {
    dependsOn 'jquery'
    resource url: 'js/jquery.validate.js'
    resource url: 'foo/bar.js'
  }

  ..
}

That's SUUUPER cool.

jQuery Validators

I really like those - he showed us the concept of adding a validation:

  $.validator.addMethod("name", function(params) { ...});

So you can write your own custom validators, and there are a number built in.

DataTables

This is a jQuery plugin that has a ton of features in it, and Jason has used it on projects. For Ajax consumers, it has a very specific JSON format and is, as he says, pretty complex. However, it is extremely powerful.

We got into a discussion of grid APIs, and obviously horses for courses...

The cool thing about the DataTables plugin is that it binds to jQuery UI theming, and you can just actively bind it to a statically built HTML table. Very good stuff (don't be surprised if you see a nice, dynamic grid on Chariot's training pages soon).

Calendaring

Jason is my hero... Such as good presentation even 1/2 way through. He showed us the FullCalendar project - another AWESOME jQuery UI plugin. Think of Google Calendar...

You can use the Full Calendar project to show a full page calendar. Loaded via JSON.

$.getJSON("uri", function(events) {
  $('#divname').fullCalendar({
  theme: true,
  events: events});
});

dynatree

Another nifty library. You can load it via JSON or HTML. Looks very sophisticated and event-driven. Everything binds with JSON. It looks very interesting. It doesn't necessarily hook into jQuery UI, so it is a one-off component.

BBQ

Stands for "Back button & query library" - this is something similar to the way the Showoff project uses the # parameter to show and switch slides. The hashtag will turn into a query string, and you can interact like with your request query string. You can push state for single items too.

BBQ isn't actively maintained, but Jason likes the concept. My head hurt looking at it, but it seems like you can fire up $.deparam and $.param to extract or add a parameter. Hashchange event is an HTML thing, and this project can emit it / react to it.

Wrap-up

Jason's code examples are at Grails Five jQuery Plugins Demo - and a blog entry is probably coming soon. Great job, JSON! I'll link to his blog article as soon as it is available.

Ken