Ajax & GWT (Google Web Toolkit):
An Introduction & Tutorial
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.
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.
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
Tutorial section:
Topics:
- Sending GET data
- Reading textfield values
- Sending POST data
- Ajax toolkits and libraries
- Recommended Ajax Books
Source code
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
Tutorial section:
Topics:
- Overview
- JavaScript references
- Embedding in browser
- Basic syntax
- Strings and regular expressions
- Functions
- Objects
Source code
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
Tutorial section:
Topics:
- Building HTML tables in JavaScript
- Parsing XML data
- Using MVC on the server
- Parsing JSON (JavaScript Object Notation) data
- Parsing String data
- Handling multi-format data
Source code
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
- Database Access Tags
- Other Tags
Source code
Tutorial section:
Topics:
- Differences between xhtml and HTML 4
- Basic structure of an xhtml document
- Hypertext links and URLs
- Block-level elements
- Inline elements
- Tables
- References
Source code
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
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
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
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
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
Tutorial section:
Topics:
- Overview of Prototype
- Installation
- Ajax.Request
- HTML lookup and insertion
- Ajax.Updater
- Ajax.PeriodicalUpdater
- Handling JSON Data
Source code
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
Tutorial section:
Topics:
- Constructor and prototype in one place
- Single inheritance (sort of)
- Merging objects
- Multiple inheritance (sort of)
Source code
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
Tutorial section:
Topics:
- Overview of Visual Effects
- Installation and documentation
- Highlighting
- Showing/hiding elements
- Moving, resizing, and styling elements
- Effect options
Source code
Tutorial section:
Topics:
- Pros and cons of GWT
- Some commercial sites that use GWT
- Installing GWT
- Development process
- Making a project
- Editing auto-generated HTML file
- Editing auto-generated application class
- Testing process
- Client-side listeners
- Custom Java classes
Source code
- GwtProject1.zip.
Main app used in the basic GWT section. It is built as
an Eclipse project that assumes you have GWT installed
in C:\My Documents\GWT\gwt-windows-1.4.62.
The Eclipse project links to several
files in the GWT installation directory, so
it will not run out of the box if you have GWT installed
in a different location. If
you have GWT installed in a different location, you could try
importing gwt-user.jar and junit.jar into your app.
But perhaps the easiest approach might be
to make a new project and copy the sample code to the new
project. For example:
- Use projectCreator and applicationCreator to
build a GWT Eclipse project with this name, as
described in detail in the tutorial.
- Go to the sample code here, navigate to the
src folder, select everything under
it (coreservlets, coreservlets.client, etc.), and
select Copy.
- Go to your new project, navigate to the
src folder,
delete everything under it, right-click on
src, and select Paste.
- GwtTestProject.zip.
First "hello world" app used in the basic GWT section. This is
simply what you get when you run projectCreator and applicationCreator,
with no changes whatsoever.
Tutorial section:
Topics:
- Main approaches to event handling
- Separate listener classes
- Main class implementing listener 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 installed
in C:\My Documents\GWT\gwt-windows-1.4.62.
See installation directions in previous section.
Tutorial section:
Topics:
- Idea of RPC
- Development process
- Defining client-side data service interfaces
- Making a data service servlet
- Specifying the data source
- Defining client-side callback classes
- Examples
- Getting simple data from server
- Getting complex types from server
- Getting serializable custom classes from server
- Testing in hosted mode
- To run using bundled server and GWT browser
- Testing in Web mode
- To run using bundled server and regular browser
Source code
- GwtRpcProject.zip.
Main app used in the RPC section. It is built as
an Eclipse project that assumes you have GWT installed
in C:\My Documents\GWT\gwt-windows-1.4.62.
The Eclipse project links to several
files in the GWT installation directory, so
it will not run out of the box if you have GWT installed
in a different location. If
you have GWT installed in a different location, you could try
importing gwt-user.jar and junit.jar into your app.
But perhaps the easiest approach might be
to make a new project and copy the sample code to the new
project. For example:
- Use projectCreator and applicationCreator to
build a GWT Eclipse project with this name, as
described in detail in the tutorial.
- Go to the sample code here, navigate to the
src folder, select everything under
it (coreservlets, coreservlets.client, etc.), and
select Copy.
- Go to your new project, navigate to the
src folder,
delete everything under it, right-click on
src, and select Paste.
Tutorial section:
Topics:
- Handling multithreading
- Avoiding race conditions in onSuccess and onFailure
- Deploying
- Creating new project
- Adding JAR file
- Copying WebContent files
- Renaming main file to index.html
- Fixing url-pattern
- Fixing context-root
Source code
Tutorial section:
Topics:
- Calling JavaScript from Java
- Format of methods
- The $wnd and $doc variables
- Argument types
- Calling Java from JavaScript
- Format of method types
- Designating overloaded methods
- Argument types
- Example
- Using Scriptaculous effects
Source code
- The following app assumes you have GWT installed
in C:\My Documents\GWT\gwt-windows-1.4.62.
See installation directions in previous section.
For details on using the Ajax4jsf library, please see
the Ajax4jsf section of the tutorial on JSF and Apache MyFaces.
View PDF of Ajax Exercises
Free for personal use.
|
