articles >> google web toolkit >> Getting Started with Google Web Toolkit Tutorial ...

Getting Started with Google Web Toolkit Tutorial

By : Bala Arjunan Jul 01, 2007

Printer friendly

Building AJAX applications using Frameworks:
Any developer will typically create his Ajax application by writing XHTML pages and JavaScript code with his favorite integrated development environment (IDE) or even text editors. A number of different libraries and frameworks exist which allow programmers to use pre-designed JavaScript classes to implement otherwise time-consuming dynamic behaviors, such as drag-and-drop or sophisticated visual tree structures. Many are designed for developers who are already fairly well advanced in their JavaScript knowledge.
These simple methods are changing as powerful tools proliferate for Ajax developers. The GWT takes a different approach to Ajax than most toolkits.

The Google Web Toolkit's Approach to Ajax:
Using the GWT framework, you can design and program your user interface using only the Java language. You then use the GWT's command-line tools to check the syntax of the Java classes, and finally automatically generate the JavaScript for the application's client-side. The design of the user interface is very similar to using Java's Swing API.

Google Web Toolkit – An Overview
Google Web Toolkit (GWT) is an open source Java development framework that lets you escape the matrix of technologies that make writing AJAX applications so difficult and error prone. With GWT, you can develop and debug AJAX applications in the Java language using the Java development tools of your choice. When you deploy your application to production, the GWT compiler translates your Java application to browser-compliant JavaScript and HTML.

How GWT stands apart from other Frameworks?
GWT has the Java-to-JavaScript compiler to distill your application into a set of JavaScript and HTML files that you can serve with any web server. This approach makes the app cross browser compatible, making the feveloper’s life much easier.

GWT Architecture:
GWT has four major components: a Java-to-JavaScript compiler, a "hosted" web browser, and two Java class libraries (one the JAVA API and another GWT API)

Google Web Toolkit Features:

- Open Source
- Readymade, Dynamic, reusable UI components
- RPC
- Browser history management, debugging
- Browser compatible
- JUnit integration
- Internationalization
- Interoperability
- Fine-grained control

Debugging and Deploying GWT Applications:

GWT applications can be run in two modes:
• Hosted mode - In hosted mode, your application is run as Java bytecode within the Java Virtual Machine (JVM). You will typically spend most of your development time in hosted mode because running in the JVM means you can take advantage of Java's debugging facilities and remain within an IDE like Eclipse.
• Web mode - In web mode, your application is run as pure JavaScript and HTML, compiled from your original Java source code with the GWT Java-to-JavaScript compiler. When you deploy your GWT applications to production, you deploy this JavaScript and HTML to your web servers, so end users will only see the web mode version of your application.
To support hosted mode, GWT ships with a special web browser with hooks into the JVM. See the GWT architecture diagram below for more information.

Getting Started:

Basic Download: Installing Google Web Toolkit
1. Install the Java SDK.If you don't have a recent version of the Java SDK installed, download and install Sun Java Standard Edition SDK.
2. Download Google Web Toolkit.Download the Google Web Toolkit package for your operating system.
3. Unzip the Google Web Toolkit package.On Windows, extract the files from gwt-windows-1.3.3.zip with a program like WinZip. On Mac and Linux, you can unpack the package with a command like
tar xvzf gwt-mac-1.3.3.tar.gz

Initial Setup under Various Environments:
The CLI scripts are designed to be run from a command-line window such as Terminal in Mac OS X. They include:

applicationCreator: This generates the skeleton directory structure for your application.

projectCreator : This script generates a project skeleton, as well as Ant build files or Eclipse projects, according to what the command line specifies.

i18nCreator : This creates some of the files required to use internationalized messages with GWT. The shortcut describes this application aspect in another section.

junitCreator : The script can be used to get you started using JUnit with GWT.

Kick Starting your First GWT Application:
GWT ships with a command line utility called applicationCreator that automatically generates all the files you'll need in order to start a GWT project. It can also generate Eclipse project files and launch config files for easy hosted mode debugging, as described below.

We will use applicationCreator for our demo application Open a Terminal or CLI window and type:
applicationCreator -out /users/bruceperry/1ebooks/gwt -overwrite
com.parkerriver.gwt.intro.client.GwtAjax

This command uses the provided applicationCreator shell script to create a skeleton directory structure. We will use this structure to develop an Ajax application inside a file named GwtAjax.java. The first option with the applicationCreator command, -out, specifies the directory for your application or project (it defaults to the existing directory, the one where applicationCreator resides, which is the top-level directory when you unpack GWT).
The -overwrite option specifies that the command should overwrite any existing files. The final segment is the fully qualified name of the class where your application logic resides, usually representing the "entry point" class.

An entry point is the first screen the user interacts with in the Ajax application, such as a login window or a dashboard.

Based on the recommended GWT project structure, your main GWT application class should be in a subpackage client. You can create a new application called MyApplication with the command:
applicationCreator com.mycompany.client.MyApplication
The applicationCreator script will generate a number of files in src/com/mycompany/, including some basic "Hello, world" functionality in the class src/com/mycompany/client/MyApplication.java. The script also generates a hosted mode launch script called MyApplication-shell and a compilation script called MyApplication-compile.