There is not now, nor has there ever been, nor will there ever be, any programming language in which it is the least bit difficult to write bad code.

Simple Grid Creation

The a4j:repeat component is the basic iteration component of RichFaces. It allows the creation of any markup based on iterative data. This example shows a simple grid produced from a list of capital cities.

State Capital Montgomery
State TimeZone GMT-6
State Capital Juneau
State TimeZone GMT-9
State Capital Phoenix
State TimeZone GMT-7
State Capital Little Rock
State TimeZone GMT-6
State Capital Sacramento
State TimeZone GMT-8
State Capital Denver
State TimeZone GMT-7
State Capital Hartford
State TimeZone GMT-5
State Capital Dover
State TimeZone GMT-5
State Capital Tallahassee
State TimeZone GMT-5
State Capital Atlanta
State TimeZone GMT-5
State Capital Honolulu
State TimeZone GMT-10
State Capital Boise
State TimeZone GMT-8
State Capital Springfield
State TimeZone GMT-6
State Capital Indianapolis
State TimeZone GMT-5
State Capital Des Moines
State TimeZone GMT-6
State Capital Topeka
State TimeZone GMT-6
State Capital Frankfort
State TimeZone GMT-5
State Capital Baton Rouge
State TimeZone GMT-6
State Capital Augusta
State TimeZone GMT-5
State Capital Annapolis
State TimeZone GMT-5">
<ui:composition xmlns=""
        <h:panelGrid columns="1">
            <a4j:outputPanel id="panel" layout="block">
                <a4j:repeat value="#{capitalsBean.capitals}" var="cap" rows="20"
                    <rich:panel style="float:left; width:200px; padding:5px;">
                        <f:facet name="header">
                                <h:graphicImage value="#{cap.stateFlag}" />
                                <h:outputText value="#{cap.state}" style="font-weight:bold" />
                        <h:panelGrid columns="2">
                            <h:outputText value="State Capital" style="font-weight:bold" />
                            <h:outputText value="#{}" />
                            <h:outputText value="State TimeZone" style="font-weight:bold" />
                            <h:outputText value="#{cap.timeZone}" />
            <a4j:outputPanel layout="block">
                <rich:dataScroller for="repeat" render="panel" />
CapitalsBean .java
package org.richfaces.demo.tables;

import java.util.List;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.SessionScoped;

import org.richfaces.demo.tables.model.capitals.Capital;

public class CapitalsBean implements Serializable{
    private static final long serialVersionUID = -1509108399715814302L;
    @ManagedProperty(value = "#{capitalsParser.capitalsList}")
    private List capitals;

    public CapitalsBean() {
        // TODO Auto-generated constructor stub

    public List getCapitals() {
        return capitals;

    public void setCapitals(List capitals) {
        this.capitals = capitals;


  • Ajax Action

  •   a4j:ajax
      Command Button Simple
      Command Link Simple
      jsFunction Simple
      Poll Simple
      Param Simple Usage
      Parameters for non-Ajax components
      Parameters from client side

  • Ajax Queue

  •   Queue

  • Ajax Output/Containers

  •   outputPanel Simple
      Auto update for h:messages component
      Common status for view
      Status Simple
      Referenced status
      Referenced status
      mediaOutput for image output
      Log usage

  • Validation

  •   Standard JSF Validators
      JSR-303 Validators
      Password Validation
      Simple rich:message sample
      Simple rich:messages sample

  • Data Iteration

  •   Simple Grid Creation
      Data Table Basic
      Data Table Styling
      Data Table Sorting
      Data Table Filtering
      Data Table Edit
      ExtendedData Table Basic Usage
      ExtendedData Table Selection usage
      rich:collapsibleSubTable Basic Usage
      DataScroller Basic Usage
      DataScroller API
      Data Lists Component
      Data Grid Component

  • Trees

  •   Simple tree from XML
      Simple treeModelRecursiveAdaptor usage

  • Output/Panels

  •   Simple Panels
      Look and feel customization
      Simple Toggle Panel
      Wizard creation
      Simple Tab Panels rich:tabPanel
      Selected Tab Management
      Simple Collapsible Panel rich:collapsiblePanel
      Simple Accordion rich:accordion
      Simple popup example rich:popupPanel
      Modal panel example
      Login panel positioning
      ProgressBar in ajax mode rich:progressBar
      ProgressBar in client mode
      Simple tooltips rich:tooltip

  • Menus

  •   Simple Panel Menu rich:panelMenu
      Simple Toolbar rich:toolbar
      Icons Customization
      Top Menu rich:dropDownMenu
      Side Menu rich:dropDownMenu

  • Inputs and Selects

  •   Autocomplete in Cached Ajax mode rich:autocomplete
      Custom client filter
      Simple Calendar rich:calendar
      Client Side Styling Disablement rich:calendar
      Data Model Support
      Different Sliders samples rich:inputNumberSlider
      Different Spinners samples rich:inputNumberSpinner
      Inplace Inputs samples rich:inplaceInput
      Inplace Selects samples rich:inplaceSelect
      Upload images rich:fileUpload
      Drag and Drop usage example rich:dragIndicator
      Drag Indicator usage example rich:dragIndicator

  • Miscellaneous

  •   Standard elements skinning feature
      RichFaces Functions
      Table Filtering using componentControl and API rich:componentControl
      Passing hash options to rich:popupPanel
      jQuery usage