How to Start Gwt and SmartGwt ~ Techie @ Future

How to Start Gwt and SmartGwt

This small tutorial tries to guide you through the different steps to enable your development environment for GWT and SmartGWT.I assume that your environment already consists of a JDK 1.6. or greater and Apache Ant. I use Eclipse 3.4 as an IDE but I try to be independend as much as possible from any IDE.

So let’s start now.

Download and install GWT and SmartGWT

Download the GWT SDK version 1.6.4 or greater for your operating system from the official GWT download site. I unpacked it at /opt/gwt/gwt-linux-1.6.4 and made an additional symlink /opt/gwt/gwt-linux.

The official 1.0 Beta 2 release and latest nightly builds for SmartGWT are available at http://smartgwt.build.rorschach.de/. I just downloaded the nightly build rev. 441 and installed it at /opt/gwt/smartgwt-1.0b3 with the symlink /opt/gwt/smartgwt.

Create your project skeleton

In your GWT directory you find the shell script webAppCreator (webAppCreator.cmd on Windows). Change to your working directory and execute the webAppCreator. I want my new project folder created in ~/dev/java/gwt. The project folder should be named smartgwttest, the main package is com.test and the GWT application is called SmartGwtTest.

~/dev/java/GWT$ /opt/gwt/gwt-linux/webAppCreator -out smartgwttest com.test.SmartGwtTest
Created directory smartgwttest/src
Created directory smartgwttest/war
Created directory smartgwttest/war/WEB-INF
Created directory smartgwttest/war/WEB-INF/lib
Created directory smartgwttest/src/com/test
Created directory smartgwttest/src/com/test/client
Created directory smartgwttest/src/com/test/server
Created file smartgwttest/src/com/test/SmartGwtTest.gwt.xml
Created file smartgwttest/war/SmartGwtTest.html
Created file smartgwttest/war/SmartGwtTest.css
Created file smartgwttest/war/WEB-INF/web.xml
Created file smartgwttest/src/com/test/client/SmartGwtTest.java
Created file smartgwttest/src/com/test/client/GreetingService.java
Created file smartgwttest/src/com/test/client/GreetingServiceAsync.java
Created file smartgwttest/src/com/test/server/GreetingServiceImpl.java
Created file smartgwttest/build.xml
Created file smartgwttest/README.txt
Created file smartgwttest/.project
Created file smartgwttest/.classpath
Created file smartgwttest/SmartGwtTest.launch
Created file smartgwttest/war/WEB-INF/lib/gwt-servlet.jar
~/dev/java/GWT$

Examine the created project

The webAppCreator script creates a complete Java web application with Ant build.xml, Eclipse project files and launch configuration. If you’re not using Eclipse you can safely delete the three files .classpath, .project and SmartGwtTest.launch.

The Java source code is located in the src directory. In package com.test you can find the GWT module file SmartGwtTest.gwt.xml. The sub packages com.test.client and com.test.server separates the client source code (which will be later compiled to JavaScript) from the optional server code.

As you can see in SmartGwtTest.gwt.xml your GWT entry point class is com.test.client.SmartGwtTest. The webAppCreator put two other files aside: GreetingServiceAsync.java and GreetingService.java. This is because webAppCreator created a complete test application which makes a server call to a RemoteServiceServlet and displays the result. The servlet implementation GreetingServiceImpl is the only class in package com.test.server.

Let’s have a look now at the war directory. This is the root of a standard Java web application. All contents except the WEB-INF directory are later served as static content. (Of course, it can contain dynamic content too, like JSPs, but this is not the focus here.)

The special folder WEB-INF contains all necessary information for the dynamic server part of your application. The web.xml is the server side configuration file. If you take a look inside you will notice the definition of the so called greetServlet with two entries. One specifies the servlet class as com.test.server.GreetingServiceImpl and the other binds the servlet to the context specific URL path /smartgwttest/greet.

Keep in mind that the server part is completely optional. You can implement the client side with GWT and SmartGWT and develop the server part with any technology like ASP.NET, Ruby, Python or whatever fits to your needs. But if you choose Java you can benefit from a consistent development experience, not only because both GWT and – to a greater extent – SmartGWT offer additional server side functionality.

The WEB-INF/lib directory also contains all JARs which are needed to run the server part. The compiled server classes are placed in WEB-INF/classes.

The GWT host page is a static HTML file in the war’s root: SmartGwtTest.html with the related style sheet file SmartGwtTest.css.

Execute your Application in Hosted Mode

You can build and execute your project in hosted mode with the Ant target hosted:

~/dev/java/GWT/smartgwttest$ ant hosted

The Java compilation step places the *.class files at war/WEB-INF/classes. The GWT compiler/interpreter creates the directory war/smartgwttest for its output. (These directories are good candidates for your source control ignore list.)

After compilation two windows pop up. The first one is the GWT shell with the integrated Jetty web application server. The second one is a modified web browser (running IE on windows and Firefox on Linux respectively) that loads the static hosted page (the URL is http://localhost:8888/SmartGwtTest.html) which acts as a starting point for the GWT application.

The starter application contains a text field and a button. After pressing the button the text box contents are sent to the servlet and the response is showed in a pop up window.

The client’s GUI code is located in the SmartGwtTest class in method onModuleLoad(). The onModuleLoad() method is the GWT analogon to Java’s main() method. We won’t stay long here with the standard GWT GUI code because we are interested in SmartGWT. But first we will …

Import the project into Eclipse

Start your Eclipse, right click in the package explorer and choose Import…

Then in the import dialog select Existing Projects into Workspace under theGeneral node and click the Next button.

Under Select root directory browse to your recently created project. UnderProjects select SmartGwtTest and click Finish.

Now your Package Explorer should look like:

Right click SmartGwtTest.launch and choose Run as … / SmartGwtTest to launch your GWT application inside Eclipse.

Now you are able to debug the client GWT code as well as the server side code.

Place breakpoints at the click handler for the Send button and the greetServerMethod() of GreetingServiceImpl.

Close the GWT shell window and restart the application in debug mode (Debug as …).

When you click the button you are able to step through the client code like any other Java program. I think, this is one of GWT’s most powerful features.