Injecting JavaScript in GWT-2.0

GWT-2.0 comes with ClientBundle class what allows creating not only CssResources and ImageResources but also TextResources what can be used to store and later in runtime retrieve JavaScript code and inject in HTML. This cuts down requests to server and makes easier to reuse existing JavaScript libraries.

To “embed” JavaScript into the compiled GWT application we must create ClientBundle:

public interface DemoClientBundle extends ClientBundle {

  @Strict
  @Source("someJavascriptFile.js")
  TextResource demo();

}

Now we can get JavaScript text in runtime using:

DemoClientBundle bundle = GWT.create(DemoClientBundle.class);
String text = bundle.demo().getText();

To make browser to run this code we need to create <script/> element in <head/> of host page. While CssResource has StyleInjector helper class, there is no JavascriptInjector class in current GWT trunk. Anyway, it’s easy to create one:

public class JavascriptInjector {

  private static HeadElement head;

  public static void inject(String javascript) {
    HeadElement head = getHead();
    ScriptElement element = createScriptElement();
    element.setText(javascript);
    head.appendChild(element);
  }

  private static ScriptElement createScriptElement() {
    ScriptElement script = Document.get().createScriptElement();
    script.setAttribute("language", "javascript");
    return script;
  }

  private static HeadElement getHead() {
    if (head == null) {
      Element element = Document.get().getElementsByTagName("head").getItem(0);
      assert element != null : "HTML Head element required";
      HeadElement head = HeadElement.as(element);
      JavascriptInjector.head = head;
    }
    return JavascriptInjector.head;
  }

}

So full injection looks something like this:

DemoClientBundle bundle = GWT.create(DemoClientBundle.class);
JavascriptInjector.inject(bundle.demo().getText());

← Back to articles