From GWT-Ext

Using Eclipse

Using Eclipse to develop your GWT-Ext code helps you utilize the built-in tooling available with the IDE and access the myriad plugins which Java developers swear by. Together with Cypal Studios' GWT plugin for Eclipse, developing GWT-Ext applications is a breeze. Let's get started with designing a simple page with a static titled panel and some inner text. This simple tutorial explores the configuration of your project and simple but useful features of Eclipse.

Download & Install Eclipse

If you haven't already, obtain the latest Eclipse IDE platform from the Eclipse page's downloads repository.

Get the Eclipse IDE for Java EE developers as it has the Graphical Editing Framework (GEF) and the Eclipse Modeling Framework (EMF) toolkits which are required for the Cypal plugin.

Pick the Eclipse IDE for Java EE developers

These frameworks can also be added to your existing eclipse installation. Please check the toolkits' pages on Eclipse.org for more information.

Extract the archive to a folder (C:\...\My Applications\Eclipse for example on a Windows based machine). That's it! You've installed Eclipse on your machine.

Eclipse Installed on Windows Vista

Navigate to C:\...\My Applications\Eclipse\eclipse and run the eclipse.exe application available there. Choose a workspace to store your projects and code and proceed to your workbench.

The Eclipse Welcome Screen.

In the menu, choose Help>Software Updates>Find and Install... and get the latest updates for Eclipse (patches for the frameworks and the IDE).

Download & Install the Cypal Plugin

Obtain the plugin from the Cypal Solutions' Studio page. Extract the archive to a local folder. It should have two sub-folders:

- Features
- Plugins

Copy these folders and their contents and paste them into the C:\\...My Applications\Eclipse\eclipse folder.

MyEclipse users should paste the folders into C:\\...\MyEclipse 6.0\myeclipse\eclipse folder instead.

Restart Eclipse.

After starting Eclipse, navigate to Window>Preferences... in the top menu. The Cypal Studio link should be available in the left tree of the dialog window. Click on this link and in the GWT Home text field, enter the location of the Google Web Toolkit's installation directory. The folder should point to the root of the installation and not a sub-folder.

You're now ready to create your first GWT application using Eclipse.

Configuring your project for GWT-Ext in Eclipse

With the Java EE perspective open in Eclipse, right-click on the Project Explorer view to show the New Project menu. Create a Dynamic Web Project and give the project a name - Hello GWT-Ext.

A New Dynamic Web Project

A New Dynamic Web Project

Under the configurations drop-down, choose Cypal Studio GWT Project. Hit the Next> button, add any other Project Facets you might want to to the project. For this example, choose the default set:

- Cypal's GWT Facet
- Dynamic Web Module
- Java

A New Dynamic Web Project: The Project Facets wizard

As of the writing of this wiki, the current version of Google Web Toolkit is configured to work with Java 1.4, so make sure that the Java Facet chosen matches that. Click Finish to create the project.

Once the project is ready and saved in the workspace, right click on the project's name and from the New menu, select Other.... http://gwt-ext.com/sankar/forum/images/NewModule.png

Under the Cypal Studio option, select a new Module wizard and click Next>. http://gwt-ext.com/sankar/forum/images/NewModule2.png

In the GWT Module dialog, add a package name under which your class will be created and the name of the class which will extend EntryPoint. Name your package com.mycompany.mypackage and name the module HelloWorld. http://gwt-ext.com/sankar/forum/images/NewModule3.png

The Cypal Studio plugin creates three packages under the Java Resources: src folder under the project:

- public
- client
- server

The HelloWorld.java file is created under the client package.

/**
 * 
 */
package com.mycompany.mypackage.client;
 
import com.google.gwt.core.client.EntryPoint;
 
/**
 * @author Sankar
 *
 */
public class HelloWorld implements EntryPoint {
 
	public void onModuleLoad() {
		// TODO Auto-generated method stub 
	}
 
}

You can add GWT code under the onModuleLoad() function as the standard GWT libraries are available. The GWT-Ext library needs to be added to the project now. Obtain the latest gwtext.jar file and save it under a new lib folder under the com.mycompany.mypackage.public folder. This library needs to be added to the build path of the project. Right-click on the project's name, and under the Build Path menu option, pick Configure Build Path.... In the Libraries tab, select the Add JARs... option and find the gwtext.jar library and click OK twice to return to the workspace.

Now that we've configured the build path, we need to add the ExtJS library to our project. Download the relevant version of the ExtJS library from the downloads page. Extract the archive to a local folder. Create a folder js\ext under the com.mycompany.mypackage.public package. Copy the following files and folders into that folder:

- ext-all.js
- ext-all-debug.js
- ext-core.js
- ext-core-debug.js
- \adapter
- \resources

It is recommended that all your JS, CSS or media files go under the com.mycompany.mypackage.public package.

The final configuration that needs to be done before creating GWT-Ext applications is to edit the HelloWorld.gwt.xml configuration file.

<module>
	<!-- Inherit the core Web Toolkit stuff.                  -->
	<inherits name='com.google.gwt.user.User'/>
	<!-- Specify the app entry point class.                   -->
	<entry-point class='com.mycompany.mypackage.client.HelloWorld'/>
</module>

The GWT-Ext library needs to be inherited in our application, so add 2 lines in the middle:

<module>
	<!-- Inherit the core Web Toolkit stuff.                  -->
	<inherits name='com.google.gwt.user.User'/>
	<!-- Inherit the GWTExt Toolkit library configuration.	  -->
	<inherits name='com.gwtext.GwtExt' />
	<!-- Specify the app entry point class.                   -->
	<entry-point class='com.mycompany.mypackage.client.HelloWorld'/>
 
	<stylesheet src="js/ext/resources/css/ext-all.css" />
	<script src="js/ext/adapter/ext/ext-base.js" />
	<script src="js/ext/ext-all.js" />
</module>

The Hello GWT-Ext project with the HelloWorld module added

Hello GWT-Ext World! in Eclipse

The code

We are now ready to create our application.

Let us first create the HTML page which will hold the content of your first GWT-Ext page. The HTML markup in this page is quite minimal as all of our content is generated dynamically in javascript. The ExtJS CSS and javascript libraries need to be included however and we will be designing the page as an XHTML strict page with the appropriate markup.

The Cypal Studio plugin has already created the HelloWorld.html file under com.mycompany.mypackage.public. Replace the standard content generated by Cypal Studio with the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <meta http-equiv="Content-Language" content="en-us" />
      <meta http-equiv="Content-Author" content="Sankar Gorthi" />
      <title>Hello World</title>
      <!-- The GWT js file generated at run time -->
      <script type="text/javascript" src='com.mycompany.mypackage.HelloWorld.nocache.js'></script>
   </head>
 
   <body>
      <div id="main"></div>
   </body>
 
</html>

The div with id 'main' will hold the content of our page.

Next, add the following code to the HelloWorld.java file:

/**
 * 
 */
package com.mycompany.mypackage.client;
 
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.gwtext.client.widgets.Panel;
 
/**
 * @author Sankar
 * 
 */
public class HelloWorld implements EntryPoint {
 
   public void onModuleLoad() {
      Panel mainPanel = new Panel() {
         {
            setTitle("Hello World!");
            setHeight(300);
            setWidth(500);
            setFrame(true);
            setHtml("<p>This is my first GWT-Ext webpage and it was a breeze to design!</p>");
            setStyle("margin: 10px 0px 0px 10px;");
         }
      };
 
      RootPanel.get().add(mainPanel);
   }
}

This application is now ready for testing.

Under the Run menu, select the Open Run Dialog... option. In the left hand tree, select the GWT Hosted Mode Application and create a new launch configuration under it.

Adding a new run configuration under the GWT Hosted Mode Application type.

The drop-down menu next to the Run Button in the top toolbar provides easy access to the Open Run Dialog... wizard.

Name this configuration Hello GWT-Ext HelloWorld. Select the Hello GWT-Ext project and the com.mycompany.mypackage.HelloWorld module from the drop-down menus and hit the Run button.

The GWT Development Shell and the hosted browser will launch and your page will contain the Hello World panel with the text specified.

The Google Web Toolkit Development Shell

The Hosted browser showing the Hello World example

Exploring the Hello World Example

-- TODO.

Adding functionality

Now that we've added the panel, let's make it render to the empty div specified in the HTML markup.

We need to first retrieve the Element from the DOM of the rendered page. This is done using the GWT-Ext library's Ext core class. We call the Ext.get(String id) function and pass it the ID of the div we need to retrieve.

Next, we apply the Panel created to the Element retrieved. The code for this is shown below:

/**
 * 
 */
package com.mycompany.mypackage.client;
 
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.gwtext.client.core.Ext;
import com.gwtext.client.core.ExtElement;
import com.gwtext.client.widgets.Panel;
 
/**
 * @author Sankar
 * 
 */
public class HelloWorld implements EntryPoint {
 
   public void onModuleLoad() {
      ExtElement main = Ext.get("main");
 
      Panel mainPanel = new Panel() {
         {
            setTitle("Hello World!");
            setHeight(300);
            setWidth(500);
            setFrame(true);
            setHtml("<p>This is my first GWT-Ext webpage and "
               + "it was a breeze to design!</p>");
            setStyle("margin: 10px 0px 0px 10px;");
         }
      };
 
      if (main != null) {
         mainPanel.setApplyTo(main.getDOM());
         mainPanel.render("");
      } else {
         RootPanel.get().add(mainPanel);
      }
   }
}

We first check if the main ExtElement was retrieved from the DOM. If it was, we apply the panel to that div's Element. Else, we simply add the panel created to the RootPanel.

That was easy wasn't it?

Debugging Hello World in Eclipse

Debugging is something that programmers can't avoid. There are many ways to go about debugging, but it essentially comes down to finding the code responsible for a bug. The GWT API was designed to allow you to easily step through your code to identify bugs at run-time in any IDE. Eclipse provides you with the Debug perspective which is quite powerful, feature rich and easy to use.

HelloWorld.java is pretty simple right now, so let's introduce some run-time bugs to test our debugging capabilities.

First, we replace the conditional checking for the existence of the 'main' div element and use a try-catch block instead.

/**
 * 
 */
package com.mycompany.mypackage.client;
 
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.gwtext.client.core.Ext;
import com.gwtext.client.core.ExtElement;
import com.gwtext.client.widgets.Panel;
 
/**
 * @author Sankar
 * 
 */
public class HelloWorld implements EntryPoint {
 
   public void onModuleLoad() {
      ExtElement main = Ext.get("main");
 
      Panel mainPanel = new Panel() {
         {
            setTitle("Hello World!");
            setHeight(300);
            setWidth(500);
            setFrame(true);
            setHtml("<p>This is my first GWT-Ext webpage and "
                  + "it was a breeze to design!</p>");
            setStyle("margin: 10px 0px 0px 10px;");
         }
      };
 
      try{
         mainPanel.setApplyTo(main.getDOM());
         mainPanel.render("");
      } catch(Exception e) {
         e.printStackTrace();
         RootPanel.get().add(mainPanel);
      }
   }
}

Toggle a breakpoint at the first line within the try block by right clicking on the left-border of the editor and choosing Toggle Breakpoint from the menu.

Toggle Breakpoint in Eclipse

From the drop-down next to the Debug button on the standard toolbar of the Java EE perspective, select the Launch configuration for Hello GWT-Ext Hello World. Eclipse automatically takes you to the Debug perspective when the breakpoint is reached.

Eclipse's Debug perspective

As you can see, the Debug view contains the current running threads and the Editor in the center of the perspective shows the current line being executed in the code. The Variables view on the top right shows the currently accessible variables in the HelloWorld class. The main variable points to the ExtElement retrieved. You can now continue execution by hitting the Resume button or pressing the F8 key or step through the code with the Step Into(F5), Step Over(F6) and Step Return(F7) options until the hosted browser shows the output expected. The panel will then be rendered to the main div element in the hosted browser.

Now, without terminating the launch, let's change the id of the element to be retrieved in HelloWorld.java:

ExtElement main = Ext.get("this-id-does-not-exist");

Save the HelloWorld.java file, and refresh the page in the GWT Hosted Browser. Eclipse automatically builds the current code and deploys it to the GWT Development Shell so, you will not need to restart the application. A simple refresh will suffice. This is called Hot Code Replacement and applies to normally run GWT applications too in most cases. (This does not apply to compiled code being viewed, however, as the code will have to be compiled every time before the changes are reflected in your system's browser.)

As before, the code breaks at the first line in the try block. However, as you can see, the Variables view shows that the main variable has been initialized with a null value.

The Variables view showing that the main variable has a null value.

So, this will trigger a NullPointerException at the current line of your code. To see this, click on the Step Over(F6) button. Notice that the code directly jumps to the catch block indicating that an Exception was encountered. Continue stepping-over the code to see the exception's stack trace being printed in the Console view at the bottom of the perspective indicating a NullPointerException at line 34 of HelloWorld.java where the null main variable was accessed as a properly initialized object. You can hit the F5 key at any point to continue the execution and return to normal operation of the example.

One more thing...

This concludes a very rudimentary example which demonstrates the tools available to you when using Eclipse to create your GWT-Ext applications.

Do remember that Java content-assist is available to you throughout your application's code. When stuck at any point, trying to find methods or variables available to you within a particular scope in your class, hit Ctrl+Spacebar to show the Java Proposals menu. Auto-complete of Class-names, variable names or method signatures with an assisting menu also works with the same shortcut. Alternatively, you can quickly add the value suggested by Eclipse to be entered at that point in your code by typing in the first few letters of your Class-name, variable name or method signature and pressing Alt+/ (Alt + forward-slash).

Also, configuring Eclipse with the plugins available helps give you a comprehensive development tool.

Try out the Subclipse Subversion Plugin for managing your SVN repositories. It very closely resembles the CVS plugin which comes standard with the Eclipse configuration.

GWT Designer plugin for Eclipse

While various free tools and plugins are available for development, a very powerful tool for designing GWT applications, GWT Designer was created by Instantiations. The tool is free to try for 14 days and then requires a yearly subscription to continue. As can be seen from the Web Demos, this is a very intuitively designed plugin which closely resembles the functionality developers would be accustomed to when creating applications in Visual Studio and is a great addition to your tool arsenal.