Practical Ajax Projects with Java Technology

525 Pages·2006·13.41 MB·English

by  Frank Zammetti

CYAN YELLOW
MAGENTA BLACK
PANTONE 123 CV
EMPOWERING JAVA™ DEVELOPERS WITH AJAX TECHNIQUES THE EXPERT’S VOICE® IN WEB DEVELOPMENT
Companion
eBook Available SSuuppppoorrttss aallll
Practical Ajax Projects with Java Technology
™ ccuurrrreenntt JJaavvaa™™ vveerrssiioonnss,,
iinncclluuddiinngg 55 aanndd 66!!
Dear Reader, Practical
We all know that Ajax is a hot topic right now, and I’m sure you’ve noticed just
how many books are now available on the subject. Why would I write another, A
you ask? Simply put, it is one thing to read a tutorial book on a topic, but many
programmers learn best by picking apart actual working applications. j Practical
And that’s what this book is all about! Within it you will find a brief refresher a
of key Ajax concepts and development environment setup, but that’s not the
focus. The main bulk of this book consists of seven complete, real-world Ajax x
applications, built with Java™technologies, including:
• AjaxReader—The prototypical Ajax application: an RSS aggregator P Ajax Projects
• PhotoShare—A photo-sharing application that includes some cool
r
animation effects and graphical embellishments o with
• AjaxChat—A multiuser chat application built on the ubiquitous Struts j
e
framework
c
• AJAX Warrior—A full web-based adventure game utilizing Ajax
t
...and many more! You will learn by doing—by seeing how all the pieces fit s Java Technology
together to form the whole. By the time you finish this book, you will be well
w ™
versed in all things Ajax, and quite a bit more, including JavaScript™, CSS, DOM
scripting, JSON, XML, Jakarta Commons components, Apache Struts, i
t
OpenSymphony WebWork, HSQLDB, and even basic game design theory! h
I truly believe that if you are a programmer who learns best by looking at
code, this book will serve you very well indeed. See you inside! J
Frank W. Zammetti
a
SJCP, MCSD, MCP, CNA, CIW Associate, etc.
Join online discussions:
v
forums.apress.com
FOR PROFESSIONALS a Accelerate your learning with professional
BY PROFESSIONALS™
THE APRESS ROADMAP Ajax projects,powered by Java™technologies!
™
Companion eBook Beginning JavaScript™ with Ajax Patterns T
DOM Scripting and Ajax:
From Novice to Professional Pro JavaScript™ and Best Practices e
Techniques c
Beginning CSS
Web Development: Pro Ajax and h
From Novice to Professional Java™ Frameworks n
See last page for details Foundations of Ajax
on $10 eBook version Beginning POJOs: Practical Ajax Projects o
From Novice to Professional with Java™ Technology l
o
g
y Frank W. Zammetti
SOURCECODEONLINE
www.apress.com ISBN 1-59059-695-1
54999 Zammetti
US $49.99
Shelve in
Java™Programming
User level:
Intermediate–Advanced 6 89253 59695 1 9 781590 596951
this print for content only—size & color not accurate spine = 0.998" 528 page count
6951FM 7/7/06 8:23 AM Page i
Practical Ajax Projects
with Java Technology
TM
Frank W. Zammetti
6951FM 7/7/06 8:23 AM Page ii
Practical Ajax Projects with JavaTMTechnology
Copyright © 2006 by Frank W.Zammetti
All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording, or by any information storage or retrieval
system, without the prior written permission of the copyright owner and the publisher.
ISBN-13 (pbk): 987-1-59059-695-1
ISBN-10 (pbk): 1-59059-695-1
Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1
Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence
of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark
owner, with no intention of infringement of the trademark.
Java and all Java-based marks are trademarks or registered trademarks of Sun Microsystems, Inc. in the
U.S. and other countries.
Apress, Inc. is not affiliated with Sun Microsystems, Inc., and this book was written without endorsement
from Sun Microsystems, Inc.
Lead Editor: Chris Mills
Technical Reviewer: Herman van Rosmalen
Editorial Board: Steve Anglin, Ewan Buckingham, Gary Cornell, Jason Gilmore, Jonathan Gennick,
Jonathan Hassell, James Huddleston, Chris Mills, Matthew Moodie, Dominic Shakeshaft, Jim Sumser,
Keir Thomas, Matt Wade
Project Manager: Richard Dal Porto
Copy Edit Manager: Nicole LeClerc
Copy Editor: Liz Welch
Assistant Production Director: Kari Brooks-Copony
Production Editor: Kelly Gunther
Compositor: Lynn L’Heureux
Proofreader: Linda Seifert
Indexer: Brenda Miller
Cover Designer: Kurt Krames
Manufacturing Director: Tom Debolski
Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor,
New York, NY 10013. Phone 1-800-SPRINGER, fax [phone], e-mail [email protected], or
visit http://www.springeronline.com.
For information on translations, please contact Apress directly at 2560 Ninth Street, Suite 219, Berkeley,
CA 94710. Phone [phone], fax [phone], e-mail [email protected], or visit http://www.apress.com.
The information in this book is distributed on an “as is” basis, without warranty. Although every precaution
has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to
any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly
by the information contained in this work.
The source code for this book is available to readers at http://www.apress.comin the Source Code section.
6951FM 7/7/06 8:23 AM Page iii
For my wife Traci,who probably does not understand a single thing in this book,but who
reminded me why I love her by being more excited for me than I was for myself about my
first book.
For my two children,Andrew and Ashley,for whom I gladly worked all those long hours.
Thanks for leaving Daddy alone (usually) long enough to get this done;I owe you each a
pony.(I hope you both know about sarcasm by the time you read this!)
For Mom and Dad,who started it all with the seemingly innocuous purchase of a
Timex Sinclair 1000 computer for Christmas 1982 (or 1983—my memory’s a bit flaky
20+ years later!).
For John J.Sheridan,for keeping the Shadows off our backs.
6951FM 7/7/06 8:23 AM Page iv
6951FM 7/7/06 8:23 AM Page v
Contents at a Glance
About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
About the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
About the Illustrator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvi
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
PART 1 ■ ■ ■ Programming Using Ajax and Java
■ CHAPTER 1 Ajax:The Brave New World . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
■ CHAPTER 2 The Pillars of Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
■ CHAPTER 3 The Server Side of the Equation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
PART 2 ■ ■ ■ The Projects
■ CHAPTER 4 Karnak:Type-Ahead Suggestions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
■ CHAPTER 5 InstaMail:An Ajax-Based Webmail Client . . . . . . . . . . . . . . . . . . . . . . 143
■ CHAPTER 6 AjaxReader:Because Every Ajax Book
Has to Have One! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
■ CHAPTER 7 PhotoShare:Share Your Visual Life with
Your Friends . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
■ CHAPTER 8 The Organizer:Get Yourself Organized Now! . . . . . . . . . . . . . . . . . . 313
■ CHAPTER 9 AjaxChat:Chatting,the Ajax Way! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
■ CHAPTER 10 AJAX Warrior:Back to the Future in a Fun Way! . . . . . . . . . . . . . . . 407
■ APPENDIX A The XMLHttpRequest Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479
■ APPENDIX B Libraries,Websites,and Books,Oh My! . . . . . . . . . . . . . . . . . . . . . . . 483
■ INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489
v
6951FM 7/7/06 8:23 AM Page vi
6951FM 7/7/06 8:23 AM Page vii
Contents
About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
About the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
About the Illustrator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvi
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
PART 1 ■ ■ ■ Programming Using Ajax and Java
■ CHAPTER 1 Ajax: The Brave New World . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
A Brief History of Web Development:The “Classic”Model . . . . . . . . . . . . . 3
What Is “Wrong”with the Classic Web? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Enter Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Why Is Ajax a Paradigm Shift? On the Road to RIAs . . . . . . . . . . . . . . . . . . 16
Let’s Get to It:Our First Ajax Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Choices in Ajax Toolkits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Alternatives to Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
■ CHAPTER 2 The Pillars of Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
JavaScript Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Object-Oriented JavaScript,or Making JavaScript
“Non-Kiddie-Like”. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
The Document Object Model and Scripting:
Manipulating Content on the Fly . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
XML:The Language of Languages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Parsing XML in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Cascading Stylesheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
vii
6951FM 7/7/06 8:23 AM Page viii
viii ■ CONTENTS
■ CHAPTER 3 The Server Side of the Equation . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
The Project Development Environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Ant:Building Java Applications the Open Source Way . . . . . . . . . . . . . . . . 84
Apache Tomcat:Something for Nothing! . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Webapps,Servlets,JSPs,and Parsing XML on the Server . . . . . . . . . . . . 96
Installing and Playing with the Applications . . . . . . . . . . . . . . . . . . . . . . . . 111
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
PART 2 ■ ■ ■ The Projects
■ CHAPTER 4 Karnak: Type-Ahead Suggestions . . . . . . . . . . . . . . . . . . . . . . . . 115
Requirements and Goals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
How We Will Pull It Off . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Visualizing the Finish Line . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Dissecting the Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Suggested Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
■ CHAPTER 5 InstaMail: An Ajax-Based Webmail Client . . . . . . . . . . . . . . . 143
Requirements and Goals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
How We Will Pull It Off . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Visualizing the Finish Line . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
Dissecting the Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Suggested Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
■ CHAPTER 6 AjaxReader: Because Every Ajax Book
Has to Have One! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Requirements and Goals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
How We Will Pull It Off . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Visualizing the Finish Line . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Dissecting the Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Suggested Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
6951FM 7/7/06 8:23 AM Page ix
■ CONTENTS ix
■ CHAPTER 7 PhotoShare: Share Your Visual Life with
Your Friends . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Requirements and Goals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
How We Will Pull It Off . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254
Visualizing the Finish Line . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Dissecting the Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Suggested Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
■ CHAPTER 8 The Organizer: Get Yourself Organized Now! . . . . . . . . . . . . 313
Requirements and Goals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
How We Will Pull It Off . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
Visualizing the Finish Line . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321
Dissecting the Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324
Suggested Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352
■ CHAPTER 9 AjaxChat: Chatting,the Ajax Way! . . . . . . . . . . . . . . . . . . . . . . . 353
Requirements and Goals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
How We Will Pull It Off . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354
Visualizing the Finish Line . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
Dissecting the Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
Suggested Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406
■ CHAPTER 10 AJAX Warrior: Back to the Future in a Fun Way! . . . . . . . . 407
Requirements and Goals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407
How We Will Pull It Off . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
Visualizing the Finish Line . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
Dissecting the Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
Suggested Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477