"Free"
Ajax and Web 2.0 Programming (with
Passion!) Online Course
Message to potential
attendees to this course from
Sang Shin
I am not offering this course
until I find more free cycles to update the contents. Thanks for
your understanding.
Please find the list of
the graduates of the course
How
to register for
this course
We are
going to use newly created Google alias (ajaxprogramming@googlegroups.com)
as of Aug. 2007.
Please register yourself by sending a blank email to the following
email address.
Basically, when you send a blank email to the above, you are
subscribing our
class
forum. This forum can be used for posting
questions/answers either by email or through the website. Please
use this forum for all class related
communication (technical or non-technical). It is strongly
recommended you don't send an email directly to me. For further
questions, please see course
FAQ below. Please see the FAQ before posting questions to the
class alias or sending
an email directly to me.
Topics
and Schedule
In general, the contents (presentation,
hands-on labs, and homework's) will be ready on the dates specified
below. Due to the fast pacing nature of the Ajax technology, the
contents are
constantly being changed and improved even after the dates specified.
Changes made to the 3rd session: New topics added - Mashup, Dojo
Widgets, Echo2, Ajax security.
- Ajax Basics &
Development Tools (July 30th, 2009, Week #1)
(homework #1)
- JavaScript Basics and DOM APIs
(Aug. 15th, 2009, Week
#2) (homework #2)
- Web 2.0 Frameworks and
Toolkits (Aug.
30th,
Week #3) - homework is
optional
- Ajax Application Examples
(Sep.
26th,
2009,
Week #4) (homework #3)
- Dojo
Toolkit Basics (Oct.
3rd,
2009,
Week #5) (homework #4)
- Dojo Toolkit Wigets (Oct. 17th,
2009, Week
#6) (homework #5)
- ProtoType (Oct.
24th, 2009,
Week #8) (homework #6)
- JSON (Nov.
2nd, 2009,
Week #9) (homework #7)
- jMaki Basics (Nov. 12th, 2009,
Week #10) (homework #8)
- Direct
Web Remoting (DWR) (Jan.
10th, 2009,
Week #12) (homework #9)
- Google
Web Toolkit (Jan.
20th, 2009,
Week #13) (homework #10)
- Echo2 as Ajax-enabled Web App
framework (Feb.
10th, 2009,
Week #15)
(homework #11)
- CSS (Feb.
20tth,
2009, Week #16) (homework #12)
- JavaScript Best Practices
(March
10th, 2009,
Week #18 - end of
the course)
(homework #1
- Comet (Reverse Ajax, Server side push)
- JavaServer
Faces (JSF) and Ajax Integration
- ExtJS
- jQuery
- ZK
Framework
The topics below might be included in
the future session of this course.
- Ajax security
- DynaFaces
- Feeds
(Blogging/RSS/Atom)
- Dissecting
the Java BluePrints Petstore 2.0
Reference Application
- Ajax Design
Patterns
and
Best Practices
- Portlet/Portals
and Ajax
-
- jMaki
Examples
Ajax Basics &
Development Tools
In this session, you are going to learn
basic concepts of Ajax such as how XMLHttpRequest JavaScript object is
created and used by the browser for performing asynchronous
communication with the backend server. For the hands-on lab, you
are also going to learn how to use a few debugging tools out there,
especially FireBug debugger, for debugging client side JavaScript
code. You will also play around with various "ready to build and
run" Ajax sample applications.
1. Presentation slides (1.5 hour)
2. Lab 1 (3 hours) and homework
- 4257_ajaxbasics2.zip
(Unzip it in a directory of your choice
and read lab document from
<unzip-directory>/ajaxbasics2/index.html to proceed)
- Online
lab document (This is the same document you will find in the
hands-on lab zip file)
- Flash
- Homework
(The homework is ready so feel free to submit homework anytime) (All
homeworks are due by 2 weeks after the last week of this course.
As it currently stands, it is sometime in May. So you have plenty
of time to do your homework.)
- Change
log
3. Resources
- Ajax
- JavaScript
- Development tools
4. Public forums
return
to the topics
JavaScript Basics
JavaScript is the glue that makes the
whole Ajax operation possible. And having good understanding on
how JavaScript works is important for writing well-functioning Ajax
applications. You already got some exposure to JavaScript in
the previous two sessions. In this session, you will go over some
basic syntax and features of
JavaScript. Later on, we will discuss the best practice
guidelines in writing JavaScript code.
1. Pre-class reading material
2. Presentation slides (1.5 hour)
3. Lab 1 (2 hours) and homework
- 4263_ajaxjavascript.zip
(Unzip it in a directory of your choice and read lab document from
<unzip-directory>/ajaxjavascript/index.html to proceed)
- Online
lab document (This is the same document you will find in the
hands-on lab zip file)
- Homework
(The homework is ready so feel free to submit homework anytime)
- Change
log
4. Resources
Ajax Frameworks and
Toolkits
The goal of this session is to let you get exposed to various Ajax
frameworks and toolkits that are available as of today and let you have
some sense of their capabilities so that you can make best judgment in
terms of which one suites the need of your project in hand.
1. Pre-class reading materials
2. Presentation slides (1 hour)
3. Lab (2 hours) and homework
- 4258_ajaxframeworks.zip
(Unzip it in a directory of your choice and read lab document from
<unzip-directory>/ajaxframeworks/index.html to proceed)
- Online
lab document (This is the same document you will find in the
hands-on lab zip file)
- Homework
(The homework is ready so feel free to submit homework anytime)
- Change
log
return
to the topics
Ajax Application
Examples
In this session, you are going to build
and run several Ajax sample applications that are in the form of
NetBeans projects. This session does not have presentations.
1. Lab (2 hours) and homework
- 4259_ajaxexamples.zip
(Unzip it in a directory of your choice
and read lab document from
<unzip-directory>/ajaxexamples/index.html to proceed)
- Online
lab document (This is the same document you will find in the
hands-on lab zip file)
- Homework
(The homework is ready so feel free to submit homework anytime)
- Change
log
Dojo Toolkit Basics
1. Presentation slides (2 hours)
2. Labs (2 hours) and homework
- 4260_ajaxdojo1intro.zip
(Unzip it in a directory of your choice and read lab document from
<unzip-directory>/ajaxdojo1intro/index.html to proceed)
- Online
lab document (This is the same document you will find in the
hands-on lab zip file)
- Homework
(The homework is ready so feel free to submit homework anytime)
- Change
log
3. Resources
4. Public discussion forums
return
to the topics
Dojo Toolkit Widgets
In this session, you are going to learn
basic concept of Dojo widgets, which are reusable UI components.
1. Presentation slides (2 hours)
2. Labs (2 hours) and homework
- 4267_ajaxdojowidget.zip
(Unzip it in a directory of your choice and read lab document from
<unzip-directory>/ajaxdojowidget/index.html to proceed)
- Online
lab document (This is the same document you will find in the
hands-on lab zip file)
- Homework
(The homework is ready so feel free to submit homework anytime)
- Change
log
3. Resources
return
to the topics
ProtoType
Prototype is another popular JavaScript
library. In fact, several other JavaScript libraries use
Prototype underneath. In this session, you are going to learn
various utility functions.
1. Presentation slides (1 hour)
2. Lab - work in progress
- 4264_ajaxprototype.zip
(Unzip it in a directory of your choice
and read lab document from
<unzip-directory>/ajaxprototype/index.html to proceed)
- Online
lab document (This is the same document you will find in
the hands-on lab zip file)
- Homework
(The homework is ready so feel free to submit homework anytime)
- Change
log
3. Resources
return
to the topics
JSON
JSON (JavaScript Object Notation) is a
lightweight data-interchange format and used as a data-interchange
format of choice for many Ajax applications. In this session, you
will learn basic concept of JSON and how to create and send JSON
data. The hands-on lab lets you learn how to use JSON over Dojo
toolkit.
1. Presentation slides (1 hour)
2. Lab (1 hour) and homework
- 4262_ajaxdojojson.zip
(Unzip it in a directory of your choice and read lab document from
<unzip-directory>/ajaxdojojson/index.html to proceed)
- Online
lab document (This is the same document you will find in the
hands-on lab zip file)
- Homework
(The homework is ready so feel free to submit homework anytime)
- Change
log
3. Resources
return
to the topics
jMaki Basics
jMaki is all about enabling Java
developers to use JavaScript in
their Java based applications as either a JSP tag library or a JSF
component. jMaki uses the best parts of Java and the best parts of
JavaScript to deliver a rich AJAX style widgets. jMaki currently
provides bootstrap widgets for many components from Dojo,
Script.aculo.us, Yahoo UI Widgets, Spry, DHTML Goodies, and Google.
jMaki provides a common interfaces to these widget libraries and allows
you to use these libraries together in the same page.
1. Presentation slides (2 hours)
2. Labs (2 hours) - last
updated (Oct. 2nd, 2006)
3. Resources
- Arun Gupta's jMaki Screencast blogs and video
- Web sites
- Tutorials and documentation
4. Public forum
return
to the topic
jMaki Event Model
1. Presentation slides (2 hours)
- PDF:
1 slide
per page
- StarOffice
file
2. Labs (2 hours) - last
updated (Oct. 2nd, 2006)
3. Resources
Mashup
A mashup is a
web application
that combines data from more than one source into a single integrated
tool; a typical example is the use of cartographic data from
Google
Maps to add location information to real-estate data from
Craigslist,
thereby creating a new and distinct web service that was not originally
envisaged by either source.
Content used in mashups is typically sourced from a third party via a
public interface or
API, although some in
the community believe that cases where private interfaces are used
should not count as mashups
. Other methods of sourcing
content for mashups include
Web feeds
(e.g.
RSS or
Atom),
web
services and
Screen scraping. Many people are
experimenting with mashups using
Amazon,
eBay,
Flickr,
Google,
Microsoft,
and
Yahoo
APIs, which has led to the creation of the
Mashup
editor. (
quoted
from wikipedia)
1. Presentation slides (1 hour)
- PDF:
1 slide per page
- PDF:
slides with speaker notes
- StarOffice
file
2. Lab (1 hour) and homework
- 4271_ajaxjmakimashup.zip
(Unzip it in a directory of your choice and read lab document from
<unzip-directory>/ajaxjmakimashup/index.html to proceed)
- Online
lab document (This is the same document you will find in the
hands-on lab zip file)
- Homework
(The homework is ready so feel free to submit homework anytime)
- Change
log
3. Resources
return
to the topics
jMaki Examples
1. Presentation slides (1 hour)
- PDF:
1 slide per page
- PDF:
slides with speaker notes
- StarOffice
file
2. Lab (1 hour) and homework
- 4272_ajaxjmakiexamples.zip
(Unzip it in a directory of your choice and read lab document from
<unzip-directory>/ajaxjmakiexamples/index.html to proceed)
- Online
lab document (This is the same document you will find in the
hands-on lab zip file)
- Homework
(The homework is ready so feel free to submit homework anytime)
- Change
log
3. Resources
return
to the topics
Direct Web Remoting
(DWR)
DWR allows JavaScript code in a browser
to use Java methods running on a web server just as if they were in the
browser through RMI like capability. This is why it is called
Direct Web Remoting.
1. Presentation slides (2 hours)
2. Lab (2 hours) and homework
- 4265_ajaxdwrintro.zip
(Unzip it in a directory of your
choice
and read lab document from
<unzip-directory>/ajaxdwrintro/index.html to proceed)
- Online
lab document (This is the same document you will find in
the hands-on lab zip file)
- Homework
(The homework is ready so feel free to submit homework anytime)
- Change
log
3. Resources
4. Discussion forums
return
to the topics
Google Web Toolkit (GWT)
Google Web Toolkit (GWT) is definitely
an interesting technology to explore for building Ajax applications
especially for those who want to leverage their Java knowledge.
The current version of NetBeans GWT plug-in does not support "creating
a WAR" feature yet. That will be provided in the next version.
1. Presentation slides (2 hours) - last
updated (Oct. 7th, 2006)
2. Lab (5 hours) and homework
3. Resources
4. Discussion forums
return
to the topics
JavaServer Faces
(JSF) and Ajax Integration
JavaServer Faces provides a
component-model architecture through which you can build an Ajax
application by drag-and-dropping Ajax-enabled JavaServer Faces
components in an IDE such as Sun Java Studio Creator.
1. Presentation slides - Best Practice
Guidelines in using Ajax with JavaServer Faces (1 hour)
2. Lab2 (1 hour): Buidling
applications using Blueprint Ajax JSF components
3. Resources
return
to the topics
Ext JS
1. Presentation slides - Best Practice
Guidelines in using Ajax with JavaServer Faces (1 hour)
- PDF:
1 slide per page
- StarOffice
8 file
2. Lab
- 4289_ajaxzk.zip
(Unzip it in a directory of your
choice
and read lab document from
<unzip-directory>/ajaxzk/index.html to proceed)
- Online
lab document (This is the same document you will find in
the hands-on lab zip file)
- Homework
- Change
log
3. Resources
return
to the topics
jQuery
ZK is an open-source Ajax Web framework
that enables rich user interface for Web applications with no
JavaScript and little programming.
1. Presentation slides
- PDF:
1 slide per page
- StarOffice
file
- Flash
2. Lab 1 (2 hours)
- 4289_ajaxzk.zip
(Unzip it in a directory of your
choice
and read lab document from
<unzip-directory>/ajaxzk/index.html to proceed)
- Online
lab document (This is the same document you will find in
the hands-on lab zip file)
- Homework
- Change
log
3. Resources
return
to the topics
ZK
Framework
ZK is an open-source Ajax Web framework
that enables rich user interface for Web applications with no
JavaScript and little programming.
1. Presentation slides
- PDF:
1 slide per page
- StarOffice
file
- Flash
2. Lab 1 (2 hours)
- 4289_ajaxzk.zip
(Unzip it in a directory of your
choice
and read lab document from
<unzip-directory>/ajaxzk/index.html to proceed)
- Online
lab document (This is the same document you will find in
the hands-on lab zip file)
- Homework
- Change
log
3. Resources
return
to the topics
Echo2 and Ajax
Most of the popular Web application
frameworks such as Echo2 and Shale are adding Ajax support as part of
the framework. Even without built-in Ajax support, it is usually
possible to add Ajax functionality to the existing applications with
minimum effort.
1. Presentation slides - Shale Remoting
(1
hour)
- PDF:
1 slide per page
- PDF:
slides with speaker notes
- StarOffice
file
return
to the topics
CSS
Cascading Style Sheets (CSS) is a
simple mechanism for adding style
(e.g. fonts, colors, spacing) to Web documents. It is one of the
technologies you can leverage with to make your web application
visually pleasant. The presentation slides will give you quick
introduction to CSS syntax. The hands-on lab exercise will let
you play around with CSS styles first. It will also let you
experience what could be possible with CSS styling.
1. Presentation slides (1 hour)
return
to the topics
JavaScript Best
Practices
1. Presentation slides (1 hour) -
JavaScript best practices
2. Presentation slides (1 hour) -
JavaScript by Douglas Crockford
3. Presentation slides (1 hour) - Advanced JavaScript by Douglas Crock
4. Presentation slides - How to write OO style JavaScript code using
Dojo toolkit
5. Lab
Comet (Reverse Ajax, Server-side Push)
1. Presentation slides
2. Lab 1 (2 hours)
- 4293_ajaxcomet.zip
(Unzip it in a directory of your
choice
and read lab document from
<unzip-directory>/ajaxfeeds/index.html to proceed)
- Online
lab document (This is the same document you will find in
the hands-on lab zip file)
- Homework
- Change
log
3. Resources
- Tutorials
- Articles
- Presentations
- Bayeux & Cometd
- Comet support in GlassFish
return
to the topics
Portlets/Portals and
Ajax
1. Presentation slides (1 hour)
2. Lab 1 (Building Ajax-enabled Portlet
using Existing Portal server)
3. Lab 2 (Portal server with Ajax
support)
4. Resources
- Ajax and portlets
- Portal and Portlet
Ajax Security
1. Presentation slides (1 hour)
2. Lab
- 4287_ajaxjavascriptadv.zip
(Unzip it in a directory of your
choice
and read lab document from
<unzip-directory>/ajaxjavascriptadv/index.html to proceed)
- Online
lab document (This is the same document you will find in
the hands-on lab zip file)
- Homework
- Change
log
3. Resources
return
to the topics
DynaFaces
Dynamic Faces (called DynaFaces)
provides an easier solution for developers to add Ajax functionality to
their JSF based applications.
1. Presentation slide - Using DynaFaces
2. Labs (2 hours) - there is no homework!
3. Resources
return
to the topics
Dissecting
the Java BluePrints Petstore 2.0
Reference Application
1. Presentation slides (1 hour)
- PDF:
1 slide per page
- PDF:
slides with speaker notes
- StarOffice
file
2. Lab
- 4292_ajaxjavapetstore20.zip (Unzip it in a directory of your
choice
and read lab document from
<unzip-directory>/ajaxjavapetstore20/index.html to proceed)
- Online lab document (This is the same document you will find in
the hands-on lab zip file)
return
to the topics
Ajax
Design Patterns and Best Practices
1. Presentation slides (1 hour)
- PDF:
1 slide per page
- PDF:
slides with speaker notes
- StarOffice
file
- Flash
2. Lab
- 4289_ajaxdesignpatterns.zip (Unzip it in a directory of your
choice
and read lab document from
<unzip-directory>/ajaxdesignpatterns/index.html to proceed)
- Online lab document (This is the same document you will find in
the hands-on lab zip file)
3. Resources
return
to the topics
Feeds (Blogging/RSS/Atom)
1. Presentation slides
- PDF:
1 slide per page
- StarOffice
file
- Flash
2. Lab 1 (2 hours)
- xxxx_ajaxfeeds.zip
(Unzip it in a directory of your
choice
and read lab document from
<unzip-directory>/ajaxfeeds/index.html to proceed)
- Online
lab document (This is the same document you will find in
the hands-on lab zip file)
- Homework
- Change
log
3. Resources
return
to the topics
