Jquery4Gwt

2009-01-15T13:16:00.000-08:00

The day I discovered GWT was a revolutionary day in my programming world. Gwt is very powerful but it has some limits, if you need to use a trendy web components like extjs, you'll maybe have to use JSNI. JSNI enables gwt call javascript, it's like what JNI represents for Java and C. However using JSNI extensively makes the hole concept of GWT obsolete. Therefore there was a need to develop a layer of library like gwt-ext in order to limit the use of JSNI

I suggest a new library jquery4gwt to adapt jquery which is a very useful javascript library to GWT.

How to: Use jquery4gwt in GWT project ?

Adding jquery4gwt in a GWT project is very easy:

Download jquery4gwt-'version'-.jar and put it for exemple in your project folder

Edit MyApplication-shell.cmd:
Xmx256M -cp "...;%~dp0\jquery4gwt-8.0.jar" ...

Add to MyApplication.gwt.xml:
<inherits name="com.j4g.Jquery4Gwt"/>

Dowlnoad jquery-'version'.js
put it for exemple on: src\com\mycompany\public

Add to MyApplication.html:
<script type="text/javascript" src="jquery-'version'.js"></script>

Add to MyApplication.java:
import com.google.gwt.user.client.ui.HTML; import com.j4g.client.core.Jquery4Gwt;
Replace the body of onModuleLoad method by:
Jquery4Gwt j = new Jquery4Gwt(); RootPanel.get().add(new HTML("<h1>Hello jquery4gwt</h1>")); j.$("h1").css("backgroundColor", "yellow");

How To: use Json ?

Json is used in some jquery function like css, animation, ... So tu use Json in jquery4gwt, You need to use the object: JsonAdapter for exemple:
j.$(selector).css(new JsonAdapter(" {'background-color': '#FFFFAA', 'font-weight' : 'bolder', 'color' : 'blue'}"));

How To: Use Events ?

j.$(selector).mousemove(new F(){ 
public void f(Event e){ 
j.$("#E4").html("X:"+e.getScreenX()+"|Y:"+e.getScreenY());
} 
});

Links:

Project

Demo

Java Doc

Sample

Sami Bessaies

Jquery4Gwt