GWT Basics: AJAX Programming with Java

By Michael J. Ross
2008-03-10


Running Sample Applications

The best way to verify your GWT installation, is by running one of the sample applications included in the GWT installation. We will start with the simplest one of all: the well-worn "Hello, world" example.

GWT applications can be run in one of two modes: hosted mode and Web mode. In the former mode, your application runs in the Java Virtual Machine (JVM). This is normally what you will use for debugging your GWT applications. In the latter mode, your application is first "compiled" into HTML and JavaScript code, and is run by your Web browser. Thus, the created files can be uploaded to a remote Web server, and run by any Internet user with a JavaScript-capable browser. That is not true for hosted mode, which can be thought of as the mode for running an application by interpreting its code within the JVM.

We will first try the Hello application in hosted mode. At the command line, navigate to the directory samples\Hello\ within your GWT root directory. Run the script Hello-shell.cmd. If Java and GWT have been installed correctly, then two windows should appear: the development shell and the hosted mode browser. The GWT development shell shown below indicates that it is starting an HTTP request on port 8888.

The development shell launches the Hello window, which looks much like a Web browser. The Hello application is running at the URL http://localhost:8888/com.google.gwt.sample.hello.Hello/Hello.html. This corresponds to the file Hello.html located in the directory samples\Hello\www\com.google.gwt.sample.hello.Hello\.

If you click on the button labeled "Click me", it pops up a dialog box that reads "Hello, AJAX".

The hosted mode browser is a child process of (i.e., dependent upon) the development shell window. Closing the latter will also close the former, if you click "Yes" at the confirmation dialog box that pops up.

The Java source code used to create this application, is located in samples\Hello\src\com\google\gwt\sample\hello\client\Hello.java. We will not discuss the details of the Java code, but it implements an EntryPoint class and a method thereof, onModuleLoad(). EntryPoint is a core GWT class, imported with several others — mostly user interface classes.

The HTML source code is simplicity itself; the operative line calls the JavaScript created by the Hello-shell.cmd script:

<script language="javascript" src="com.google.gwt.sample.hello.Hello.nocache.js"></script>

To run the sample application in Web mode, at the command line used earlier, run the script Hello-compile.cmd, which should report that the output was written into the directory samples\Hello\www\com.google.gwt.sample.hello.Hello. Then open the file www\com.google.gwt.sample.hello.Hello\Hello.html in a Web browser (in the figure below, Firefox). Make sure that your browser supports JavaScript (almost all do) and has JavaScript enabled.

The "Click me" button behaves just as it did in hosted mode.

Running a sample application is also the quickest way to get an idea of what GWT is capable of. For instance, the application KitchenSink illustrates a sizable portion of the controls available within GWT:

These controls include widgets, such as buttons, check boxes, and radio buttons:

Panels include basic panels, docking panels, and tables:

Lists include the regular drop-down boxes and lists that can be created using simple HTML, as well as more advanced lists, such as suggestion combo boxes and trees:

Text controls include regular entry fields, read-only fields, password entry fields, text areas, and even a built-in WYSIWYG editor.

Pop-up controls include simple pop-ups and draggable dialog boxes.

These are the most commonly used controls utilized for building user interfaces in GWT applications.

Resources

Google's GWT resources page has links to presentations, developer tools and libraries, articles and tutorials, books, a developer forum, a contributor forum, and an IRC channel on Freenode. In addition, the main GWT page mentioned earlier has links to blog entries, featured products, and user groups — all of which have RSS feeds

If you choose to explore AJAX development, and you wish to avoid the hassles of writing JavaScript that can handle the differences among browsers, then give GWT a try — especially if you have prior experience writing code in Java. Sun Microsystems may have failed to win widespread usage and development of Java applets, but Google may succeed with GWT applications.

Tutorial Pages:
» Introduction
» AJAX Overview
» GWT to the Rescue
» Installing GWT
» Running Sample Applications
» Resources

Related Tutorials: » Getting Started with AJAX in jQuery » AJAX Accessibility for Websites » AJAX and PHP Form Processing » The obligatory 'My Ajax Tutorial' Post » A Designer's Guide to Prototyping Ajax » Ajax Wireframing Approaches