GWT

This is a beta version. If you find errors, please report them or change them!

At this point, your initial implementation of StockWatcher is complete. So far, you've been running StockWatcher in development mode. In development 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 production mode. When an application runs in production 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 production 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, for example,

 Compiling module com.google.gwt.sample.stockwatcher.StockWatcher  Compiling 6 permutations  Compiling permutation 0...  Compiling permutation 1...  Compiling permutation 2...  Compiling permutation 3...  Compiling permutation 4...  Compiling permutation 5...  Compile of permutations succeeded Linking into war/stockwatcher.  Link succeeded  Compilation succeeded -- 30.504s 

Compiling the StockWatcher application (without using Eclipse)

You can compile the StockWatcher application 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 Production Mode

After the application is compiled, you can run it in production mode by opening StockWatcher.html in a new browser window. StockWatcher looks and behaves just as it did in development 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.

Tip: If you launched the development mode server, you can run your application in production mode (after compiling it) by removing the gwt.codesvr parameter from the URL before loading the application.

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 between browsers.

In addition to 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 development mode and in production 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: