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: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

Placeholder

RichFaces functions

Focus

rich:componentControl

rich:hashParam

rich:hotKey

rich:jQuery

This example demonstrates simple table styling. The table rows appear in a zebra-style, and a row is highlighted when it is hovered over.

Vendor	Model	Price	Mileage	VIN
Chevrolet	Corvette	28632	73641.0	DLNJOPOFQQZDKGJEF
Chevrolet	Corvette	42327	34661.0	ZCWZEHOKKDCHLLDBV
Chevrolet	Corvette	54976	47065.0	DIOGBTMWKMAFCDIPU
Chevrolet	Corvette	48228	15066.0	BMGTZIPOUYXGNZSTQ
Chevrolet	Corvette	45237	35747.0	OLUSMEDIZIRDTCFEN
Chevrolet	Malibu	21874	21254.0	BAFUSBSZHCTKCXTRZ
Chevrolet	Malibu	30775	67970.0	MJNXEOHWZAORZQTJD
Chevrolet	Malibu	27324	17998.0	VSNKAJPMMZAFMNJQH
Chevrolet	Malibu	41729	40639.0	ESGVMHZZLOIDVRIWN
Chevrolet	Malibu	40916	41658.0	NFPKUHXDENGFHOIKQ
Chevrolet	Malibu	44546	14175.0	KRSOQQQHBVDNUVUVQ
Chevrolet	Malibu	42936	13350.0	GQLGRBMFNJPQHSQSO
Chevrolet	Malibu	48889	34852.0	XKQZSCIJNUEPZXAXA
Chevrolet	Tahoe	47362	21596.0	XSFKGPRTVGDJBOTQU
Chevrolet	Tahoe	47035	70074.0	EXHDXTNGEIQJHQKCY
Chevrolet	Tahoe	24512	59751.0	VMFPMNISMIXSZUBCV
Chevrolet	Tahoe	33416	49254.0	TOYQLBGAQJNYVLNQK
Chevrolet	Tahoe	37486	79975.0	KHRKFRKHGQQIKGCVD
Chevrolet	Tahoe	48405	23517.0	FYSSPMRJUBCCDFRSG
Ford	Taurus	22585	31044.0	LPOZBYAXDXBWYHMMN

View Source

<!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" 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:outputStylesheet>
        .even-row {
        background-color: #FCFFFE;
        }

        .odd-row {
        background-color: #ECF3FE;
        }

        .active-row {
        background-color: #FFEBDA !important;
        cursor: pointer;
        }
    </h:outputStylesheet>
    <h:form id="form">
        <rich:dataTable value="#{carsBean.allInventoryItems}" var="car" id="table" rows="20" rowClasses="odd-row, even-row"
            styleClass="stable">
            <rich:column accept="#{carsFiteringBean.acceptVendor}">
                <f:facet name="header">
                    <h:outputText value="Vendor " />
                </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 filter="#{carsFilteringBean.mileageFilterImpl}">
                <f:facet name="header">
                    <h:outputText value="Mileage" />
                </f:facet>
                <h:outputText value="#{car.mileage}" />
            </rich:column>
            <rich:column>
                <f:facet name="header">
                    <h:outputText value="VIN " />
                </f:facet>
                <h:outputText value="#{car.vin}" />
            </rich:column>
        </rich:dataTable>
    </h:form>

    <rich:jQuery selector=".stable tr:odd" query="addClass('odd-row')" />
    <rich:jQuery selector=".stable tr:even" query="addClass('even-row')" />
    <rich:jQuery selector=".stable tr" event="mouseover" query="jQuery(this).addClass('active-row')" />
    <rich:jQuery selector=".stable tr" event="mouseout" query="jQuery(this).removeClass('active-row')" />

</ui:composition>