Integrating third-party libraries with GWT using JSNI

Question

Integrating third-party libraries with GWT using JSNI

I am currently working on integrating Opentip into a GWT project. Since some of my widgets are loaded from Java rather than HTML, it seems like I will need to utilize JSNI in order to properly bind those tooltips. Here is the progress I have made so far:

Inserted the necessary JS/CSS declarations before GWT's nocache.js in my HTML file. (I also attempted duplicating the JS loading using ScriptInjector, but ultimately removed it as it was redundant.

Created a JSNI method to initialize the tooltips:

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

I have experimented with different variations of the above method, but from what I've researched, this appears to be the correct approach (Slide 20 here, though direct linking to the slide isn't possible). Unfortunately, I have not had success yet, and my latest attempt, which seems most accurate to me, has actually caused the remaining parts of my GWT module to stop loading (following the tooltip instantiation call), seemingly due to a syntax error somewhere, though nothing is being reported in the console. Any insights into what I may be doing wrong would be greatly appreciated. As I am relatively new to both GWT and JS, I'm hoping it's just a novice mistake.

One thing I have not tried is creating an Overlay object, partly because I am unsure how to correctly wrap a JS constructor based on the documentation. If that turns out to be the solution, any guidance on how to go about it would be helpful. The constructor I would be using (as per the Opentip documentation) is:

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

Thank you for any assistance; while this doesn't appear to be an overly challenging issue, my lack of experience has hindered my progress thus far.

Update

After numerous hours of frustration and tweaking parameters, I have managed to resolve this on my own. So please do not waste your time attempting to help me troubleshoot. I will provide an update later today when I have a moment free.

java javascript gwt jsni

Answer 1

Answer №1

After setting up your web.gwt.xml, module, and EntryPoint, you may be looking to integrate external JavaScript with your GWT widgets solely without direct access from the HTML. If you haven't set up these components yet, this answer might not apply to you. It's always helpful to refer to The documentation as a starting point for GWT development. In this example, we will use Opentip, but the method discussed should be adaptable to other libraries as well.

In your web.gwt.xml file, ensure that you include the source of your desired library within the module entry where you intend to utilize it. By doing so, you may avoid the necessity of declaring it in the static HTML of your page unless required.
```
<script src="../js/opentip/opentip-jquery.min.js"/>
```
(Take note of the relative path ../ which should align with the location of your GWT-generated HTML on the server and needs to be accessible by your web server.)
Create a JSNI method in your module class to initialize the library by calling its constructor in the following manner:
```
private native void initTooltip() /*-{
    new $wnd.Opentip($doc.getElementById("tooltipTrigger"), "Tooltip text");
}-*/;
```
(Observe the usage of $wnd to reference the top-level window and $doc to reference the document. Prefixing with $wnd. allows access to any globally declared variables from external JS files.)

No complex Overlay types or ScriptInjector calls are necessary. During my implementation, I encountered an issue where getElementById() returned null due to calling the JSNI method before the relevant object was added to the DOM within onModuleLoad().

This experience highlighted a simple beginner's mistake. Hopefully, this explanation can assist others in synthesizing various solutions into one viable approach for addressing similar challenges.

Answer 2

After setting up your web.gwt.xml, module, and EntryPoint, you may be looking to integrate external JavaScript with your GWT widgets solely without direct access from the HTML. If you haven't set up these components yet, this answer might not apply to you. It's always helpful to refer to The documentation as a starting point for GWT development. In this example, we will use Opentip, but the method discussed should be adaptable to other libraries as well.

In your web.gwt.xml file, ensure that you include the source of your desired library within the module entry where you intend to utilize it. By doing so, you may avoid the necessity of declaring it in the static HTML of your page unless required.
```
<script src="../js/opentip/opentip-jquery.min.js"/>
```
(Take note of the relative path ../ which should align with the location of your GWT-generated HTML on the server and needs to be accessible by your web server.)
Create a JSNI method in your module class to initialize the library by calling its constructor in the following manner:
```
private native void initTooltip() /*-{
    new $wnd.Opentip($doc.getElementById("tooltipTrigger"), "Tooltip text");
}-*/;
```
(Observe the usage of $wnd to reference the top-level window and $doc to reference the document. Prefixing with $wnd. allows access to any globally declared variables from external JS files.)

No complex Overlay types or ScriptInjector calls are necessary. During my implementation, I encountered an issue where getElementById() returned null due to calling the JSNI method before the relevant object was added to the DOM within onModuleLoad().

This experience highlighted a simple beginner's mistake. Hopefully, this explanation can assist others in synthesizing various solutions into one viable approach for addressing similar challenges.

Integrating third-party libraries with GWT using JSNI

Answer №1

Similar questions

Locate the product of n numerals within a specified interval

Issue with filtering of values returned by functions

After downloading the latest version of NodeJS, why am I seeing this error when trying to create a new React app using npx?

Next.js Pre-rendering Issue: Error encountered when trying to access properties of a null object

Is it necessary for me to develop a component to display my Navigation Menu?

Using React Bootstrap, you can ensure that only a single collapse opens at a time when rendering it with a map function. This allows you to display

JavaScript - Populating Dropdown Menu with Fresh Information

Implementing jQuery/JavaScript to efficiently iterate through JSON data

Using npm to install packages with multiple package.json files

There was a mistake: _v.context.$implicit.toggle cannot be used as a function

Dealing with performance issues in VueJS and Vuetify's data-table component, especially when trying to implement

Using the LIKE operator in MSSQL within a Node.js SQL query

Dual-wedge shaped loops in a for loop structure

Including an element to a React list

Exploring the depths of JSON: Unraveling the secrets of reading dynamic object data

In JavaScript, the way variables are logged can vary depending on whether they are passed through an onclick function or not

Is it possible to utilize the `key` prop in React for purposes other than lists?

UI changes are not appearing until after the synchronous ajax call

Saving numerous files with Promises

Inheritance of Mongoose methods across all Schemas using the Schema method