Ajax and Web 2.0 Programming (with
Passion!) Online Course
Message to potential
attendees to this course from
Sang Shin
Announcement from Sang Shin (Feb. 1st, 2010): In
the near future, the
courses in javapassion.com will be available as a subscription-based
service. (Yes, it is a painful decision on my part.) If you want
to
receive course announcement in the future, please send an blank email
to
javapassion-announcement+subscribe@googlegroups.com.
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.
The prerequisites of this course are as
following
- Some Java programming experience
- Basic Web application development experience
- Basic HTML knowledge
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 Web 2.0 technology,
the
contents are
constantly being changed and improved even after the dates specified.
- Ajax Basics &
Development Tools (Sep. 7th, 2009)
- content is ready, updated with NetBeans 6.7.1
- JavaScript Basics and DOM APIs
(Sep. 15th, 2009) -
content is ready, updated with NetBeans 6.7.1
- Web 2.0 Frameworks and
Toolkits (Sep.
24th)
- content is reay,
homework is optional
- Dojo
Toolkit Basics (Oct.
10th,
2009) -
content is ready, updated with NetBeans 6.7.1 and Dojo toolkit 1.3.2
- Dojo Toolkit Wigets (Oct. 17th,
2009)
-
content is ready, updated with NetBeans 6.7.1 and Dojo toolkit 1.3.2
- Dojo
Toolkit Advanced (will be covered in the subsequent session of this
course)
- JSON (Oct.
24th, 2009) -
content is ready, updated with NetBeans 6.7.1
- ProtoType (Nov.
3rd, 2009)
- content is ready, updated with NetBeans 6.7.1
- Direct
Web Remoting (DWR) (Nov.
22nd, 2009) -
content is updated with DWR 2.0 and NetBeans 6.8
- Google
Web Toolkit (Nov.
29th, 2009)
- content is ready, all samples are updated with
NetBeans 6.7.1 and GWT 1.7.0
- CSS (Dec.
20th,
2009)
- content is ready,
all samples are updated with
NetBeans 6.7.1
- JavaScript Advanced (Jan
10th, 2010)
- Comet
(Ajax Push, Reverse Ajax) (Jan
20th, 2010) - hands-on lab
ready
The topics below might be included in
the future session of this course.
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
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
- JavaScript tutorial sites
- Screencasts
- Presentation
- Articles, blogs
- DOM
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
4, Resources
return
to the topics
Dojo Toolkit Basics
1. Presentation slides (2 hours)
2. Labs (2 hours) and homework
- 4260_dojo_basics.zip
(Unzip it in a directory of your choice and read lab document from
<unzip-directory>/dojo_basics/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
- Websites
- Dojo demo site
- Tutorials, articles
- Books, manuals, API
- Presentations
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_dojo_widgets.zip
(Unzip it in a directory of your choice and read lab document from
<unzip-directory>/dojo_widgets/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
Dojo Toolkit Advanced (This
topic will be covered in the subsequent session of this course)
In this lession, you are going to learn
advanced topics of Dojo toolkit such as "drag and drop", offline usage,
creating your own custom widgets. testing/tuning/debugging.
1. Presentation slides (2 hours)
- PDF:
1 slide per page
- StarOffice
file
2. Labs (2 hours) and homework
- 4267_dojo_widget.zip
(Unzip it in a directory of your choice and read lab document from
<unzip-directory>/dojo_widget/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
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
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
- Screencasts
- Tutorials
- GWT
- NetBeans GWT Plug-in
4. Discussion forums
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 Advanced
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
Crockford
4. Presentation slides - How to write OO style JavaScript code using
Dojo toolkit
5. Lab
6. Resources
- General
- Object-Oriented JavaScript programming
- Advanced JavaScript
- Closure
- Performance
return
to the topics
Comet (Ajax Push, Reverse Ajax)
1. Presentation slides
2. Lab 1 (2 hours) - partially done
(Sep. 23rd, 2009)
3. Resources
- Bayeux & Cometd websites
- Comet related blog sites
- Screencasts
- Presentations
- Tutorials & articles
- Comet support in GlassFish
- Sample codes
return
to the topics
Comet with Project
Atmosphere (Comet Abstract Framework) and Servlet 3.0
1. Presentation slides
- PDF:
1 slide per page
- StarOffice
file
2. Lab 1 (2 hours)
- 4295_ajaxcomet2.zip
(Unzip it in a directory of your
choice
and read lab document from
<unzip-directory>/ajaxcomet2/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
- Websites
- Tutorials
- Presentations
JavaServer Faces
(JSF) and Ajax Integration with ICEFaces
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. Lab
- 4296_ajaxicefaces.zip
(Unzip it in a directory of your
choice
and read lab document from
<unzip-directory>/ajaxicefaces/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
- Screencasts or podcats
- Tutorials
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
- 4297_ajaxextjs.zip
(Unzip it in a directory of your
choice
and read lab document from
<unzip-directory>/ajaxextjs/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
1. Presentation slides
- PDF:
1 slide per page
- StarOffice
file
- Flash
2. Lab 1 (2 hours)
- 4298_ajaxjquery.zip
(Unzip it in a directory of your
choice
and read lab document from
<unzip-directory>/ajaxjguery/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
- Websites
- Screencasts
- Tutorials
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)
- 4299_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
Ajax Performance
and Best Practices
1. Presentation slides (1 hour)
2. Lab
- 4276_ajaxperformance.zip (Unzip it in a directory of your
choice
and read lab document from
<unzip-directory>/ajaxperformance/index.html to proceed)
- Online lab document (This is the same document you will find in
the hands-on lab zip file)
3. Resources
- Web sites
- Screencasts
- Presentations
- Articles and tutorials
- Tools and frameworks
- Mini'fying JavaScript code tools
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)
2. Lab
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
- Websites
- Screencasts
- Articles
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
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
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
- jMaki event model
4. Public forum
return
to the topic
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)
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)
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
