5807fm.qxd 1/20/06 4:11 PM Page i Pro JSF and Ajax Building Rich Internet Components Jonas Jacobi and John R. Fallows 5807fm.qxd 1/20/06 4:11 PM Page ii Pro JSF and Ajax: Building Rich Internet Components Copyright © 2006 by Jonas Jacobi and John R.Fallows 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: 978-1-59059-580-0 ISBN-10: 1-59059-580-7 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: Tony Davis Technical Reviewers: Peter Lubbers, Kito D. Mann, Matthias Wessendorf Editorial Board: Steve Anglin, Dan Appleman, Ewan Buckingham, Gary Cornell, Jason Gilmore, Jonathan Hassell, James Huddleston, Chris Mills, Matthew Moodie, Dominic Shakeshaft, Jim Sumser, Matt Wade Project Managers: Beckie Stones, Elizabeth Seymour Copy Edit Manager: Nicole LeClerc Copy Editor: Kim Wimpsett Assistant Production Director: Kari Brooks-Copony Production Editor: Laura Cheu Compositor: Molly Sharp, ContentWorks Proofreader: Elizabeth Berry Indexer: Carol Burbo Artist: Kinetic Publishing Services, LLC 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 [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 510-549-5930, fax 510-549-5939, 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. 5807fm.qxd 1/20/06 4:11 PM Page iii To the love of my life,Marianne, and our princesses,Emma and Isabelle, for keeping my spirit up. —Jonas Jacobi To my wife,Nan,for her love,support,and patience, and our son,Jack,for his natural inspiration. —John R.Fallows 5807fm.qxd 1/20/06 4:11 PM Page iv 5807fm.qxd 1/20/06 4:11 PM Page v Contents at a Glance Foreword. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii About the Authors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv About the Technical Reviewers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi PART 1 (cid:2) (cid:2) (cid:2) Developing Smarter with JavaServerTM Faces (cid:2) CHAPTER 1 The Foundation of JSF:Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 (cid:2) CHAPTER 2 Defining the Date Field Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 (cid:2) CHAPTER 3 Defining the Deck Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 PART 2 (cid:2) (cid:2) (cid:2) Designing Rich Internet Components (cid:2) CHAPTER 4 Using Rich Internet Technologies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 (cid:2) CHAPTER 5 Loading Resources with Weblets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 (cid:2) CHAPTER 6 Ajax Enabling the Deck Component . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 (cid:2) CHAPTER 7 Ajax Enabling the Date Field Component . . . . . . . . . . . . . . . . . . . . . . 267 (cid:2) CHAPTER 8 Providing Mozilla XUL Renderers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303 (cid:2) CHAPTER 9 Providing Microsoft HTC Renderers . . . . . . . . . . . . . . . . . . . . . . . . . . . 361 (cid:2) CHAPTER 10 Switching RenderKits Dynamically . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403 (cid:2) INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413 v 5807fm.qxd 1/20/06 4:11 PM Page vi 5807fm.qxd 1/20/06 4:11 PM Page vii Contents Foreword. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv About the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi PART 1 (cid:2) (cid:2) (cid:2) Developing Smarter with JavaServerTM Faces (cid:2) CHAPTER 1 The Foundation of JSF: Components . . . . . . . . . . . . . . . . . . . . . . . 3 Overview of Application Development Technologies . . . . . . . . . . . . . . . . . . 4 One-Tier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Two-Tier:Client-Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Multitier:Web Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Exploring Application Development Today . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Tapestry,Struts,Tiles,TopLink,Hibernate,ADF UIX… . . . . . . . . . . . . 7 Introducing JSF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Application Development with JSF . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 JSF Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 A Component-Based UI Framework. . . . . . . . . . . . . . . . . . . . . . . . . . . 13 UIComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Converters,Validators,Events,and Listeners . . . . . . . . . . . . . . . . . . 22 Facets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Renderers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Renderer Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 RenderKits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Custom Action Tag Handlers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Request-Processing Lifecycle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 vii 5807fm.qxd 1/20/06 4:11 PM Page viii viii (cid:2) CONTENTS (cid:2) CHAPTER 2 Defining the Date Field Component . . . . . . . . . . . . . . . . . . . . . . . 49 Requirements for the Date Field Component. . . . . . . . . . . . . . . . . . . . . . . . 49 The Input Date Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Designing the Input Date Component Using a Blueprint . . . . . . . . . 52 Step 1:Creating a UI Prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Step 2:Creating a Client-Specific Renderer. . . . . . . . . . . . . . . . . . . . 55 Step 3:Creating a Renderer-Specific Subclass . . . . . . . . . . . . . . . . . 77 Step 4:Registering UIComponent and Renderer . . . . . . . . . . . . . . . . 82 Step 5:Creating a JSP Tag Handler and TLD . . . . . . . . . . . . . . . . . . . 86 Building an Application with the Input Date Component . . . . . . . . 103 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 (cid:2) CHAPTER 3 Defining the Deck Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Requirements for the Deck Component . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 The Deck Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Designing the Deck Component Using a Blueprint . . . . . . . . . . . . . 107 Step 1:Creating a UI Prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Step 2:Creating Events and Listeners . . . . . . . . . . . . . . . . . . . . . . . 113 Step 3:Creating a Behavioral Superclass. . . . . . . . . . . . . . . . . . . . . 127 Step 4:Creating a Client-Specific Renderer. . . . . . . . . . . . . . . . . . . 136 Step 5:Creating a Renderer-Specific Subclass . . . . . . . . . . . . . . . . 148 Step 6:Registering a UIComponent and Renderer . . . . . . . . . . . . . 150 Step 7:Creating a JSP Tag Handler and TLD . . . . . . . . . . . . . . . . . . 155 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 PART 2 (cid:2) (cid:2) (cid:2) Designing Rich Internet Components (cid:2) CHAPTER 4 Using Rich Internet Technologies . . . . . . . . . . . . . . . . . . . . . . . . 173 Introducing Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 The XMLHttpRequest Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 Traditional Web Application Development. . . . . . . . . . . . . . . . . . . . . 177 Ajax Web Application Development . . . . . . . . . . . . . . . . . . . . . . . . . . 179 Building Ajax Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Ajax Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 Introducing Mozilla XUL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 Building XUL Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 Creating Custom XUL Components Using XBL. . . . . . . . . . . . . . . . . 192 XUL Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 5807fm.qxd 1/20/06 4:11 PM Page ix (cid:2) CONTENTS ix Introducing Microsoft Dynamic HTML and HTC . . . . . . . . . . . . . . . . . . . . 199 HTC Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 Building DHTML Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 HTC Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Comparing XBL and HTC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 Defining a Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 Adding Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 Event Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 Attaching Components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 JSF—The Greatest Thing Since Sliced Bread! . . . . . . . . . . . . . . . . . . . . . 207 Cross-Platform Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Imagination As the Only Limit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 A JSF Application Supporting Ajax,XUL,and HTC. . . . . . . . . . . . . . 209 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 (cid:2) CHAPTER 5 Loading Resources with Weblets . . . . . . . . . . . . . . . . . . . . . . . . . 213 Introducing Resource Loading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 Using Existing Solutions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 Using Weblets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 Exploring the Weblet Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 Using Weblets in Your Component Library . . . . . . . . . . . . . . . . . . . . 216 Using Weblets in a JSF Application . . . . . . . . . . . . . . . . . . . . . . . . . . 221 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 (cid:2) CHAPTER 6 Ajax Enabling the Deck Component . . . . . . . . . . . . . . . . . . . . . . 223 Requirements for the Deck Component’s Ajax Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 The Ajax-Enabled Deck Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 Designing the Ajax-Enabled Deck Component Using a Blueprint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 Step 1:Creating a UI Prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 Step 4:Creating a Client-Specific Renderer . . . . . . . . . . . . . . . . . . 230 Step 6:Registering a UIComponent and Renderer . . . . . . . . . . . . . 238 Step 8:Creating a RenderKit and ResponseWriter . . . . . . . . . . . . . 238 Step 9:Extending the JSF Implementation . . . . . . . . . . . . . . . . . . . 249 Step 10:Registering the RenderKit and JSF Extension . . . . . . . . . 262 Step 11:Registering Resources with Weblets . . . . . . . . . . . . . . . . . 263 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265