When we created the GWT application, a class named FirstApp will be created. We created a copy of that class named FirstGxtApp.

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;

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:

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();

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:

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