Setting up SmartGWT

A small guide in setting up eclipse to program SmartGWT and make a small first project.

Lets get downloading

First we are gone need to get some downloads going and install them:

• we are gone program in eclipse so first get eclipse. We will be needing Web Tools Platform (WTP) Project (you can get it here: http://www.eclipse.org/webtools/).
• if we want to use SmartGWT we need GWT (latest version @ 5/03/2009 is 1.5). Find the one for your OS here: http://code.google.com/webtoolkit/download.html. put the files somewhere on you PC where you can find it back and doesn’t have to be replaced.
• To make working with GWT project’s easier we will install the Cypal studio for GWT plugin (you can find it here: http://www.cypal.in/studio). This plugin will help us create compile and debug the gwt project. Extracting the Cypal file to your Eclipse directory places files in the features and plugins directories.

Small configuration

Now Cypal will need the location of the gwt files we got. So start up eclipse and go to the preferences screen (window=>preferences). In the left menu you should see a Cypal studio entry. There you need to set the GWT Home, browse to your GWT map. Now we are ready to start or first project.

Start a project

Start a new Dynamic Web Project. For configurations we will first need to set Dynamic Web Module version to 2.4 (2.5 does not work for cypal studio) and then select cypal studio for gwt under configuration. Set name and location for your project. Next you have a chance to change directory (created by cypal studio) names, default is fine. Finish. If all went right cypal Will create a bunch of files and dirs for you, the project GWT project is created.

Now if we want the project to do something, we need to add a new module. click new=>Other and there you find cypal studio map. select GWT module.
The project should now contain a .html file and a .java file (with the module name you have chosen). You can have a look at the html file created, it looks nice but it will only be needed to load the javascript in. The java file on the other hand we need to be filled with some functionality. For example we can place this code in the onModuleLoad() method:

String name = “your name here”;
Label label = new Label(“Hello, ” + name);
RootPanel.get().add(label);

also add the required imports on top:

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;

all code in onModuleLoad will (as the name says) run when the module is loaded so when we load the page.

Now lets cross or fingers and try to run this. Go to run configurations (Run=>Run configurations) select GWT hosted mode application and click new (small icon in the top-left side of the screen). Select the project you want to run and click Run. hopefully you now see what you expected being a line of text saying “hello, your name” .

edit: Also see this screen cast for creating and running a new module.

To SmartGWT

GWT is nice, makes you compile java to java script. But what if you want to see grids, calendars, windows, etc. Lucky for you there are some widget libraries containing all those things. We will use SmartGWT (some other examples are: gwt-ext, ext-gwt, MyGWT, etc.). Go to http://code.google.com/p/smartgwt/ (latest released version is SmartGWT 1.0b2) and get the library, trow it at a nice place on you pc and go back to eclipse.
Right click the project we just made build path => Configure Build Path there click add external jar and browse to the SmartGwt.jar. also add a following line to chosenfilename.gwt.xml:

<!– Inherit the SmartGWT Toolkit library configuration. –>
<inherits name=”com.smartgwt.SmartGwt”/>

Now the project is ready to use this library. Go back to the .java file and change the onModuleLoad code to this:

IButton button = new IButton(“say hello”);
button.addClickHandler(new ClickHandler(){

public void onClick(ClickEvent event) {
SC.say(“oh, Hi there.”);
}
});
button.draw();

import the following on top:

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

and run.

Congrats on you first SmartGWT application!

Want to try more?

If you want to try other widgets you can go to http://www.smartclient.com/smartgwt/showcase/ and have a look at some examples and there source code.

Advertisement