PhotoAlbum Application Download Support Developer Guide
Skins:
Resources/Beans Handling
Ajax Miscellaneous
Usage
Tag Information

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


View 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


View Source

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

InplaceInput with customized controls

Click here to edit

View 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
1ChevroletCorvette
49737
2ChevroletCorvette
48651
3ChevroletCorvette
40829
4ChevroletCorvette
47677
5ChevroletCorvette
41745
6ChevroletMalibu
52594
7ChevroletMalibu
21092
8ChevroletMalibu
35098
9ChevroletMalibu
32770
10ChevroletMalibu
48255
11ChevroletMalibu
33861
12ChevroletMalibu
36503
13ChevroletMalibu
22300
14ChevroletS-10
52591
15ChevroletS-10
51034
Data Validation Results:
All Prices Currently Valid


View Source
RichFaces Wiki RichFaces Project Site