ml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> Google Web Toolkit - Automatic Resource Injection

Automatic Resource Injection

Modules can contain references to external JavaScript and CSS files, causing them to be automatically loaded when the module itself is loaded.

Injecting External JavaScript

Script injection is a convenient way to automatically associate external JavaScript files with your module. The script injection uses the following syntax:
 <script src="js-url"><![CDATA[
   script ready-function body 
where ready-function body is the body of a JavaScript function that returns true when the script is loaded and is ready for use. The script is loaded into the namespace of the host page as if you had included it explicitly using the HTML <script> element.

For example, suppose your module relies on a script called InjectedScript.js that looks like this:

function foo() {
  // do something neat


function bar() {
  // do something else neat
Your module might look like this:
  <inherits name=""/>
  <script src="InjectedScript.js"><![CDATA[
    // More complex tests are possible, but usually checking for the existence
    // of a function is enough.
    if ($
      return true;
      return false;

The purpose of the ready-function is to determine unambiguously that the script is fully loaded, so that your GWT code can use JSNI and be sure the referenced identifiers are available. In the example above, the existence of the function bar indicates that the script is ready.

Injecting External Stylesheets

Stylesheet injection is a convenient way to automatically associate external CSS files with your module. Use the following syntax to cause a CSS file to be automatically attached to the host page.
<stylesheet src="css-url"/>
You can add any number of stylesheets this way, and the order of inclusion into the page reflects the order in which the elements appear in your module XML.

Injection and Module Inheritance

Module inheritance makes resource injection particularly convenient. If you wish to create a reusable library that relies upon particular stylesheets or JavaScript files, you can be sure that clients of your library have everything they need automatically by inheriting from your module.

Related topics

Module XML Format