benefits of gwtQuery

Question

Can somebody tell me what are the benefits of using gwt query .Is it just for css effects. and how we can use it to create ui elemnts like gwt.

What I understand is just use the gwt components like label,textbox,buton in project and then gwt query is just to give some effects to that components , is it like that?

If it is for css effects then same thing we can do it in gwt also, then why I will use Gwtquery instead of gwt. can somebody help me ..

Thanks,

Answer 1

GQuery is much more than that. You can navigate into de DOM fast and easy (like jQuery), for example!

Look, this morning I used it in that way:

Element p = DOM.createElement("p");
p.addClassName("KV");
p.setInnerText(newBody);
$(cellList + " #__idx=\""+position+"\" p .KV").replaceWith(p);

If you take a look into the last line you´ll see: The related DOM for the widget cellList (CellList from MGWT), search the element that has the id "__idx" then select elements p and from them the elements that have the class "KV" .

Have you thought the code in normal gwt for this?

Other really useful thing that you can use is the Promise pattern. Something like do A if B has finished correctly, and do B if C has finished correctly. We are using this for oAuth authentication in our app. Believe if you deal with Facebook OAuth in one line you can be sure everythings is fine.

If you are not using GQuery, you probably need to create 4 Callbacks with its onSuccess and onFailure methods (Spaguetti code).

And many more things...

Also important people from Google and Opensource community is under that project, and this is a good sign.

Answer 2

Think in gwtquery like an essential complement to GWT. It does not replace anything but makes your live a bit easier.

Between others, these are the main features missing in GWT which gquery adds.

1- CSS selectors and DOM traversal manipulation: allowing you to enhance any GWT widget. For instance, to add an image and a css class to all <td> in a GWT table is as simpler as:

$(".mygwttable td").append("<img src='' />").addClass("whatever");

2- Get any widget instance present in the DOM as a way to decouple your code.

TextBox emailBox = $("input[name='email']").widget()

3- Manipulate easily elements: attributes, styling, etc:

$(".gwt-Label")
  .css($$("background: red, color: white, width: 100%")
  .attr("whatever", true);

4- Intuitive Ajax, much more simpler than RequestBuilder

$(myLabel).load("file.html");

5- Helpers to read javascript, change javascript objects and execute javascript functions without writing a single line of JSNI

Properties history = JsUtils.prop(window, "history");
JsUtils.runJavascriptFunction(history, "pushState", null, null, "whatever.html")

6- Json and XML databinding: much more intuitive and simpler than autobeans.

7- Promises, Animations, and much more ...

So, although you could have a gwt project without using any gwt widget using just gwtquery, the normal way of using gquery is complementing GWT, so develop your app using the standard gwt way, and use gquery helpers to write less code.

In your case use normal gwt widgets, and use gwtquery to enhance them (styling, changes in rendered dom, events, etc) without having to extend them to make changes.