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 :

This entry was posted in jquery, jquery + GWT, Programming and tagged , , , , , . Bookmark the permalink.

10 Responses to HOWTO: jQuery + GWT Integration

  1. Peter says:

    Great article!

    I do however have a problem and am not sure whether it is a typo. Do you have the source code i could download?

    When running through gwt and eclipse I get the error: (TypeError): $wnd.jQuery(“#flip”).jcoverflip is not a function

    I would appreciate some help



  2. bhumika says:

    good artilcle..

    But I am facing same error. (TypeError): $wnd.jQuery is not a function

    I can not able to download your project from given url:
    Project Source :

    so can please help me.


  3. Massi says:

    Thanks Varun, you just made my day.

  4. Max says:

    Hi Varun, i tried to have the div but inside a class that extends composite, it does not work, the only way i could make it works is putting the div in the html file.
    I need to put the div inside one of my class of the view.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s