Google Web Toolkit « Web Development « Java Articles

Google Web Toolkit (GWT) is a Java development framework that seeks to ease AJAX (Asynchronous JavaScript and XML) application development. GWT allows you to develop and debug AJAX-based applications in Java using common Java development tools and deploy the same applications as client-side HTML and JavaScript, and server-side Java. GWT also simplifies typical AJAX-style RPC (remote procedure call) conversations between client-side JavaScript and server-side Java services.

For a good Ant script to deploy your GWT applications to Tomcat see: Google Web Toolkit: AJAX Buzz Meets Real World Development

The Google Web Toolkit (GWT) was rolled out for JavaOne 2006 at an innocuously titled session. Due to what I assume was a timing miscommunication, the Google Blog scooped the presentation, but the impact was no less felt.

Google? Web Toolkit Solutions (Digital Short Cut): Cool & Useful Stuff ISBN-10: 0-13-158465-0; ISBN-13: 978-0-13-158465-5; Published: Jan 18, 2007; Copyright 2007; Dimensions 10-1/2x7-3/4; Pages: 112; Edition: 1st. $9.99

In this excerpt from GWT in Action, we take a closer look at the standard GWT widgets. You'll see that in the GWT world, widgets are modeled as DOM elements but also have a Java object equivalent. It is this dual existence that provides the power of GWT - the ability to write and maintain applications in Java, with all the associated tool support, but to execute those applications in a web browser.

At the 2006 JavaOne event, a certain company by the name of Google (they're very big in the search market, apparently) caused quite a buzz with the shock announcement of a new open source API for developing Ajax-heavy web applications. GWT--Google Web Toolkit--is Google's attempt to tame Ajax, making it a viable option for small-team and/or cost-conscious web applications development. And with a name like Google behind it, perhaps it's no wonder that so many are casting a inquisitive eye over this strange new technology.

Learn about Google Web Toolkit (GWT) from its co-creator, Joel Webber, and start creating rich, interactive user interfaces using familiar idioms from Java's Abstract Window Toolkit (AWT), Swing, and the Eclipse Foundation's SWT.

The Google Web Tookit (GWT) has become a very popular way to develop Ajax applications. It allows Java developers to rapidly create Ajax applications by leveraging their knowledge of Java? technology without requiring any knowledge of JavaScript. XForms represents an evolution in the HTML standard, and allows for simple constructs to create complex, dynamic behavior. Both GWT and XForms are powerful enough to provide complete solutions to many problems. So what about using them together? That's exactly what this series is going to show.

Contrary to what you might expect, GWT applications are remarkably un-Weblike. GWT essentially exploits the browser as a run-time environment for lightweight GUI applications, and the result is much closer to what you might develop with Morfik, OpenLaszlo, or even Flash, than to normal Web applications. Accordingly, GWT is best suited to Web applications that can exist as a rich Ajax GUI on a single page. It's probably no coincidence that this characterizes some of Google's recent beta releases, such as its Calendar and Spreadsheets applications. These are great applications, but you can't solve all business scenarios using this approach. The majority of Web applications fit quite comfortably into the page-centric model, and Ajax lets richer interaction paradigms be employed where needed. GWT does not play nicely with traditional page-centric applications. Although it's possible to combine GWT widgets with normal HTML form inputs, the state of a GWT widget is fenced off from the rest of the page. For example, there's no straightforward way to submit the selected value from a GWT Tree widget as part of a regular form.

In this article, you'll install and configure your database -- the back end of your Web application -- create a database schema, and learn about some simple tools for populating it with data. The database you'll be using is Apache Derby, a 100% pure Java? relational database that was originally developed under the name Cloudscape ?. Eventually, the Cloudscape code was acquired by IBM®, which donated an open source version of it to the Apache project. The same project is also distributed by Sun Microsystems under the name JavaDB, which is not at all confusing.

Notice that this file is an empty interface at the moment, but Cypal Studio has created a utility object for returning a fully GWT-certified instance suitable for your remote calls. "Build an Ajax application using Google Web Toolkit, Apache Derby, and Eclipse, Part 3" contains similar code, along with the suggestion that it might be useful to create a common method for the boilerplate code.

The key difference between an Asynchronous JavaScript + XML (Ajax)-enabled Web application and a traditional Web application is the A in Ajax: asynchronous. An Ajax application allows the browser to update a specific part of the page without having to completely refresh the entire page. This simple trick enables a much more interactive user experience, as a simple Web page now behaves much more like a desktop application.

Unfortunately, the standard UI controls (widgets) Google offers have a limited feature set and in many cases cannot satisfy modern enterprise-grade applications. Although you can extend basic GWT controls with a set of custom properties, this path often requires significant development effort. Fortunately, an easier approach is available. With the help of a sample application (see Download), this article shows how to integrate the popular ActiveWidgets JavaScript grid component with a GWT application and achieve advanced functionality with relatively simple coding.

GWT makes building a rich Ajax browser client interface even easier than building traditional Java GUI interfaces. As fabulous as GWT is, however, it can't create an entire Web application by itself. You must still have a data store on the server and some kind of framework for converting that data into Java objects that GWT can pass from the server to its client. In this series of articles, you'll use Apache Derby, a 100% pure Java database that you can embed in the same Java Virtual Machine (JVM) as the rest of your server-side code.

Over the course of this article series on GWT, you've built a simple Web application that demonstrates how you can use GWT with a database back end to create a robust Web application with rich client behavior. Even after four articles, you've only scratched the surface of what GWT has to offer. Powerful features -- such as JUnit test integration, using other Web services through JavaScript Serialized Object Notation (JSON) data exchange, and the new GWT internationalization features -- are well worth your time to check out. GWT development continues to grow, and new features and add-on tools are being added all the time. I hope that you'll be able to take a look around and find the tools you need to build the application you want.

In this installment, Part 3, you'll refactor the rock star application built in Part 2. That application allows for record executives to manage artists and their albums. You're not going to change any of the functionality from Part 2. Instead you'll change the implementation of that functionality by mixing GWT and XForms together. You'll see how GWT can be easily introduced to any existing Web page. You'll use a GWT-style Ajax call to load your data dynamically and then use GWT's JSNI to dynamically create your XForms model. This will allow you to simplify your page, and you'll simplify it even more by using GWT JSNI to dynamically create your XForms controls. Mixing GWT elements will not only simplify the server-side code, it will create smaller initial pages, with faster downloads and rendering.

Part 1 of this four-part series provided a solid grounding in both GWT and XForms and explored how the two can work together to streamline the process of creating Web applications. Now in Part 2, you'll build a simple Web application, the rock star application, that has a two pages: one for viewing artists and one for viewing the albums recorded by those artists. The first page will be built using GWT, and it will use GWT's widgets and GWT's Ajax abstractions. It will link to your second page, which will be built using XForms, and it will use an XForms data model and XForms controls for creating its UI.

GWT is designed to be a multi-purpose framework for building Web applications. One of the common problems with Web applications is localization. Google has a presence in many countries, so localization is a problem they should be very familiar with. Therefore, it should come as no surprise that GWT has some clever features designed for localization. XForms is a much more focused technology, so something like localization is not part of its scope. Thus GWT's localization can be very useful for an XForms application.

"Google Web Toolkit (GWT) is a Java development framework that lets you escape the matrix of technologies that make writing AJAX applications so difficult and error prone. With GWT, you can develop and debug AJAX applications in the Java language using the Java development tools of your choice. When you deploy your application to production, the GWT compiler translates your Java application to browser-compliant JavaScript and HTML."

SQL Anywhere is well known as a database server, but it is more than that. What is less known is that SQL Anywhere Server contains an HTTP server that can serve database query result sets as web pages or through Web Services. Google Web Toolkit (GWT) is a Java software development framework that makes writing AJAX applications easier for developers. It helps eliminate the differences between browsers. It allows Java developers to work in a familiar environment, with tools they already know. GWT includes a compiler that converts your Java classes to browser-compliant JavaScript and HTML.

The main purpose of the tutorial is to teach you how to write the Java code necessary to perform drag-and-drop operations in AJAX using the GWT and Java. In addition, I will teach you hot to use of the FocusListener and ClickListener interfaces.

Future lessons will concentrate on the Java programming techniques required to produce rich Ajax web applications using the GWT framework. This will include discussions and explanations of such issues as the available GWT user interface components, possibly some more on event-driven programming using the GWT, possibly some more on styling, possibly something about drag-and-drop, and a little about Remote Procedure Calls with the GWT.

Most of what you need to know to get started using the GWT to create Ajax web applications was explained in the earlier lesson entitled "Creating Ajax web applications using the Google Web Toolkit (GWT) and Java, Getting Started" (see Resources). However, there are a few essential items that I was unable to include in that lesson. Before getting into the details of the main topic of this lesson (controlling layout in web apps), I will explain those remaining essential items. I will illustrate them using the simplest GWT Ajax web application that I was able to write.