The Backend Engineer’s Journal: GWT Hello world Example

What is Google Web Toolkit

The Google Web Toolkit (GWT) is a open source toolkit to develop Ajax web application with Java. The programmer writes Java code and this code is translated into HTML and Javascript via the GWT compiler.

GWT modes

Development Mode: allows to debug the Java code of your application directly via the standard Java debugger.
Web mode: the application is translated into HTML and Javascript code and can be deployed to a webserver.

GWT Components

GWT has four major components: a Java-to-JavaScript compiler, a "hosted" web browser, and two Java class libraries

GWT Entry points

All GWT applications are started with Entry points,Entry points are starting point of a GWT application and we have to implement com.google.gwt.core.client.EntryPoint interface to our Entry point class and should override onModuleLoad() method

GWT Modules

GWT applications are described as modules. A module "modulename" is described by a configuration file "modulename.gwt.xml". Each module can define one or more Entry point classes.

GWT Hello world example

1. Install Google tools plug-in in Eclipse (Help->Eclipse Market place)

2. Create a GWT Web application project

4. Project Structure

5 Create/Modify GWT entry point

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;
 
/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class PretechGWT implements EntryPoint {
       
       @Override
         public void onModuleLoad() {
           Label label = new Label("Hello World");
           Button button = new Button("Click on this");
           button.addClickHandler(new ClickHandler() {
             @Override
             public void onClick(ClickEvent event) {
               Window.alert("Hello good morning.. this message from event");
             }
           });
 
 
           RootPanel.get().add(label);
           RootPanel.get().add(button);
       }
}

6. Create/Modify html page (PretechGWT.html)

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
 
<title>Web Application Starter Project</title>
<script type="text/javascript" language="javascript"
 src="pretechgwt/pretechgwt.nocache.js"></script>
</head>
<body>
 <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'
  style="position: absolute; width: 0; height: 0; border: 0"></iframe>
 <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>
 <h1>Pretech GWT Web Application Starter Project</h1>
</body>
</html>

7. Generated Web.xml

<?xmlversion="1.0"encoding="UTF-8"standalone="no"?><web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.5" xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 
  <!-- Servlets -->
  <servlet>
    <servlet-name>greetServlet</servlet-name>
    <servlet-class>com.pretechgwt.server.GreetingServiceImpl</servlet-class>
  </servlet>
 
  <servlet-mapping>
    <servlet-name>greetServlet</servlet-name>
    <url-pattern>/pretechgwt/greet</url-pattern>
  </servlet-mapping>
 
  <!-- Default page to serve -->
  <welcome-file-list>
    <welcome-file>PretechGWT.html</welcome-file>
  </welcome-file-list>
 
  <servlet>
    <servlet-name>SystemServiceServlet</servlet-name>
    <servlet-class>com.google.api.server.spi.SystemServiceServlet</servlet-class>
    <init-param>
      <param-name>services</param-name>
      <param-value/>
    </init-param>
  </servlet>
 
  <servlet-mapping>
    <servlet-name>SystemServiceServlet</servlet-name>
    <url-pattern>/_ah/spi/*</url-pattern>
  </servlet-mapping>
 
</web-app>

8. Run application and install this plug-in in browser if required

9. Output

10. Reference

https://developers.google.com/web-toolkit/

The Backend Engineer’s Journal

GWT Hello world Example