This patch does not have a lot of changes, just some bug fixes and support for Explorer 8, Firefox 3.5 and Safari 4.

http://gwt-theme-generator.appspot.com/

to install add the jar to your classpath and add following line to your *module*.gwt.xml file:

<inherits name=’com.sensei.themes.mytheme.Mytheme’/>

This morning I took the tram as usual to get to the train station and then take the bus from there to my work. but suddenly half way from where I live to the station the tram stops moving. It takes the driver 5 mins and then we are moving again, but a few mins later it stops again, now we have to get out and walk the last part to the station (I missed my bus ). While I was waiting for the next bus to arrive my dad calls me to ask if I know a way to fix a external hard drive that has broken down.

Then as I’m on my work I try to start up my computer. But guess what, it does not want to start . Brought it to IT and they had to replace my power supply unit (thanks for super fast fix btw).
Then around noon suddenly the power in the entire building fails leaving us in the dark for 10 minutes (well there was light coming in true the window but my screen was dark).

Well i hope i don’t have to edit this post today (meaning something else has failed )

This release will bring:

Faster compile times. Lets hope its allot faster. (fun Twitter status about this:  I have realised GWT makes me fat! Lots of 1-2 minute compiles gives just enough time to feel peckish and need a snack.)

Switch from GWTShell to HostedMode. You can find how to get rid of the following warning here.

And some others. full list is here.

I will wait to go to GWT1.6 till its supported by Cypal Studio.

• enterprise (default) (from version 1.0b2)
• blackops
• treefrog
• silverwave
• fleet (from version 2.0b3)

If you want to change the theme you need to add smartgwt-skins.tar first once this is done you can change the theme by adding one of the folloing lines to the projectname.gwt.xml file (where you added the smartgwt inherits).

<inherits name=”com.smartclient.theme.silverwave.SilverWave”/>
<inherits name=”com.smartclient.theme.blackops.BlackOps”/>
<inherits name=”com.smartclient.theme.treefrog.TreeFrog”/>
<inherits name=”com.smartclient.theme.fleet.Fleet”/>

Took some screen of the showcase in every skin:

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.

Canvas is the base abstraction for cross-browser DHTML drawing.  All DHTML widgets inherit from the Canvas class.

In smartGWT all widgets extend Canvas. A canvas is used to put elements in(addMember), so you can a new Canvas or Widget to a canvas. In a Canvas you can every item can have a position. If you for instance want to get something at the center of a Canvas you can do Widget.centerInPage();. if you want to create an item that fills himself in the canvas you can do Widget.setWidth100() and Widget.setHeigh100(). For 1 element this is a good way to do it. But if you like 2 widgets who each fill 1 half of the screen its not that easy anymore. therefor SmartGWT has some extension for Canvas, the main once are:

• Layout
• HLayout
• VLayout

HLayout and VLayout align the elements against the vertical or horizontal axis. So if you add 2 widgets in a VLayout these 2 elements get under each other in the VLayout (The widget first added on top and the other one under it. If not stated otherwise). In the HLayout the elements are placed from left to right. You can put these layouts into eachother to achieve all kinds of layouts. So if you want a box with under that 2 boxes next to each other you put the box on top in a VLayout and a together with a HLayout that contains the other 2 boxes. you can look at have a look at the showcase to see an example with code: link.

Now for the size of the elements there are also some option. First you can do (as stated before) .setWidth100(); and .setHeight100(); these 2 make the component fill the canvas it is in. You can also make make a component fill a certain % of the total Canvas by doing .setHeight(“70%”);.  You can also give a component a fixed width or height, .setWidth(100); for example gives the element a width of 100px. This size doesn’t change if you re size the Canvas it is in (by resizing the browser screen for example). As last option you can set the width of height to .setWigth(“*”); witch is also the default value. This makes the  component fill the rest of the canvas. Again you can find an example here.

GWT is a way to create java-script out of java code. The java code created is optimized and cross-browser, so you don’t have to think about various fixes for different browsers.
Now why would you like to create java-script code from java?
By doing this it creates the option to debug that java code in your favorite java editor (On my training period I will be using eclipse for it). So you have the option to add break points etc to you java code. The java-script GWT creates is a bit harder to debug, it looks a bit like this.

SmartGWT

SmartGWT is a library that brings widgets useable in GWT based on SmartClient. These widgets go from simple windows to advanced data grids to list your data. It also gives a good way to manage your data with data sources etc. You can find allot examples in the showcase.
GWT licensed under the commercial friendly LGPL terms which make it free to use.
The negative point about SmartGWT is that is a very new library (released in November 2008. release note)