My favorites | English | Sign in

Google Web Toolkit

Step 8: Compiling a GWT Application

At this point, your initial implementation of StockWatcher is complete. So far, you've been running StockWatcher in hosted mode. In hosted mode you can see the effect of your code changes immediately and use your IDE's debugging tools. After you compile StockWatcher, you can run and test it in web mode. When an application runs in web mode, it exists as pure JavaScript but does not require any browser plugins or the Java Virtual Machine (JVM).

In this section, you'll:

  1. Compile the Java source code.
  2. Test StockWatcher in web mode.
  3. Deploy StockWatcher to a web server.

You'll also learn about deferred binding, GWT's mechanism for serving just the code required depending on browser or, optionally, other factors such as locale.

1. Compiling Java to JavaScript

To compile the Java source code to JavaScript, you'll use the GWT compiler.

Compiling the StockWatcher application (using Eclipse)

  1. In the Package Explorer view, select the StockWatcher project.
  2. In the toolbar, click the GWT Compile Project button icon.
  3. Confirm the compiler options and click the Compile button.

In the Eclipse console you will see the output of the GWT compiler, e.g. 

Compiling module com.google.gwt.sample.stockwatcher.StockWatcher
   Compiling 5 permutations
      Permutation compile succeeded
   Linking into war
      Link succeeded
   Compilation succeeded -- 18.175s

Alternatively, you may compile from the hosted mode browser as described below.

Compiling the StockWatcher application (without using Eclipse)

You can compile the StockWatcher appliciation either from the hosted mode browser or directly from the command line.

To invoke the GWT compiler from the hosted mode browser:

  1. Click the Compile/Browse button.
  2. Switch to the Development Shell window, and you'll see new log entries indicating the result of the compilation.
    screenshot: Developer Shell Compile

Or to invoke the GWT compiler directly from the command line:

  1. Change to the StockWatcher directory.
  2. Execute: ant build

If you run the GWT compiler from the command line, you can specify the style of the JavaScript, the level of logging detail, and override other default behaviors by modifying the StockWatcher/build.xml file.

2. Testing in Web Mode

After the application is compiled, a new browser window opens. This is not the hosted mode browser. It's the default browser for your machine. StockWatcher looks and behaves just as it did in hosted mode. The real difference is hidden under the covers. When you interact with StockWatcher now, it's executing JavaScript code in the browser, not Java bytecode in the JVM.

Note on Default Browsers

If you're running on a Mac, the default browser is Safari; on a PC, Firefox.

On Linux, in order to make your default browser open when you click Compile/Browse you'll need to first set the GWT_EXTERNAL_BROWSER environment variable to point to your browser executable for the IDE launch configuration or ant hosted.

3. Deploying the Application to a Web Server

At this point, you could deploy StockWatcher to a public web server simply by uploading the files in the output directory. This initial version does not need to communicate with the server in any way; therefore, it does not require anything special on the part of the web server. Any server that can serve up static web pages will do just fine.

Compiler Output

Take a look at the files generated by the GWT compiler. In the output directory StockWatcher/war/stockwatcher, you see a set of files similar to this: 

14A43CD7E24B0A0136C2B8B20D6DF3C0.cache.png
29F4EA1240F157649C12466F01F46F60.gwt.rpc
34BCFF35CB8FD43BCBFC447B883BCADC.cache.html
52BE5EB1FD9F0C2659714EE874E24999.cache.html
548CDF11D6FE9011F3447CA200D7FB7F.cache.png
667F52D77BB3D008A2A6A484569C3C35.cache.html
9DA92932034707C17CFF15F95086D53F.cache.png
A7CD51F9E5A7DED5F85AD1D82BA67A8A.cache.png
B8517E9C2E38AA39AB7C0051564224D3.cache.png
CC9E2ADC408F47959407F6440C301B88.cache.html
DF6EEF5BB835EE6FD9BBA5E092B0C429.cache.html
clear.cache.gif
gwt
hosted.html
stockwatcher.nocache.js

In addition to the static resources in StockWatcher/war (such as the HTML host page, style sheet, and images directory), notice the other file names contain GUIDs. These files contain the various JavaScript implementations of StockWatcher. GWT generates multiple implementations of your application, a unique permutation for each supported web browser.

Optimizing Runtime with Deferred Binding

At runtime, GWT uses a mechanism called deferred binding to load the correct permutation for the end user's browser. Deferred binding serves just the code the user needs and no more. What are the benefits of deferred binding? Because each permutation is tailored to work around the bugs and idiosyncrasies of its intended web browser, using deferred binding is

  • Faster for the user.
    Your application download contains no unnecessary bytes. The application doesn't need to sniff for browsers or provide multiple branches for each browser.
  • Faster for you.
    GWT does the work of generating the correct JavaScript for each browser so that you don't have to spend so much time dealing with differences among browsers.

In addition browser detection, deferred binding can also generate customized versions of your application for any number of other variables. One very common example is internationalization. With deferred binding, GWT generates a separate implementation of the application for each language, so for example, an English speaker doesn't have to download the French text (and vice versa).

You can try this for yourself in the tutorial Internationalizing a GWT Application.

What's Next?

At this point you've tested StockWatcher both in hosted mode and in web mode. By now you should have a pretty good idea of how to develop a GWT application, which has only client-side functionality, from start to finish.

To build upon the initial implementation of StockWatcher and learn additional features of GWT, select from the following tutorials: