Build a GWT app: 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 GWT development mode
  • 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 Build a Sample GWT Application tutorial is divided into 8 sections following a typical application development cycle. Each section builds on the previous sections. 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; Development Mode
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 on the Client 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 a GWT Application Debug the Java code before compiling it into JavaScript. Leverage your Java IDE’s debugging tools by running the application in development mode. Development Mode
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 a GWT Application Compile your client-side Java code into JavaScript. Test in production 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