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

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

9 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:

    com.google.gwt.core.client.JavaScriptException: (TypeError): $wnd.jQuery(“#flip”).jcoverflip is not a function

    I would appreciate some help

    regards

    Peter

  2. bhumika says:

    good artilcle..

    But I am facing same error.
    com.google.gwt.core.client.JavaScriptException: (TypeError): $wnd.jQuery is not a function

    I can not able to download your project from given url:
    Project Source : https://rapidshare.com/files/1050933496/TestJSNI.rar

    so can please help me.

    chears,
    bhumika

  3. Massi says:

    Thanks Varun, you just made my day.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s