Without requirements or design, programming is the art of adding bugs to an empty text file.

Simple Accordion rich:accordion

The rich:accordion component is a set of panels where one panel is expanded, while the other ones are collapsed. This is similar to, and inherits much of the features from the rich:togglePanel, and rich:tabPanel. See the descriptions of these components for details on switch-types, and shortcuts.

The following example shows the usage of the rich:accordion in client mode:

RichFaces is a component library for JSF and an advanced framework for easily integrating AJAX capabilities into business applications.
  • 100+ AJAX enabled components in two libraries
  • a4j: page centric AJAX controls
  • rich: self contained, ready to use components
  • Whole set of JSF benefits while working with AJAX
  • Skinnability mechanism
  • Component Development Kit (CDK)
  • Dynamic resources handling
  • Testing facilities for components, actions, listeners, and pages
  • Broad cross-browser support
  • Large and active community

JSF 2 and RichFaces 4:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    width: 500px;
.rf-ac-itm-c {
    height: 220px;
        <rich:accordion switchType="client">
            <rich:accordionItem header="Overview:">
                <h:graphicImage value="/images/icons/common/rf.png"
                    style="float:right" />
        RichFaces is a component library for JSF and an advanced framework for
        easily integrating AJAX capabilities into business applications.
                    <li>100+ AJAX enabled components in two libraries</li>
                    <li>a4j: page centric AJAX controls</li>
                    <li>rich: self contained, ready to use components</li>
                    <li>Whole set of JSF benefits while working with AJAX</li>
                    <li>Skinnability mechanism</li>
                    <li>Component Development Kit (CDK)</li>
                    <li>Dynamic resources handling</li>
                    <li>Testing facilities for components, actions, listeners, and
                    <li>Broad cross-browser support</li>
                    <li>Large and active community</li>
            <rich:accordionItem header="JSF 2 and RichFaces 4:">
                <p>We are working hard on RichFaces 4.0 which will have full JSF
                2 integration. That is not all though, here is a summary of updates
                and features:</p>
                    <li>Redesigned modular repository and build system.</li>
                    <li>Simplified Component Development Kit with annotations,
                    faces-config extensions, advanced templates support and more..</li>
                    <li>Ajax framework improvements extending the JSF 2
                    <li>Component review for consistency, usability, and redesign
                    following semantic HTML principles where possible.</li>
                    <li>Both server-side and client-side performance optimization.</li>
                    <li>Strict code clean-up and review.</li>

  • 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