May 14, 2010

Published May 14, 2010 by

Setting up Ext GWT in NetBeans GWT Project

Introduction: Ext GWT is a Java UI component library for building rich Internet applications with Google Web Toolkit.

Features of Ext GWT include:
  • High performance, customizable UI widgets
  • Full theming support with standard CSS
  • Well designed, consistent and fully documented source code
  • Native GWT solution with no external JavaScript or 3rd party libraries
  • Full remote procedure support using GWT RPC, JSON, and XML
  • Support for Java 1.5 features, including generics, enums, and varargs
  • Commercial and Open Source licenses available

Download: Ext GWT SDK is available to download at http://www.extjs.com/products/gwt/download.php

In this article we will learn how to setup the Ext GWT in NetBeans GWT project. If you have not created the GWT project in NetBeans yet, follow the post Creating GWT Project in NetBeans.

Follow the steps below:

1. Extract the downloaded EXT GWT SDK, for example gxt-2.1.1-gwt2.zip
2. Open the GWT-Guide project in NetBeans.
3. Create a folder named lib in the GWT-Guide project. To do this, go to File | New File... | Other in Categories | Folder in File Types; press Next; give a name lib and press Finish.



4. Copy the gxt.jar file from gxt-2.1.1 folder and paste it in the lib folder created in the previous step. To do so go to Files tab | select the lib folder | right click on it | Paste.


5. Add the gxt.jar file in the project library. To do so go to Projects tab | select Libraries | right click on it | Add Jar/Folder... | select the gxt.jar file in the lib folder and Open.





6. In the same way copy the resources folder from gxt-2.1.1 folder and paste it in web folder in the project.

Now the project directory structure is as below:


7. Modify the GWT module. Include the text <inherits name="com.extjs.gxt.ui.GXT"/> under the <module/> in Main.gwt.xml file.

Complete code for the GWT module is as below:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.7.0//EN" "http://google-  web-toolkit.googlecode.com/svn/tags/1.7.0/distro-source/core/src/gwt-module.dtd">

<module>
      <inherits name="com.google.gwt.user.User"/>

      <inherits name="com.extjs.gxt.ui.GXT"/>
      <entry-point class="com.blogspot.gwtguide.client.MainEntryPoint"/>
      <!-- modify the entry point class package and name according to your entry point class -->

</module>

8. Modify the welcomeGWT.html file. Add <link rel="stylesheet" type="text/css" href="resources/css/gxt-all.css" /> under the <head> section.

The complete HTML code is :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta name='gwt:module' content='com.packtpub.gwt=com.packtpub.gwt'>
        <title>gwt
        <link rel="stylesheet" type="text/css" href="resources/css/gxt-all.css" />
    </head>
    <body>
        <script type="text/javascript"  src="com.packtpub.gwt/com.packtpub.gwt.nocache.js">
    </body>
</html>
Read More