Getting Started with Google Web Toolkit Tutorial

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 (or Windows Server), 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.

//break//

GWT Directory Structure:
Whether you use the applicationCreator script or not, this is what your directory structure should look like. The client directory is where the Java class representing your user interface resides (such as the entry point class), and any of this class’s support classes.
The public directory contains an HTML file that has the same name as your client class, but with a different suffix: GwtAjax.html. This file is only necessary if you are not dynamically generating your entire user interface with JavaScript. The HTML file allows you to enclose the JavaScript associated with your application widgets within a bigger design. This is typically the way you will go, as the designers will be building the XHTML pages, which will point to the GWT-generated JavaScript. The dynamically generated user interface aspects are usually enclosed by XHTML div tags in these pages.

To run your newly created application in hosted mode, run the MyApplication-shell script:

Try editing the files src/com/mycompany/client/MyApplication.java and src/com/mycompany/public/MyApplication.html to see how it changes your application.

Creating an Application with Eclipse
GWT ships with a command line utility called applicationC
reator 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. To generate an Eclipse project for a new application, first use the projectCreator script to generate a shell Eclipse project for your application:
projectCreator -eclipse MyProject
Then generate your GWT application as described above, but with an additional -eclipse flag specifying the name of your Eclipse project:
applicationCreator -eclipse MyProject com.mycompany.client.MyApplication
When you’re done with these scripts, in addition to the MyApplication-shell and MyApplication-compile scripts, you should see .project, .classpath, and MyApplication.launch files in your current directory.
To open your project in Eclipse, launch Eclipse and click the File -> Import menu. Choose “Existing Projects into Workspace” in the first screen of the wizard, and enter the directory in which you genetrated the .project file in the next screen of the wizard. When you are complete, you should see your GWT project loaded into your Eclipse workspace:

Thinking beyond GWT:
It is not at all necessary for us to stick to the console level; so many IDEs are available out there. To quote a few
- Instantiations GWT Designer
- JetBrains GWT Studio
- GWT Widget Library
- Wirelexsoft VistaFei for GWT