Getting Started with Ext GWT

Exclusive offer: get 50% off this eBook here
Ext GWT 2.0: Beginner's Guide

Ext GWT 2.0: Beginner's Guide — Save 50%

Take the user experience of your website to a new level with Ext GWT using this book and eBook

$23.99    $12.00
by Daniel Vaughan | December 2010 | Open Source

The Google Web Toolkit is a great way for Java developers to create AJAX-based rich Internet applications without requiring in-depth knowledge of JavaScript or having to deal with the quirks of different browsers.

In this article by Daniel Vaughan, author of the book Ext GWT 2.0: Beginner's Guide, we introduce Ext GWT and explain where it fits into GWT. We then move on to show you how to get up and running with Ext GWT by creating your first project.

Specifically, we will cover:

  • Installing Ext GWT
  • Creating a new GWT project
  • Preparing the GWT project to use Ext GWT
  • Adapting the GWT example application to use Ext GWT components

 

Ext GWT 2.0: Beginner's Guide

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
        Read more about this book      

(For more resources on GWT, see here.)

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

  1. In Eclipse, select Help Install New Software|. The installation dialog will appear.
  2. Click on the Add button to add a new site.
  3. 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.

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

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

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

  7. Eclipse will now download the Google Web Toolkit and configure the plugin. Restart when prompted.
  8. 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.

Ext GWT 2.0: Beginner's Guide Take the user experience of your website to a new level with Ext GWT using this book and eBook
Published: December 2010
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on GWT, see here.)

GXT setup

Having downloaded the GXT SDK and extracted the zip file to a convenient location, we now need to configure Eclipse.

Time for action – setting up GXT

  1. In Eclipse, select Window Preferences|.
  2. From the tree, select Java Build Path | User Libraries|.
  3. Create a new user library by selecting the new bu?? on and enter the name GXT_2_2_0.
  4. Select the library you have just created and click on the Add JARs bu?? on.
  5. Select the gxt.jar file from the location where you extracted the ZIP file.

What just happened?

We have now set up GXT in Eclipse. At this point, we have everything in place and we are ready to test our development environment by creating our first GXT application.

GWT project creation

The development environment is ready to go. So let's create a GWT project to base our first GXT application on.

Time for action – creating a GWT project

  1. First, create a GWT project by going to File New | Project|.
  2. From the dialog, select Google and then Web Application Project from the Google folder. Click on the Next bu?? on.

  3. Enter the project name and package, as shown in the following screenshot and then click on Finish.

  4. You will now have created a default GWT application. On running it as a web application, you will see the following in your browser:

What just happened?

We have created a new project comprising the default GWT application. At this stage, it is a pure GWT app.

GXT project configuration

We now need to make changes to the GWT application to enable it to make use of GXT.

This consists of the following steps:

  • Include the GXT library
  • Add an entry for GXT to the GWT module file
  • Modify the HTML host file
  • Copy resources

Time for action – preparing the project to use GXT

  1. Earlier we set up a GXT user library. We now need to include it to the build path of our newly created GWT project and the lib folder of the war folder.
    Build path: Right-click on the FirstApp project and select Properties. Select Java Build Path and then select the Libraries tab. Click on the Add Library bu?? on, select User Library and click on the Next bu?? on. Now select the GXT_2_2_0 user library. Click on the Finish bu?? on and then on OK.
    War: Copy the gxt.jar file to the war\WEB-INF\lib folder of your project.
    Your project structure should now look like this:

  2. The GWT module file contains the entry point for a GWT application together with references to any additional libraries it uses. The module file always ends in gwt.xml and is in the root package of the source folder. In this case, it is named FirstApp.gwt.xml. In order to use GXT, there needs to be an entry added to this file.
    The default GWT module file also contains a reference to the default GWT style sheet. This can be removed.
    The line that we need to add should be put in the "Other module inherits" section as follows:

    <inherits name='com.extjs.gxt.ui.GXT' />

    The complete file should now look like this:

    <?xml version="1.0" encoding="UTF-8"?>
    <module rename-to='firstapp'>
    <!-- Inherit the core Web Toolkit stuff.
    -->
    <inherits name='com.google.gwt.user.User' />

    <!-- Other module inherits
    -->
    <inherits name='com.extjs.gxt.ui.GXT' />

    <!-- Specify the app entry point class.
    -->
    <entry-point
    class='com.danielvaughan.firstapp.client.FirstApp'
    />

    <!-- Specify the paths for translatable code
    -->
    <source path='client' />

    </module>

  3. We now need to modify the host HTML file. In this project, it is named FirstApp. html and is located in the war folder. Edit this file, including the GXT stylesheets, by adding the following line into the head section beneath the existing stylesheet link:

    <link type="text/css" rel="stylesheet" href="gxt/css/gxt-all.css">

  4. Finally, we need to copy the GXT stylesheet and image resources into the project's war folder.
    Create a folder named gxt in the war folder, go to the location where you originally unzipped your downloaded GXT package, and open the resources folder. Now copy both the css and images folders into the newly created gxt folder.
    Your war folder should now look like this:

What just happened?

We have configured our project so that it now has all the dependencies it needs for making use of GXT features.

Differences of GXT controls

Our application now includes the GXT library, but as yet it is not making any use of the library. In the example code of this article, we have left in the original FirstApp class together with a FirstGxtApp class. The FirstGxtApp class modifies the default GWT application to use GXT controls instead of the GWT equivalents. By comparing these, you can see how, although similar, GXT controls do have some differences in how they can be used. We will now summarize the main differences.

Time for action – adapting the GWT app to use GXT controls

  1. When we created the GWT application, a class named FirstApp will be created. We created a copy of that class named FirstGxtApp.
  2. In the imports section of the FirstGxtApp class, we removed the following GWT specific imports:

    import com.google.gwt.event.dom.client.ClickEvent;
    import com.google.gwt.event.dom.client.ClickHandler;
    import com.google.gwt.event.dom.client.KeyUpEvent;
    import com.google.gwt.event.dom.client.KeyUpHandler;
    import com.google.gwt.user.client.ui.Button;
    import com.google.gwt.user.client.ui.DialogBox;
    import com.google.gwt.user.client.ui.Label;
    import com.google.gwt.user.client.ui.TextBox;
    import com.google.gwt.user.client.ui.VerticalPanel;

  3. We then added imports to the equivalent GXT classes as follows:

    import com.extjs.gxt.ui.client.event.ButtonEvent;
    import com.extjs.gxt.ui.client.event.SelectionListener;
    import com.extjs.gxt.ui.client.event.KeyListener;
    import com.extjs.gxt.ui.client.event.ComponentEvent;
    import com.extjs.gxt.ui.client.widget.Dialog;
    import com.extjs.gxt.ui.client.widget.Label;
    import com.extjs.gxt.ui.client.widget.VerticalPanel;
    import com.extjs.gxt.ui.client.widget.button.Button;
    import com.extjs.gxt.ui.client.widget.form.TextField;

    You may notice that some of the GXT classes share a similar name to their GWT equivalents. The following table shows the GXT classes we used and the GWT equivalents:

GXT

GWT

com.extjs.gxt.ui.client.widget.Dialog

com.google.gwt.user.client.ui.DialogBox

com.extjs.gxt.ui.client.widget.Label

com.google.gwt.user.client.ui.Label

com.extjs.gxt.ui.client.widget.VerticalPanel

com.google.gwt.user.client.ui.VerticalPanel

com.extjs.gxt.ui.client.widget.button.Button

com.google.gwt.user.client.ui.Button

com.extjs.gxt.ui.client.widget.form.TextField

com.google.gwt.user.client.ui.TextBox

com.extjs.gxt.ui.client.event.ButtonEvent

com.google.gwt.event.dom.client.ClickEvent

com.extjs.gxt.ui.client.event.SelectionListener

com.google.gwt.event.dom.client.ClickHandler

com.extjs.gxt.ui.client.event.KeyListener

com.google.gwt.event.dom.client.KeyUpEvent

com.extjs.gxt.ui.client.event.ComponentEvent

com.google.gwt.event.dom.client.KeyUpHandler

  1. We then needed to redefine the controls. In the GWT example, all the code sits inside the onModuleLoad method and makes use of inner classes. However, due to the way listeners are implemented in GXT, we lose some of the flexibility that enables this. Instead, we had to define the controls as private members as follows:

    private final Button sendButton = new Button("Send");
    private final TextField<String> nameField = new
    TextField<String>();
    private final Dialog dialogBox = new Dialog();
    private final Label textToServerLabel = new Label();
    private final HTML serverResponseLabel = new HTML();

  2. There are differences in syntax between the GXT and GWT methods. Although the GXT controls are similar to GWT controls, there are a number of differences. Firstly, there are many small differences on the methods of the controls between GWT and GXT. Here are the ones we see in this example:

GXT

GWT

TextField.setValue()

TextBox.setText()

TextField.focus()

TextBox.setFocus(true)

DialogBox.setHeading()

DialogBox.setText()

DialogBox.setAnimCollapse(true)

DialogBox.setAnimationEnabled(true)

VerticalPanel .setHorizontalAlign(HorizontalAlignment.RIGHT);

VerticalPanel.setHorizontalAlignment
(VerticalPanel.ALIGN_RIGHT)

  1. Another difference that is important is that while GWT now uses event handlers for events such as clicking on a bu?? on, GXT uses event listeners similar to the earlier version of GWT. However, in this case, the actual code is very similar.
    Here is how you implement the close bu?? on click event in GWT using a click handler:

    closeButton.addClickHandler(new ClickHandler()
    {
    public void onClick(ClickEvent event)
    {
    dialogBox.hide();
    sendButton.setEnabled(true);
    sendButton.setFocus(true);
    }
    });

    Here is the same thing in GXT using a selection listener:

    closeButton.addSelectionListener(new
    SelectionListener<ButtonEvent>()
    {
    public void componentSelected(ButtonEvent ce)
    {
    dialogBox.hide();
    sendButton.setEnabled(true);
    sendButton.focus();
    }
    });

  2. We now have two classes: the original GWT FirstApp class and our new FirstGXTApp class. To use the FirstGXTApp, we need to change the application's gwt.xml module file to use the FirstGXTApp instead of FirstApp.
    Open FirstApp.gxt.xml and change the entry point element from:

    <entry-point class='com.danielvaughan.firstapp.client.FirstApp' />

    to:

    <entry-point class='com.danielvaughan.firstapp.client.FirstGXTApp'
    />

    Now when running the web application again, you will see a new version with GXT controls.

What just happened?

Hopefully, you now can see that using GXT is not vastly different from using GWT. It is also important to realize that there are some subtle differences.

Summary

In this article, we have introduced GXT and set up the development environment. We then went on to modify the standard GWT sample application to use the GXT component. We used this to highlight the similarities and differences between GXT and GWT.


Further resources on this subject:


Ext GWT 2.0: Beginner's Guide Take the user experience of your website to a new level with Ext GWT using this book and eBook
Published: December 2010
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Daniel Vaughan

Daniel Vaughan has worked with enterprise web applications for over 12 years. He is currently a software architect for a UK financial institution. An experienced Java developer, Daniel first started working with Google Web Toolkit soon after it was released in 2006 and loved the power and simplicity it bought to web application development. When Ext GWT came along he was an early adopter and has used it as part of several large projects.

Daniel currently splits his time between the beautiful tranquility of the Cotswolds, England and the fast-moving city state of Singapore. He enjoys travel, scuba diving, and learning new ideas.

Books From Packt


Google Web Toolkit 2 Application Development Cookbook
Google Web Toolkit 2 Application Development Cookbook

OGRE 3D 1.7 Beginner's Guide
OGRE 3D 1.7 Beginner's Guide

Blender 2.5 Lighting and Rendering
Blender 2.5 Lighting and Rendering

Inkscape 0.48 Essentials for Web Designers
Inkscape 0.48 Essentials for Web Designers

PostgreSQL 9.0 High Performance
PostgreSQL 9.0 High Performance

OpenCart 1.4 Beginner's Guide
OpenCart 1.4 Beginner's Guide

jQuery Plugin Development Beginner's Guide
jQuery Plugin Development Beginner's Guide

NHibernate 3.0 Cookbook
NHibernate 3.0 Cookbook


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
C
3
E
1
2
Y
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software