Apress Pro JS Fand Ajax Building Rich Internet Compon

Jonas Jacobi and John R. Fallows

Pro JSF and Ajax

Building Rich Internet

Components

5807fm.qxd 1/20/06 4:11 PM Page i

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 ii

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 iii

5807fm.qxd 1/20/06 4:11 PM Page iv

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

5807fm.qxd 1/20/06 4:11 PM Page v

5807fm.qxd 1/20/06 4:11 PM Page vi

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

5807fm.qxd 1/20/06 4:11 PM Page vii

■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

viii ■CONTENTS

5807fm.qxd 1/20/06 4:11 PM Page viii

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

■CONTENTS ix

5807fm.qxd 1/20/06 4:11 PM Page ix

■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

x ■CONTENTS

5807fm.qxd 1/20/06 4:11 PM Page x

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

■CONTENTS xi

5807fm.qxd 1/20/06 4:11 PM Page xi

5807fm.qxd 1/20/06 4:11 PM Page xii

Foreword

Does the world really and truly need another JavaServer Faces book?

I was fairly well convinced the answer could only be a resounding “no!” After all, there are

a good half-dozen books out in stores today, by a whole host of Web luminaries, and I’ve even

personally helped as a technical reviewer on half of those. So what more could really be said

on the subject?

But when I thought about this a bit more, it became clear that all of these books go only so

far. They’ll show you how to use what JSF gives you out of the box, throw you a bone for writing

your own components and renderers, and give you maybe even a bit more. But none that I’ve

seen get to the heart of why JSF is really and truly a cool and important technology; they make

JSF look like YAMVCF (Yet Another Model-View-Controller Framework) for HTML—more pow￾erful here and there, easier to use in many places, a bit harder to use in others, but really nothing

major. And certainly nothing that takes us beyond the dull basics of building ordinary-looking

Web applications.

This book goes a lot further. It covers the basics, of course, and shows you how to build

components, but then it keeps going: on to Ajax, on to HTC, on to XUL—and how you can

wrap up this alphabet soup underneath the heart of JSF, its component model, and how you

can leverage it to finally develop Web applications that don’t need radical rearchitecting every

time the winds of client technologies blow in a different direction. Along the way, you’ll learn

a wide array of open source toolkits that make Web magic practical even when you’re not a

JavaScript guru.

So, heck, I’m convinced. The world does need another JSF book.

Adam Winer

JSF Expert Group Member and Java Champion

xiii

5807fm.qxd 1/20/06 4:11 PM Page xiii

5807fm.qxd 1/20/06 4:11 PM Page xiv