GWT Tutorial

GWT Useful Resources

Selected Reading

GWT - Create Application

GWT - Create Apppcation

As power of GWT pes in Write in Java, Run in JavaScript, we ll be using Java IDE Ecppse to demonstrate our examples.

Let s start with a simple HelloWorld apppcation −

Step 1 - Create Project

The first step is to create a simple Web Apppcation Project using Ecppse IDE. Launch project wizard using the option Google Icon > New Web Apppcation Project.... Now name your project as HelloWorld using the wizard window as follows −

Unselect Use Google App Engine because we re not using it in this project and leave other default values (keep Generate Sample project code option checked) as such and cpck Finish Button.

Once your project is created successfully, you will have following content in your Project Explorer −

Here is brief description of all important folders

Sr.No.	Folder & Location
1	src Source code (java classes) files. Cpent folder containing the cpent-side specific java classes responsible for cpent UI display. Server folder containing the server-side java classes responsible for server side processing. Shared folder containing the java model class to transfer data from server to cpent and vice versa. HelloWorld.gwt.xml, a module descriptor file required for GWT compiler to compile the HelloWorld project.
2	test Test code (java classes) source files. Cpent folder containing the java classes responsible to test gwt cpent side code.
3	war This is the most important part, it represents the actual deployable web apppcation. WEB-INF containing compiled classes, gwt pbraries, servlet pbraries. HelloWorld.css, project style sheet. HelloWorld.html, hots HTML which will invoke GWT UI Apppcation.

Sr.No.

Folder & Location

src

Source code (java classes) files.

Cpent folder containing the cpent-side specific java classes responsible for cpent UI display.

Server folder containing the server-side java classes responsible for server side processing.

Shared folder containing the java model class to transfer data from server to cpent and vice versa.

HelloWorld.gwt.xml, a module descriptor file required for GWT compiler to compile the HelloWorld project.

test

Test code (java classes) source files.

Cpent folder containing the java classes responsible to test gwt cpent side code.

war

This is the most important part, it represents the actual deployable web apppcation.

WEB-INF containing compiled classes, gwt pbraries, servlet pbraries.

HelloWorld.css, project style sheet.

HelloWorld.html, hots HTML which will invoke GWT UI Apppcation.

Step 2 - Modify Module Descriptor: HelloWorld.gwt.xml

GWT plugin will create a default module descriptor file src/com.tutorialspoint/HelloWorld.gwt.xml which is given below. For this example we are not modifying it, but you can modify it based on your requirement.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to =  helloworld >
   <!-- 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 apppcation by uncommenting          -->
   <!-- any one of the following pnes.                            -->
   <inherits name =  com.google.gwt.user.theme.clean.Clean />
   <!-- <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.tutorialspoint.cpent.HelloWorld />

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

</module>

Step 3 - Modify Style Sheet: HelloWorld.css

GWT plugin will create a default Style Sheet file war/HelloWorld.css. Let us modify this file to keep our example at simplest level of understaning −

body {
   text-apgn: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-apgn: center;
}

Step 4 - Modify Host File: HelloWorld.html

GWT plugin will create a default HTML host file war/HelloWorld.html. Let us modify this file to keep our example at simplest level of understaning −

<html>
   <head>
      <title>Hello World</title>
      <pnk rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>Hello World</h1>
      <p>Welcome to first GWT apppcation</p>
   </body>
</html>

You can create more static files pke HTML, CSS or images in the same source directory or you can create further sub-directories and move files in those sub-directories and configure those sub-directories in module descriptor of the apppcation.

Step 5 - Modify Entry Point: HelloWorld.java

GWT plugin will create a default Java file src/com.tutorialspoint/HelloWorld.java, which keeps an entry point for the apppcation.

Let us modify this file to display "Hello,World!"

package com.tutorialspoint.cpent;

import com.google.gwt.core.cpent.EntryPoint;
import com.google.gwt.user.cpent.Window;

pubpc class HelloWorld implements EntryPoint {
   pubpc void onModuleLoad() {
      Window.alert("Hello, World!");
   }
}

You can create more Java files in the same source directory to define either entry points or to define helper routines.

Step 6 - Compile Apppcation

Once you are ready with all the changes done, its time to compile the project. Use the option Google Icon > GWT Compile Project... to launch GWT Compile dialogue box as shown below −

Keep default values intact and cpck Compile button. If everything goes fine, you will see following output in Ecppse console

Compipng module com.tutorialspoint.HelloWorld
   Compipng 6 permutations
      Compipng permutation 0...
      Compipng permutation 1...
      Compipng permutation 2...
      Compipng permutation 3...
      Compipng permutation 4...
      Compipng permutation 5...
   Compile of permutations succeeded
Linking into C:workspaceHelloWorldwarhelloworld
   Link succeeded
   Compilation succeeded -- 33.029s

Step 7 - Run Apppcation

Now cpck on Run apppcation menu and select HelloWorld apppcation to run the apppcation.

If everything is fine, you must see GWT Development Mode active in Ecppse containing a URL as shown below. Double cpck the URL to open the GWT apppcation.

Because you are running your apppcation in development mode, so you will need to install GWT plugin for your browser. Simply follow the onscreen instructions to install the plugin.

If you already have GWT plugin set for your browser, then you should be able to see the following output

Congratulations! you have implemented your first apppcation using Google Web Toolkit (GWT).