How to integrate a JavaScript API with GWT?

Question

I am trying to develop a Documentum D2 External Widget with GWT. D2 provides an API built in JavaScript from OpenAjaxHub for communication.

So, I tried to import this API to my GWT App inside a public folder and added to my gwt.xml the scripts.

So, doing something simple like this...

public class WidgetTest implements EntryPoint {

    @Override
    public void onModuleLoad() {
        final RootLayoutPanel rp = RootLayoutPanel.get();

        rp.add(new Label("Hello"));
        init();
    }

    private native void init() /*-{ 
            var d2OpenAjaxHub = new D2OpenAjaxHub();
    }-*/;
}

I get the Error:

com.google.gwt.core.client.JavaScriptException: (ReferenceError) @com.vilt.widgetTest.client.WidgetTest::init()([]): D2OpenAjaxHub is not defined

The gwt.xml...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.6.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/2.6.0/distro-source/core/src/gwt-module.dtd">
<module rename-to="widgetTest">
    <inherits name="com.google.gwt.user.theme.clean.Clean" />
    <inherits name="com.google.gwt.user.User" />

    <script src="OpenAjaxManagedHub-all.js" />
    <script src="D2-OAH.js" />

    <source path="client" />

    <entry-point class="com.vilt.widgetTest.client.WidgetTest" />
</module>

and about the D2-OAH.js (I am extracting just a bit of it):

D2OpenAjaxHub = function() {

    this.hubClient = null;

    if (typeof(console) == 'undefined')
        console = {};

    if (typeof(console.log) == 'undefined')
        console.log = function(){};

    if (typeof(console.debug) == 'undefined')
        console.debug = console.log;

    if (typeof(console.error) == 'undefined')
        console.error = console.log;


    // ///////////////////
    // CONTEXT / WIDGET INFO
    // ///////////////////

    this.sContextUid = null;
    this.sWidgetType = null;
    this.sWidgetId = null;
    this.bActive = true;

    // ///////////////////
    // EVENTS
    // ///////////////////
    this.registeredChannelIds = new Array();
    this.registeredChannels = new Array();

    this.sStoredChannel = null;
    this.sStoredMessage = null;
    this.fStoredCallback = null;
    this.bStoredMessageConsumed = false;

}

function D2OpenAjaxHub() {
}

Anyone has any idea about what is going on?

Answer 1

First of all, you must call your method through the $wnd which is the current window.

native void myMethod() /*-{
  $wnd.myMethodThatCallsTheJsFile();
}-*/;

If it still doesn't work debug this way:

Did you check the js is really injected to your page? (right click on the result page and see the HTML source)

If it is, try putting the js directly in your page (maybe the method gets called before the js is imported)

Answer 2

You cannot simply call a third party library from your GWT code. You need to use JSNI:

JavaScript: JSNI - GWT Project