Fun with GWT and Web 2.0

Simple and easy GWT tutorial and overview.

Introduction & Overview
I am mainly a server-side Java and C++ developer. I don’t have much time to loose with the View of the projects. But recently I had to make some Web User Interface with Ajax. I had some complicated and not functional JavaScript code which I had to debug. It is a really awful task for me. And then I just make a research for some useful Ajax tools and libs.
Why I like GWT. Of course because I can write java code and don’t bother with JavaScript. Also things that I find useful are in their first page : dynamic, reusable UI , simple RPC, browser history management, simple debugging, browser compatibility and so on. And of course it is released under Apache 2.0 license so you can use it in commercial products.

To understand this tutorial you need to have basic java and web knowledge.
Also it will be useful to have this installed:
1. Java SDK http://java.sun.com/javase/downloads/index.jsp
2. GWT http://code.google.com/webtoolkit/
3. Eclipse http://www.eclipse.org/

Hello World
At first glance GWT looks a little confusing, but it is far from the truth. In the matters of fact GWT is one of the simplest and easiest ways of making complex AJAX interfaces. Let us give a try. I will use eclipse for my tutorial projects.
You can create demo project in eclipse workspace using projectCreator tool:
projectCreator -eclipse TutorialProject
Then just call
applicationCreator -eclipse TutorialProject com.mycompany.client.MyApplication

Full description about how to get started with GWT you can find on http://code.google.com/webtoolkit/gettingstarted.html
After running this command you should have your project with some sources in it.
Now you are ready to start. First you must have MyApplication-compile and MyApplication-shell scripts. Run MyApplication-compile and you will see your application in hosted mode. You must see something like this.

Also you must have something like this code:
package com.mycompany.client;

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

/**
* Entry point classes define onModuleLoad().
*/
public class MyApplication implements EntryPoint {

/**
* This is the entry point method.
*/
public void onModuleLoad() {
final Button button = new Button("Click me");
final Label label = new Label();

button.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
if (label.getText().equals(""))
label.setText("Hello World!");
else
label.setText("");
}
});

// Assume that the host HTML has elements defined whose
// IDs are "slot1", "slot2". In a real app, you probably would not want
// to hard-code IDs. Instead, you could, for example, search for all
// elements with a particular CSS class and replace them with widgets.
//
RootPanel.get("slot1").add(button);
RootPanel.get("slot2").add(label);
}
}


This is the code for our simple Hello World application that GWT create for us. And a html file MyApplication.html.

Let us change some stuff.
First make MyApplication.html look like this.



Then lets change our MyApplication:

public class MyApplication implements EntryPoint {

public void onModuleLoad() {
}
}
Now add a panel. Let it be VerticalPanel.
VerticalPanel verticalPanel = new VerticalPanel();

public void onModuleLoad() {

RootPanel.get().add(verticalPanel);
}
To this panel we can add any component we like. I choose to give a try to the menus.
First we need our horizontal base menu to which we will attach our menus.
MenuBar ourMenu = new MenuBar(true);
MenuBar baseMenu = new MenuBar();
After this we need our menu and some MenuItems and a command that will be run when somebody click on our menu.
Command cmd = new Command() {
public void execute() {
Window.alert("You selected a menu item!");
}
};
MenuItem firstMenuItem = new MenuItem("First", cmd);
MenuItem secondMenuItem = new MenuItem("Second", cmd);
MenuItem thirdMenuItem = new MenuItem("Third", cmd);

ourMenu.addItem(firstMenuItem);
ourMenu.addItem(secondMenuItem);
ourMenu.addItem(thirdMenuItem);
baseMenu.addItem("Our Menu", ourMenu);
Then we attach our menu to our panel and voila.
baseMenu.addItem("Our Menu", ourMenu);
Just hit F5 on the hosted browser window and you will see your menu. If you want your menu to be colorful and sweet you must use some CSS. Open MyApplication.html and change style tag to look like:


Now you must have nice colorful menu to have fun with.




I am not pro with CSS so I recommend you to learn from somewhere else how to make it look better.
This will be for today. Expect tomorrow to learn how to use some other fun components. ;)