Contents

Contents at a Glance

About the Authors

About the Technical Reviewer

Acknowledgments

Introduction

Chapter 1: The Basics

Tell Me About RichFaces First!

What is JSF?

JSF Application Is Built Out of UI Components

JSF Is a Standard

JSF Has Two Main Versions

JSF Has Two Main Implementations

JSF Is Very Extendable

The Most Important JSF Features

User Interface Components

Events

Ajax

An Overview of RichFaces

RichFaces's Component Tag Libraries

RichFaces Skins

RichFaces Client-side Validation

RichFaces' Component Development Kit

Using RichFaces with CDI and Dependency Injection

RichFaces: A Historical Perspective

Understanding That JSF Application Is Running on the Server

When Starting with JSF, Keep an Open Mind

Summary

Chapter 2: Getting Started

Setting Up

Adding RichFaces to an Existing JSF 2 Project

Creating a New Project with RichFaces

Configuring RichFaces

Configuring a Skin

Ajax in JSF 2

Sending an Ajax Request

Partial View Rendering

Partial View Processing

RichFaces <a4j:ajax>

render Attribute Options

execute Attribute Options

bypassUpdates Attribute

JavaScript Interactions or Callback Events

Summary

Chapter 3: a4j:* Tags, Features and Concepts

Sending an Ajax Request

Using <a4j:commandButton> and <a4j:commandLink>

Ajax Request from any Event or JavaScript Function Using <a4j:jsFunction>

Polling with <a4j:poll>

Advanced Partial View Rendering Options

Auto-Rendered Areas with <a4j:outputPanel>

Using the limitRender Attribute to Turn off Auto-Rendered Panels

Advanced Execute Options

Defining Execute Regions with <a4j:region>

Skipping Model Updates During Validation

Controlling Traffic with Client Queue

Combining Events from the Same Component

Setting a Delay

Combining Events from Different Components

Ignoring “Stale” Responses

More a4j:* Tags and Features

Showing Ajax Status with <a4j:status>

Displaying Logging and Debugging Information with <a4j:log>

Using <a4j:actionListener>

Summary

Chapter 4: Getting Started with Rich Components

Rich or Ajax Component?

Rich Components Features

Redefining Parts of a Component Using Facets

Sending an Ajax Request

Using Component Client-side JavaScript API

Summary

Chapter 5: Rich Input and Select Components

Getting Started

Using <rich:inplaceInput>

JavaScript API

Using <rich:inplaceSelect>

JavaScript API

Using <rich:autocomplete>

<rich:autocomplete> Client-side Filter Customization

Using Complex Markup in <rich:autocomplete> Pop-ups

JavaScript API

Using <rich:select>

JavaScript API

Using <rich:inputNumberSlider>

JavaScript API

Using <rich_inputnumberspinner>

JavaScript API

Using <rich:calendar>

Calendar Internationalization

Server-side Customization with CalendarDataModel

Client-side Customization with JavaScript

JavaScript API

Component Facets

Uploading files with <rich:fileUpload>

Component Facets

Component JavaScript API

Summary

Chapter 6: Rich Panel and Output Components

Using <rich:panel>

Using <rich:collapsiblePanel>

JavaScript API

Using <rich:tabPanel> and <rich:tab>

JavaScript API

Using <rich:accordion>

JavaScript API

Using <rich:togglePanel>

JavaScript API

Using <rich:popupPanel>

Choosing Your Panel Type

Opening and Closing the Popup Panel

Component Customization

Advanced Component Usage Samples

JavaScript API

Using <rich:toolTip>

Using <rich:tooltip> with Data Iteration Components

JavaScript API

Summary

Chapter 7: Rich Data Iteration Components

Data Preparation

Using <rich:dataTable>

Look-and-Feel Customization

Using Sub-Tables and Defining Complex Header Markups

Master-Details Tables with <rich:collapsibleSubTable>

<rich:dataTable> JavaScript API

<rich:collapsibleSubTable> JavaScript API

Using <rich:extendedDataTable>

<rich:extendedDataTable> JavaScript API

Displaying Data in a List with <rich:list>

Displaying Data in a Grid with <rich:dataGrid>

Iterating over Custom Markup with <a4j:repeat>

Iteration Components Advanced Usage

Adding Pagination with <rich:dataScroller>

Customizing the <rich:dataScroller> Look and Feel

Using Other Data Components with <rich:dataScroller>

Using <rich:dataScroller> with <rich:dataGrid>

<rich:dataScroller> JavaScript API

Using Partial Table Updates

Request Variables of Iteration Components

Table Sorting

Table Sorting by Multiple Columns

Table Filtering

Iteration Components Advanced Models

Summary

Chapter 8: Rich Menu Components

Using <rich:toolbar>

Using <rich:dropDownMenu>

Using <rich:menuGroup> and <rich:menuSeparator>

Using <rich:menuItem> as a Standalone Component

Using Menu Components JavaScript API

Using <rich:panelMenu>

Invoking User Actions for Groups and Items

Using Panel Menu Components JavaScript API

Summary

Chapter 9: Rich Tree Components

Using <rich:tree>

Creating a Tree Model Based on the Swing TreeNode Interface

Creating a Tree Model Based on the RichFaces TreeNode Interface

Using <rich:treeNode> to Define Tree Nodes Markup

Using Different Types of Nodes in a Tree

Tree Toggling and Selection Modes

Selection Event Handling

Expansion Event Handling

Tree Nodes Lazy Loading

Using <rich:tree> Adaptors to Build the Data Model

Using <rich:treeModelAdaptor>

Using <rich:treeModelRecursiveAdaptor>

Summary

Chapter 10: Rich Drag-and-Drop Components

Using <rich:dragSource> and <rich:dropZone>

Invoking Server-side Listener on Drop

Shopping Cart Example

Two-way Drag-and-Drop Operations

Customizing the Drag Indicator

Using <rich:dragIndicator>

Using Drag-and-Drop with Tree Components

Dragging and Dropping Within Tables

Summary

Chapter 11: Rich Validation

Bean Validation

RichFaces Client-side Validation

Using <rich:message> and <rich:messages>

Customizing Message Icons

Separating Summary and Details Styling

Changing <rich:messages> Layout

Falling Back to Server Validation

Graph Validator

Summary

Chapter 12: Rich Components JavaScript API, Client Functions, and Using jQuery

Invoking a Component’s JavaScript API

Using #rich:component(id) Function

Using <rich:componentControl>

Other RichFaces Client Functions

Using jQuery with <rich:jQuery>

Summary

Chapter 13: Skins

Using Built-in Skins

Creating Your Own Skins

Changing the Skin Parameter

Using Skins and CSS

Skin-Based CSS

Redefining Skin-Based CSS Classes

User-Defined Style

Dynamically Changing Skins

Standard Controls Skinning

Using #{richSkin} Implicit Object

Summary

Chapter 14: RichFaces CDK: Building Custom Components

Development Plan

Client-side Prototyping

Creating the Project

Creating a Components Library

Creating an Abstract Component Class

Creating a Component Renderer Template

CDK Renderer Template Tags and Other Features

Creating a Sample Application

Adding Common Attributes

Implementing the Disabled State

Skinning the Spinner Component

Summary

Index