rich:inplaceSelect inplaceSelect

Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.inplaceInput
component-family | org.richfaces.inplaceInput
renderer-type | org.richfaces.renderkit.inplaceInputRenderer
tag-class | org.richfaces.taglib.inplaceInputTag

## Creating the Component with a Page Tag

Here is a simple example of how the component can be used on a page:

Example:

    ...
    <rich:inplaceSelect value="#{Bean.inputValue}" defaultLabel="Click  to edit">
        <f:selectItem itemValue="0" itemLabel="oil well"/>
        <f:selectItem itemValue="1" itemLabel="factory"/>
        <f:selectItem itemValue="2" itemLabel="newspaper"/>
    </rich:inplaceSelect>
    ...

## Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.inplaceSelect;
    ...
    HtmlInpaceSelect myInplaceSelect = new InplaceSelect();
    ...

## Details of Usage

The <rich:inplaceSelect> component has three functional states, which are:

- View state displays the current value as text;

- Edit state displays a list with options;

- Changed state displays the value of the selected option as text

The "value" attribute displays the value as an outputtext. The attribute is defined when some option in the list is selected.

You can form he list of the options: using <f:selectItem> and <f:selectItems>

Please see the example below

Example:

    ...
    <rich:inplaceSelect value="#{inplaceComponentsBean.inputValue}" showControls="true" defaultLabel="click to edit">
        <f:selectItem itemValue="0" itemLabel="oil well"/>
        <f:selectItem itemValue="1" itemLabel="factory"/>
        <f:selectItem itemValue="2" itemLabel="newspaper"/>
    </rich:inplaceSelect>
    ...

The "value" attribute gets some value when an option in the select-box in clicked on (the default action).

Nowever, if you want the end user to confirm the data saving explicitly you can:

- Use a "showControls" attribute, which makes "save" and "cancel" buttons (displayed as icons) appear next to the input field;

  Please see the example

  Example:

      ...
      	<rich:inplaceSelect value="#{inplaceComponentsBean.inputValue}"
      		defaultLabel="Click here to edit">
          <f:selectItem itemValue="0" itemLabel="oil well"/>
          <f:selectItem itemValue="1" itemLabel="factory"/>
          <f:selectItem itemValue="2" itemLabel="newspaper"/>
      	</rich:inplaceSelect>
      ...

- Use standard buttons by means of the controlsfacet

  Please see the example

  Example:

      ...
      <rich:inplaceSelect value="#{inplaceComponentsBean.inputValue}" defaultLabel="Click to edit" showControls="true">
          <f:facet name="controls">
              <input type="button" value="Save"/>
              <input type="button" value="Cancel"/>
          </f:facet>
          <f:selectItem itemValue="0" itemLabel="oil well"/>
          <f:selectItem itemValue="1" itemLabel="factory"/>
          <f:selectItem itemValue="2" itemLabel="newspaper"/>
      </rich:inplaceSelect>
      ...

Note:

The controlsfacet also implies using showcontrols attribute and it has to be defined as "true".

Redefinition of the "save" and "cancel" icons can be performed using "saveControlIcon" and "cancelControlIcon" attributes r. You need to define the path to where your images are located.

Example:

    ...
    <rich:inplaceSelect
       value="#{inplaceComponentsBean.inputValue}" defaultLabel="Click to edit" showControls="true"
        showControls="true"
        controlsHorizontalPosition="left"
        controlsVerticalPosition="top"
        saveControlIcon="/richfaces-demo/richfaces/cancel.gif"
        cancelControlIcon="/richfaces-demo/richfaces/save.gif">

    <f:selectItem itemValue="0" itemLabel="oil well"/>
    <f:selectItem itemValue="1" itemLabel="factory"/>
    <f:selectItem itemValue="2" itemLabel="newspaper"/>
    </rich:inplaceSelect>
        ...

You can also position the controls relatively to the input field, by means of " controlsHorizontalPosition" " controlsVerticalPosition " attributes. The " controlsHorizontalPosition" attribute has "left", "right" and "center" definitions. The " controlsVerticalPosition " attribute has "bottom", "center" and "top" definitions.

Example:

    ...
    <rich:inplaceSelect value="#{inplaceComponentsBean.inputValue}" defaultLabel="Click to edit"  controlsHorizontalPosition="left" controlsVerticalPosition="top" showControls="true">
        <f:facet name="controls" >
            <input type="button" value="Save"/>
            <input type="button" value="Cancel"/>
        </f:facet>
        <f:selectItem itemValue="0" itemLabel="oil well"/>
        <f:selectItem itemValue="1" itemLabel="factory"/>
        <f:selectItem itemValue="2" itemLabel="newspaper"/>
    </rich:inplaceSelect>
    ...

Another useful attribute is "openOnEdit". It allows you to make the drop-down box with options appear once "edit" state activated.

The "editEvent" attribute provides an option to assign an JavaScript action that initiates the change of the state from view to edit. The default value is "click".

Note:

Do not use "on" prefix applying event action. E.g. use "click" instead of "onClick", use "mouseover" instead of "onMouseOver".

The "selectOnEdit" (with possible values "true", "false") gives you an option to make the text in the input area selected right after the change from view state to edit occurs.

The " inputWidth" , " minInputWidth" , and " maxInputWidth" attributes are provided to specify the width, minimal width and maximal width for the input element respectively.

The " oneditactivation" , "oneditactivated" , "onviewactivation" and " onviewactivated" attributes provide a possibility to assign JavaScript code on edit state activation, on edit state activated,on view state activation and on view state activated respectively.

## JavaScript API

JavaScript API

Function | Description
--- | ---
edit() | changes the state to edit
cancel() | changes its state to the previous one before editing (changed or view)
save() | the component hanges the state to the previous one before editing (changed or view)
save() | the component changes its state to changed with a new value
save() | the component changes its state to changed with a new value
getValue() | gets the current value
setValue(newValue) | sets the current value

## Look-and-Feel Customization

For skinnability implementation, the components use a style class redefinition method. Default style classes are mapped on skin parameters.

There are two ways to redefine the appearance of all <rich:inplaceSelect> components at once:

- Redefine the corresponding skin parameters
- Add to your style sheets style classes used by a <rich:inplaceSelect> component

## Relevant Resources Links

Here you can see the example of <rich:inplaceIput> usage and sources for the given example.