⁠10.5. <rich:inplaceInput>

The <rich:inplaceInput> component allows information to be entered in-line in blocks of text, improving readability of the text. Multiple input regions can be navigated with keyboard navigation. The component has three functional states: the view state, where the component displays its initial setting, such as "click to edit"; the edit state, where the user can input text; and the "changed" state, where the new value for the component has been confirmed but can be edited again if required.

⁠10.5.1. Basic usage

Basic usage requires the value attribute to point to the expression for the current value of the component. Validation and conversion rules for the JSF UIInput control apply as usual.

⁠10.5.2. Interactivity options

When in the initial view state, the starting label can be set using the defaultLabel attribute. Alternatively, if the initial value is already set through the value attribute, this is displayed instead.
Once the user has entered text, the label is stored in the model specified by the value attribute. The use of the default label and value is shown in Example 10.7, “Default label and value”.
⁠

Example 10.7. Default label and value

​<rich:inplaceInput value="#{bean.value}" defaultLabel="click to edit"/>
By default, the event to switch the component to the edit state is a single mouse click. This can be changed using the editEvent attribute to specify a different event.
The user can confirm and save their input in multiple ways:
  • By default, pressing the Enter key will confirm and save the input.
  • If showControls="true" is set, buttons for confirming or canceling are added to the component.
  • If saveOnBlur="true" is set, the input is saved on the component's blur event.
Pressing the Esc key cancels editing in all cases.

⁠10.5.3. JavaScript API

The <rich:inplaceInput> component can be controlled through the JavaScript API. The JavaScript API provides the following functions:
getValue()
Get the current value of the input control.
setValue(newValue)
Set the value of the input control to the newValue string passed as a parameter.
isEditState()
Returns true if the control is currently in the edit state, or false if the control is currently in the view state.
isValueChanged()
Returns true if the control's value has been changed from the default.
save()
Saves the current item as the control's value.
cancel()
Cancel editing the value.
getInput()
Return the DOM element for the input.

⁠10.5.4. Reference data

  • component-type: org.richfaces.InplaceInput
  • component-class: org.richfaces.component.UIInplaceInput
  • component-family: org.richfaces.InplaceInput
  • renderer-type: org.richfaces.InplaceInputRenderer

⁠10.5.5. Style classes and skin parameters

⁠

Table 10.5. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties
.rf-ii
This class defines styles for the in-place input when it is in the default state.
editorBackgroundColor
background-color
generalTextColor
border-bottom-color
.rf-ii-act
This class defines styles for the in-place input when it is in the editing state.
No skin parameters.
.rf-ii-chng
This class defines styles for the in-place input when it is in the changed state.
No skin parameters.
.rf-ii-dis
This class defines styles for the in-place input when it is in the disabled state.
No skin parameters.
.rf-ii-fld
This class defines styles for the in-place input field.
editBackgroundColor
background-color, border-bottom-color
generalTextColor
color
generalFamilyFont
font-family
generalSizeFont
font-size
.rf-ii-lbl
This class defines styles for the label of the in-place input.
generalTextColor
color
generalSizeFont
font-size
.rf-ii-dflt-lbl
This class defines styles for the default label of the in-place input.
No skin parameters.
.rf-ii-btn
This class defines styles for the buttons for the in-place input.
tabBackgroundColor
background-color
panelBorderColor
border-color
.rf-ii-btn-p
This class defines styles for the buttons for the in-place input when they are pressed.
tabBackgroundColor
background-color
panelBorderColor
border-color
.rf-ii-btn-set, .rf-ii-btn-prepos, .rf-ii-btn-pos
These classes define the positioning of the buttons.
No skin parameters.
.rf-ii-btn-shdw
This class defines styles for the button shadows for the in-place input.
No skin parameters.
.rf-ii-btn-shdw-t, .rf-ii-btn-shdw-b, .rf-ii-btn-shdw-l, .rf-ii-btn-shdw-r
These classes define the top, bottom, left, and right edge of the button shadows.
No skin parameters.
.rf-ii-none
This class defines styles for the in-place input when it cannot be edited.
No skin parameters.