First GWT Application

To build a GWT application we have four sections, in this last section is optional.

1) Module Descriptors: This section helps in configuration of GWT application. To configure we write the configuration file into XML

Syntax: name.gwt.xml

Here, "name" is the name of application. All configuration files are in project root directory.

2) UI design: It consists of HTML, CSS or Images which used to design GWT application. We can configured its location by using <public path = "location address" /> tag. We can find the configuration files in module configuration.

3) Client Side Code: In this section conversion of all the codes and business logic of application is converted into JavaScript using GWT compiler. We can find the location of resource using <source path = "path" /> tag. This code consists of Entry Point code which can be written without the parameter. When GWT application module is loaded then EntryPoint.onModuleLoad() method is called each time.

4) Server Side Code: In this section we can execute Server side code. If our application does not have any backend (server side script or database) then this section is optional.

CREATE APPLICATION:

Create simple web development project using GWT web development tool kit. To create application follows following steps:

File→New→Other

Now, a pop-up window will open from which select a wizard option.

Select Google Web Application Wizard and click on 'Next' button.

After clicking next button, a new wizard will open.

Now, provide project name and package name. Select the Use GWT under Google SDK's option and Uncheck Use Google App Engine as we are building a basic app only.

Click Finish Button.

After clicking finish button following directory is generated

Entry Point Class:

In this example, Class SampleWebApplication is known as the Entry Point for a GWT application. This file consists of many references to server-side code. This file required to be clean as it has many references.

There exist a pre-define method onModuleLoad(), which is the Entry Point of the program that gets executed on running the GWT Web Application.

This is very similar to public static void main (String args[]) method in a common java program.

Entry point class code

SampleWebApplication.java

package com.javatpoint.helloworld.client;
 import com.google.gwt.core.client.EntryPoint;
 /** * Entry point classes define onModuleLoad() */ 
public class SampleWebApplication implements EntryPoint {
 	/ * This is the entry point method. */ 
public void onModuleLoad() {
 // TODO
 } 
}

Deployment Descriptor

It is similar to web.xml in J2EE programming which is the deployment descriptor for Servlet based Java Web Application.

Now in web.xml, GWT creates servlets which is defined under Deployment Descriptor. Since we are creating a basic web-app delete all server-side code and entries in web.xml also called as specification tags.

We create a welcome file that is SampleWebApplication.html and we include it in web.xml. This file is the first page for our GWT Web Application.

Deployment Descriptor code

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://java.sun.com/xml/ns/javaee
https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5"
xmlns="https://java.sun.com/xml/ns/javaee">
<!-- Servlets -->
<!-- Default page to serve -->
<welcome-file-list>
<welcome-file>SampleWebApplication.html</welcome-file>
</welcome-file-list>
</web-app>

Module Descriptor

In this section, we open a file SampleWebApplication.gwt.xml which can be found under package com.javatpoint.helloworld which is a specific configuration file.

It consist of library from core GWT which is included by inherit tags. We can also add third-party library using inherit tag. Inherit tag refer to the default style for GWT controls.

Module Descriptor code

SampleWebApplication.gwt.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--
When updating your version of GWT, you should also update this DTD reference,
so that your app can take advantage of the latest GWT module capabilities.
-->
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.7.0//EN"
"http://gwtproject.org/doctype/2.7.0/gwt-module.dtd">
<module rename-to='samplewebapplication'>
<!-- Inherit the core Web Toolkit stuff.-->
<inherits name='com.google.gwt.user.User'/>

<!-- Inherit the default GWT style sheet.  You can change-->
<!-- the theme of your GWT application by uncommenting-->
<!-- any one of the following lines.-->
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
<!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/>-->
<!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/>-->
<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>-->

<!-- Other module inherits-->

<!-- Specify the app entry point class.-->
<entry-point class='com.javatpoint.helloworld.client.SampleWebApplication'/>

<!-- Specify the paths for translatable code-->
<source path='client'/>
<source path='shared'/>

<!-- allow Super Dev Mode -->
<add-linker name="xsiframe"/>
</module>

Welcome file

Welcome file describes how the look and feel of the project would be. It is designed according to our need with HTML and CSS.

<!doctype html>
<!-- The DOCTYPE declaration above will set the-->
<!-- browser's rendering engine into-->
<!-- "Standards Mode". Replacing this declaration -->
<!-- with a "Quirks Mode" doctype is not supported.-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--  -->
<!-- Consider inlining CSS to reduce the number of requested files -->
<!--  -->
<link type="text/css" rel="stylesheet" href="SampleWebApplication.css">
<!-- -->
<!-- Any title is fine-->
<!--  -->
<title>Web Application Starter Project</title>
<!--  -->
<!-- This script loads your compiled module. -->
<!-- If you add any GWT meta tags, they must -->
<!-- be added before this line. -->
<!--  -->
<script type="text/javascript" language="javascript"
src="samplewebapplication/samplewebapplication.nocache.js"> </script>
</head>
<!-- The body can have arbitrary html, or  -->
<!-- you can leave the body empty if you want  -->
<!-- to create a completely dynamic UI.  -->
<!-- -->
<body>
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<noscript>
<div style="width: 22em; position: absolute; left: 50%;
margin-left: -11em; color: red; background-color: white; border: 1px solid red;
padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled  in order for this application to display correctly.
</div>
</noscript>
</body>
</html>

UI component is changed under the Entry Point Class. We write several line of code to add UI component. In this example we would be adding Button, Vertical Panel, event handling.

package com.javatpoint.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.ui.Button;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class SampleWebApplication implements EntryPoint {
	/** A vertical panel that hold other components over UI.*/
	VerticalPanel vPanel;
	/*
	* A label that gets updated on click of button.
	*/
	Label lbl;	
	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
		vPanel= new VerticalPanel ();
		lbl= new Label ();
		
		/*
		* Button and its click handlar.
		*/
		Button btn = new Button("GWT Button");
		btn.addClickHandler(new ClickHandler() {
		
			@Override
		public void onClick(ClickEvent event) {
		lbl.setText("You clicked GWT Button!");
		}
		});		
		/*
		* adding label and button into Vertical Panel.
		*/
		vPanel.add(lbl);
		vPanel.add(btn);		
		/*
		* Adding vertical panel into HTML page.
		*/
		RootPanel.get().add(vPanel);
		}
	}

Running GWT Web Application

GWT Web Application runs on two modes:

Development mode: In this mode Java Code runs into JVM
Production Mode: In this mode GWT Compiler compiles Java code and creates JavaScript that run on browser.

In this tutorial we would run GWT Web Application into 'GWT Super Dev Mode' that compiles Java code at run time and runs JavaScript on browser.