3

Is it possible to use jquery plugins within google web toolkit?

There are a lot of excellent plugins available for various UI widgets, such as date/time pickers, searchable dropdowns, etc. In many cases these plugins also come with their own css styles. I'd like to be able to use these plugins and get their values in my gwt application.

Manolo Carrasco Moñino
  • 9,723
  • 1
  • 22
  • 27
Ali
  • 261,656
  • 265
  • 575
  • 769
  • well, theoretically, if you can add your own javascript and css, i don't know what would stop you from adding js/css from your favorite plugins while you're at it. – Kevin B Jan 10 '14 at 20:37

2 Answers2

2

From experience you have two options.

  1. You can use GwtQuery which is a gwt native version of much of jquery. For instance "$" is actually a static java class. There are also quite a few plugins and addons that have great support such as the GwtQuery-DND for drag and drop.

http://code.google.com/p/gwtquery/

http://code.google.com/p/gwtquery-plugins/

  1. The other option is to role your own for specific examples. If you have a specific jquery plugin that you want and GwtQuery is not for you. You can use gwt jsni interface which essentially allows you to call native javascript using java native interface. There are quite a few plugins that work this way such as Gflot and gcodmirror (which is a native version of the wiki editor I am using now).

JSNI Documentation
http://www.gwtproject.org/doc/latest/DevGuideCodingBasicsJSNI.html

IMHO it is best to stick with GwtQuery as the jquery functions are almost verbatim usable in GwtQuery and you get the added performance boost of having the code compiled and optimized by the gwt compiler.

Chris Hinshaw
  • 6,967
  • 2
  • 39
  • 65
  • Using JSNI, is it possible to interact with the plugin? E.g say I have a calendar plugin. If a particular date on the calendar is clicked, I want to have an event fired which will callback a particular java method of my GWT class. Is that possible to do via jsni? – Ali Jan 11 '14 at 16:36
  • 1
    Yes it's possible, jsni supports 2 way communication between js and gwt. Here is an example of how to pass a callback to your jquery function. http://stackoverflow.com/questions/3357076/does-gwt-jsni-support-callbacks – Chris Hinshaw Jan 11 '14 at 16:41
  • That seems like only static methods can be called back? – Ali Jan 11 '14 at 17:03
  • 1
    You can use either static or class methods with jsni – Manolo Carrasco Moñino Feb 07 '14 at 08:31
2

Yes .. you can use Javascript libs in GWT project. Simply import it's lib in your html file or GWT.xml. In your module.xml file as below..

<module rename-to='TestingProject'>
<inherits name='com.google.gwt.user.User'/>
<entry-point class='test.Gwt.testingSample.client.TestingProjectEntry'/>
<inherits name="com.google.gwt.user.theme.standard.Standard" />
<source path='client'/>
<source path='shared'/>
<script src="/js/jquery-1.10.min.js"></script>
</module>

And test in your HTML file..

<body>
<center>
    <div id= "start"></div>
</center>
<script type="text/javascript">
     $(document).ready(function(){
     $("div#start").html("<font color = 'green' font-weight = 'bold' size = '12'>
                          Hello World !</font>");
});
</script>
<body>

Have a useful for you... !

Cataclysm
  • 7,592
  • 21
  • 74
  • 123
  • Thanks. This is useful, but a problem can occur when I want to manipulate any of these plugins from within my java code. For that purpose, JSNI would be needed. – Ali Jan 11 '14 at 15:00
  • @ClickUpvote Yes you are right ! If you want to use any JS from your java class , you need to use JSNI. – Cataclysm Jan 13 '14 at 02:53