First experience on GWT

My last project involves GWT, Google Web Toolkit, which is a developer’s killer app to create Javascript-based web applications. GWT is more a presentation-layer SDK. While it involves some server aspects, such as a RPC interface to integrate with the client-side communication, a larger portion of GWT’s user API includes a Javascript runtime emulation layer of Java core API, a set of DOM manipulation API, and a library of widgets. Two GWT’s most powerful functions are GWT’s hosted mode, which enables us to debug GWT apps in a Java environment, and GWT’s Java-Javascript compiler, which translates Java source code into Javascript code, therefore, the production piece of GWT apps can run entirely in the browser. GWT will deal with most browser-compatibility issues. Developers can concentrate on developing good apps, instead of fighting with Firefox-IE-Safari-Opera battles.

Developing in GWT is very similar to writing Javascript apps with pure-Javascript libraries, except for GWT’s better capability of debugging, type-safe grammar checking, and a small portion of JDK. GWT utilizes HTML and CSS to manage layouts and styles. It can also programmatically use various layout managers (panels) to place widgets that represent different kinds of UI elements on a web page.


Course Selector

Course Selector

This is an example application I have been working. GWT uses a DockPanel to divide the page into five locations, the north (1 & 2), the west (1 & 2), the centre, the east (1 & 2), and the south (1 & 2). These locations may include one single widget respectively. However, Panels can be added to contain more than one widget. Panels are used everywhere in GWT. A widget can be decorated by placing it into a DecoratorPanel. Pop-up contents can be wrapped into a PopupPanel. Vertically or horizontally distributed widgets can be placed into a VerticalPanel or a HorizontalPanel respectively.

The following series of articles will discuss the development of this example app.

The example app’s source repository is located at: