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
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.
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.
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.
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.
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.
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, 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.
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.
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.
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 | |
|
Eclipse IDE for Java EE Developers 3.6 |
The Eclipse IDE for Java developers, which also includes some useful web development tools | |
|
Ext GWT 2.2.0 SDK for GWT 2.0 |
The GXT SDK itself |
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.
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.
In Eclipse, select Help | Install New Software. The installation dialog will appear.
Click 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.
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 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.
In Eclipse, select Window | Preferences.
From the tree, select Java | Build Path | User Libraries.
Create a new user library by selecting the new button and enter the name
GXT_2_2_0.Select the library you have just created and click on the Add JARs button.
Select the
gxt.jarfile from the location where you extracted the ZIP file.
First, create a GWT project by going to File | New | Project.
From the dialog, select Google and then Web Application Project from the
Googlefolder. Click on the Next button.
Enter the project name and package, as shown in the following screenshot and then click on Finish.
You will now have created a default GWT application. On running it as a web application, you will see the following in your browser:
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
libfolder of thewarfolder.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.jarfile to thewar\WEB-INF\libfolder of your project.Your project structure should now look like this:
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.xmland is in the root package of the source folder. In this case, it is namedFirstApp.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>We now need to modify the host HTML file. In this project, it is named
FirstApp.htmland is located in thewarfolder. 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">
Finally, we need to copy the GXT stylesheet and image resources into the project's
warfolder.Create a folder named
gxtin thewarfolder, go to the location where you originally unzipped your downloaded GXT package, and open the resources folder. Now copy both thecssandimagesfolders into the newly createdgxtfolder.
Your war folder should now look like this:
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.
When we created the GWT application, a class named
FirstAppwill be created. We created a copy of that class namedFirstGxtApp.In the imports section of the
FirstGxtAppclass, 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;
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.Dialogcom.google.gwt.user.client.ui.DialogBoxcom.extjs.gxt.ui.client.widget.Labelcom.google.gwt.user.client.ui.Labelcom.extjs.gxt.ui.client.widget.VerticalPanelcom.google.gwt.user.client.ui.VerticalPanelcom.extjs.gxt.ui.client.widget.button.Buttoncom.google.gwt.user.client.ui.Buttoncom.extjs.gxt.ui.client.widget.form.TextFieldcom.google.gwt.user.client.ui.TextBoxcom.extjs.gxt.ui.client.event.ButtonEventcom.google.gwt.event.dom.client.ClickEventcom.extjs.gxt.ui.client.event.SelectionListenercom.google.gwt.event.dom.client.ClickHandlercom.extjs.gxt.ui.client.event.KeyListenercom.google.gwt.event.dom.client.KeyUpEventcom.extjs.gxt.ui.client.event.ComponentEventcom.google.gwt.event.dom.client.KeyUpHandlerWe then needed to redefine the controls. In the GWT example, all the code sits inside the
onModuleLoadmethod 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();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)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(); } });We now have two classes: the original GWT
FirstAppclass and our newFirstGXTAppclass. To use theFirstGXTApp, we need to change the application'sgwt.xmlmodule file to use theFirstGXTAppinstead ofFirstApp.Open
FirstApp.gxt.xmland 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.
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.
What JavaScript library is GXT closely related to?
Which GXT alternative wraps the Smart Client JavaScript library?
Which GXT alternative does most of the work on the server?
Which GXT alternative has a name and appearance that is easily confused with Ext GWT?
What is the name of the company that develops GXT?
What is the name of the GXT Java library file?
What is the license of GXT?
In what file must you inherit the GXT module?
Where must you include a reference to the GXT CSS?
Where must you copy the
gxt.jarlibrary file?
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.