Ext GWT 2.0: Beginner's Guide

By Daniel Vaughan
    Advance your knowledge in tech with a Packt subscription

  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Getting Started with Ext GWT

About this book

Ext GWT, also known as GXT, takes Google Web Toolkit one step further by providing a wide range of powerful user interface components. It allows a developer to create powerful web applications that are almost like desktop applications. However to leverage all the features of this powerful Java library for creating desktop-style web applications, you need to learn how and when to use the right user interface component.

Ext GWT 2.0: Beginner's Guide is a practical book that teaches you how to use the EXT GWT library to its full potential. It provides a thorough and no-nonsense explanation of the Ext GWT library, what it offers and how to use it through practical examples. This book provides clear, step-by-step instructions for getting the most out of Ext GWT and offers practical examples and techniques that can be used for building your own applications in EXT GWT

This book gets you up and running instantly to build powerful Rich Internet Applications (RIA) with Ext GWT. It then takes you through all the interface-building widgets and components of Ext GWT using practical examples to demonstrate when, where, and how to use each of them. Layouts, forms, panels, grids, trees, toolbars, menus, and many other components are covered in the many examples packed in this book. You will also learn to present your data in a better way with templates and use some of the most sought-after features of Ext GWT in your web applications such as drag-and-drop and charts. Throughout the book a real application is built step by step using Ext GWT and deployed to Google App Engine.

Imagine how great you'll feel when you're able to create great-looking desktop-style user interfaces for your web applications with Ext GWT!

Publication date:
December 2010
Publisher
Packt
Pages
320
ISBN
9781849511841

 

Chapter 1. Getting Started with Ext GWT

In this chapter, 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.

In this chapter, 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

 

What is GWT missing?


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. However, it 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 book.

 

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 little 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 in this book.

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; it makes sense for us to use Eclipse in this book. 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 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.

  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 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.

 

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 button and enter the name GXT_2_2_0.

  4. Select the library you have just created and click on the Add JARs button.

  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 button.

  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 button, select User Library and click on the Next button. Now select the GXT_2_2_0 user library. Click on the Finish button 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 chapter, 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

  4. 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();
  5. 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)

  6. Another difference that is important is that while GWT now uses event handlers for events such as clicking on a button, 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 button 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();
        }
    });
  7. 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. Over the coming chapters, we will show that there are many great features in GXT that go far beyond the basics provided by GWT.

Pop quiz – introducing GXT

  1. What JavaScript library is GXT closely related to?

  2. Which GXT alternative wraps the Smart Client JavaScript library?

  3. Which GXT alternative does most of the work on the server?

  4. Which GXT alternative has a name and appearance that is easily confused with Ext GWT?

  5. What is the name of the company that develops GXT?

  6. What is the name of the GXT Java library file?

  7. What is the license of GXT?

  8. In what file must you inherit the GXT module?

  9. Where must you include a reference to the GXT CSS?

  10. Where must you copy the gxt.jar library file?

 

Summary


In this chapter, 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. In the next chapter, we will start delving into the GXT components in more depth.

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.

    Browse publications by this author
Ext GWT 2.0: Beginner's Guide
Unlock this book and the full library for $5 a month*
Start now