InplaceInput is a simple input component which displays the current value as outputText and switches to inputText based representation after a defined event to allow editing this value.

You could use two simplest examples below. For the first demo, just click on a label to edit the value and click somewhere outside the component to store this value(Or just press ENTER button).

The simplest InplaceInput

Person Info

Name:	click to enter your name
Email:	click to enter your email

HideView Source

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
      
      <rich:panel style="width:220px;">
        <f:facet name="header">
            <h:outputText value="Person Info"></h:outputText>
        </f:facet>
        <h:panelGrid columns="2">
            <h:outputText value="Name: "/>
            <rich:inplaceInput defaultLabel="click to enter your name"/>
            <h:outputText value="Email:"/>
            <rich:inplaceInput defaultLabel="click to enter your email"/>
        </h:panelGrid>
      </rich:panel>
</ui:composition> 

<<Hide Source

The second example has controls for components enabled with showControls attribute. These controls should be used in order to apply a value or cancel editing.

InplaceInput with controls

Person Info

Name:	click to enter your name
Email:	click to enter your email

HideView Source

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
      
      <rich:panel style="width:220px;">
        <f:facet name="header">
            <h:outputText value="Person Info"/>
        </f:facet>
        <h:panelGrid columns="2">
            <h:outputText value="Name: "/>
            <rich:inplaceInput defaultLabel="click to enter your name" 
                showControls="true"/>
            <h:outputText value="Email:"/>
            <rich:inplaceInput defaultLabel="click to enter your email" 
                showControls="true"/>
        </h:panelGrid>
      </rich:panel>
</ui:composition>

<<Hide Source

Controls used by inplace could be redefined using controls named facet:

InplaceInput with customized controls

Save Cancel

Click here to edit

HideView Source

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
            <rich:inplaceInput defaultLabel="Click here to edit" showControls="true"
                controlsHorizontalPosition="left" controlsVerticalPosition="bottom"
                id="inplaceInput">
        
                <f:facet name="controls">
                    <button onmousedown="#{rich:component('inplaceInput')}.save();"
                        type="button">Save</button>
                    <button onmousedown="#{rich:component('inplaceInput')}.cancel();"
                        type="button">Cancel</button>
                </f:facet>
                
            </rich:inplaceInput>
            <rich:spacer height="25px" width="100%"/>
</ui:composition>

<<Hide Source

Inplace Input could be rendered with span or div elements to display its value. To change default span output, use layout attribute with block value.

The next example shows you Inplace Input component usage in dataTable. Custom event is fired on saving a value used in this example to perform Ajax validation for the value entered.

Note: Inplaces in this example also customized with editEvent attribute.

Perform double click at any price in order to change it.

InplaceInput as table cell editor

Row Make Model Price «« « 1 2 3 4 5 6 7 8 » »» 1 Chevrolet Corvette 32534 2 Chevrolet Corvette 49272 3 Chevrolet Corvette 50058 4 Chevrolet Corvette 36744 5 Chevrolet Corvette 30863 6 Chevrolet Malibu 34508 7 Chevrolet Malibu 19787 8 Chevrolet Malibu 48499 9 Chevrolet Malibu 47125 10 Chevrolet Malibu 16763 11 Chevrolet Malibu 34668 12 Chevrolet Malibu 32603 13 Chevrolet Malibu 28091 14 Chevrolet S-10 51620 15 Chevrolet S-10 36863

Data Validation Results: All Prices Currently Valid

HideView Source

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
    <style>
        .inplace{
            border: none;
        }
        .hover {
            color: #{a4jSkin.generalTextColor};
            background-color :#{a4jSkin.tipBorderColor};
        }
        .columns {
            width: 33%; 
        }       
    </style>
    <h:form> 
        <h:panelGrid columns="2" columnClasses=",top">
            <rich:dataTable value="#{dataTableScrollerBean.allCars}" var="car"
                width="350px" columnClasses=",columns,columns,columns" rows="15"
                id="table" rowKeyVar="row">
                <rich:column>
                    <f:facet name="header">
                        <h:outputText value="Row"></h:outputText>
                    </f:facet>
                    <h:outputText value="#{row+1}"></h:outputText>
                </rich:column>
                <rich:column>
                    <f:facet name="header">
                        <h:outputText value="Make" />
                    </f:facet>
                    <h:outputText value="#{car.make}" />
                </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>
                    <rich:inplaceInput layout="block" value="#{car.price}"
                        converterMessage="Price value should be integer. Price at row #{row+1} can't be changed."
                        id="inplace" required="true"
                        requiredMessage="Price at row #{row+1} wasn't filled. Value can't be changed."
                        changedHoverClass="hover" viewHoverClass="hover"
                        viewClass="inplace" changedClass="inplace"
                        selectOnEdit="true" editEvent="ondblclick">
                        
                        <a4j:support event="onviewactivated" reRender="table, messages"
                            />
                            
                    </rich:inplaceInput>
                </rich:column>
                <f:facet name="footer">
                    <rich:datascroller ajaxSingle="false"/>
                </f:facet>
            </rich:dataTable>
            <rich:panel id="messages">
                <f:facet name="header">
                    <h:outputText value="Data Validation Results:"></h:outputText>
                </f:facet>
                <rich:messages style="color:red"/>
                <h:outputText value="All Prices Currently Valid" rendered="#{facesContext.maximumSeverity==null}"/>
            </rich:panel>
        </h:panelGrid>
    </h:form>
</ui:composition>

<<Hide Source