SmartGWT EE

March 25, 2009

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


Changing SmartGWT theme

March 19, 2009

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:


Setting up SmartGWT

March 5, 2009

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.

cypal-settings

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” :).

run-configurations

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.

smartgwt-result

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

February 27, 2009

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:

layoutHLayout 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.

VLayout

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

February 23, 2009

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)


Follow

Get every new post delivered to your Inbox.