HOWTO: jQuery + GWT Integration

There is very little information available on the web about using jQuery within GWT; But why would anyone want to do such a thing, I don’t know that !!. Anyway, you will see how to bring the two frameworks together here; Eventhough you would not do that it should give you a fair idea about using JSNI or in general using JS frameworks within GWT.

To make something worthwhile and useful, we will be creating a very popular iPod style content flow music album navigator using jCoverflow library developed over jQuery. The interesting part is it will be invoked from GWT wrapper – JSNI.

1. First up, create a GWT project (as usual) in eclipse.

2. You would need the following libraries under the war folder : “jquery-1.3.2.js” , “jquery-ui-1.7.2.custom.js”, “jquery.jcoverflip.js”. I tested with those versions, the newer ones might also work just fine.

3. Then put the following lines of code to the html file, so that they are available for use :

From the above screenshot, note that we also need to pull up the styles from here.

Don’t forget to add this div with the images to be displayed in the coverflow as below. This is the tag on which we will be doing the manipulations:

This is all the change we need to do on the HTML file.

4. Here is the JSNI code that calls on the jquery methods. Note the way in which jQuery calls are wrapped around in the function body of the JSNI call. This is key to the magic !!

Thats it, fire up the browser you should see the coverflow in full flow. Hope it was helpful.

Image courtesy : jCoverFlip.com