this print for content only—size & color not accurate spine = 0.998" 528 page count EMPOWERING JAVA ™ DEVELOPERS WITH AJAX TECHNIQUES Practical Ajax Projects with Java ™ Technology Dear Reader, 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, 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. And that’s what this book is all about! Within it you will find a brief refresher 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 applications, built with Java ™ technologies, including: • AjaxReader—The prototypical Ajax application: an RSS aggregator • PhotoShare—A photo-sharing application that includes some cool animation effects and graphical embellishments • AjaxChat—A multiuser chat application built on the ubiquitous Struts framework • AJAX Warrior—A full web-based adventure game utilizing Ajax and many more! You will learn by doing—by seeing how all the pieces fit together to form the whole. By the time you finish this book, you will be well versed in all things Ajax, and quite a bit more, including JavaScript ™ , CSS, DOM scripting, JSON, XML, Jakarta Commons components, Apache Struts, OpenSymphony WebWork, HSQLDB, and even basic game design theory! 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! Frank W. Zammetti SJCP, MCSD, MCP, CNA, CIW Associate, etc. US $49.99 Shelve in Java™ Programming User level: Intermediate–Advanced Zammetti THE EXPERT’S VOICE ® IN WEB DEVELOPMENT Frank W. Zammetti Practical Ajax Projects with Java ™ Technology CYAN MAGENTA YELLOW BLACK PANTONE 123 CV ISBN 1-59059-695-1 9 781590 596951 54999 6 89253 59695 1 Companion eBook Available Accelerate your learning with professional Ajax projects, powered by Java ™ technologies! Supports all current Java ™ versions, including 5 and 6! Supports all current Java ™ versions, including 5 and 6! www.apress.com SOURCE CODE ONLINE Companion eBook See last page for details on $10 eBook version forums.apress.com FOR PROFESSIONALS BY PROFESSIONALS ™ Join online discussions: THE APRESS ROADMAP Foundations of Ajax Pro JavaScript ™ Techniques Ajax Patterns and Best Practices Beginning POJOs: From Novice to Professional Beginning CSS Web Development: From Novice to Professional Beginning JavaScript ™ with DOM Scripting and Ajax: From Novice to Professional Practical Ajax Projects with Java ™ Technology Pro Ajax and Java ™ Frameworks Ajax Projects with Java ™ Technology Practical Frank W. Zammetti Practical Ajax Projects with Java TM Technology 6951FM 7/7/06 8:23 AM Page i Practical Ajax Projects with Java TM Technology 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 201-348-4505, e-mail orders-ny@springer-sbm.com, or visit http://www.springeronline.com. For information on translations, please contact Apress directly at 2560 Ninth Street, Suite 219, Berkeley, CA 94710. Phone 510-549-5930, fax 510-549-5939, e-mail info@apress.com, 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.com in the Source Code section. 6951FM 7/7/06 8:23 AM Page ii 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 iii 6951FM 7/7/06 8:23 AM Page iv 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 v 6951FM 7/7/06 8:23 AM Page vi 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 vii ■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 ■CONTENTSviii 6951FM 7/7/06 8:23 AM Page viii ■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 ■CONTENTS ix 6951FM 7/7/06 8:23 AM Page ix [...]... the examples in this book are freely available from the Source Code section of the Apress website In fact, due to the nature of this book, you will absolutely have to download the source before you begin Chapter 4 To do so, visit www .apress. com, click the Source Code link, and find Practical Ajax Projects with JavaTM Technology in the list From this book’s home page you can download the source code... popular Ajax libraries Chapter 9 is an Ajax- based chat application named, unimaginatively, AjaxChat This application is built on what may be the most famous framework of them all, Struts, and uses “naked” Ajax, that is, no library at all Chapter 10, finally, is the game! AJAX Warrior is its name, and it too is built using “naked” Ajax, and introduces a popular data format frequently seen in Ajax applications... introduces AjaxTags in Java Web Parts (don’t worry if you don’t know what this, or anything else mentioned here, is… we’ll get to that!) Chapter 5 is a webmail client, similar to Google’s Gmail With this project you will be introduced to a cool Ajax library named DWR Chapter 6 presents a fairly typical Ajax application: an RSS feed reader This project again demonstrates the usage of AjaxTags in Java Web... www.adaptivepath.com/publications/essays/archives/000385.php) in which he coined the term Ajax Figures 1-7 through 1-9 show examples of Ajax- enabled applications Figure 1-6 Ajax to the rescue! Figure 1-7 Backbase, a commercial product for creating Ajax applications, shows off their product in this flight-booking application 6951ch01 7/7/06 8:11 AM Page 13 CHAPTER 1 ■ AJAX: THE BRAVE NEW WORLD Ajax, as I’d be willing to bet my dog you know... those years ago when we discuss alternatives to Ajax, but the important point here is that the approach that is at the heart of Ajax is nothing new as it does not, contrary to its very own name, require any specific technologies (aside from client-side scripting, which is, with few exceptions, required of an Ajax or Ajax- like solution) When you get into the Ajax frame of mind, which is what we are really... working with Struts for years (pre-1.0), he got interested in Ajax and joined the Java Web Parts open source project in 2005 Herman lives in a small town, Pijnacker, in the Netherlands with his wife Liesbeth and their children, Barbara, Leonie, and Ramon xiii 6951FM 7/7/06 8:23 AM Page xiv 6951FM 7/7/06 8:23 AM Page xv About the Illustrator ■ANTHONY VOLPE did the illustrations for this book and the AJAX. .. you if you don’t know what Ajax stands for! OK, not really) stands for Asynchronous JavaScript and XML The interesting thing about Ajax, though, is that it doesn’t have to be asynchronous (but virtually always is), doesn’t have to involve JavaScript (but virtually always does), and doesn’t need to use XML at all (but probably does half the time) In fact, one of the most famous Ajax examples, Google Suggest,... actually had it right before then! 13 6951ch01 14 7/7/06 8:11 AM Page 14 CHAPTER 1 ■ AJAX: THE BRAVE NEW WORLD Ajax is a return to that thinking Notice I said “thinking.” That should be a very big clue to you about what Ajax really is It is not a specific technology, and it is not the myriad toolkits available for doing Ajax, and it is not the XMLHttpRequest object (which we will get to in a moment) It... area For instance, to insert a line above the line that begins with 89, you would go to the first dot in 6951ch01 7/7/06 8:11 AM Page 5 CHAPTER 1 ■ AJAX: THE BRAVE NEW WORLD that line and replace it with i, then press the Enter key If you wanted to delete that line, plus the line that starts with 01, you would go to the line that starts with 01, type dd over the first two dots, then go to the line you... some screen readers can deal with Ajax to some degree, largely depending on how Ajax is used (if the content is literally inserted into the Document Object Model, or DOM, makes a big difference) In any case, extreme caution should be used if you know people with disabilities are a target audience for your application, and you will seriously want to consider (and test!) whether Ajax will work in your situation . JavaScript ™ with DOM Scripting and Ajax: From Novice to Professional Practical Ajax Projects with Java ™ Technology Pro Ajax and Java ™ Frameworks Ajax Projects with Java ™ Technology Practical Frank. with Java ™ Technology Practical Frank W. Zammetti Practical Ajax Projects with Java TM Technology 6951FM 7/7/06 8:23 AM Page i Practical Ajax Projects with Java TM Technology Copyright © 2006 by Frank W 0.998" 528 page count EMPOWERING JAVA ™ DEVELOPERS WITH AJAX TECHNIQUES Practical Ajax Projects with Java ™ Technology Dear Reader, We all know that Ajax is a hot topic right now, and I’m