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.
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.
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