Getting Started with Ext GWT

Ext GWT 2.0: Beginner's Guide

Take the user experience of your website to a new level with Ext GWT

Explore the full range of features of the Ext GWT library through practical, step-by-step examples

Discover how to combine simple building blocks into powerful components

Create powerful Rich Internet Applications with features normally only found in desktop applications

Learn how to structure applications using MVC for maximum reliability and maintainability

What is GWT missing?

GWT is a toolkit as opposed to a full development framework, and for most projects, it forms the part of a solution rather than the whole solution.

Out-of-the-box GWT comes with only a basic set of widgets and lacks a framework to enable the developers to structure larger applications. Fortunately, GWT is both open and extensible and as a result, a range of complementary projects have grown up around it. Ext GWT is one of those projects.

What does Ext GWT offer?

Ext GWT sets out to build upon the strengths of GWT by enabling the developers to give their users an experience more akin to that of a desktop application.

Ext GWT provides the GWT developer with a comprehensive component library similar to that used when developing for desktop environments. In addition to being a component library, powerful features for working with local and remote data are provided. It also features a model view controller framework, which can be used to structure larger applications.

How is Ext GWT licensed?

Licensing is always an important consideration when choosing technology to use in a project. At the time of writing, Ext GWT is offered with a dual license.

The first license is an open source license compatible with the GNU GPL license v3. If you wish to use this license, you do not have to pay a fee for using Ext GWT, but in return you have to make your source code available under an open source license. This means you have to contribute all the source code of your project to the open source community and give everyone the right to modify or redistribute it.

If you cannot meet the obligations of the open source license, for example, you are producing a commercial product or simply do not want to share your source code, you have to purchase a commercial license for Ext GWT.

It is a good idea to check the current licensing requirements on the Sencha website, http://www.sencha.com, and take that into account when planning your project.

Alternatives to Ext GWT

Ext GWT is one of the many products produced by the company Sencha. Sencha was previously named Ext JS and started off developing a JavaScript library by the same name. Ext GWT is closely related to the Ext JS product in terms of functionality. Both Ext GWT and Ext JS also share the same look and feel as well as a similar API structure. However, Ext GWT is a native GWT implementation, written almost entirely in Java rather than a wrapper, the JavaScript-based Ext JS.

GWT-Ext

Before Ext GWT, there was GWT-Ext: http://code.google.com/p/gwt-ext/. This library was developed by Sanjiv Jeevan as a GWT wrapper around an earlier, 2.0.2 version of Ext JS. Being based on Ext JS, it has a very similar look and feel to Ext GWT. However, after the license of Ext JS changed from LGPL to GPL in 2008, active development came to an end.

Apart from no longer being developed or supported, developing with GWT-Ext is more difficult than with Ext GWT. This is because the library is a wrapper around JavaScript and the Java debugger cannot help when there is a problem in the JavaScript code. Manual debugging is required.

Smart GWT

When development of GWT-Ext came to an end, Sanjiv Jeevan started a new project named Smart GWT: http://www.smartclient.com/smartgwt/. This is a LGPL framework that wraps the Smart Client JavaScript library in a similar way that GWT-Ext wraps Ext JS. Smart GWT has the advantage that it is still being actively developed. Being LGPL-licensed, it also can be used commercially without the need to pay the license fee that is required for Ext GWT. Smart GWT still has the debugging problems of GWT-Ext and the components are often regarded not as visually pleasing as Ext GWT. This could be down to personal taste of course.

Vaadin

Vaadin, http://vaadin.com, is a third alternative to Ext GWT. Vaadin is a server-side framework that uses a set of precompiled GWT components. Although you can write your own components if required, Vaadin is really designed so that you can build applications by combining the ready-made components.

In Vaadin the browser client is just a dumb view of the server components and any user interaction is sent to the server for processing much like traditional Java web frameworks. This can be slow depending on the speed of the connection between the client and the server.

The main disadvantage of Vaadin is the dependency on the server. GWT or Ext GWT's JavaScript can run in a browser without needing to communicate with a server. This is not possible in Vaadin.

Ext GWT or GXT?

To avoid confusion with GWT-Ext and to make it easier to write, Ext GWT is commonly abbreviated to GXT. We will use GXT synonymously with Ext GWT throughout the rest of this article.

Working with GXT: A different type of web development

If you are a web developer coming to GXT or GWT for the first time, it is very important to realize that working with this toolset is not like traditional web development. In traditional web development, most of the work is done on the server and the part the browser plays is li?? le more than a view-making request and receiving responses.

When using GWT, especially GXT, at times it is easier if you suspend your web development thinking and think more like a desktop-rich client developer. Java Swing developers, for example, may find themselves at home.

How GXT fits into GWT

GXT is simply a library that plugs into any GWT project. If we have an existing GWT project setup, all we need to do to use it is:

Download the GXT SDK from the Sencha website

Add the library to the project and reference it in the GWT configuration

Copy a set of resource files to the project

If you haven't got a GWT project setup, don't worry. We will now work through getting GXT running from the beginning.

Downloading what you need

Before we can start working with GXT, we first need to download the toolkit and set up our development environment. Here is the list of what you need to download for running the examples.

Recommended

Notes

Download from

Sun JDK 6

The Java development kit

http://java.sun.com/javase/downloads/widget/jdk6.jsp

Eclipse IDE for Java EE Developers 3.6

The Eclipse IDE for Java developers, which also includes some useful web development tools

http://www.eclipse.org/downloads/

Ext GWT 2.2.0 SDK for GWT 2.0

The GXT SDK itself

http://www.sencha.com/products/gwt/download.php

Google supplies a useful plugin that integrates GWT into Eclipse. However, there is no reason that you cannot use an alternative development environment, if you prefer.

Eclipse setup

There are different versions of Eclipse, and although Eclipse for Java EE developers is not strictly required, it contains some useful tools for editing web-specific files such as CSS. These tools will be useful for GXT development, so it is strongly recommended. We will not cover the details of installing Eclipse here, as this is covered more than adequately on the Eclipse website. For that reason, we make the assumption that you already have a fresh installation of Eclipse ready to go.

GWT setup

You may have noticed that GWT is not included in the list of downloads. This is because since version 2.0.0, GWT has been available within an Eclipse plugin, which we will now set up.

Time for action – setting up GWT

In Eclipse, select Help Install New Software|. The installation dialog will appear.

Click on the Add button to add a new site.

Enter the name and location in the respective fields, as shown in the following screenshot, and click on the OK button.
Move the mouse over the image to enlarge it.

Select Google Plugin for Eclipse from the plugin section and Google Web Toolkit SDK from the SDKs section. Click on Next.

The following dialog will appear. Click on Next to proceed.

Click on the radio button to accept the license. Click on Finish.

Eclipse will now download the Google Web Toolkit and configure the plugin. Restart when prompted.

On restarting, if GWT and the Google Eclipse Plugin are installed successfully, you will notice the following three new icons in your toolbar.

What just happened?

You have now set up GWT in your Eclipse IDE. You are now ready to create GWT applications. However, before we can create GXT applications, there is a bit more work to do.