this print for content only—size & color not accurate spine = 0.784" 336 page count EMPOWERING JAVA DEVELOPERS WITH AJAX TECHNIQUES Pro Ajax and Java Dear Reader, If you are a professional Java developer and you want to know how best to go about adding Ajax functionality to your web applications to enrich your users’ experience, then Pro Ajax and Java is the right book for you. Ajax allows us to build highly interactive, desktop-like web applications that can be deployed through any modern web browser without the need for special plug-ins. Though Ajax is server-side agnostic, it certainly plays well within the rich Java ecosystem. This book teaches you what you need to know by using tightly focused exam- ples that aren’t cluttered with extraneous details, putting you on the fast track to using Ajax in your own Java applications. You already know how to develop web applications, so this book focuses on teaching the killer techniques you’ll need to bring your applications to life with Ajax, including autocomplete, form vali- dation, dynamic visual effects, and much, much more. We start off by providing a brief summary of the subject area, followed by a guide to creating the perfect development environment for developing Ajax in Java, including code editing and formatting, DOM inspection, debugging, testing, and logging tools. Next, we look in depth at the most popular Ajax libraries and toolkits avail- able, and what they can do to simplify and speed up our Ajax development— Prototype, script.aculo.us, Dojo, DWR, AjaxTags, and Taconite. In the final section, we explore Ajax development within four of the most popular Java frameworks—Spring, Struts, Tapestry, and JSF. Thanks for picking up this book. We hope you’ll have as much fun reading it as we had writing it! Nate Schutta and Ryan Asleson Nathaniel T. Schutta, coauthor of Foundations of Ajax US $49.99 Shelve in Java Programming User level: Intermediate–Advanced Pro Ajax and Java Schutta, Asleson THE EXPERT’S VOICE ® IN WEB DEVELOPMENT Nathaniel T. Schutta and Ryan Asleson Pro Ajax and Java CYAN MAGENTA YELLOW BLACK PANTONE 123 CV ISBN 1-59059-677-3 9 781590 596777 54999 6 89253 59677 7 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: Covers everything Java developers need to know to add Ajax to their websites! Ryan Asleson, coauthor of Foundations of Ajax THE APRESS PRO AJAX AND JAVA ROADMAP Foundations of Ajax Pro JavaScript Techniques Pro JSF and Ajax: Building Rich Internet Components Pro Ajax and Java Ajax Patterns and Best Practices Beginning CSS Web Development From Novice to Professional Beginning JavaScript with DOM Scripting and Ajax: From Novice to Professional Beginning POJOs Companion eBook Available RELATED TITLE Practical Ajax Projects with Java Pro Ajax and Java ■■■ Nathaniel T. Schutta and Ryan Asleson Asleson _677-3FRONT.fm Page i Tuesday, June 20, 2006 6:58 AM Pro Ajax and Java Copyright © 2006 by Nathaniel T. Schutta and Ryan Asleson 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): 978-1-59059-677-7 ISBN-10 (pbk): 1-59059-677-3 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. Lead Editor: Chris Mills Technical Reviewer: John R. Fallows 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: Hastings Hart Assistant Production Director: Kari Brooks-Copony Production Editor: Laura Esterman Compositor: Susan Glinert Proofreader: April Eddy Indexer: Lucie Haskins Artist: Susan Glinert 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. Asleson _677-3FRONT.fm Page ii Tuesday, June 20, 2006 6:58 AM To Christine, for always believing. —Nathaniel T. Schutta For Sara, the love of my life, and Adam, my favorite playmate. —Ryan Asleson Asleson _677-3FRONT.fm Page iii Tuesday, June 20, 2006 6:58 AM Asleson _677-3FRONT.fm Page iv Tuesday, June 20, 2006 6:58 AM v Contents at a Glance About the Authors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xi About the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xiii Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii PART 1 ■ ■ ■ Introducing Ajax ■CHAPTER 1 What Is Ajax? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 ■CHAPTER 2 Development Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 PART 2 ■ ■ ■ Libraries and Toolkits ■CHAPTER 3 Java-Agnostic Toolkits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 ■CHAPTER 4 Java-Specific Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 PART 3 ■ ■ ■ Web Frameworks ■CHAPTER 5 Struts and Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 ■CHAPTER 6 Tapestry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 ■CHAPTER 7 Spring and Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 ■CHAPTER 8 JavaServer Faces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263 ■INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 Asleson _677-3FRONT.fm Page v Tuesday, June 20, 2006 6:58 AM Asleson _677-3FRONT.fm Page vi Tuesday, June 20, 2006 6:58 AM vii Contents About the Authors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xi About the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xiii Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii PART 1 ■ ■ ■ Introducing Ajax ■CHAPTER 1 What Is Ajax? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 The Rise of the Web Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 And Then There Was Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 The XMLHttpRequest Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Methods and Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 An Example Interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Avoiding Common Gotchas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Ajax Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 The Fade Anything Technique (FAT). . . . . . . . . . . . . . . . . . . . . . . . . . 21 Auto Refresh . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Partial Page Paint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Draggable DOM. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 ■CHAPTER 2 Development Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 JavaScript Source Code Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 JSEclipse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 NetBeans JavaScript Plug-in. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 JavaScript Compression and Obfuscation . . . . . . . . . . . . . . . . . . . . . . . . . 35 The Dojo Toolkit’s JavaScript Compressor . . . . . . . . . . . . . . . . . . . . 37 Inspecting a DOM Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Mouseover DOM Inspector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Debugging Ajax Requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 NetBeans HTTP Monitor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Firefox FireBug Extension . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Contents Asleson _677-3FRONT.fm Page vii Tuesday, June 20, 2006 6:58 AM viii ■CONTENTS JavaScript Logging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Log4JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Lumberjack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 JavaScript Debugging Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Using Venkman . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Testing Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 JsUnit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Selenium . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 PART 2 ■ ■ ■ Libraries and Toolkits ■CHAPTER 3 Java-Agnostic Toolkits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 $() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Working with Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Manipulating the DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Try: Simplified Browser Detection . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Ajax Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 script.aculo.us . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Effect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Autocomplete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Dojo Toolkit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Animations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 dojo.io.bind . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Taconite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Taconite on the Client Side . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Taconite on the Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 Getting Started with Taconite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 ■CHAPTER 4 Java-Specific Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 DWR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Installation Verification. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 JavaScript Templates. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Asleson _677-3FRONT.fm Page viii Tuesday, June 20, 2006 6:58 AM ■CONTENTS ix AjaxTags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 The Ajax “Killer Application” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 AjaxTags Autocomplete Component. . . . . . . . . . . . . . . . . . . . . . . . . 142 Other Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 PART 3 ■ ■ ■ Web Frameworks ■CHAPTER 5 Struts and Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 Struts Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 Ajax Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 Struts Validation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 Struts and Ajax Integration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Ajax-Powered Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 Implementing Struts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163 Struts and Ajax Design Considerations . . . . . . . . . . . . . . . . . . . . . . 179 The Future of Struts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180 Struts 1.3 and Beyond . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Struts Shale. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Struts Ti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 ■CHAPTER 6 Tapestry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 What Is Tapestry? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Calling the Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 Tapestry Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 Tapestry Exceptions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 Tapestry and Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 Tacos Components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Setting Up Tacos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 Using a Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 Enabling Debug Information . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Modifying the Form Example. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 Asleson _677-3FRONT.fm Page ix Tuesday, June 20, 2006 6:58 AM [...]... Faces standard and to extend the standard to provide Ajax functionality in the ADF Faces project John is a popular speaker at international conferences such as JavaOne and JavaPolis, and he has written numerous articles for leading IT magazines such as Java Developer’s Journal John is the author of the recently published book Pro JSF and Ajax: Building Rich Internet Components (Apress, 2006) xiii Asleson... like Figure 1-4 shows the standard interaction paradigm in an Ajax application 13 Asleson _677-3.book Page 14 Thursday, June 1, 2006 11:59 AM 14 CHAPTER 1 ■ WHAT IS AJAX? Figure 1-4 Standard Ajax interaction Unlike the standard request/response approach found in a standard web client, an Ajax application does things a little bit differently 1 A client-side event triggers an Ajax event Any number of things... of Atlas, Microsoft is throwing its weight firmly behind Ajax, and the infamous Rails web framework comes prebuilt with outstanding Ajax support In the Java space, Sun has added several Ajax components to its BluePrints Solutions Catalog, and any web framework worth its salt has announced at least minimal support for Ajax To be honest though, Ajax isn’t anything new In fact, the “newest” technology... Mozilla/Firefox 1.0, Opera 7.6, and Safari 1.2, support is widespread The little-used object and the basic concepts are even covered in a W3C standard: the DOM Level 3 Load and Save Specification At this point, especially as applications such as Google Maps, Google Suggest, Gmail, Flickr, Netflix, and A9 proliferate, XHR is becoming a de facto standard Unlike many of the approaches used before, Ajax works in most... likely new to you: Ajax and its associated tools and techniques Chapter 1 is a whirlwind tour of Ajax We cover the basics of the XMLHttpRequest object along with some of the common gotchas of Ajax development We also cover some of the common patterns you’ll see in Ajax development Chapter 2 provides an overview of the tools that will make developing Ajax applications easier We touch on JavaScript editors,... Contacting Us We value your questions and comments regarding this book’s content and source code examples Please direct all questions and comments to proajaxandjava@gmail.com We’ll reply to your inquiries as soon as we can; please remember, we (like you!) may not be able to respond immediately Thank you for buying this book! We hope you find it a valuable resource and enjoy reading it as much as we enjoyed... This greatly simplifies the development process and keeps the JavaScript free of browser-specific logic 11 Asleson _677-3.book Page 12 Thursday, June 1, 2006 11:59 AM 12 CHAPTER 1 ■ WHAT IS AJAX? Methods and Properties Table 1-1 shows some typical methods on the XMLHttpRequest object Don’t worry; we’ll talk about these methods in greater detail shortly Table 1-1 Standard XMLHttpRequest Operations Method... addition to these standard methods, the XMLHttpRequest object exposes the properties listed in Table 1-2 You’ll use these properties extensively when working with XMLHttpRequest Table 1-2 Standard XMLHttpRequest Properties Property Description onreadystatechange The event handler that fires at every state change (every time the readyState attribute changes); typically a call to a JavaScript function... application, and in Chapter 7, we show you how to leverage Ajax in the Spring space We show you how using DWR makes developing Ajaxified Spring applications a snap Of course no discussion of Java web frameworks would be complete without a look at JavaServer Faces After showing you the basics of JSF, we show you how you can write your own Ajax components, and we also introduce you to prebuilt Ajax components... software developer who lives and works in the Twin Cities area of Minnesota Ryan has been building web applications since 1998 and has extensive experience with JavaScript and web development tools He helped his organization make the transition from servlet-based content creation to JavaServer Pages and has also maintained a corporate web application framework based on Java Enterprise Edition He is . of Ajax THE APRESS PRO AJAX AND JAVA ROADMAP Foundations of Ajax Pro JavaScript Techniques Pro JSF and Ajax: Building Rich Internet Components Pro Ajax and. page count EMPOWERING JAVA DEVELOPERS WITH AJAX TECHNIQUES Pro Ajax and Java Dear Reader, If you are a professional Java developer and you want to know