25/04/2009
GWT and SmartGWT Quickstart (Part 1)
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 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 …
Sanjiv Jivan said,
25/04/2009 at 21:30
Hi Vanje, Thanks for the excellent tutorial. I’ve added a link to this in the SmartGWT Tutorials Wiki page.
Nitin Sawant said,
26/04/2009 at 07:09
I’m unable to download gwt plugin for eclips,pls help
vanje said,
26/04/2009 at 10:51
Hi Sanjiv, I’m pleased about your comment and thanks for your hard work on SmartGWT.
Part 2 is on the way
vanje said,
26/04/2009 at 10:58
Hi Nitin,
the easiest way to install the Google Eclipse Plugin is to use the Eclipse update mechanism.
Here ( http://code.google.com/eclipse/docs/install-eclipse-3.4.html ) you can find a detailed step-by-step installation guide.
Clem said,
11/08/2009 at 11:40
Thank you very much for this tutorial, it was helpful BIG TIME!! Thanx again!
Yaroukh said,
05/09/2009 at 17:55
PLZ what do I need to use SmartGWT in an existing GWT project?
Yaroukh said,
05/09/2009 at 18:22
I have kinda moved ahead. Now I see those little crosses where images should go.
[WARN] 404 – GET /sc/skins/Enterprise/images/blank.gif (127.0.0.1) 1422 bytes
vanje said,
05/09/2009 at 20:18
Hi Yaroukh,
in your HTML hostpage you shoud set the JavaScript variable isomorphicDir. Consider you named GWT module “myapp”:
<head>
...
<script type="text/javascript" language="javascript" >
var isomorphicDir = "myapp/sc/";
</script>
...
</head>
Then SmartGWT is able to find its static ressources.
The module name corresponds to the rename-to property in your GWT XML module definition file.
<module rename-to="myapp">
...
</module>
Yaroukh said,
05/09/2009 at 20:22
I have tried that already. (I’ve also put that before nocache.js as adviced elsewhere.) The variable gets ignored. The request still begins with “/sc/”.
I have also realized I need to localize the widget so I am already trying with FlexTable again.
Thanks anyways Vanje
Yaroukh said,
05/09/2009 at 20:30
My guess is that could have something to do with fact that I added the smartgwt into an existing GWT project. I mean I only added the reference into myapp.gwt.xml and into the project classpaths as external JAR. So the widget was visible but without skin. I guess I missed some more settings elsewhere.
(I’m saying that just to hint that this is probably not a bug, rather improperly deployed smartgwt.)
vanje said,
05/09/2009 at 20:53
Hm, you mentioned all the settings I know.
Setting isomorphicDir in host page.
Inheriting SmartGWT module in myapp module XML.
Adding smartgwt.jar and smartgwt-skins.jar to classpath.
I have several running applications with this settings.
Which GWT version do you use? The isomorphicDir trick requires GWT 1.6 or later.
Localization: The SmartGWT components support several build in languages out of the box according to the actual locale. For your own messages you can use the GWT standard localization mechanism.
Yaroukh said,
05/09/2009 at 21:02
Oh ****, I did not include the skins-package.
The requested URLs are bad anyways, but I’m gonna give it another shot right away…
Yaroukh said,
05/09/2009 at 21:20
Nice!
It was all caused by the missing skin-package. Once I included it the app does not ignore the variable anymore.
Now I only need to find out how to add the widgets properly.
Thank you for your patience, Vanje!