Pro JSF and Ajax: Building Rich Internet Components

446 Pages·2006·4.08 MB·English

by  Jonas Jacobi

Pro JSF and Ajax
Building Rich Internet
Components
Jonas Jacobi and John R. Fallows
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 [phone], e-mail [email protected], or
visithttp://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.
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
Contents at a Glance
Foreword. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
About the Authors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
About the Technical Reviewers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi
PART 1 ■ ■ ■ Developing Smarter with
JavaServerTM Faces
■CHAPTER 1 The Foundation of JSF:Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
■CHAPTER 2 Defining the Date Field Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
■CHAPTER 3 Defining the Deck Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
PART 2 ■ ■ ■ Designing Rich Internet Components
■CHAPTER 4 Using Rich Internet Technologies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
■CHAPTER 5 Loading Resources with Weblets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
■CHAPTER 6 Ajax Enabling the Deck Component . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
■CHAPTER 7 Ajax Enabling the Date Field Component . . . . . . . . . . . . . . . . . . . . . . 267
■CHAPTER 8 Providing Mozilla XUL Renderers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
■CHAPTER 9 Providing Microsoft HTC Renderers . . . . . . . . . . . . . . . . . . . . . . . . . . . 361
■CHAPTER 10 Switching RenderKits Dynamically . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403
■INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
v
Contents
Foreword. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
About the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi
PART 1 ■ ■ ■ Developing Smarter with
JavaServerTM Faces
■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
viii ■CONTENTS
■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
■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 ■ ■ ■ Designing Rich Internet Components
■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
■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
■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
■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
x ■CONTENTS
■CHAPTER 7 Ajax Enabling the Date Field Component . . . . . . . . . . . . . . . . 267
Requirements for the Date Component’s
Ajax Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
The Ajax-Enabled Date Component. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Designing JSF Components Using a Blueprint. . . . . . . . . . . . . . . . . 269
Step 1:Creating a UI Prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Step 4:Creating Converters and Validators . . . . . . . . . . . . . . . . . . . 276
Step 5:Creating a Client-Specific Renderer. . . . . . . . . . . . . . . . . . . 279
Step 7:Registering a UIComponent and Renderer . . . . . . . . . . . . . 297
Step 8:Creating a JSP Tag Handler and TLD . . . . . . . . . . . . . . . . . . 297
Step 12:Registering Your Ajax Resources with Weblets . . . . . . . . 301
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
■CHAPTER 8 Providing Mozilla XUL Renderers. . . . . . . . . . . . . . . . . . . . . . . . . 303
Requirements for the Deck and Date Components’ XUL
Implementations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
What Mozilla XUL Brings to JSF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
What JSF Brings to XUL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
The XUL Implementation of the Deck and
Date Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Designing JSF XUL Components Using a Blueprint . . . . . . . . . . . . 306
Step 1:Creating a UI Prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
Step 3:Creating a Behavioral Superclass. . . . . . . . . . . . . . . . . . . . . 322
Step 5:Creating a Client-Specific Renderer. . . . . . . . . . . . . . . . . . . 324
Step 6:Creating a Renderer-Specific Subclass . . . . . . . . . . . . . . . . 341
Step 7:Registering a UIComponent and Renderer . . . . . . . . . . . . . 345
Step 8:Creating a JSP Tag Handler and TLD . . . . . . . . . . . . . . . . . . 347
Step 9:Creating a RenderKit and ResponseWriter . . . . . . . . . . . . . 350
Step 11:Registering a RenderKit . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354
Step 12:Registering Resources with Weblets . . . . . . . . . . . . . . . . . 355
Building Applications with JSF XUL Components . . . . . . . . . . . . . . 357
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359
■CHAPTER 9 Providing Microsoft HTC Renderers . . . . . . . . . . . . . . . . . . . . . . 361
Requirements for the Deck and Date Components’ HTC
Implementations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
What HTC Brings to JSF. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
What JSF Brings to HTC. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
■CONTENTS xi
The HTC Implementation of the Deck and Date Components . . . . . . . . 362
Designing JSF HTC Components Using a Blueprint . . . . . . . . . . . . 363
Step 1:Creating a UI Prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363
Step 5:Creating a Client-Specific Renderer. . . . . . . . . . . . . . . . . . . 380
Step 7:Registering a UIComponent and Renderer . . . . . . . . . . . . . 396
Step 11:Registering a RenderKit and JSF Extension . . . . . . . . . . . 396
Step 12:Registering Resources with Weblets . . . . . . . . . . . . . . . . . 398
Building Applications with JSF HTC Components . . . . . . . . . . . . . . 398
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401
■CHAPTER 10 Switching RenderKits Dynamically. . . . . . . . . . . . . . . . . . . . . . . 403
Requirements for Dynamically Switching
RenderKits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404
The Dynamic RenderKit Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . 405
Syntax for Dynamic RenderKit ID . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405
The Dynamic RenderKit Managed Bean . . . . . . . . . . . . . . . . . . . . . . 406
The DynamicRenderKitViewHandler Class . . . . . . . . . . . . . . . . . . . . 409
Registering the Dynamic RenderKit Solution . . . . . . . . . . . . . . . . . . 411
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412
■INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413