Getting started with GWT : Create your first GWT application in Eclipse 3.4

To my mind GWT is going to take the lead among the web application development tools. So this is the high time to start learning about GWT. Here I describe you how to create your first GWT application in Eclipse 3.4 (Ganymede).

If you have not installed Google plugin and SDK for eclipse please go to this page and follow the instructions.

Create your project
Select File-> New-> Web Application project. Enter "FirstGwtApp" for your project name and "com.ratul.FirstGwtApp" for the package name.



Create GWT entry point

Now you have to create an Entry point class which is similar to the main method in Java.
Right click on the "com.ratul.FirstGwtApp.client" and select New-> Class. Enter "HelloWorld" as the name of the class.



This class must implement the interface "com.google.gwt.core.client.EntryPoint".
So click on the Add button and write "entrypoint" in the choose interface text field.
Select the matching item.



Here is the code of the HelloWorld class

package com.ratul.FirstGwtApp.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.TextBox;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {

@Override
public void onModuleLoad() {
Label label = new Label("Enter your name:");
final TextBox textBox = new TextBox();
Button button = new Button("Click Here");
button.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
Window.alert("Hello "+ textBox.getText());
}
});

RootPanel.get().add(label);
RootPanel.get().add(textBox);
RootPanel.get().add(button);
}
}


Now change the FirstGwtApp.gwt.xml in package com.ratul.FirstGwtApp to set the HelloWorld class as the entry point class of your application.



Create a Start HTML page

In the war folder you will find a file, named FirstGwtApp.html. Between the body tag write the following code

<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabindex="-1" style="border: 0pt none ; position: absolute; width: 0pt; height: 0pt;"></iframe>

<h1>Welcome to my first GWT Application</h1>




Configure the web.xml

Go to war-> WEB-INF folder and there you will find a web.xml file. The Google Plug-in created this configuration file and placed a reference to a servlet.
Set the FirstGwtApp.html as the welcome file of your application.



You are only one step away from running your first GWT application.

Run GWT application

To run your application right-click the project and select Run As -> "Web application".

The result will be like this.



Enter your name in the text field and click on the button. Your name will be appeared in the alert window :).


21 comments:

Maksud June 8, 2009 at 9:35 PM  

Wow. Nice tutorial. It will be very helpful.

Anonymous June 10, 2009 at 5:00 PM  

Did you use GWT 1.6 to make this tutorial? If so, that's helpful... if not, not so much.

Shams Zawoad Ratul June 10, 2009 at 7:45 PM  

Thanks for your comment Reechard. Yes i have used GWT 1.6 to make this tutorial. So i think you will find this helpful...

Anonymous September 3, 2009 at 12:29 AM  

data entry indiaWith a number of forms passing through an office everyday, it can be time consuming and tiring to take care of all the form processing. Instead of relying on human help, you can quickly accomplish your task with forms processing automation. Pages and pages of written or computerized data and are converted into an electronic form that is convenient for use with forms processing.

Sunil Kamat October 16, 2009 at 11:48 AM  

thank you

Rashed December 20, 2009 at 10:56 PM  

shuru korlam... aro tutorial dish...

Shams Zawoad Ratul December 21, 2009 at 6:29 AM  

Feed nie rakhish. inshallah aro pabi..

VeggieBurger February 14, 2010 at 7:49 AM  

I had some trouble finding a nice tutorial, sor far this one was the best, thanks !

Shams Zawoad Ratul February 14, 2010 at 6:12 PM  

Hope my other tutorials will help you in future.

Offshore software development India August 21, 2010 at 10:04 PM  

Nice post and very helpful for fresh programmer. Article describes the best tips for software development. Please continue writing....

Regards:-Offshore software development company

Shams Zawoad Ratul August 22, 2010 at 6:53 PM  

Thanks

Anonymous September 28, 2010 at 7:58 AM  

if it is possible to have the source code of this tutorial, it would be very helpful to me, because actually i find that some parts are missing in this tutorial. I followed all the steps mentioned above and the running result was not the same as you show... Anyone has an answer for me please

Shams Zawoad Ratul September 28, 2010 at 8:43 PM  

Source code is given in the tutorial. There is no more..

Hasan October 28, 2010 at 4:07 PM  

h1v??? I think it should be h1

Shams Zawoad Ratul October 28, 2010 at 6:53 PM  

@Hasan : Can't understand your question.

Anonymous April 22, 2011 at 2:55 AM  

I think what Hasan is pointing to is line 4 of the html code. Should be h1, not h1v

Thanks for the tutorial - it's the best I have seen and used.

Shams Zawoad Ratul April 23, 2011 at 7:40 PM  

Thanks for pointing out the errors..

Anonymous October 18, 2011 at 2:29 AM  

Useful site. It was very great stuff. Thanks for sharing it.
web design company

Isaac Gonzalez March 19, 2013 at 10:38 PM  

It can be time intensive and exhausting to take care of all the type handling.you achieve your career as soon as possible with types handling automated.

anushka sweety May 20, 2013 at 4:27 AM  

Hi, thank you very much for help. I am going to test that in the near future. Cheers



Form Processing

Anonymous October 17, 2013 at 10:14 AM  

Can you give me an example that uses Ext GXT Grid and grid-data is coming from two or more table.

Total Pageviews

Tags

Twitter Updates
    follow me on Twitter

    Followers