Getting started with GWT

GWT short for Google Web Development Kit lets programmers to develop Ajax web applications with java. Java codes are converted in to JavaScript and html codes by the GWT compiler. GWT applications are called modules and modules are described using a xml file, assuming the module name as “mymodule” name of the xml file would be “mymodule.gwt.xml”. There is atleast one entry point for a module and it is same as the main method in a java program. GWT program code executes with in a HTML file and CSS file is used for alternating the look and feel.

Now that we are familiarized bit with terms and stuff we can move on to writing our own GWT application.

Step 1: Installing GWT plugin for eclipse

If you have already installed eclipse all you have to do is go to “Help” menu, under that “Install New Software” and give the URL as http://dl.google.com/eclipse/plugin/3.6 and click next and complete installation.

step 2: Creating a new project

Select File > New > Web Application Project. Enter the name “com.eviac.blog.helloworld” for the project name and package. By default it will select both “Use Google Web Toolkit” and “Use Google App Engine” as we only using Google Web Toolkit here you will have to deselect Google App Engine.

Now eclipse will create you a project with a package structure as shown below.

step 3: Creating the entry point

Inside the package com.eviac.blog.helloworld.client package create a java class named
HelloWorldGwt

package com.eviac.blog.helloworld.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 HelloWorldGwt implements EntryPoint {  
  
 @Override  
 public void onModuleLoad() {  
  final Label label = new Label("Hello World GWT !!!");  
  final Button button = new Button("Click Here");  
  button.addClickHandler(new ClickHandler() {  
   @Override  
   public void onClick(ClickEvent event) {  
    label.setVisible(false);  
    button.setText("welcome back again!");  
    Window.alert("Welcome to GWT");  
   }  
  });  
  
  RootPanel.get().add(label);  
  RootPanel.get().add(button);  
 }  
}  

Inside the package com.eviac.blog.helloworld create Com_eviac_blog_helloworld.gwt.xml file.

Com_eviac_blog_helloworld.gwt.xml

<?xml version="1.0" encoding="UTF-8"?>  
<module rename-to='com_eviac_blog_helloworld'>  
  <!-- Inherits Web Toolkit utilities.                        -->  
  <inherits name='com.google.gwt.user.User'/>  
  
  <inherits name='com.google.gwt.user.theme.standard.Standard'/>  
  
  <!-- Specify the app entry point class.                         -->  
  <entry-point class='com.eviac.blog.helloworld.client.HelloWorldGwt'/>  
</module>  

Step 3: Creating html page

Inside the folder war create Com_eviac_blog_helloworld.html file

Com_eviac_blog_helloworld.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  
<html>  
  <head>  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    <link type="text/css" rel="stylesheet" href="Com_eviac_blog_helloworld.css">  
    <title>Hello World GWT</title>  
    <script type="text/javascript" language="javascript" src="com_eviac_blog_helloworld/com_eviac_blog_helloworld.nocache.js"></script>  
  </head>  
  
  <body>  
  
    <!-- optional tag: add this if needs history support -->  
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>  
    <h1><center>Hello World GWT</center></h1>  
     
  </body>  
</html>  

Step 4: creating web.xml file

Inside the folder war/WEB-INF create a xml file called web.xml

web.xml

<?xml version="1.0" encoding="UTF-8"?>  
<!DOCTYPE web-app  
    PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"  
    "http://java.sun.com/dtd/web-app_2_3.dtd">  
<web-app>  
  
 <!-- Default page to serve -->  
 <welcome-file-list>  
  <welcome-file>Com_eviac_blog_helloworld.html</welcome-file>  
 </welcome-file-list>  
</web-app>  

Step 5: Creating css file

Inside war falder create a css file named Com_eviac_blog_helloworld.css

Com_eviac_blog_helloworld.css

h1 {  
  font-size: 2em;  
  font-weight: bold;  
  color: #6495ED;  
}  
  
.gwt-Label {  
 color: #0000FF;  
 font: normal 12px tahoma, arial, helvetica, sans-serif;  
 height:3.5em;  
 width: 10.7em;    
}  
  
.gwt-Button {  
 color: #0000FF;  
 height:3.5em;  
 width: 10.7em;  
 font-size: 12px;  
 font-family: arial, sans-serif;   
}  

Alright now we are done with coding steps but wait for it, one more step to go

Step 6: Running GWT Application

To run right click on the project select Run As->Web Application then it will bring up a new view “Development Mode” copy the url generated.

Install GWT plugin for your web browser using this link.

Now paste the url in the browser and you’ll see something like following and that’s it.

Now that you know how to build a basic GWT application you can improve it by adding more functionalities and changing the look and feel using css file.

Reference: Getting started with GWT from our JCG partner Pavithra Siriwardena at the EVIAC blog.

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

JPA Mini Book

Learn how to leverage the power of JPA in order to create robust and flexible Java applications. With this Mini Book, you will get introduced to JPA and smoothly transition to more advanced concepts.

JVM Troubleshooting Guide

The Java virtual machine is really the foundation of any Java EE platform. Learn how to master it with this advanced guide!

Given email address is already subscribed, thank you!
Oops. Something went wrong. Please try again later.
Please provide a valid email address.
Thank you, your sign-up request was successful! Please check your e-mail inbox.
Please complete the CAPTCHA.
Please fill in the required fields.

Leave a Reply


nine − = 1



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy | Contact
All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.
Do you want to know how to develop your skillset and become a ...
Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

Get ready to Rock!
You can download the complementary eBooks using the links below:
Close