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 the General node and click the Next button.

Under Select root directory browse to your recently created project. Under Projects 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.

And you can debug the server code in the same session.

In the second part we dive directly into the world of SmartGWT …

The solution is to configure the floating point processor in your DPR file:

// ...
begin
  Set8087CW($133F); // <--

  Application.Initialize;
  Application.CreateForm(TForm1, Form1);
  Application.Run;
end.

But I found no method to set the other icon files. I searched the SmartGWT and SmartClient APIs and the Forum. I found one post which mentioned a file name convention for icon files.  Luckily the GWT console logs all HTTP requests, so with that help it is easy to figure out the convention.

If the base icon file name is Plus.png then SmartGWT looks for Plus_Disabled.png for the disabled state icon and Plus_Over.png for the mouse over state in the same directory.

The Google plugin adds a new “Web Application Project” wizard. This wizard creates nearly the same procject structure and hello world application than the new webAppCreator script. The only difference I’ve seen so far is the absence of the Ant build file that is included in the script result. But it is possible to run the script over the wizard created project with the -ignore option so that existing files remain untouched.

The webAppCreator script creates also a launch configuration. But this is only usefull running in  an Eclipse without the Google plugin. With the plugin installed there is a “Run as Web application” entry in the context menu. In the extended run configuration dialog there are options for changing the Jetty port, output style and log level.

GWT run configuration (main)

GWT run configuration (GWT)

One way to pass parameters to a GWT application is to embed a JavaScript hash map directly in the host page and define each parameter as a key-value-pair in that map. Then from Java you can easily access this map with the

com.google.gwt.i18n.client.Dictionary

class.

Accessing GET parameters

Another alternative is to pass GET parameters in the url’s query string. Here is a description how to access the GET parameters from Java code with an example implementation included.

Coming from terrible JSF 1.0 implementation Wicket was a facilitation. But there are still some drawbacks:

• Wicket lacks of a set of production ready, good looking widget-set. In my company there is no separate web designer. So a good default design would be a great help.
• Unlike JSF creating new component or adjusting existing ones is easy and in an object-oriented way. But often it seems a little bit too overcomplicated.
• Doing Ajax with Wicket is easy. You add an AjaxEventBehavior to a component (e.g. onblur to a text field) and you only have to implement the onEvent() callback method. When the browser fires the registered event the onEvent() method on the server is called and the response can update some components on the page. You don’t have to write a single line of JavaScript code. But at the downside for every little user interface action like highlighting the row after a click there is a unnessacary server roundtrip. Just because you have to implement all event handlers on the server side.
• All Ajax events for one client are processed sequentially. E.g. we had a page with a panel that required a long intialisation phase on the server. But the page’s main functionality should be present immediatly. So we used a LazyLoadPanel. At first view all worked fine. The main components appeared and the LazyLoadPanel was in a deferred state until finishing the initialisation. But then we added some other Ajax functionality to the main components and soon we realized that they don’t work after the LazyLoadPanel had finished its Ajax call. So the whole LazyLoadPanel approach seems to be unusable for our purposes.
• By the time we supplement the Wicket application with some JavaScript parts. For the Wicket integration we used the HeaderContributor class. With the TextTemplateHeaderContributor you even can generate the JavaScript code from a template. But the application as a whole became more and more cluttered and diffucult to understand.

As we looked for an alternative we encounterd a lot of frameworks like ZK, Flex, Silverlight, ExtJS, qooxdoo, GWT, Tibco General Interface, IT Mill. We all thought that the RIA approach is the future in web development and that the most UI specific code should be performed on the client side. So the server side RIA solution like ZK and IT Mill were dropped.

Our main target is the customers intranet and our most customers have a conservative IT infrastructure and we cannot demand to install any browser plugin. So the plugin based solutions like Silverlight and Flex were also dropped.

Most of my co-workers are high skilled in Java technology but have few experience with web development and JavaScript. So most of us thought that GWT with its Java-to-JavaScript-compiler fits naturally in our development process. But a large set of good looking GUI widgets is not GWT’s primary goal. We looked at ExtJS. These UI components are great. We saw, that there is a GWT version of ExtJS called ExtGWT. Was that the solution? A Java programming model with our well known Java tools and IDE and the browser as the target platform. And with ExtGWT a set of out of the box good looking widgets.

After some additional research we found another GWT widget library: SmartGWT. Its widget set is comparable to that one from ExtGWT. But SmartGWT has the optional Enterprise Edition containing some interesting server side components (with integration points to Hibernate and Spring) and a visual GUI builder. We don’t know so far, if we need these additional functionality but it is good to know we have this option. So we give it a try and I have the pleasure to develop the first little project with GWT and SmartGWT.

In the next articles I will describe my experiences while I am discovering these new technologies.