table of contents

Ajax & GWT 1.6 (Google Web Toolkit):
An Introduction & Tutorial

Interested in live training from the author of these tutorials?
See the upcoming public Ajax & GWT course in Maryland
or contact hall@coreservlets.com for information
on a customized onsite version at your location.

This tutorial is derived from Marty Hall's world-renowned live J2EE training courses. It is intended as a fast introduction to the basics of Ajax for people that already know how to write the server-side part of the process using servlets and JSP. In particular, although this tutorial shows the code for all of the servlets and JSP pages used (downloadable with the rest of the code), it does not explain the server-side code in depth or discuss how to deploy it. For detailed tutorials on writing servlets and JSP and explanations on how to deploy them on Tomcat, please see these tutorials.

The Ajax training course on which this tutorial is based is usually taught on-site at customer locations, but servlet, JSP, Struts, JSF, Ajax, GWT, and Java 5 or Java 6 training courses at public venues are periodically scheduled for people with too few developers for an onsite course. For descriptions of the various other courses that are available, please see the J2EE training course page. To inquire about a customized training course at your location, please contact Marty at hall@coreservlets.com.

If you find these free tutorials helpful, we would appreciate it if you would link to us.

Source Code

Source code for all examples in this tutorial can be downloaded from the Ajax sample code repository.

PowerPoint Files for University Faculty

The PDF files in this tutorial contain the complete text of the original PowerPoint files, so if your goal is learning Ajax, just stick with this tutorial. However, as a service to instructors teaching full-semester courses at accredited universities, coreservlets.com will release the original PowerPoint files for free. Please see the instructor materials page for details.


Servlet and JSP Review

This section provides a quick review of the server-side programming topics that will be used throughout this tutorial. There are no Ajax-specific topics in this first section. For more details on server-side programming, see the servlet and JSP tutorials.

Tutorial section:

Topics:

  • What servlets are all about
  • Servlet basics
  • Creating and deploying projects in Eclipse. Also see the Tomcat and Eclipse tutorial.
  • Creating forms and reading form data
  • JSP scripting
  • Using XML syntax for JSP pages
  • JSP file inclusion
  • MVC

Source code:


Ajax Basics: Part I

Tutorial section:

Topics:

  • Ajax motivation
  • The basic Ajax process
  • The need for anonymous functions
  • Using dynamic content and JSP
  • Using dynamic content and servlets
  • Displaying HTML results
  • Sending GET data

Source code:


Ajax Development and Debugging Tools

Tutorial section:

Topics:

  • Tools for debugging Ajax
  • Tools for debugging JavaScript
  • Tools for building Ajax-based Web apps
  • Tools for developing xhtml
  • Tools for building and previewing style sheets
  • Tools for validating xhtml

Source code:


Ajax Basics: Part II

Tutorial section:

Topics:

  • Sending GET data
  • Reading textfield values
  • Sending POST data
  • Ajax toolkits and libraries
  • Recommended Ajax Books

Source code:


XHTML: A Crash Course

Tutorial section:

Topics:

  • Differences between xhtml and HTML 4
  • Dynamically inserting HTML into xhtml pages
  • Basic structure of an xhtml document
  • Hypertext links and URLs
  • Block-level elements
  • Inline elements
  • Tables
  • Forms
  • References

Source code:


JavaScript Crash Course: Core Language Features

Tutorial section:

Topics:

  • Overview
  • JavaScript references
  • Embedding in browser
  • Basic syntax
  • Strings and regular expressions
  • Functions
  • Objects

Source code:


JavaScript Crash Course: Browser, XML, & HTML Support

Tutorial section:

Topics:

  • XML
    • Getting document
    • Document, Element, and Node classes
  • HTML
    • HTMLDocument and HTMLElement classes
    • Specialized HTMLElement classes
    • The Window class
  • Event Handling
    • General event-handling attributes
    • Element-specific event-handling attributes

Source code:


Ajax Data Handling Basics: XML, JSON, and String Data

Tutorial section:

Topics:

  • Building HTML tables in JavaScript
  • Parsing XML data
  • Using MVC on the server
  • Parsing JSON (JavaScript Object Notation) data
    • Preview of next section on advanced JSON
  • Parsing String data
  • Handling multi-format data

Source code:


Automatically Generating Server-Side JSON from Java Objects

Tutorial section:

Topics:

  • Using org.json Java utilities
    • Building JSON object from bean
    • Building JSON array from Java array or List
    • Building JSON object from Map
    • Other JSON-generation utilities
  • Using json2.js JavaScript utilities
    • Sending JSON objects to server

Source code:

  • json-generation.zip. Web app used in this section, bundled as an Eclipse project.
  • org.json-utils.jar. JAR file containing utilities from org.json. Downloaded latest classes as of October 2008, compiled with Java 6, and put into a JAR file. Put this JAR file in the WEB-INF/lib folder of your project.
  • json2.js. JavaScript utility used if you want to send JSON objects to the server. Direct link to file at json.org.

Using JSON-RPC to Simplify Sending Data to and from Server

Tutorial section:

Topics:

  • Using the jsabsorb JSON-RPC implementation
    • Calling server methods synchronously
    • Calling server methods asynchronously
    • Passing and returning strings and primitives
    • Returning JSON objects
  • Other JSON-RPC utilities

Source code:


Using JSTL (JSP Standard Tag Library) with Ajax

Tutorial section:

Topics:

  • Obtaining JSTL documentation and code
  • The JSTL Expression Language
  • Looping Tags
    • Looping a certain number of times
    • Looping over data structures
    • Improving Ajax MVC data-handling examples
  • Conditional Evaluation Tags
    • Single choice
    • Multiple choices
  • Redoing Ajax data-handling examples with JSTL
  • Database Access Tags
  • Other Tags

Source code:


Custom JSP Tag Libraries: Basics

Note: Custom taglibs are not specific to Ajax, but these techniques are needed to understand several of the the Ajax-specific topics after this.

Tutorial section:

Topics:

  • Java-based tags
    • Components of a tag library
    • Basic tags
    • Tags that use attributes
    • Tags that use body content
    • Tags that optionally use body content
  • JSP-based tags (tag files)
    • Components of a tag library
    • Basic tags
    • Tags that use attributes
    • Tags that use body content

Source code:


Custom JSP Tag Libraries: Advanced Capabilities

Note: Custom taglibs are not specific to Ajax, but these techniques are needed to understand several of the the Ajax-specific topics after this.

Tutorial section:

Topics:

  • Tags with dynamic attribute values
  • Tags with complex objects for attributes
  • Manipulating the tag body
  • Looping tags
  • Nested tags
  • Using SAX and TagLibraryValidator to validate tag library syntax

Source code:


Using JSP Custom Tag Libraries for Ajax

Tutorial section:

Topics:

  • contextPath tag.
    Outputs the Web application context path (e.g., /myApp), to simplify relative URLs.
  • simpleAlert tag.
    Takes the result of a URL and puts it in popup dialog box.
  • alert tag.
    Takes the result of a URL and puts it in popup dialog box. Sends data from designated input element.
  • simpleButton tag.
    Takes the result of a URL and puts it in designated HTML element.
  • button tag.
    Takes the result of a URL and puts it in specified HTML element. Sends data from list of designated input elements.

Source code:


Using the AjaxTags Library: Basics

Tutorial section:

Topics:

  • Pros and cons of AjaxTags library
  • Installing AjaxTags
  • Using main components
    • Links that trigger server-side resource and display results within current page
    • Autocompleting textfields
    • Populating textfields based on values in another textfield
    • Populating combobox based on selection in another combobox
    • Forms whose results are displayed inside current page
    • Tabbed panels

Source code:


Using the AjaxTags Library: Advanced Capabilities

Tutorial section:

Topics:

  • Regions that display temporarily while server-side resource runs
  • Autocomplete textboxes with associated values displayed in other textboxes
  • Prefunctions and postfunctions
    • Arbitrary JavaScript that runs before or after server-side resource
  • Functions that run when server has error
  • Multiple triggers for server-side resources

Source code:


The Prototype JavaScript Framework
Part I: Ajax Support

Tutorial section:

Topics:

  • Overview of Prototype
  • Installation
  • Ajax.Request
    • Basics
    • Options
  • HTML lookup and insertion
  • Ajax.Updater
  • Ajax.PeriodicalUpdater
  • Handling JSON Data

Source code


The Prototype JavaScript Framework
Part II: General JavaScript Support

Tutorial section:

Topics:

  • Element
    • Helper methods for exploring DOM
    • Helper methods for updating DOM
  • Array
    • Helper methods that take simple arguments
  • Enumerable
    • Helper methods that take functions as arguments
  • Function
    • Helper functions that operate on other functions
    • Usually to build new functions that are based on old functions
  • Number
    • Methods called on numbers

Source code


The Prototype JavaScript Framework
Part III: OOP Support

Tutorial section:

Topics:

  • Constructor and prototype in one place
  • Single inheritance (sort of)
  • Merging objects
  • Multiple inheritance (sort of)

Source code


The Script.acul.us JavaScript Library
Part I: Ajax Support

Tutorial section:

Topics:

  • Overview of Scriptaculous
  • Installation and documentation
  • Autocomplete textfields
    • Local version
    • Ajax version
  • In-place Editor
    • Free-text values
    • Values from combo box

Source code


The Script.acul.us JavaScript Library
Part II: Visual Effects

Tutorial section:

Topics:

  • Overview of Visual Effects
  • Installation and documentation
  • Highlighting
  • Showing/hiding elements
  • Moving, resizing, and styling elements
  • Effect options

Source code


The jQuery JavaScript Library
Part I: Ajax Support

Tutorial section:

Topics:

  • Overview of jQuery
  • Installation and documentation
  • Quick summary of jQuery selectors
  • Data centric Ajax: the "ajax" function
    • Basics
    • Options
    • Sending data
  • Content-centric Ajax: the "load" function
  • Handling JSON Data

Source code


The jQuery JavaScript Library
Part II: Selectors and DOM Manipulation

Tutorial section:

Topics:

  • Basics
    • Basic selectors
    • Hierarchical selectors
    • Manipulating the matched elements
    • Chaining
    • Registering event handlers
  • Advanced topics
    • Attribute selectors
    • Form element selectors
    • Positional selectors
    • Content-filtering selectors
    • Advanced operators
    • Cross-browser mouse and keyboard event handling

Source code


The jQuery JavaScript Library
Part III: Rich Interfaces with jQuery UI

Tutorial section:

Topics:

  • Overview
  • Installation and setup
  • Widgets
    • Static tabbed panels
    • Ajax tabbed panels
    • Accordion panels
    • Date picker
    • Slider
    • Progress bar

Source code


The Google Web Toolkit (GWT): Basics
GWT 1.6 Version

Tutorial section:

Topics:

  • Pros and cons of GWT
  • Installing GWT
  • Development process
    • Making a project
    • Editing auto-generated HTML file
    • Editing auto-generated Java class
  • Testing process
    • Hosted mode
    • Local Web mode
    • Deployed mode
  • Client-side event handlers
  • Custom Java classes

Source code:

  • GwtApp1.zip.
    Main app used in the basic GWT section. It is built as an Eclipse project that assumes you have GWT 1.6 and are using the Google Eclipse Plugin.
  • MyGwtApp.zip.
    First "hello world" app used in the basic GWT section. This is simply what you get when you press "New Web Application Project", with no changes whatsoever.

The Google Web Toolkit (GWT): Widget Event Handling
GWT 1.6 Version

Tutorial section:

Topics:

  • Main approaches to event handling
    • Separate event handler classes
    • Main class implementing event handler interface
    • Named inner classes
    • Anonymous inner classes
  • Basic widgets and their associated events
    • Pushbuttons and related widgets
    • Checkboxes and related widgets
    • Listboxes and related widgets
    • Textfields and related widgets

Source code:

  • The following apps assume you have GWT 1.6 and the Google Eclipse Plugin. See installation directions in previous section.

The Google Web Toolkit (GWT):
Using RPC to Access Server-Side Data
GWT 1.6 Version

Tutorial section:

Topics:

  • Idea of RPC
  • Development process
    • Defining main data service interface
    • Defining callback version of data service interface
    • Making a data service servlet
    • Creating a service proxy
    • Defining client-side callback objects
  • Examples
    • Getting simple data from server
    • Getting complex types from server
    • Getting serializable custom classes from server
  • Handling asynchronous methods
    • Performing server-dependent ops only in callback methods
  • Testing

Source code:


The Google Web Toolkit (GWT):
Using Panels to Control Window Layout
GWT 1.6 Version

Tutorial section:

Topics:

  • Strategy behind Panel usage
    • Similar to use of LayoutManagers in desktop Java
  • Most common Panel types
    • HorizontalPanel
    • VerticalPanel
    • TabPanel and DecoratedTabPanel
    • DockPanel
    • Grid
    • HorizontalSplitPanel
    • VerticalSplitPanel
    • PopupPanel
  • Summary of other Panel types

Source code:


The Google Web Toolkit (GWT):
JSNI: The JavaScript Native Interface
GWT 1.6 Version

Tutorial section:

Topics:

  • Calling JavaScript from Java
    • Format of methods
    • The $wnd and $doc variables
    • Argument types
  • Defining JavaScript Overlay Types
    • Native methods for direct properties
    • Pure-Java derived properties
    • Obtaining an overlay instance
  • Using JSNI to call external JavaScript libraries
  • Calling Java from JavaScript
    • Format of method types
    • Designating overloaded methods
    • Argument types
  • Example
    • Using Scriptaculous effects

Source code:


Ajax4jsf

For details on using the Ajax4jsf library, please see the Ajax4jsf section of the tutorial on JSF and Apache MyFaces.

Ajax Exercises

View PDF of Ajax Exercises
Free for personal use.


More Information

Java

Servlets & JSP
JSF
Ajax, GWT, & JavaScript

Spring, Hibernate, & JPA

Struts