GwtDene1.java

After clicking finish Eclipse creates a nice GWT app project. You can run it directly by clicking "Run" button in Eclipse. It is an awesome application that has both server and client. One problem-maybe it does not seem problem from another perspective:)- is that it is so advanced. I needed a "Hello World" project at the beginning.
To create a Hello World project let's delete server and shared packages and their content and content of client package. We are gonna write from the start.
Create a class in client package and give it a name. For me its "GwtDene1". Its content is like this:

package com.hakan.GwtDene1.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
public class GwtDene1 implements EntryPoint {
	@Override
	public void onModuleLoad() {
		Label label = new Label("Hello GWT !!!");
		Button button = new Button("Say something");
		button.addClickHandler(new ClickHandler() {
			@Override
			public void onClick(ClickEvent event) {
				Window.alert("Hello, again");
			}
		});
		RootPanel.get().add(label);
		RootPanel.get().add(button);
	}
}

GwtDene1.gwt.xml

EntryPoint is a class which consists of the method to start application. This is similar to Java main method. EntryPoint is defined in gwt.xml. My EntryPoint class is "GwtDene1" then gwt.xml will be like this:

</code>

GwtDene1.html

We are needed to edit the html file which is under war folder. This is actually the page we will see after opening the site. The output of our GWT app's javascript code is put in this html. The important part is showing the js in this html file correctly.

You need to be careful about js file path. It is case sensitive!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">




My First GWT application




	
	
	My First GWT application

</code>

GwtDene1.css

This is optional. You can change the style.

Check this class names out!

.gwt-Label {

color: #DF0101;

font: normal 12px tahoma, arial, helvetica, sans-serif;

border: 1px solid black;

}

.gwt-Button {

font-size: 12px;

font-family: arial, sans-serif;

}

</code>

web.xml

This is the operation for identifying GwtDene1.html as welcome file of the app to the servlet.




  
  
  
  
    GwtDene1.html

</code>

After clicking on "Run" on eclipse, there appears an address like this one below. Open this in Chrome. It will want to install a GWT extension. Let it go.

The coolest part is that i dont need to run the application again and again after editing the code. The browser is in a relationship with the source code. after saving the changes in eclipse, you can refresh the browser tab and see the changes. Cool!

GWT Designer setup

Eclipse -> Install New Software ->

http://dl.google.com/eclipse/inst/d2gwt/latest/3.7

Here is an screeshot from GWT Designer.

Complete code can be downloaded from here.

http://dl.dropbox.com/u/3600380/Projeler/Gwt/GwtDene1.zip