Monday, 13 April 2009

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.

16 comments:

  1. Thank you for this! I'm new at all this stuff, and this was perfect!

    ReplyDelete
  2. Paul! Thank a lot!
    This is really kind of comment blogging worth playing!

    You've brightened my day!

    ReplyDelete
  3. hmmm, I must have done something wrong. If I untick the google web app when it is created, the wizard does not create a gwt.xml file (com.megadeth\MegaDeth.gwt.xml) for step 9.

    ReplyDelete
  4. Thank a lot Thats perfect

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. Hi Paul,
    Glad to see you found my blog interesting. Just to let you know that I have created a new post around GWT/GXT and performance:
    http://www.sambastream.com/blogs/agiannone/29-05-09/high-performance-gxt-gwt-applications-coding-java-javascriptLet me know what you think.
    Ale

    ReplyDelete
  7. I seem to have problems when I add extra items to my EntryPoint. Even adding the line "import com.gwtext.client.widgets.ToolTip;" to the import section causes an "'Ext' is undefined" error. Any ideas what would be causing this? To be clear, the project works fine with the exact example you give, but when I try to add extra widgets, nothing seems to work.

    ReplyDelete
  8. Another point is that when I use this for something like a Button, the button shows up just fine, but I still get that Error msg.

    Here are some pics that I took and put on Picasa. I am a total newbie to GWT so any help is appreciated:

    http://picasaweb.google.com/jonapugh/Code#

    ReplyDelete
  9. Thanks a lot, Paul, for the instructions. You made my life easy !!

    ReplyDelete
  10. Your example doesn't work for me at all.
    I keep getting an "EXT is undefined" error.
    I'm using GWT-EXT 2.0.6. Should that make a difference?

    ReplyDelete
  11. Hi, I'm sorry to hear that. I'm not using GWT-EXT anymore as it's no longer being developed. We've switched to GXT.

    ReplyDelete
  12. thanks paul. that was very helpful.
    Guyz like u keep the industry moving . otherwise guyz like us r jus to use resources to look for spoon feeding.

    ReplyDelete
  13. gurudeb vi...!
    somosto kichu thik thak ache....!

    ReplyDelete
  14. Thanks a lot!!

    I would be very grateful if you please show the
    steps to connect to MySQL Database in GWT in eclipse

    ReplyDelete
  15. You're most welcome. However, I don't think GWT-Ext is active and its website suggests that maybe you should look at Smart GWT.

    As for accessing MySQL from GWT, in short you don't. You need to setup some RPC calls to the server and access the database from there in the usual way.

    ReplyDelete