Intelligentedu
Best New Free Computer IT Training Tutorial Resources


October 14, 2009

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



Tags for this post>> |


Filed under: Best New Free Computer IT Training Tutorial Resources — computer_teacher @ 7:46 pm


Powered by WordPress