Javatpoint Logo
Javatpoint Logo

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

GWT Application 1

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

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

GWT Application 2

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.

GWT Application 3

After clicking finish button following directory is generated

GWT Application 4

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


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


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


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.

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.


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.

GWT Application 5

Now Copy the URL:

GWT Application 6

Output:

GWT Application 7
Next TopicGWT RPC




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


B.Tech / MCA