Getting Started
- Installing Google Web Toolkit
- Building a Sample Application
- Creating an Application from Scratch (without Eclipse)
- Creating an Application from Scratch (with Eclipse)
Installing Google Web Toolkit
- 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.
- Download Google Web Toolkit.Download the Google Web Toolkit package for your operating system.
- Unzip the Google Web Toolkit package.On Windows, extract the files from
gwt-windows-1.4.62.zip
with a program like WinZip. On Mac and Linux, you can unpack the package with a command liketar xvzf gwt-mac-1.4.62.tar.gz
- Done! Start using Google Web Toolkit.GWT doesn't have an installer application. All the files you need to run and use GWT are located in the extracted directory. The main application you'll need to use GWT is
applicationCreator
, which is described below. It may be easiest to start out by building one of the sample applications shipped with GWT.
Building a Sample Application
All the sample applications are in the samples/
directory in your GWT package. Each sample has a script you can run to start it in hosted mode and a script you can use to compile it into JavaScript and HTML to run it web mode.
Running in Hosted Mode
To run the Kitchen Sink sample in hosted mode, navigate to the samples/KitchenSink/
directory and run the KitchenSink-shell
script. This will open the GWT browser with the Kitchen Sink application running inside:
Since you're running in hosted mode, the application is running in the Java Virtual Machine (JVM). This is typically the mode you'll use to debug your applications.
Running in Web Mode
To run the application in web mode, compile the application by running the KitchenSink-compile
script. The GWT compiler will generate a number of JavaScript and HTML files from the Kitchen Sink Java source code in the www/
subdirectory. To see the application, open the file www/com.google.gwt.sample.kitchensink.KitchenSink/KitchenSink.html
in your favorite web browser.
Since you've compiled the project, you're now running pure JavaScript and HTML that should work in IE, Firefox, or Safari. If you were to deploy the Kitchen Sink example project in production, you would distribute the files in your www/com.google.com.google.gwt.sample.kitchensink.KitchenSink/
directory to your web servers.
Make a Few Changes
The source code for Kitchen Sink is in the src/
subdirectory. Try closing your browser windows, and open the file src/com/google/gwt/sample/kitchensink/client/Info.java
in a text editor. Line 26 of the file is the first line of the static initialization method for the first tab in the Kitchen Sink application ("Intro"):
return new SinkInfo("Intro", "Introduction to the Kitchen Sink.
") {
Change the second string from "
Introduction to the Kitchen Sink.
" to"
Foo bar
":return new SinkInfo("Intro", "Foo bar
") {
Now, save the file and simply click "Refresh" in the hosted mode application to see your recent change (if you previously closed hosted mode, go ahead and re-run the KitchenSink-shell
script). The header should now say "Foo bar" instead of "Introduction to the Kitchen Sink.":
Creating an Application from Scratch (without Eclipse)
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.
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
, just like the sample application above.
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 from Scratch (with Eclipse)
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. 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:
Just click the green "Run" button at the top of the window to start your project in hosted mode.
In this screencast tutorial you are going to see how to setup and use the Google Web Toolkit (GWT). This tutorial covers installation, basic concepts, usage of command-line tools, and Eclipse IDE integration.
Total running time 08:10 minutes.
The GWT installation, sample applications, running samples in hosted mode and web mode, changing code and recompiling (:
For this tutorial we have used materials from:
- Google Web Toolkit Applications
- Google Web Toolkit: Taking the pain out of Ajax
- GWT in Action: Easy Ajax with the Google Web Toolkit
- Google Web Toolkit: GWT Java Ajax Programming
- Google Web Toolkit Solutions (Digital Short Cut): Cool & Useful Stuff
- Google Web Toolkit for Ajax
- Google Web Toolkit Solutions: More Cool & Useful Stuff
- GWT in Practice (Coming Soon)
- The Google Web Toolkit (Coming Soon)
- Head Rush Ajax (Head First)
- Ajax in Action
- JavaScript: The Definitive Guide
0 comments:
Post a Comment