AJAX and GWT Training Tutorials
Here are several excellent AJAX
and GWT
Training Tutorials that are derived from Marty
Hall's world-renowned live programming training courses, hosted on
courses.coreservlets.com. These are
intended as a fast introduction
to the basics of Ajax and Google Web Toolkit (GWT) for people that
already know how to
write the server-side part of the process using servlets and JSP.
Although these tutorials provide the code for all of the servlets and
JSP pages used, it does not explain the server-side code in depth or
discuss how to deploy it...for detailed tutorials on writing
server-side
Java applications and explanations on how to deploy them on Tomcat,
please see these
Java EE tutorials.
These
tutorials come with a complete set of text, PowerPoint
files, pdf documents, and source so that your goal of learning
Ajax and Google Web Toolkit
will be easier and more productive. What follows here are the major
topics, pdf tutorials files, and source code for these AJAX
and GWT Tutorials:
Ajax Tutorials
Ajax Basics
Tutorial: Part I: Ajax-Basics-1.pdf
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-basics-1.zip.
Web app used is bundled as a
MyEclipse project.
Ajax Basics Tutorial: Part II: Ajax-Basics-2.pdf
Topics: Sending GET data, Reading textfield values, Sending POST data,
Ajax toolkits and libraries, Recommended Ajax Books. Source
code: ajax-basics-2.zip.
Web app used is bundled as a
MyEclipse project.
Ajax Development and Debugging Tools Tutorial: Ajax-Development-Tools.pdf
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-1.zip.
Web app is bundled as a
MyEclipse project.
JavaScript Core Language Features
Tutorial: JavaScript-Core.pdf
Topics: Overview, JavaScript references, Embedding in browser, Basic
syntax, Strings and regular expressions, Functions, Objects. Source
code.javascript.zip.
Web app is bundled as a
MyEclipse project.
JavaScript Crash Course: Browser, XML, & HTML Support: JavaScript-Browser.pdf
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: javascript2.zip.
Web app used in this section, bundled as a
MyEclipse project.
Ajax Data Handling: XML, JSON, and String Data Tutorial: Ajax-Data-Handling.pdf
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: ajax-data.zip.
Web app used in this section, bundled as a
MyEclipse project.
Using JSTL (JSP Standard Tag Library) with Ajax Tutorial: JSTL.pdf
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: jstl.zip.
Web app used in this section, bundled as a
MyEclipse project.
XHTML: A Crash Course
Tutorial: xhtml.pdf
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: xhtml.zip.
Web app used in this section, bundled as a
MyEclipse project.
Custom JSP Tag Libraries: Basics Tutorial: Custom-Tags-Basics.pdf
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: basicTags.zip.
Web app used in this section, bundled as a
MyEclipse project.
Custom JSP Tag Libraries: Advanced Capabilities
Tutorial
Custom-Tags-Advanced.pdf.
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: advancedTags.zip.
Web app used in this section, bundled as a
MyEclipse project.
Using JSP Custom Tag Libraries for Ajax Tutorial
Custom-Tags-Ajax.pdf.
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: custom-tags-ajax.zip.
Web app used in this section, bundled as a
MyEclipse project.
Using the AjaxTags Library: Basics
Tutorial
AjaxTags-Basics.pdf.
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: ajaxtags.zip.
Web app used in the basic and advanced AjaxTags sections, bundled as a
MyEclipse project.
ajaxtags-blank.zip.
Blank Web app to be used as a starting point for apps that use
AjaxTags. Contains all required JAR files and JavaScript files. Bundled
as a
MyEclipse project.
Using the AjaxTags Library: Advanced Capabilities
Tutorial
AjaxTags-Advanced.pdf.
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: ajaxtags.zip.
Web app used in the basic and advanced AjaxTags sections, bundled as a
MyEclipse project.
ajaxtags-blank.zip.
Blank Web app to be used as a starting point for apps that use
AjaxTags. Contains all required JAR files and JavaScript files. Bundled
as a
MyEclipse project.
Part I: Ajax Support Tutorial for the Prototype JavaScript Framework
Prototype-1.pdf.
Topics: Overview of Prototype, Installation, Ajax.Request, Basics,
Options,
HTML lookup and insertion, Ajax.Updater, Ajax.PeriodicalUpdater,
Handling JSON Data. Source code: prototype.zip.
Web app used in this section, bundled as a
MyEclipse project.
Part II: General JavaScript Support Tutorial for the Prototype
JavaScript Framework
Prototype-2.pdf.
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: prototype.zip.
Web app used in this section, bundled as a
MyEclipse project.
The Prototype JavaScript Framework
Part III: OOP Support Tutorial
Prototype-3.pdf.
Topics: Constructor and prototype in one place, Single
inheritance,
Merging objects, Multiple inheritance. Source code: prototype.zip.
Web app used in this section, bundled as a
MyEclipse project.
Part I: Ajax Support Tutorial for the Script.acul.us JavaScript Library
Scriptaculous-Ajax.pdf.
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: scriptaculous.zip.
Web app used in this section, bundled as a
MyEclipse project.
Part II: Visual Effects Tutorial for the Script.acul.us JavaScript
Library
Scriptaculous-Effects.pdf.
Topics: Overview of Visual Effects, Installation and documentation,
Highlighting, Showing/hiding elements, Moving, resizing, and styling
elements, Effect options. Source code: scriptaculous.zip.
Web app used in this section, bundled as a
MyEclipse project.
The Google Web Toolkit (GWT) Tutorials
GWT Basics.pdf
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, Hosted
mode, Web mode, Client-side listeners, Custom Java classes. Source
code: GwtProject1.zip
This is the 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.
The Google Web Toolkit (GWT): Widget Event
Handling
GWT Events Tutorial: GWT-Events.pdf
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.
GwtEvents1.zip
- Version with separate listener class.
GwtEvents2.zip
- Version with main class implementing listener interface.
GwtEvents3.zip
- Version with named inner class.
GwtEvents4.zip
- Version with anonymous inner class.
The Google Web Toolkit (GWT): Using RPC to Access Server-Side Data
Tutorial
GWT-RPC-1.pdf
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 serve,r
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.
The Google Web Toolkit (GWT): More RPC Topics
GWT-RPC-2.pdf
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,
GwtRpcDeploy.zip
Deployable MyEclipse app built from the GwtRpcProject
of the previous section.
GWT and JSNI: The JavaScript Native Interface Tutorial
GWT-JSNI.pdf
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, 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.
GwtJsni.zip.
Version with separate listener class.
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
Popularity: 6% [?]
Related Posts:
Tags for this post>> Ajax | GWT