Inplace

Inplace provides easy inplace editing and inline content display. For inplace editing, "save" and "cancel" ajax behavior events are provided for customizing the use-case.

Inplace Editor
Basic Input: Edit Me
Ajax Inplace Editor: PrimeFaces
Select One (Dlbclick): Cities
Checkbox: Yes or No
Sliding Image: Show

Source

<h:form prependId="false">

    <p:growl id="msgs" />

    <p:panel header="Inplace Editor">
        <h:panelGrid columns="2" columnClasses="column" cellpadding="5">
            <h:outputText value="Basic Input: " />
            <p:inplace id="basic">
                <p:inputText value="Edit Me" />
            </p:inplace>

            <h:outputText value="Ajax Inplace Editor: " />
            <p:inplace id="ajaxInplace" editor="true">
                <p:inputText value="#{inplaceBean.text}"
                            required="true" label="text"/>
            </p:inplace>

            <h:outputText value="Select One (Dlbclick): "/>
            <p:inplace id="selectableInplace" label="Cities" effectSpeed="fast" event="dblclick">
                <h:selectOneMenu>
                    <f:selectItem itemLabel="Istanbul" itemValue="Istanbul" />
                    <f:selectItem itemLabel="Ankara" itemValue="Ankara" />
                    <f:selectItem itemLabel="Istanbul" itemValue="Istanbul" />
                </h:selectOneMenu>
            </p:inplace>

            <h:outputText value="Checkbox: "/>
            <p:inplace id="checkboxInplace" effect="none">
                <f:facet name="output">
                    Yes or No
                </f:facet>
                <f:facet name="input">
                    <h:selectBooleanCheckbox />
                </f:facet>
            </p:inplace>

            <h:outputText value="Sliding Image: " />
            <p:inplace id="slidingInplace" label="Show" effect="slide">
                <p:graphicImage value="/images/nature1.jpg" />
            </p:inplace>
        </h:panelGrid>
    </p:panel>

</h:form>