0

I am new to Vaadin and GWT but i'm an advanced javascript Programmer. Now im working on a Vaadin existing Project and want to use the great possibilities of jQuery into my Project... how can i add GWTQuery into an existing Vaadin Project?

3logy
  • 2,634
  • 8
  • 46
  • 99

2 Answers2

1

Same as you would for any other GWT project:

  1. Place the GWTQuery JAR under a folder on your project's path (it is not necessary to locate it under WEB-INF/lib, as it is not required during runtime).
  2. Include it in the build path for your project (e.g. in eclipse - right click the JAR file and select Build Path > Add To Build Path).

  3. Add a corresponding entry in the module xml:

    <inherits name="com.google.gwt.query.Query" />

Be sure to run the GWT compiler before running in production mode.

Further Reading:
Organizing Projects on the Google Developers' GWT docs.

Eliran Malka
  • 15,821
  • 6
  • 77
  • 100
1

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.

Manolo Carrasco Moñino
  • 9,723
  • 1
  • 22
  • 27
  • oh yes!! i use maven too. So its there no possibility to use jquery plugins like this : http://www.datatables.net/ for example?? – 3logy Dec 05 '12 at 16:35
  • 1
    You would need to wrap then in jsni code import the jquery js files. It would not use gquery and get the benefit of gwt optimization. – appbootup Dec 05 '12 at 17:19
  • @trouble: you cannot use jquery plugins with gquery, gquery is an entire implementation of the jquery api in java, so those methods aren't available in js. I'm working on gquery and gwt-exporter to export those methods and many other hacks to support jquery plugins, take a look to http://gquery.org/wiki/JsQuery – Manolo Carrasco Moñino Dec 05 '12 at 21:35
  • @SachinShekharR: be aware that you cannot copy and paste js fragments without reviewing carefully that code. i.e: you have to redefine window, document with $wnd, $doc. Anyway, to import a jquery plugin you have to import jquery as well and prolly it could not be embedded in jsni specially if you use the new gwt closure optimization. – Manolo Carrasco Moñino Dec 05 '12 at 21:39
  • @trouble: CellTable and DataGrid (http://gwt.google.com/samples/Showcase/Showcase.html#!CwCellTable) in GWT are very convenient, you should consider them as the alternative to datatables.net – Manolo Carrasco Moñino Dec 05 '12 at 21:45
  • Indeed. Trying use jquery plugin code would mean large effort on sanity check and also a large effort for security checks. No gwt unit test cases either!! – appbootup Dec 06 '12 at 01:41
  • All in one that's mean! actually a smooth integration of jquery plugins with GWT in any way is possible? – 3logy Dec 06 '12 at 12:45
  • You can use jquery plugins in gwt (as any other 3-party javascript) but you have to code jsni wrappers to call their methods. In the case of jquery plugins you have to include in your .html the tags to load the script as well as jquery. You could avoid including jquery if you expose gwtquery methods (see http://gquery.org/wiki/JsQuery), but this is very experimental. Another option is to port the plugin to gquery (see http://code.google.com/p/gwtquery/wiki/WritingPlugins). – Manolo Carrasco Moñino Dec 07 '12 at 15:57