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.

Related Whitepaper:

Functional Programming in Java: Harnessing the Power of Java 8 Lambda Expressions

Get ready to program in a whole new way!

Functional Programming in Java will help you quickly get on top of the new, essential Java 8 language features and the functional style that will change and improve your code. This short, targeted book will help you make the paradigm shift from the old imperative way to a less error-prone, more elegant, and concise coding style that’s also a breeze to parallelize. You’ll explore the syntax and semantics of lambda expressions, method and constructor references, and functional interfaces. You’ll design and write applications better using the new standards in Java 8 and the JDK.

Get it Now!  

Leave a Reply


three × = 3



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use
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.

Sign up for our Newsletter

15,153 insiders are already enjoying weekly updates and complimentary whitepapers! Join them now to gain exclusive access to the latest news in the Java world, as well as insights about Android, Scala, Groovy and other related technologies.

As an extra bonus, by joining you will get our brand new e-books, published by Java Code Geeks and their JCG partners for your reading pleasure! Enter your info and stay on top of things,

  • Fresh trends
  • Cases and examples
  • Research and insights
  • Two complimentary e-books