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:componentControl component makes it easy to call any of the available JavaScript APIs on RichFaces components. It supports parameter passing using f:param, a4j:param and a4j:hasParam tags. You can define the target component by using the clientId, but at some point we plan to add support for short-id lookup.

In the example below we are using rich:componentControl to allow external manipulation of the data filter.

Quick Filter Panel

Filter By Vendor

Vendor	Model	Price	Mileage	Days Live	VIN

«««««««12 3 4 5 6 7 »»»»»»»
Chevrolet	Corvette	35457	78961.0	74	EJJXALBKUOCYDKDAC
Chevrolet	Corvette	49382	36243.0	68	MKFCNKLLGKAGBMPFG
Chevrolet	Corvette	20910	69319.0	59	ZZRNXLXJDYOCDDTTO
Chevrolet	Corvette	38668	33672.0	11	ACKOZVSLXOFUIZHUZ
Chevrolet	Corvette	51280	31613.0	17	ERYQINJEAAFTSTCHO
Chevrolet	Malibu	39878	73903.0	25	ZVBOXDXKJRYDRYHDD
Chevrolet	Malibu	41757	45702.0	85	NLBRVWYTIXCLPXGTM
Chevrolet	Malibu	28267	34626.0	87	QAOBZFTSQAMJPRURL
Chevrolet	Malibu	42584	26520.0	20	DLWRWDZVFQUUOSZHS
Chevrolet	Malibu	16510	35011.0	8	SRBZAJRYWTRHEQDAL
Chevrolet	Malibu	36577	41442.0	79	LQLHGAJITGMOVGHUH
Chevrolet	Malibu	20614	6031.0	12	PSWBILYSSQBVZBJZA
Chevrolet	Malibu	43489	53538.0	88	HZPHAEKNBKVCLUHID
Chevrolet	Tahoe	43087	64133.0	88	ZZXORFTNBDBJCLKWA
Chevrolet	Tahoe	42665	26145.0	44	HZDZKKAKBCYQILMIZ
Chevrolet	Tahoe	28600	60772.0	31	AVGAYFYUHCOLZFAHP
Chevrolet	Tahoe	15548	62825.0	7	CGAJTCDGEVDENWUOX
Chevrolet	Tahoe	51652	56286.0	2	MJQXGXBIRIZERHMVR
Chevrolet	Tahoe	46182	65493.0	84	FQSWNJGQPNBBHBVLV
Ford	Taurus	19475	68231.0	46	TNAJPHYQMHBUNXRMM

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" xmlns:fn="http://java.sun.com/jsp/jstl/functions">
    <h:outputStylesheet>
        .atop {
            vertical-align: top;
        }
    </h:outputStylesheet>
    <h:form id="form">
        <h:panelGrid columns="2" columnClasses="atop">
            <rich:panel>
                <f:facet name="header">
                    <h:outputText value="Quick Filter Panel" />
                </f:facet>
                <fieldset>
                    <legend>Filter By Vendor</legend>
                    <ul>
                        <a4j:repeat value="#{carsBean.allVendors}" var="vendor">
                            <li><h:outputLink value="#">#{vendor}
                                    <rich:componentControl target="table" operation="filter" event="click">
                                        <f:param value="vendor" />
                                        <f:param value="#{vendor}" />
                                    </rich:componentControl>
                                </h:outputLink>
                            </li>
                        </a4j:repeat>
                    </ul>
                </fieldset>
            </rich:panel>
            <rich:dataTable value="#{carsBean.allInventoryItems}" var="car" id="table" rows="20">
                <rich:column id="vendor" filterValue="#{carsFilteringBean.vendorFilter}"
                    filterExpression="#{carsFilteringBean.vendorFilter == '' or carsFilteringBean.vendorFilter == null or carsFilteringBean.vendorFilter == car.vendor}">
                    <f:facet name="header">
                        <h:panelGroup>
                            <h:outputText value="Vendor" />
                        </h:panelGroup>
                    </f:facet>
                    <h:outputText value="#{car.vendor}" />
                </rich:column>
                <rich:column>
                    <f:facet name="header">
                        <h:outputText value="Model" />
                    </f:facet>
                    <h:outputText value="#{car.model}" />
                </rich:column>
                <rich:column>
                    <f:facet name="header">
                        <h:outputText value="Price" />
                    </f:facet>
                    <h:outputText value="#{car.price}" />
                </rich:column>
                <rich:column>
                    <f:facet name="header">
                        <h:panelGroup>
                            <h:outputText value="Mileage" />
                        </h:panelGroup>
                    </f:facet>
                    <h:outputText value="#{car.mileage}" />
                </rich:column>
                <rich:column>
                    <f:facet name="header">
                        <h:panelGroup>
                            <h:outputText value="Days Live" />
                        </h:panelGroup>
                    </f:facet>
                    <h:outputText value="#{car.daysLive}" />
                </rich:column>
                <rich:column>
                    <f:facet name="header">
                        <h:panelGroup>
                            <h:outputText value="VIN " />
                        </h:panelGroup>
                    </f:facet>
                    <h:outputText value="#{car.vin}" />
                </rich:column>
                <f:facet name="footer">
                    <rich:dataScroller fastStep="3"/>
                </f:facet>
            </rich:dataTable>
        </h:panelGrid>
    </h:form>
</ui:composition>