Getting started with Google Web Toolkit
Web Worker
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
Support Our Work
Linux Magazine content is made possible with support from readers like you. Please consider contributing when you’ve found an article to be beneficial.
News
-
Canonical Bumps LTS Support to 12 years
If you're worried that your Ubuntu LTS release won't be supported long enough to last, Canonical has a surprise for you in the form of 12 years of security coverage.
-
Fedora 40 Beta Released Soon
With the official release of Fedora 40 coming in April, it's almost time to download the beta and see what's new.
-
New Pentesting Distribution to Compete with Kali Linux
SnoopGod is now available for your testing needs
-
Juno Computers Launches Another Linux Laptop
If you're looking for a powerhouse laptop that runs Ubuntu, the Juno Computers Neptune 17 v6 should be on your radar.
-
ZorinOS 17.1 Released, Includes Improved Windows App Support
If you need or desire to run Windows applications on Linux, there's one distribution intent on making that easier for you and its new release further improves that feature.
-
Linux Market Share Surpasses 4% for the First Time
Look out Windows and macOS, Linux is on the rise and has even topped ChromeOS to become the fourth most widely used OS around the globe.
-
KDE’s Plasma 6 Officially Available
KDE’s Plasma 6.0 "Megarelease" has happened, and it's brimming with new features, polish, and performance.
-
Latest Version of Tails Unleashed
Tails 6.0 is based on Debian 12 and includes GNOME 43.
-
KDE Announces New Slimbook V with Plenty of Power and KDE’s Plasma 6
If you're a fan of KDE Plasma, you'll be thrilled to hear they've announced a new Slimbook with an AMD CPU and the latest version of KDE Plasma desktop.
-
Monthly Sponsorship Includes Early Access to elementary OS 8
If you want to get a glimpse of what's in the pipeline for elementary OS 8, just set up a monthly sponsorship to help fund its continued existence.