The inplace
component provides easy in-place editing and inline content display. It consists of two members:
The basic declaration of the component would be as follows:
<p:inplace> <h:inputText value="Edit Me!" /> </p:inplace>
This would render an input text field that could be clicked by the user to go into the edit mode. To go out of the edit mode, the user needs to click on the Enter button after typing.
By default, the inplace
component displays its first child's value as the label; this can also be customized with the label
attribute. This attribute defines the label that will be shown in the display mode regardless of the text input by the user:
<p:inplace label="My Input Field"> <h:inputText value="Edit Me!" /> </p:inplace>
The emptyLabel
attribute defines the label that will be shown to the user when the value of the input field is empty. The value displayed will change to the one provided if the user, for instance, enters any text into the input field:
<p:inplace emptyLabel="My Empty Input Field"> <h:inputText value="" /> </p:inplace>
Besides the input text field, other components such as the drop-down list could also be used with the in-place editor, as seen in the following example:
<p:inplace label="Countries"> <h:selectOneMenu> <f:selectItem itemLabel="Turkey" itemValue="Turkey" /> <f:selectItem itemLabel="Germany" itemValue="Germany" /> </h:selectOneMenu> </p:inplace>
The editor
attribute specifies the confirmation mode of the editor with the default value false
. When set to true
, approve
and cancel
buttons will be rendered right next to the editor, as shown in the following screenshot:
There are two attributes available for introducing i18n to the in-place input when the editor mode is set to true
. The saveLabel
attribute sets the tool-tip text of the save
button with the default value Save
. The cancelLabel
attribute sets the tool-tip text of the cancel
button with the default value Cancel
.
The inplace
component also provides ways to customize the effects of editing with the attributes effect
and effectSpeed
. The effect
attribute sets the effect to be used when toggling, with the default value as fade
. The other option is slide
. When set to slide
, the component will slide its content upside down when it's toggled. The effectSpeed
attribute sets the speed of the effect with the default value normal
. The other options for the attribute are slow
and fast
.
Since version 4.0, the inplace
component offers input
and output
faces, where you can customize what to show as the input and output states of the component. The next example given shows a checkbox for the input and a cross or a thick icon as the output. The names of the icons are set as false.png
and true.png
for simplicity:
<p:inplace editor="true"> <f:facet name="output"> <p:graphicImage value="/resources/images/inplace/#{inplaceBean.value}.png" width="30" height="30" /> </f:facet> <f:facet name="input"> <p:selectBooleanCheckbox value="#{inplaceBean.value}" /> <h:outputLabel value="PrimeFaces Rocks!" /> </f:facet> </p:inplace>
The editing process will be as given in the following screenshot:
The inplace
component provides the save
AJAX behavior event that will be fired when the save
button gets clicked:
<p:inplace editor="true"> <p:ajax event="save" listener="#{inplaceBean.handleSave}" update="growl" /> <h:inputText value="Edit Me!" /> </p:inplace>
The handleSave
method will be invoked with javax.faces.event.AjaxBehaviorEvent
:
public void handleSave(AjaxBehaviorEvent event) { MessageUtil.addInfoMessageWithoutKey("Input Saved!", null); }
This recipe is available in the demo web application on GitHub (https://github.com/ova2/primefaces-cookbook/tree/second-edition). Clone the project if you have not done it yet, explore the project structure, and build and deploy the WAR file on every Servlet 3.x compatible application server, such as JBoss WildFly or Apache TomEE.
The showcase for the recipe is available under http://localhost:8080/pf-cookbook/views/chapter3/inPlaceEditor.jsf
.