GWT.create <US/EU>

GQuery, the perfect companion for your GWT project

Manuel Carrasco Moñino / Julien Dramaix
  • To move slides use either:
  • left/right/space/back keys
  • tap-one/two touches
  • swipe-right/left gestures
  • To run examples:
  • click/tap on the play button

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