GWT 1.7

GWT 1.7 is out, if you work with the google plugin for eclipse you can just upgrade it from “Help<Software Updates”. If not you can download it from http://code.google.com/webtoolkit/download.html.

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

GWT Theme generator

came across this cool GWT theme creator today. really easy way to get rid of the standard GWT look (colors mostly).

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’/>

a day of breaking

Seems like everything today is breaking around me.

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 :D)

SmartGWT EE

SmartGWT Enterprise Edition is released. Read more about it here or test some examples in the showcase.

GWT 1.6 RC out

As the title say’s there is a new version of GWT out. You can find the Announcement here: Announcement.

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.

Changing SmartGWT theme

smart gwt now has 5 themes. since version 1.0b2 all themes (apart from the default) are located in a seperate .tar file, smartgwt-skins.tar.
The themes to chose from are:

• 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:

Upgrading and the mess it brings

Today i tried to update my GWT version to 1.6 m2 (a beta version), seems like this was not such a great plan. Cypal Studio doesn’t support that version yet. yeah, I should start by looking that up and not finding it out half way in.
After compiling I saw my loginbox pop up and I thought all was well. So I started to login, and this is where the mess started. The new version broke my RPC call’s. Thinking it would not be easy to fix that (well the fix was easy as mostly but finding out how to do it was not) I went back to the ‘old’ GWT version (1.5.3) and try to login again. But apparently running the project under the new GWT 1.6 changed some thing in my project files. Still got runtime error’s on the RPC call’s. Knowing not so much about the way those calls worked (the where copied from the gwt-ext project) it took me quite a long time to figure out what was going wrong. By the end of the day I finally noticed the 3 lines missing from tomcat’s web.xml file. I added them again and I was back @ the point I started this morning a gwt1.5.3 project :).
Ill just wait till Cypal studio and GWT bring out there final new versions.

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.

SmartGWT Layout

From the SmartGWT javadoc of Canvas:

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.

about SmartGWT, GWT

GWT

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)