My favorites | English | Sign in

Try Google Chrome's developer tools New!

Google Web Toolkit

Getting Started

Introduction

In this tutorial, you'll write this simple AJAX application, StockWatcher.

Go ahead and try StockWatcher out. Add a few stock codes and see how it works.

In the process of building StockWatcher, you'll learn how GWT provides the tools for you to:

  • write browser applications in Java using the Java IDE of your choice
  • debug Java in hosted mode emulating the browser experience
  • cross-compile your Java code into highly optimized JavaScript
  • maintain one code base (Java) for multiple browser implementations (JavaScript)

AJAX application development process using GWT

This Getting Started tutorial is divided into 8 sections following a typical application development cycle. Each section builds on the previous. In this basic implementation of StockWatcher, all functionality is coded on the client-side. Server-side coding and client/server communications are covered in other tutorials.

Tasks
What you'll do		 Concepts
What you'll learn		 GWT Tools and APIs
What you'll use
1. Create a GWT Project Generate the files and directories you need to get started.
  • Google Plugin for Eclipse
  • GWT command-line tool webAppCreator
  • Hosted Mode browser
2. Design the Application Identify requirements, constraints, and implementation strategies. Language constraints
3. Build the User Interface Lay out the visual design and add user interface components. GWT widgets and panels, the Root panel
4. Manage Events Handling mouse and keyboard events. ClickHandler and KeyPressHandler interfaces
5. Code Functionality on the Client Maintain one code base for multiple browser implementations. Leveraging your Java IDE's features such as refactoring and code completion. various GWT methods
6. Debug Debug the Java code before compiling it into JavaScript. Leverage your Java IDE's debugging tools by running the application in hosted mode. Hosted Mode browser
7. Apply Style Apply visual style to the application. Define the visual style in CSS. Set the class attributes on HTML elements programmatically. Change styles dynamically. Include static elements, such as image files.
  • GWT module
  • GWT themes
  • application style sheet
  • GWT methods: addStyleName, addStyleDependentName,setStyleName
  • automatic resource inclusion
8. Compile Compile your client-side Java code into JavaScript. Test in web mode. Learn about the benefits of deferred binding. GWT compiler

What's Next

If you have not set up your development environment with the Java SDK, a Java IDE such as Eclipse, and the latest distribution of Google Web Toolkit, do that before you begin.

You're ready to create a GWT project.

Step 1: Creating a GWT Project