java - GWT and JSNI: third-party library integration

Question

I'm trying to integrate Opentip into a GWT project. Since some of my widgets are loaded from Java instead of the HTML, it seems like I'll have to use JSNI to get those tooltips bound properly. Here's what I've done so far:

1. Put the relevant JS/CSS declarations before GWT's nocache.js in my HTML file. (I also tried duplicating the JS loading by using ScriptInjector, but that didn't do any good, so I ripped it out as redundant.

2. Written a JSNI method to instantiate the tooltips:

   private native void initControlTooltips() /*-{
       var headerText = "Tooltip text";
       new $wnd.Opentip($("#tooltipTrigger"), headerText);
       // more tooltips...
   }-*/
   

I've tried different variants of the above method, but I've read that this is the way it's supposed to work (Slide 20 here, though I can't link directly to the slide). So far I've had no luck, and this most recent attempt, which seems the most correct to me, has actually stopped the rest of my GWT module from loading (after the tooltip instantiation call), as if I have a syntax error somewhere, though the console isn't reporting anything. Any ideas as to what I'm doing wrong? I'm relatively new to both GWT and JS, so I'm hoping this is just a stupid beginner's mistake.

The one thing I haven't tried yet is coding up an Overlay object, partially because I can't see from the docs how to properly wrap a JS constructor. If that's the solution here, some pointers on how to do that would be welcome. As a reference, the constructor I'd be using (from the Opentip documentation) is:

new Opentip("#my-trigger-element", "Optional content", "Optional title", { ...options... });

Thanks for any help; this doesn't seem like it should be that tough of a problem, but so far my inexperience has foiled my efforts.

Update

After several hours of cursing and parameter fiddling, I've resolved this, so don't waste any time trying to help me debug. I'll write up an answer a little later today when I get a bit of free time.

Answer 1

So you've got your web.gwt.xml, your module, and your EntryPoint all set up. If you don't have those things, this isn't the answer for you. The documentation isn't a bad place to start. This answer will use Opentip as an example, but I don't see why it wouldn't work for others too; specifically, though, this is geared for if you have widgets set up solely in GWT (not accessible from your HTML) and need to bind your external JS to them to enable some functionality.

1. Crack open your web.gwt.xml and make sure you're including your library's source in the entry for the module where you want to use it. This means that you don't have to declare it in your page's static HTML if you don't specifically need it there as well.

   <script src="../js/opentip/opentip-jquery.min.js"/>
   

   (Note the ../ - this is a relative path from where your GWT-generated HTML file ends up on your server, and it has to be accessible by your web server.)

2. In the module class where you want to use the library, rig up a JSNI method, calling your library constructor like so:

   private native void initTooltip() /*-{
       new $wnd.Opentip($doc.getElementById("tooltipTrigger"), "Tooltip text");
   }-*/;
   

   (Note the $wnd for referring to the top-level window and the $doc for referring to the document. Prepending $wnd. works for referring to any global variables declared/assigned in external JS files.)

No fancy Overlay types or ScriptInjector calls needed. I did have one other problem while working this out - my call to getElementById() was coming back null - this turned out to be because I was calling my JSNI method before the relevant object had been added to the DOM during onModuleLoad().

Like I thought initially, this turned out to be a simple beginner's mistake; hope this can help someone else trying to piece together other answers to similar questions into a workable solution for their problem.