RichFaces Showcase

Ajax Action

a4j:ajax

a4j:commandButton

a4j:commandLink

a4j:actionListener

a4j:jsFunction

a4j:poll

a4j:push

a4j:param

Ajax Queue

a4j:queue

a4j:attachQueue

Ajax Output/Containers

a4j:outputPanel

a4j:status

a4j:region

a4j:mediaOutput

a4j:log

Validation

Client Side Validation

rich:graphValidator

rich:message

rich:messages

rich:notify

Data Iteration

a4j:repeat

rich:dataTable

rich:extendedDataTable

rich:collapsibleSubTable

rich:dataScroller

rich:list

rich:dataGrid

Trees

rich:tree

Tree Adaptors

Output/Panels

rich:chart

rich:panel

rich:togglePanel

rich:tabPanel

rich:collapsiblePanel

rich:accordion

rich:popupPanel

rich:progressBar

rich:tooltip

Menus

rich:panelMenu

rich:toolbar

rich:contextMenu

rich:dropDownMenu

Inputs

rich:autocomplete

rich:calendar

rich:editor

rich:inputNumberSlider

rich:inputNumberSpinner

rich:inplaceInput

rich:fileUpload

Selects

rich:inplaceSelect

rich:select

rich:orderingList

rich:pickList

Drag and Drop

Miscellaneous

Standard elements skinning

rich:placeholder

RichFaces functions

rich:focus

rich:componentControl

rich:hashParam

rich:hotKey

rich:jQuery

VDL documentation
Component Reference

The rich:togglePanel component can leverage a4j:repeat as a child component to dynamically generate toggle panel items.

The following example shows the rich:togglePanel dynamically generated from list of skins:

View Source

<!DOCTYPE html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
    <h:form id="form">
        <rich:togglePanel id="dynamicPanels" switchType="ajax" activeItem="#{dynamicPanelBean.activeTab}">
            <a4j:repeat value="#{skinBean.skins}" var="skinName">
                <rich:togglePanelItem name="#{skinName}">
                    <rich:panel header="Skin: #{skinName}">
                        <h:panelGrid columns="2">
                            <h:outputText value="Enter Name:" />
                            <h:inputText id="input" />
                            <h:outputText value="Enter you interests:" />
                            <h:inputTextarea cols="17" rows="3" />
                            <h:outputText value="Choose your favourite color" />
                            <h:selectOneMenu>
                                <f:selectItem itemLabel="Red" itemValue="0" />
                                <f:selectItem itemLabel="Black" itemValue="1" />
                                <f:selectItem itemLabel="Green" itemValue="2" />
                                <f:selectItem itemLabel="White" itemValue="3" />
                            </h:selectOneMenu>
                        </h:panelGrid>
                        <hr />
                        <h:commandButton value="Switch to #{skinName} skin">
                            <f:param name="skin" value="#{skinName}" />
                        </h:commandButton>
                    </rich:panel>
                </rich:togglePanelItem>
            </a4j:repeat>
        </rich:togglePanel>
        <br />
        <a4j:commandButton value="&lt;&lt;Previous">
            <rich:toggleControl targetItem="@prev" targetPanel="dynamicPanels" />
        </a4j:commandButton>
        <a4j:commandButton value="Next &gt;&gt;">
            <rich:toggleControl targetItem="@next" targetPanel="dynamicPanels" />
        </a4j:commandButton>
    </h:form>
</ui:composition>