wiki:WebApplication

  1. Web Application Development with Google Web Toolkit: Day 1
  2. Getting Started with GWT Application Development
    1. Project Structure
  3. HTML Host Pages
  4. Module XML File
  5. Entry Point Class
  6. Launching GWT Shell
  7. Building User Interface
  8. Widget Layout
  9. Event Listener
  10. Homework
  11. References

Web Application Development with Google Web Toolkit: Day 1

Google Web Toolkit (GWT) provides a compiler that converts Java source codes into JavaScript, which works in most of the modern web browsers, including IE, Firefox, Opera, Safari, etc.

GWT supports hosted-mode, which runs your GWT application without translating it into JavaScript. So, you can edit and debug your source codes while running the GWT application.

The following note is cited from the GWT developer guide:

When running in hosted mode, the Java Virtual Machine (JVM) is actually executing your application code as compiled Java bytecode, using GWT plumbing to automate an embedded browser window. By remaining in this traditional "code-test-debug" cycle, hosted mode is by far the most productive way to develop your application quickly.

To launch a hosted mode session, your startup class should be com.google.gwt.dev.GWTShell, found in gwt-dev-windows.jar (or gwt-dev-linux.jar).

Compilation of Java codes takes much time (usually, 1 minute or more, in my machine environment), so you will spend your development time mainly in hosted-mode in the GWT shell.

After you finished the development and debugging of your GWT application, compile your source into JavaScript. The generated code works in the web browser, as if you run it in hosted-mode.

Getting Started with GWT Application Development

Download the GWT from http://code.google.com/webtoolkit (The latest version when writing this article is 1.4.60) matching your OS, and extract the archive. The archive for Windows contains:

  • gwt-user.jar
    • This is required to develop your GWT application in hosted-mode. In Eclipse, put this jar file into your classpath.
    • In Eclipse, you need to add gwt-user.jar into your project class path:

  • gwt-dev-win.jar
    • *.dll (dynamic link library files)
    • These development libraries are required to run GWT Shell (hosted-mode) and compile your code into JavaScript.
  • gwt-servlet.jar
    • This file is needed to run server-side codes of GWT applications.

Project Structure

Standard GWT package layout (when using a base package name, sample) :

PackagePurpose
sampleThe project root package contains module XML files
sample/clientClient-side source files and subpackages
sample/server/Server-side code and subpackages
sample/public/Static resources that can be served publicly
sample/HelloGWT.gwt.xmlGWT application module definition file
sample/public/HelloGWT.htmlAn entry page for your GWT application
sample/public/style.cssCSS style sheet file
sample/client/HelloGWTApp.javaAn entry point class

HTML Host Pages

Any HTML page containing the proper incantation can include code created with GWT, referred to as a host page. A typical HTML host page looks like this:

  • sample/public/HelloGWT.html 
     <html>
  <head>
  
    <!-- Properties can be specified to influence deferred binding -->
    <meta name='gwt:property' content='locale=en_UK'>
    
    <!-- Stylesheets are optional, but useful -->
    <link rel="stylesheet" href="style.css">
    
    <!-- Titles are optional, but useful -->
    <title>Hello GWT Application</title>
    
  </head>
  <body>
   
    <!-- The fully-qualified module name, followed by 'nocache.js' -->
    <script language="javascript" src="sample.HelloGWT.nocache.js"></script>
    
    <!-- Include a history iframe to enable full GWT history support -->
    <!-- (the id must be exactly as shown)                           -->
    <iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
    
  </body>
 </html>

Module XML File

  • sample/HelloGWT.gwt.xml 
     <module>
    <inherits name="com.google.gwt.user.User"/>
    <entry-point class="sample.client.HelloGWTApp"/>
 </module>

Entry Point Class

A module entry-point is any class that is assignable to EntryPoint? and that can be constructed without parameters. When a module is loaded, every entry point class is instantiated and its EntryPoint?.onModuleLoad() method gets called.

  • sample/client/HelloGWTApp.java 
    package sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Label;

public class HelloGWTApp implements EntryPoint
{
    public void onModuleLoad()
    {        
        // RootPanel corresponds to <body> tag element in your HTML host page
        RootPanel.get().add(new Label("Hello GWT!"));
    }
}

Launching GWT Shell

Open Debug (Run) Dialog:

  • Include both of bin and src folders containing your GWT application (class files and source codes) into your classpath.
  • Include gwt-dev-win.jar into your class path.
  • Main class: com.google.gwt.dev.GWTShell
  • Program Arguments: 
      -out www sample.HelloGWT/HelloGWT.html

Building User Interface

Learn by examples:

Widget Layout

Use FlowPanel?, HorizontalPanal?, VerticalPanel?, DockPanel?, etc. 

  VerticalPanel vp = new VerticalPanel();
  vp.add(new Button("push me!"));
  vp.add(new Label("Hello!"));
  
  RootPanel.get().add(vp);

Event Listener

final Label label = new Label("Hello!"); 
final Button button = new Button("click!");
button.addClickListener(new ClickListener() {
  public void onClick(Widget sender) {
    label.setText("Hello GWT!");
  }
 }
);

Homework

Task 1: create your first GWT application, displaying "Hello GWT!" message when clicking a button.

References

Attachments