Most software today is very much like an Egyptian pyramid with millions of bricks piled on top of each other, with no structural integrity, but just done by brute force and thousands of slaves.

Simple sample

a4j:ajax is one of our core behaviors, extending the base JSF 2.0 f:ajax tag. This tag triggers an Ajax request when the specified parent event is triggered.">
<ui:composition xmlns=""
        <h:inputText value="#{}">
            <a4j:ajax event="keyup" render="out" />
        <h:outputText value="#{}" id="out" />
Dynamic Selects
This is a slightly more complex use-case for arj:ajax involving dependent select components. When you choose a value from the first select component, the second select component is rendered with dynamic content based on you first choice.">
<ui:composition xmlns=""
        <h:selectOneMenu value="#{selectsBean.currentType}"
            <f:selectItems value="#{selectsBean.firstList}" />
            <a4j:ajax event="valueChange" render="second" execute="@this" />
        <a4j:outputPanel id="second" layout="block">
            <h:selectOneMenu value="#{selectsBean.currentType}"
                rendered="#{not empty selectsBean.currentType}">
                <f:selectItems value="#{selectsBean.secondList}" />
package org.richfaces.demo.common;

import java.util.ArrayList;
import java.util.List;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.event.ValueChangeEvent;
import javax.faces.model.SelectItem;

 * @author Ilya Shaikovsky
@ManagedBean(name = "selectsBean")
public class SelectsBean {
    private static final String[] FRUITS = { "", "Banana", "Cranberry", "Blueberry", "Orange" };
    private static final String[] VEGETABLES = { "", "Potatoes", "Broccoli", "Garlic", "Carrot" };
    private String currentItem = "";
    private String currentType = "";
    private List firstList = new ArrayList();
    private List secondList = new ArrayList();

    public SelectsBean() {
        SelectItem item = new SelectItem("", "");

        item = new SelectItem("fruits", "Fruits");
        item = new SelectItem("vegetables", "Vegetables");

        for (int i = 0; i < FRUITS.length; i++) {
            item = new SelectItem(FRUITS[i]);

    public List getFirstList() {
        return firstList;

    public List getSecondList() {
        return secondList;

    public static String[] getFRUITS() {
        return FRUITS;

    public static String[] getVEGETABLES() {
        return VEGETABLES;

    public void valueChanged(ValueChangeEvent event) {
        if (null != event.getNewValue()) {
            String[] currentItems;

            if (((String) event.getNewValue()).equals("fruits")) {
                currentItems = FRUITS;
            } else {
                currentItems = VEGETABLES;

            for (int i = 0; i < currentItems.length; i++) {
                SelectItem item = new SelectItem(currentItems[i]);


    public String getCurrentType() {
        return currentType;

    public void setCurrentType(String currentType) {
        this.currentType = currentType;

    public String getCurrentItem() {
        return currentItem;

    public void setCurrentItem(String currentItem) {
        this.currentItem = currentItem;

  • 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