Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Grails & Dojo: Part I

DZone's Guide to

Grails & Dojo: Part I

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

I've been working on integrating Grails and the recently released Dojo 1.0.2. I'm particularly interested in the Dijit components that are now part of Dojo. It seems like a clean, easy way to get some AJAX widgetry into a web application. Grails comes with plugins for common AJAX frameworks - YUI, Dojo 0.4.2(?), and Prototype. Someone's even released a nifty AJAX "dummies" plugin called richUI.

My main reason for undertaking this is to produce something that is easy and natural, but still very powerful. I want to leverage the new Dijit components, something the current Grails AJAX plugins do not do. I'm drawing on my experience with the Grails plugin system from an experiment I did this summer with integrating OpenLaszlo 4 with Grails. I even gave a presentation on doing a RIA using Grails and OL4 at the Atlanta JUG in July. Unfortunately, after working more and more with OL4, I decided it just wasn't a natural fit for Grails. But I digress...

Let's jump into the deep end and look at how Grails and Dojo work with data in JSON format. The two Dojo components we'll use are a image thumbnail viewer which is backed by a JSON data object.

The application: Grallery

I was looking around for a nice application to put some photos on the web, AKA a "web photo gallery". I have tens of thousands of digital pictures I've taken over the years, so using Picasa or some similar service was out of the question (I wonder how much it would cost to host 65G of pictures... hmmm). After hunting around for a nice Java based app to run on my server machine in the basement, I realized there wasn't anything that quite had the features of gallery2 (a PHP app). I thought this would be a perfect little project to undertake to learn about Dojo and Javascript - something I'd been putting off for a long time. Hence, Grallery was born. Over the next couple of months, I'll blog about my experiments on creating a Dojo/Dijit plugin for Grails.

firefox screen dump

Standard JSON that the Dojo ItemFileReadStore is expecting

{"items":[
{
"thumb":"/grallery/pictures/album1/thumbnails/thumbnail_pic7.jpg",
"large":"/grallery/pictures/album1/pic7.jpg",
"title":"pic7 comment",
"link":""
}
]}

Controller method to generate the JSON

     def thumbsJSON = {
def album = Album.get(params.id)
def rootPath = '/grallery'
def basePath = rootPath + "/" + "pictures" + "/" + album.path

render(contentType: "text/json") {
items {
for (picture in album.pictures) {
pictures(thumb: "$basePath/thumbnails/thumbnail_$picture.filePath",
large: "$basePath/$picture.filePath",
title: "$picture.comment",
link: "")
}
}
}
}

Producing JSON output is so ridiculously easy in Groovy & Grails, as the above shows. The only "magic" that needs explaining is this line:

render(contentType: "text/json") {


The above line specifies to use the JSON Builder, which takes the contained closure as the parameter. Go here for a good tutorial on builders in Groovy.

GSP for the Dojo ItemFileReadStore

   <script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.image.ThumbnailPicker");

function initItemStoreWidget(){
var itemRequest = {
query: {},
count: 1
};
var itemNameMap = {
imageThumbAttr: "thumb",
imageLargeAttr: "large"
};
dijit.byId('thumbPicker2').setDataStore(imageItemStore, itemRequest, itemNameMap);
}
dojo.addOnLoad(initItemStoreWidget);
</script>

<div id="thumbPicker2" dojoType="dojox.image.ThumbnailPicker"
numberThumbs="1" isClickable="true" isHorizontal="true"></div>
<div jsId="imageItemStore" dojoType="dojo.data.ItemFileReadStore"
url="${createLinkTo(dir: 'album/thumbsJSON/' + album.id)}"></div>

The above code is using the ItemFileReadStore to populate the ThumbnailPicker Dojo widget.

The initItemStoreWidget function is used to tie the ItemFileReadStore (JSON data) to the ThumbnailPicker.

Next Time

Hopefully, this article has whet your appetite for some Dojo and Grails magic. This article presents a complex example that used JSON and a DojoX, or Dojo Experimental, widget called ThumbnailPicker. Using Dijit widgets, like calendars, buttons, and sliders is so easy, it's almost boring - as you'll see in the next installment coming soon.

 

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of Pratik Patel. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}