GWTQuery and Vaadin

I have found but only one post about using GWTQuery with Vaadin and that post the
user got it working
but they only but skim over the details of how they accomplished it.

So far I have added to my gwt xml. I created a Vaadin Widget that extends AbstractComponent with a ClientWidget that extends Widget. So within the ClientWidget class I have added the GWTQuery imports and tried to simply animate the opacity of a div using syntax I have tested via console with jQuery yet it does nothing.

I have also looked through the compiled javascript and found my function that changes the opacity in javascript but it appears that it never runs.

Anyone ever tried doing GWTQuery with Vaadin? How do I go about doing this? Where should I put the code because right now the jQuery stuff is in the constructor of my ClientWidget.

I learn best by example so if you could provide one that would be awesome!

Hi.
I only now looked into GWTQuery when creating my addon and got it working without all that much hassle.

Even though this information is from stackoverflow I’ll add it here for anyone coming through here looking for information.

http://stackoverflow.com/questions/13724146/how-to-add-gwtquery-to-an-existing-vaadin-project

1.- If you are using maven add these lines to your pom.xml:

<dependency> <groupId>com.googlecode.gwtquery</groupId> <artifactId>gwtquery</artifactId> <version>1.2.0</version> <scope>provided</scope> </dependency> Otherwise download gwtquery-1.2.0.jar from the project site and include it in your classpath

2.- Add this line to your_application.gwt.xml file:

<inherits name='com.google.gwt.query.Query'/> 3.- Import statically methods from the GQuery class

import static com.google.gwt.query.client.GQuery.*; 4.- Use it to enhance your dom or widgets

$("css_selector").css("width", "100%"); $("css_selector", my_widget).hide(); 5.- Be aware that you cannot use jquery plugins, but you can use the core api of jquery (with some differences). There are many gquery plugins though.