Create a simple HelloWorld SmartGWT project with Eclipse Kepler

by

This post shows you how to create a simple project in Eclipse using SmartGWT.
PS If you have trouble viewing the images on this post, you are likely behind a firewall which blocks Google Drive content. You can download this page’s PDF file.

This tutorial assume that you are using the following

* Eclipse EE

Install GWT Eclipse Plugin by following instruction in http://www.gwtproject.org/download.html

I used the install site: http://dl.google.com/eclipse/plug

Create a New Web Application Project:

Select

And select “New Web Application Project …”

After creating the default Google Web Application Project, configure it for using SmartGWT

Select to the Smart GWT install directory. To download Smart GWT, go to   http://code.google.com/p/smartgwt/

After configuring this project to be SmartGwt, you should see SmartGWT jars got added to the project (smartgwt-skins.jar and smartgwt.jar).

/testSmartGwt/src/com/shallwelearn/TestSmartGwt.gwt.xml

<?xml version=”1.0″ encoding=”UTF-8″?>
<!–
  When updating your version of GWT, you should also update this DTD reference,
  so that your app can take advantage of the latest GWT module capabilities.
–>
<!DOCTYPE module PUBLIC “-//Google Inc.//DTD Google Web Toolkit 2.5.1//EN”
  “http://google-web-toolkit.googlecode.com/svn/tags/2.5.1/distro-source/core/src/gwt-module.dtd”>
<module rename-to=’testsmartgwt’>
<!– Inherit the core Web Toolkit stuff.                        –>
<inherits name=’com.google.gwt.user.User’/>

<!– Inherit the default GWT style sheet.  You can change       –>
<!– the theme of your GWT application by uncommenting          –>
<!– any one of the following lines.                            –>
<inherits name=’com.google.gwt.user.theme.clean.Clean’/>
<inherits name=”com.smartgwt.SmartGwt”/>
  <!– Specify the app entry point class.                         –>
<entry-point class=’com.shallwelearn.client.TestSmartGwt’/>
<!– Specify the paths for translatable code                    –>
<source path=’client’/>
<source path=’shared’/>
</module>

Next, we need to change the code to use SmartGWT API, instead of the GWT API. Even though you could mix SmartGWT and GWT to an extent, it’s receommended by SmartGWT developers not to do so. For reasons, please go to SmartGWT forum http://forums.smartclient.com/ , and search for “mixing SmartGWT and GWT”, and you will get an earful.

/testSmartGwt/war/WEB-INF/web.xml

<?xml version=”1.0″ encoding=”UTF-8″?>
<web-app xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xsi:schemaLocation=”http://java.sun.com/xml/ns/javaee
              http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd”
version=”2.5″
xmlns=”http://java.sun.com/xml/ns/javaee”>

<!– Servlets –>
<servlet>
<servlet-name>greetServlet</servlet-name>
<servlet-class>com.shallwelearn.server.GreetingServiceImpl</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>greetServlet</servlet-name>
<url-pattern>/testsmartgwt/greet</url-pattern>
</servlet-mapping>

<!– Default page to serve –>
<welcome-file-list>
<welcome-file>TestSmartGwt.html</welcome-file>
</welcome-file-list>
</web-app>

/testSmartGwt/src/com/shallwelearn/client/TestSmartGwt.java

package com.shallwelearn.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.util.SC;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class TestSmartGwt implements EntryPoint {

/**
         * This is the entry point method.
         */
public void onModuleLoad() {
IButton button = new IButton(“Hello World”);


button.addClickHandler(new ClickHandler() {

                        public void onClick(ClickEvent event) {
SC.say(“Hello World from SmartGWT”);

         }
});

button.draw();

}

}

To Build this project. Right-click on testSmartGwt project and select Google->GWT Compile

The GWT Compile dialog should look as followed. Click “Compile” to compile Java code to JavaScript.

The trace of the GWT compile. If all goes well, it would say Succeeded.

To run on Jetty server, which comes bundled in Eclipse EE. Right-click on

If you see error such as “Development Mode requires the Google Web Toolkit Developer Plugin” (Firefox error shown below), just follow the instruction to install the GWT plugin.

Finally, to terminate the Jetty server, click the red square.