Setting-up GWT-Ext for GWT 1.6 with Eclipse

GWT-Ext is a great set of widgets for the Google Web Toolkit (GWT). At the time of writing the release candidates for GWT 1.6 are out. GWT 1.6 has a different project structure and embedded Java Servlet (Jetty) server. These changes bring the advantage that the project structure can be deployed directly to a Java Servlet server (such as Jetty of TomCat) without having to manually create the WAR directory. A slight disadvantage is that the setup documentation for GWT-EXT is no longer quite right.

Below I describe the steps necessary to create a GWT 1.6 project with eclipse and configure it for GWT-Ext.

1. Install the Google Plugin for Eclipse (http://code.google.com/eclipse/docs/getting_started.html).
   
2. Use the plugin to create simple GWT application:
   
   
   
   1. Select File -> New -> Web Application Project from the Eclipse menu.
      
   2. In the New Web Application Project wizard, enter a name for your project (e.g. MegaDeth) and a java package name, e.g., com.megadeth.
      
   3. Take the tick out of the Use Google App Engine tick box.
      
   4. Click Finish.
      
   
   
3. To run the application:
   
   
   
   1. Right click it in package explorer and select Run As -> Run Configurations
      
   2. Put a tick in the Automatically Select Unused Port tickbox.
      
   3. Click Run to see the default GWT 1.6 application
      
   
   
4. Download gwtext-2.0.5.zip, unpack it and copy the gwtext.jar to war\WEB-INF\lib in the project directory.
   
5. Create a js directory in the war directory of the project.
   
6. Download ext-2.0.2.zip, unpack it and copy the contents to the js directory.
   
7. Right click on the project in package explorer and select Refresh so that eclipse can see the new jar and js directory.
   
8. Add gwtext.jar to the project:
   
   
   
   1. Right click on the project in package explore
      
   2. Select Properties -> Java Build Path -> Libraries.
      
   3. Click Add JARs, navigate to gwtext.jar in the project and double click it.
      
   4. Click OK to close the properties dialog.
      
   
   
9. In the project's gwt.xml file (e.g. com.megadeth\MegaDeth.gwt.xml) at the hightlight lines below:

   
   <inherits name='com.google.gwt.user.User'/>
   <inherits name='com.gwtext.GwtExt' />
   ...
   <entry-point class='com.megadeth.client.MegaDeth'/>
   <stylesheet src="../js/ext-2.0.2/resources/css/ext-all.css" />
   <script src="../js/ext-2.0.2/adapter/ext/ext-base.js" />
   <script src="../js/ext-2.0.2/ext-all.js" />

   

10. Change the project's entry point (e.g. com.megadeth.client.MegaDeth.java) to the following:
    

    
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.RootPanel;
    import com.gwtext.client.widgets.Panel;
    
    public class MegaDeth implements EntryPoint 
    {
     public void onModuleLoad() 
     {
      Panel mainPanel = new Panel();   
      mainPanel.setTitle("Hello World!");
      mainPanel.setHeight(300);
      mainPanel.setWidth(500);   
      RootPanel.get().add(mainPanel);
     }
    }

    
    
11. Remove the following from the project html file (e.g. war/MegaDeth.html):
    

    
        <h1>Web Application Starter Project</h1>
    
        <table align="center">
          <tr>
            <td colspan="2" style="font-weight:bold;">Please enter your name:</td>        
          </tr>
          <tr>
            <td id="nameFieldContainer"></td>
            <td id="sendButtonContainer"></td>
          </tr>
        </table>
    

    
    
12. Run the application as before to see a GWT-Ext panel.