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:inplaceSelect component displays the current selected value as outputText and switches to Select based representation after a defined event to allow editing this value.

In the example below click on the label to edit the value and click somewhere outside the component to store this value.

Simples select

Click here to edit

In the next example we have customized the component in the following ways:

f:selectItems tag is used to define a list of items to use.
Controls "save" and "cancel" are turned on with the showControls attribute
editEvent is set to dblclick to trigger to edit the mode.
saveOnSelect is set to 'false' so that the value will not be stored until the "save" button is clicked.
saveOnBlur is set to 'false' so that the value will not be stored unless until the "save" button is clicked. This could be useful on pages where every change could cause extended processing.

Select customization

Double click to edit value

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">
        <p>In the example below click on the label to edit the value and click somewhere outside the component to store this
            value.</p>
        <rich:panel style="width:220px;">
            <f:facet name="header">
                <h:outputText value="Simples select" />
            </f:facet>
            <rich:inplaceSelect defaultLabel="Click here to edit" openOnEdit="true">
                <f:selectItem itemValue="0" itemLabel="Option 1" />
                <f:selectItem itemValue="1" itemLabel="Option 2" />
                <f:selectItem itemValue="2" itemLabel="Option 3" />
                <f:selectItem itemValue="3" itemLabel="Option 4" />
                <f:selectItem itemValue="4" itemLabel="Option 5" />
            </rich:inplaceSelect>
        </rich:panel>
        <a4j:outputPanel rendered="#{not (userAgent.phone || userAgent.tablet)}">
        <p>In the next example we have customized the component in the following ways:</p>
        <ul>
            <li><b>f:selectItems</b> tag is used to define a list of items to use.</li>
            <li>Controls "save" and "cancel" are turned on with the <b>showControls</b> attribute</li>
            <li><b>editEvent</b> is set to dblclick to trigger to edit the mode.</li>
            <li><b>saveOnSelect</b> is set to 'false' so that the value will not be stored until the "save" button is
                clicked.</li>
            <li><b>saveOnBlur</b> is set to 'false' so that the value will not be stored unless until the "save" button is
                clicked. This could be useful on pages where every change could cause extended processing.</li>
        </ul>
        <rich:panel style="width:220px;">
            <f:facet name="header">
                <h:outputText value="Select customization" />
            </f:facet>
            <rich:inplaceSelect editEvent="dblclick" id="inplaceSelect" showControls="true" saveOnSelect="false"
                saveOnBlur="false" value="#{inplaceSelectBean.value}" defaultLabel="Double click to edit value">
                <f:selectItems value="#{inplaceSelectBean.capitalsOptions}" />
            </rich:inplaceSelect>
        </rich:panel>
        </a4j:outputPanel>
    </h:form>
</ui:composition>