Getting started with Google Web Toolkit
Web Worker

© Kirsty pargeter, Fotolia
The Ingenious Google Web Toolkit builds optimized JavaScript applications in a hurry.
I have lost many days, weeks, possibly even months to JavaScript. The recent rise of JavaScript frameworks – and their increasing stability – has helped. The Google Web Toolkit (GWT) [1] looks like the next evolutionary stage in JavaScript development: Instead of writing in JavaScript, you can write in Java.
GWT is an environment for building optimized JavaScript applications that are cross-browser compatible. With GWT, you build JavaScript applications by coding in Java and compiling the code to highly optimized JavaScript, HTML, and CSS. As much as you might like working on intricate little cross-browser JavaScript bugs, there comes a point when enough is enough. GTW came along just before I reached my breaking point.
Looking Closer
GWT provides a library of layouts, form elements, and other components for building web apps. Instead of adding JavaScript/AJAX on top of raw HTML and CSS, you can use higher level Java components that GWT compiles to browser-safe JavaScript that probably won't need debugging.
However, you don't have to give up programming in JavaScript completely. JavaScript still has its place, and in this article, you'll see how to expose parts of your GWT-build-app to JavaScript, thereby creating a proper API.
Some benefits of GWT are:
- Browser compatibility – If you use higher-level GWT components, you won't spend as much time debugging;
- Performance – You get optimized JavaScript code and optimized download times.
- Expose API to JavaScript – You can migrate section-by-section to GWT, using the existing JavaScript API;
- Debugging and development – You work in a stronger language than JavaScript – with better debugging tools.
At 3ev, we have built a front-end-based CMS that sits on top of the HTML/CSS of any web page and allows in-place editing. This stuff is pretty cool but hell to debug. The app was first built on custom JS, then migrated to Prototype, and more recently MooTools, with Ext JS providing some Window/Form elements. Eventually, we started migrating parts of the CMS to GWT. This situation is quite common: You have a large and growing JavaScript application that takes time to test and debug; GWT looks like an attractive solution, but how can you plug it into the problem areas? In this article, I show you how to use GWT to build and integrate JavaScript components with existing apps and web pages.
Getting Started
To start, download an appropriate version of GWT for your OS [2]. This download contains a set of examples, the Java-to-JavaScript compiler, and tools for creating new applications and running tests. Next, untar the downloaded file and find applicationCreator:
tar xzf gwt-mac-1.5.2.tar.gz cd gwt-mac-1.5.2 ./ applicationCreator --help
The applicationCreator tool creates a new GWT project for building JavaScript applications. ProjectCreator, in the same directory, is used to create GWT projects for editing in Eclipse, but I'm going to stay editor-agnostic here.
To start, create a simple project:
./applicationCreator -out ~/MyGwtProject com.mycompany.client.MyApp
The application creator has now created the following files in ~/MyGwtProject:
MyApp-compile MyApp-shell src/com/mycompany/ client/MyApp.java MyApp.gwt.xml public/ MyApp.css MyApp.html
This small number of files is nice because it means what you see is what you're working on rather than folders and folders of stuff to wade through.
Now, open up client/myapp.java, which contains the Java class that GWT will compile into working JavaScript code. This article sticks to one class, but you can refactor your code out into other classes as you would on any other project. To start up the GWT shell, type the following:
./MyApp-shell
This puts you in hosted mode (Figure 1), which suddenly makes GWT about a billion time more amazing than all the clever stuff I described earlier. Hosted mode is a browser dedicated to your development environment that will re-compile the Java code to JavaScript each time you refresh. When you make a change in the Java file and refresh the GWT shell, you'll see the results straight away, thus obviating the need to compile the Java every time. Keep the GWT shell (i.e., the hosted mode browser) open during the next step.
The application that GWT created is quick and simple, and it shows off some standard components of web pages: buttons, images, boxes, and dialog boxes. Next, open up MyApp.java and change
dialogBox.setText("Welcome to GWT!");
to:
dialogBox.setText("Welcome to GWT - isn't it amazing?!");
Now refresh your GWT shell, click the button, and see the Java compiled to JavaScript straight away. Of course, hosted mode is only useful during development, so you can use compile to compile the application to a set of JS, HTML, CSS, and image files (Listing 1). The app is then compiled to a new directory, www/com.mycompany.MyApp/, which contains the files shown in Listing 2.
Listing 1
Compiling with GWT
Listing 2
Contents of com.mycompany.MyApp
01 548CDF11D6FE9011F3447CA200D7FB7F.cache.png 02 9DA92932034707C17CFF15F95086D53F.cache.png 03 A84A8EF7341E8139F58DC5FC2AD52F22.cache.html 04 MyApp.css 05 MyApp.html 06 clear.cache.gif 07 com.mycompany.MyApp.nocache.js 08 gwt/ history.html hosted.html
If you open up MyApp.html with a browser. This application is now completely self-contained; you can move the www/com.mycompany.MyApp directory to another location – for example, inside an existing web app:
mv www/com.mycompany.MyApp /path/to/my_old_application/
The process of working with GWT should start to make sense: Rather than compiling Java to JS every time you finish a feature or bug fix, you instead work in hosted mode until it's 90% complete and then compile to JavaScript.
Inside the Java
The Java class implements EntryPoint/onModuleLoad, which GWT triggers on each page load, so you can think of it as the onload in HTML pages or dom ready in libraries such as MooTools. A very small example shows this; edit MyApp.java so the class contains only the lines shown in Listing 3.
Listing 3
MyApp.java
Intuitively, Window.alert() is calling the JavaScript alert function. If you fire up hosted mode using MyApp-shell, you'll see that not much happens, but you're starting to see how the JavaScript user experience fits around the Java code.
Buy this article as PDF
(incl. VAT)
Buy Linux Magazine
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters
Find SysAdmin Jobs
News
-
MNT Seeks Financial Backing for New Seven-Inch Linux Laptop
MNT Pocket Reform is a tiny laptop that is modular, upgradable, recyclable, reusable, and ships with Debian Linux.
-
Ubuntu Flatpak Remix Adds Flatpak Support Preinstalled
If you're looking for a version of Ubuntu that includes Flatpak support out of the box, there's one clear option.
-
Gnome 44 Release Candidate Now Available
The Gnome 44 release candidate has officially arrived and adds a few changes into the mix.
-
Flathub Vying to Become the Standard Linux App Store
If the Flathub team has any say in the matter, their product will become the default tool for installing Linux apps in 2023.
-
Debian 12 to Ship with KDE Plasma 5.27
The Debian development team has shifted to the latest version of KDE for their testing branch.
-
Planet Computers Launches ARM-based Linux Desktop PCs
The firm that originally released a line of mobile keyboards has taken a different direction and has developed a new line of out-of-the-box mini Linux desktop computers.
-
Ubuntu No Longer Shipping with Flatpak
In a move that probably won’t come as a shock to many, Ubuntu and all of its official spins will no longer ship with Flatpak installed.
-
openSUSE Leap 15.5 Beta Now Available
The final version of the Leap 15 series of openSUSE is available for beta testing and offers only new software versions.
-
Linux Kernel 6.2 Released with New Hardware Support
Find out what's new in the most recent release from Linus Torvalds and the Linux kernel team.
-
Kubuntu Focus Team Releases New Mini Desktop
The team behind Kubuntu Focus has released a new NX GEN 2 mini desktop PC powered by Linux.