How to include 3rd party Javascript libraries in a reusable gwt library/widget?

[Charlie Youakim]

GWT Lovers,

I'm trying to get my feet wet with GWT to see if migrating will work out.  I usually try the more difficult parts first to make sure I can finish the project.  The most difficult part of my project(s) is referencing 3rd party JS libs.  In this example I'm trying to use PubNub as much of our platform uses it.

What I'd like to do is create a reusable object that can be used in other GWT projects in need of PubNub.  I've got a simple little test running successfully (ie, I've got the basics of JNSI working), but my question is -> where do I put the reference to the 3rd party script in order to create the library/module properly?

Right now I just put the reference to the external scripts in the html page in the project, but I'm pretty sure this is incorrect from a reusability perspective, as this lib would be used in other projects, each of which would have their own base html page.

I tried putting the reference in the gwt.xml file, but this seems to lose the references (ie my test project no longer works as it did when the scripts were in the html page)

Do you have any tips on how to include 3rd party libraries in a reusable gwt library/widget?

Thank you all,

Charlie

[Charlie Youakim]

Boy it's hard to find documentation in GWT out of the basics, but I found this which helps QUITE A BIT!  This needs to be easier to find:

https://developers.google.com/web-toolkit/doc/1.6/DevGuideOrganizingProjects#DevGuideModuleXml

[Brian Slesinsky]

That's quite an old version. When you see a link like that, you should replace "1.6" with "latest" to jump to the current version, like this:

https://developers.google.com/web-toolkit/doc/latest/DevGuideOrganizingProjects#DevGuideModuleXml

For an external javascript file, you can add the file to the "public" directory of a GWT module and write code to insert the <script> tag into the DOM. In GWT, we have ScriptInjector [1] to do this, but that's just a wrapper - you could do it yourself.

You will need to construct the URL of the javascript file to load. The GWT.getModuleBaseForStaticFiles() method [2] is useful for this.

- Brian

[1] http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/core/client/ScriptInjector.html

[2] http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/core/client/GWT.html#getModuleBaseForStaticFiles()

[Ümit Seren]

I recommend using ScriptInjector instead of putting the script tag in the module's XML file because it allows you to use SuperDevMode (xsilinker doesn't allow for script tags in the module's xml file). If you have a maven project structure it like this: 

src/main/java 
    - my.company.widgets.pubnub.client
         - Some3rdPartyWrapper.java 
src/main/resources
     - my.company.widgets.pubnub
         - PubNub.gwt.xml
     - my.company.widgets.pubnub.client.resources
        -  pubnub.js

If you have a non-maven project use following stucture:

src/
     - my.company.widgets.pubnub
          - PubNub.gwt.xml
      - my.company.widgets.pubnub.client
           - PubNubWrapper.java
      - my.company.widgets.pubnub.client.resources
           - pubnub.js

Now create a ClientBundle :

interface JsClientBundle extends ClientBundle {
        JsClientBundle INSTANCE = GWT.create(JsClientBundle.class);

        @Source("resources/pubnub.js")
        TextResource pubnubjs();
    }

and then add following two methods to your wrapper class (PubNubWrapper.java)

private void injectScript() {
    if (!isInjected()) {
        ScriptInjector.fromString(JsClientBundle.INSTANCE.pubnub().getText()).setWindow(ScriptInjector.TOP_WINDOW).inject();
    }
}

private native final boolean isInjected() /*-{
    if (!(typeof $wnd.PubNub === "undefined") && !(null===$wnd.PubNub)) {
        return true;
    }
    return false;
}-*/;

You have to call injectScript() at some point (for example in your constructor or in the onAttach/onLoad method).

Of course you can also load your script asynchronously (can be done with ScriptInjector)