Playing Around with AJAX Frameworks and
Toolkits
This hands-on lab takes you through the demo sites of the various
AJAX frameworks and toolkits. The goal of this hands-on lab is to
let you experience some of the capabilities of these frameworks and
toolkits through their online demos. Please feel free to explore
and experiment
the capabilities of these frameworks and toolkits on your own.
Expected duration: 120 minutes
Prerequisites
There is no prerequisite requirement for this lab.
Software
Needed
You only need a browser.
Resources
Change Log
- Nov. 17th, 2006: FireBug debugger plug-in is now included as part
of the hands-on lab zip file
- Dec. 5th, 2006: Suggested demos for each technology is added
- Jan. 14th, 2007: Link to Sun Java Studio Creator components is
updated
- Nov. 6th, 2007: Dojo Demo link is removed.
- Nov. 14th, 2007: ExtJS link is added
- Dec. 7th, 2007: Pictures are updated
Lab Exercises
You will need an internet connection for all exercises.
Exercise 1: Play around with Client side
JavaScript toolkit libraries
In this exercise, you are going to play
around various client side Java Script library toolkits through their
online demo site.
- Dojo toolkit
- Script.sculo.us
- Rico
- DHTML Goodies
- Spry framework for Ajax
- Zimbra Kabuki
- Yahoo! User Interface Library
- ExtJS
(1.1)
Dojo toolkit
0. Watch 8
minutes QuickTime intro on Dojo toolkit from inforworld.com
The Dojo 1.0 version of the demos on the
Dojo website is not ready as of Dec. 7th, 2007. The only one that
is working is Fisheye demo below.
1. Go to Dojo
1.0 demo site.
- Move your mouse over the icons and observe the Fisheye
effect. (Figure-1.10 below)
Figure-1.10: Dojo Fisheye effect
2. Go to LightStreamer demo site.
- Observe that the data are being changed.
- Check CON Consulting and observe that the graph is being
drawn. (Figure-1.11 below)
Figure-1.11: LightStreamer Dojo demo
- Click Name column and observe that the names are sorted.
(Figure-1.12 below)
Figure-1.12: Sorted list
return to top of the
exercise
(1.2)
Script.sculo.us
1. Try and drag and drop.
- Drag and drop the cup and shirt icons
from the section fo silly easy
shopping section to the area of your
cart. (Figure-1.21 below)
Figure-1.21: Drag and drop
- Press F12 to see the HTTP request and
response that are exchanged between the client and server through
XMLHttpRequest. (Figure-1.22 below)
Figure-1.22: HTTP request and response
2. Try autocompletion demo
- Click Autocompleting AJAX test
fields link. (Figure-1.24 below)
Figure-1.24: Click Autocompleting AJAX test fields link
- Type some characters, sh
in this example, and observe that the names that contains the type
characters as part of their last name are displayed. (Figure-1.25 below)
Figure-1.25: Auto completion
3. Try Combination
effects demo.
- Click Combination Effects Demo
link. (Figure-1.26 below)
Figure-1.26: Combination Effects Demo
- Try various effect by clicking each of them. (Figure-1.27 below)
Figure-1.27: Combination effects demo
4. Try sortable floats demo.
return to top of the
exercise
(1.3)
Rico
0. If you have internet connection, watch
8
minutes QuickTime intro on Rico from inforworld.com.
1. From your browser, go to Rico
demo site.
2. Click the various demo links (in the
live page not in the picture
below) (Figure-1.30 below)
Figure-1.30: Rico demo site
3. Try Javascript
Updater under AJAX DEMOS
section. (Figure-1.31 below)
- Click one of the names in the drop-down menu items on the left
and then observe the name and address are changed in the actual form
letter on the right.
Figure-1.31: JavaScript Updater of Rico
4. Try Custom
Draggable under DRAG &
DROP DEMOS section. (Figure-1.32 below)
- Drag a name under the available
name-list section on the left and drop it under dropped name-list section on the
right.
- Observe that the names are dropped and also observe that drop-n-drop message log section has
startDrag and endDrag for drag and drop activity.
Figure-1.32: Custom Draggable
5. Try Custom
Drop Zone under DRAG &
DROP DEMOS section. (Figure-1.33 below)
- Drag and a name from the name-list section and drop it in one of
the 3 drop sections.
- Observer that you can drop a name only in one of the three
sections that it belongs to.
Figure-1.33: Custom Drip Zone
6. Try Accordion
under BEHAVIOR DEMOS
section. (Figure-1.34 below)
- Observe that Accordion behavior.
Figure-1.34: Accordion of Rico
7. Try
Weather Widget under BEHAVIOR
DEMOS section. (Figure-1.35 and Figure-1.36 below)
- Enter a zip code and click Lookup.
Figure-1.35: Try Weather Widget
- Observe that the Accordion enabled Weather information is
displayed.
Figure-1.36: Observe the Weather information
8. Try LiveGrid
- Data Table under BEHAVIOR
DEMOS section. (Figure-1.37 below)
- Type Star in the Title
field and observe that the titles with Star
are displayed.
Figure-1.36: LiveGrid - Data Table
return to top of the
exercise
(1.4)
DHTML Goodies
1. From your browser, go to dhtmlgoodies.com
home site.
2. Try Menu Script demos.
- Click Menu Scripts on
the left. (FIgure-1.40 below)
Figure-1.40: Select Menu Scripts
- Click demo link under HTML Menu for applications.
(Figure-1.41 below)
Figure-1.41: Click DHTML Menu demo
- Observe that several menu options are displayed.
- Try Fourth menu which supports side pop-up style expansion.
3. Try Window Scripts.
- Select one of the window and drag it around.
- Resize one of the windows.
4. Try other features.
return to top of the
exercise
(1.5)
Spry framework for Ajax
1. From your browser, go to Spry
framework demo site.
2. Try Effects Demo.
return to top of the
exercise
(1.6)
Zimbra Kabuki
(1.7)
Yahoo! User Interface Library
(1.8)
ExtJS
Figure-1.80: Try ExtJS
Summary
In this exercise, you have explored capabilities of the various client
side JavaScript based technologies.
return to the top
Exercise 2: AJAX-enabled JSF components
(2.1)
AJAX components available for Sun Java Studio Creator 2
1. From your browser, go to AJAX
Components available for Sun Java Studio Creator 2 home site.
2. For each AJAX component, click Run
it link. (Figure-2.10 below)
Figure-2.10: AJAX components for Sun Java Studio Creator 2
(2.2)
Ajax4jsf
1. From your browser, go to Ajax4jsf
examples.
2. Scroll down the page and click demo links. (Figure-2.20 below)
Figure-2.20: Ajax4jsf demos
3. For commercial product (Exadel, who
donated the code) that is based on Ajax4jsf, please go to
Exadel
Visual Component Platform Demo site.
4. Read the documentation for how to run the demo. For example,
for changing skin, click Change Skin link on the top. (Figure-2.21
below)
Figure-2.21: Exadel demo
(2.3)
ICEFaces (Commercial product)
1. From your browser, go to
ICEFaces
demo site.
2. Click demo icons. (Figure-2.30 below)
Figure-2.30: ICEFaces demo site
Return to the top
Exercise 3: jMaki
Since there is no on-line demos on the
net at the moment using jMaki, you are going to see online video that
shows how to use jMaki NetBeans plug-in.
(3.1)
Run jMaki NetBeans plug-in
1. From your browser, go to jMaki demo site
2. Click widget source under Samples and then click one of the widgets
on the right side of the page. (Figure-3.10 below)
Figure-3.10: jMaki NetBeans plug-in video
Exercise 4: Google Web Toolkit
(4.1)
Google Web Toolkit
Exercise 5: Direct Web Remoting
(5.1) Direct Web
Remoting (DWR)
1. From your browser, go to
DWR
Examples
2. Click example links in the page, for example,
Table Editing. (Figure-5.10
below)
Figure-5.10: DWR demos
3. Add, edit, or delete a person. (Figure-5.11 below)
Figure-5.11: Table editing demo
return to the top
Exercise 6: Web Application Frameworks
with AJAX extension
In this exercise, you are going to try
demos from Web application frameworks with AJAX extensions.
(6.1)
Wicket
1. From your browser, go to
Wicket
examples
2. Click various example links. (Figure-6.10 below)
Figure-6.10: AJAX and Wicket examples
(6.2)
Echo2
1. From your browser, go to
Echo2 demo site
2. Click various examples, for example,
Interactive Test, at the bottom of
the page. (Figure-6.20 below)
Figure-6.20: AJAX application using Echo2
return to the top
Homework
Exercise (for people who
are taking Sang Shin's "AJAX online course") - Optional
This homework is optional, which means
you don't
have to submit it unless you want to.
1. The homework exercise is for you to
write one or two paragraphs
describing an "interesting" AJAX related technology/feature you find
while you are playing
with the online demos above or while reading AJAX articles on the
net. Please use the following format.
- Title (You can come up with your own title or use the existing
title)
- URL location
- What it is and why you think it is interesting
By the way, by "an interesting aspect",
I meant the following
- It is totally from your subjective standpoint. If you are
new to AJAX, just a simple "auto-complete" AJAX behavior or
"Drag-and-drop" widget could be an
interesting feature to you.
- It could be either from user standpoint or from a developer
standpoint. From a developer standpoint, you might find a
particular implementation or design technique interesting.
- Issues such as performance, security, salability,
maintainability
are all interesting aspects.
2. If you don't find any interesting
AJAX related technology/feature yourself, instead if you want to reply
or comment to other people's postings, that is perfectly fine and will
be considered as "homework done". Again, this is optional.
3. Post it to the
class wiki website
(http://www.theajaxworkshop.com/forums/) or class email alias as
well if you think it
will benefit your fellow students. This is encouraged but not
required.
