GWT.create <US/EU>

GQuery, the perfect companion for your GWT project

Manuel Carrasco Moñino / Julien Dramaix

Who are we ?

Manuel Carrasco Moñino
Julien Dramaix

Pronunciation

“jQuery”
“gwitQuery”

Syntax differences

jQuery




$(".article:not(.hidden) > .header")
    .width($("#mainHeader").innerWidth())
    .click(function () {
    
        $(this)
            .siblings(".content")
            .load("/article/" + $(this).parent().id(),
              null, 
              function () {
              
                  $(this).fadeIn(250);
                  
              });
              
    });

gQuery

import static com.google.gwt.query.client.GQuery.*;

$(".article:not(.hidden) > .header")
    .width($("#mainHeader").innerWidth())
    .click(new Function() {
      public void f() {
        $(this)
            .siblings(".content")
            .load("/article/" + $(this).parent().id(),
              null,
              new Function() {
                public void f() {
                  $(this).fadeIn(250);
                }
              });
      }
    });

When to use gQuery ?

Progressive enhancement

www.gwtproject.org

It's not just that !

Enhance existing widgets

  • Add missing behaviors.
  • Modify or style the inner HTML
  • Overcome .. the API limitation.

Example

Create new widgets.

  • Create, manipulate, enhance the DOM structure.
  • But offer a GWT widget API to interact with it.

Promises: dealing with async callbacks in GWT

Faster animations: CSS3

Utility classes

Utilities to avoid writting JSNI

JSNI Bundles

JsQuery

1