<?xml version="1.0" encoding="UTF-8"?>
<section>
    <sectioninfo>
        <keywordset>
            <keyword>rich:inplaceSelect</keyword>
            <keyword>inplaceSelect</keyword>
        </keywordset>
    </sectioninfo>
    <table>
        <title>Component identification parameters</title>
        
        <tgroup cols="2">
            <thead>
                <row>
                    <entry>Name</entry>
                    <entry>Value</entry>
                </row>
            </thead>
            <tbody>
                <row>
                    <entry>component-type</entry>
                    <entry>org.richfaces.inplaceInput</entry>
                </row>
                <!--row>
                    <entry>component-class</entry>
                    <entry></entry>
                </row-->
                <row>
                    <entry>component-family</entry>
                  <entry>org.richfaces.inplaceInput</entry>
                </row>
                <row>
                    <entry>renderer-type</entry>
                  <entry>org.richfaces.renderkit.inplaceInputRenderer</entry>
                </row>
                <row>
                    <entry>tag-class</entry>
                  <entry>org.richfaces.taglib.inplaceInputTag</entry>
                </row>
            </tbody>
        </tgroup>
    </table>
    <section>
        <title>Creating the Component with a Page Tag</title>
        <para>Here is a simple example of how the component can be used on a page: </para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
      <!-- itemLabels has to have realy value-->
      
        <programlisting role="XML"><![CDATA[...
<rich:inplaceSelect value="#{Bean.inputValue}" defaultLabel="Click  to edit">
    <f:selectItems  value="#{bean.selectItems}"/>
    <f:selectItem itemValue="1" itemLabel="factory"/>
    <f:selectItem itemValue="2" itemLabel="newspaper"/>
</rich:inplaceSelect>
...]]></programlisting>
    </section>
    <section>
        <title>Creating the Component Dynamically Using Java</title>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
      <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.inplaceSelect;
...	
HtmlInpaceSelect myInplaceSelect = new InplaceSelect();
...]]></programlisting>
    </section>
  
  

  
  
    <!-- Start  Details of Usage-->
    <section>
        <title>Details of Usage</title>
    
      <para>    
        The        <emphasis role="bold"><property>&lt;rich:inplaceSelect&gt;</property>  </emphasis> component has three functional states, which are: 
        </para>
         <para>     
        <itemizedlist>        
          <listitem>
            <para><property>View </property>state displays the current value as text;</para>
<!--          <figure>
            <title>View state</title>  
            <mediaobject>
              <imageobject>
                <imagedata fileref="images/inplaceInputViewState_shadow.png"/>
              </imageobject>
            </mediaobject>     
          </figure>       --> 
          </listitem>
         <listitem>
           <para><property>Edit </property>state displays a list with options;</para>       
                      <!--<figure>
            <title>Edit state</title>  
            <mediaobject>
              <imageobject>
                <imagedata fileref="images/inplaceInputEditState_shadow.png"/>
              </imageobject>
            </mediaobject>     
          </figure>-->
          </listitem>
          <listitem>
            <para><property>Changed </property>state displays the value of the selected option  as text</para>     
                    <!--<figure>
            <title>Changed state</title>  
            <mediaobject>
              <imageobject>
                <imagedata fileref="images/inplaceInputChangedState_shadow.png"/>
              </imageobject>
            </mediaobject>     
          </figure>      -->
          </listitem>
    </itemizedlist>
   
      </para>  
  
        <para>     
          The 
          <emphasis><property>&quot;value&quot;</property></emphasis> 
          attribute displays the value as an  outputtext.  
          The attribute is defined when some option in the list is selected. 
         </para>     

  
  
  
 <para>You can form he list of the options: using
   <emphasis role="bold"><property>&lt;f:selectItem&gt;</property></emphasis>   and 
   <emphasis role="bold"><property>&lt;f:selectItems&gt;</property></emphasis> </para>
      <para>Please see the example below</para>
      
     
  


<para>
        <emphasis role="bold">Example:</emphasis>
</para>  
<programlisting role="XML"><![CDATA[...
<rich:inplaceSelect value="#{inplaceComponentsBean.inputValue}" showControls="true" defaultLabel="click to edit">
    <f:selectItems  value="#{bean.selectItems}"/>
    <f:selectItem itemValue="1" itemLabel="factory"/>
    <f:selectItem itemValue="2" itemLabel="newspaper"/>
</rich:inplaceSelect>
...]]> </programlisting>      
      
<para>
 The <emphasis><property>&quot;value&quot;</property></emphasis>  attribute gets 
 some value when an option in the select-box in clicked on (the default action).   
</para>      
  
      <para> 
 Nowever, if you want the end user to confirm the data saving explicitly you can: </para>   
      <itemizedlist>
        <listitem>
          <para>Use a <emphasis><property>&quot;showControls&quot;</property></emphasis>  attribute, which makes &quot;Save&quot; and &quot;Cancel&quot; buttons (displayed as icons) appear next to the input field;
          </para>
            <para>Please see the example </para>
          <para>
            <emphasis role="bold">Example:</emphasis>
          </para>      
          
          <programlisting role="XML"><![CDATA[...
	<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>
...]]> </programlisting>  
        
        </listitem>
        
        
        <listitem>
          <para>Use standard buttons by means of the  <emphasis><property>&quot;controls&quot;</property></emphasis>facet
          </para>
          <para>Please see the example </para>
          <para>
            <emphasis role="bold">Example:</emphasis>
          </para>      
          
          <programlisting role="XML"><![CDATA[...
<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>
...]]> </programlisting>  
          
        </listitem>
      </itemizedlist>   
      
      
     <note>
        <title>Note:</title>
        <para>
          The <emphasis> <property>&quot;controls&quot;</property></emphasis>facet also implies using showcontrols 
          attribute and it has to be defined as &quot;true&quot;.
        </para>     
      </note>
      
      
     <!--Icons redefinitions-->
      <para>
        Redefinition of the
        &quot;save&quot; and &quot;cancel&quot; icons can be performed using 
        <emphasis><property>&quot;saveControlIcon&quot;</property></emphasis>
        and  
        <emphasis><property>&quot;cancelControlIcon&quot;</property></emphasis>
        attributes r.  You need to define the path to where your  images  are located. 
      </para>
      <para>
        <emphasis role="bold">Example:</emphasis>
      </para>      
      
      <programlisting role="XML"><![CDATA[...
<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>
    ...]]> </programlisting>  
  

      <para>
        You can also position the controls relatively to the input field, by means of 
        <emphasis><property>&quot;  controlsHorizontalPosition&quot;</property></emphasis> 
        <emphasis><property>&quot; controlsVerticalPosition &quot;</property></emphasis>
        attributes.
        
        The 
        <emphasis><property>&quot;  controlsHorizontalPosition&quot;</property></emphasis> attribute has 
        &quot;left&quot;, &quot;right&quot; and  &quot;center&quot; definitions. 
        
        The 
        <emphasis><property>&quot; controlsVerticalPosition &quot;</property></emphasis>
        attribute has &quot;bottom&quot;, &quot;center&quot; and &quot;top&quot; definitions.
      </para>


      <para>
        <emphasis role="bold">Example:</emphasis>
      </para>      
      
      <programlisting role="XML"><![CDATA[...
<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>
...]]> </programlisting>  

    <para>
     Another useful attribute is 
        <emphasis><property>&quot;openOnEdit&quot;</property></emphasis>. 
        It allows you to make the drop-down box with options appear once &quot;edit&quot; state activated. 
      </para>






      <para>
        The 
        <emphasis><property>&quot;editEvent&quot;</property></emphasis>         
        attribute provides an option to assign an JavaScript action that initiates the change of the state  from
        <property>view</property>
        to 
        <property>edit</property>. 
        
        
        The default value is &quot;click&quot;. 
        
      </para>
      
      
      
     <note>
        <title>Note:</title>
        <para>
          Do not use &quot;on&quot; prefix applying event action. E.g. use &quot;click&quot; instead of &quot;onClick&quot;, use &quot;mouseover&quot; instead of &quot;onMouseOver&quot;. 
        </para>
      </note>

      <para> 
        The   
        <emphasis><property>&quot;selectOnEdit&quot;</property></emphasis>  
        (with possible values &quot;true&quot;, &quot;false&quot;) gives you an 
        option to make the text in the input area selected right after the change from 
        <property>view</property> state to <property>edit</property> occurs. 
        
      </para>
      

      <para>
        The 
        <emphasis><property>&quot;  inputWidth&quot;</property></emphasis> , 
        <emphasis><property>&quot; minInputWidth&quot;</property></emphasis> , and 
        <emphasis><property>&quot; maxInputWidth&quot;</property></emphasis>  
        attributes are provided to specify the width, minimal width and maximal width for the input element respectively. 
      </para>
      <para>
        In order to specify the height and width parameters for the list items of the component, you can use 
        <emphasis><property>&quot;listHeight&quot;</property></emphasis>  and 
        <emphasis><property>&quot; listWidth&quot;</property></emphasis>  attributes. 
        
        
      </para>
      <para>
        The 
        <emphasis><property>&quot; oneditactivation&quot;</property></emphasis> , 
        <emphasis><property>&quot;oneditactivated&quot;</property></emphasis> , 
        <emphasis><property>&quot;onviewactivation&quot;</property></emphasis> 
        and  
        <emphasis><property>&quot; onviewactivated&quot;</property></emphasis>  attributes
        provide a possibility to assign JavaScript code on 
        <property>edit</property> state activation, on 
        <property>edit</property> state activated,on 
        <property>view</property> state activation and on 
        <property>view</property> state activated respectively. 
      </para>   
    </section>
    <!-- End. Details of Usage-->


    <!-- JavaScript API-->  
  <section>
    <title>JavaScript API</title>
    <table> 
      <title>JavaScript API</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Function</entry>
            <entry>Description</entry>
            
          </row>
        </thead>
        <tbody>
                    <!--Sorting API -->
                    <row>
                      <entry>edit()</entry>
                      <entry>changes the  state to edit </entry>
             
                    </row>
                    <row>
                      <entry>cancel()</entry>
                      <entry>changes its state to the previous one before editing (changed or view)</entry>
          
                    </row>
                    
                    <row>
                      <entry>save()</entry>
                      <entry>the component hanges the state to the previous one before editing (changed or view)</entry>
                    </row>
                    <row>
                      <entry>save()</entry>
                      <entry>the component changes its state to  changed with a new value</entry>
                    </row>
                  <row>
                    <entry>save()</entry>
                    <entry>the component changes its state to  changed with a new value</entry>
                  </row>
                  <row>
                    <entry>getValue()</entry>
                    <entry>gets the current value</entry>
                  </row>
 
                  <row>
                    <entry>setValue(newValue)</entry>
                    <entry>sets the current value</entry>
                  </row>
    
        </tbody>
      </tgroup>
    </table>
  </section>
    <!-- End of JavaScript API-->   
    
    <!-- Look-and-Feel Customization-->  
    
    <section>
        <title>Look-and-Feel Customization</title>
        <para>For skinnability implementation, the components use a <emphasis>
            <property>style class redefinition method.</property>
        </emphasis> Default style classes are mapped on <emphasis>
            <property>skin parameters.</property>
        </emphasis></para>
        <para>There are two ways to redefine the appearance of all <emphasis role="bold">
            <property>&lt;rich:inplaceSelect&gt;</property>
        </emphasis> components at once: 
          <itemizedlist>
            <listitem>Redefine the corresponding skin parameters</listitem>
            <listitem> Add to your style sheets style classes used by a <emphasis role="bold">
                <property>&lt;rich:inplaceSelect&gt;</property>
            </emphasis> component</listitem>
        </itemizedlist>
        </para>
    </section>
       

<section>
    <title>Skin Parameters Redefinition</title>

    <table>
      <title>Skin parameters redefinition for view state</title>

      <tgroup cols="2">
        <thead>
          <row>
            <entry>Skin parameters</entry>

            <entry>CSS properties</entry>
          </row>
        </thead>

        <tbody>
          <row>
            <entry>editorBackgroundColor</entry>

            <entry>background-color</entry>
          </row>
          
          <row>
            <entry>generaTextColor</entry>
            
            <entry>border-bottom-color</entry>
          </row>
          
      
        </tbody>
      </tgroup>
    </table>

    <table>
      <title>Skin parameters redefinition for input field in edit state</title>

      <tgroup cols="2">
        <thead>
          <row>
            <entry>Skin parameters</entry>

            <entry>CSS properties</entry>
          </row>
        </thead>

        <tbody>
          <row>
            <entry>editBackgroundColor</entry>

            <entry>background-color</entry>
          </row>
          <row>
            <entry>panelBorderColor</entry>
            
            <entry>border-color</entry>
          </row>
           </tbody>
      </tgroup>
    </table>



    <table>
      <title>Skin parameters redefinition for control</title>

      <tgroup cols="2">
        <thead>
          <row>
            <entry>Skin parameters</entry>

            <entry>CSS properties</entry>
          </row>
        </thead>

        <tbody>
          <row>
            <entry>tabBackgroundColor</entry>

            <entry>background-color</entry>
          </row>

          <row>
            <entry>panelBorderColor</entry>

            <entry>border-color</entry>
          </row>
        </tbody>
      </tgroup>
    </table>

    <table>
      <title>Skin parameters redefinition for pressed control</title>

      <tgroup cols="2">
        <thead>
          <row>
            <entry>Skin parameters</entry>

            <entry>CSS properties</entry>
          </row>
        </thead>

        <tbody>
          <row>
            <entry>tabBackgroundColor</entry>

            <entry>background-color</entry>
          </row>

          <row>
            <entry>panelBorderColor</entry>

            <entry>border-color</entry>
          </row>
        </tbody>
      </tgroup>
    </table>
  <table>
    <title>Skin parameters redefinition for list</title>
    
    <tgroup cols="2">
      <thead>
        <row>
          <entry>Skin parameters</entry>
          
          <entry>CSS properties</entry>
        </row>
      </thead>
      
      <tbody>
        <row>
          <entry>editBackgroundColor</entry>
          
          <entry>background-color</entry>
        </row>
        
        <row>
          <entry>panelBorderColor</entry>
          
          <entry>border-color</entry>
        </row>
      </tbody>
    </tgroup>
  </table>
  <table>
    <title>Skin parameters redefinition for selected item</title>
    
    <tgroup cols="2">
      <thead>
        <row>
          <entry>Skin parameters</entry>
          
          <entry>CSS properties</entry>
        </row>
      </thead>
      
      <tbody>
        <row>
          <entry>headerTextColor</entry>
          
          <entry>color</entry>
        </row>
        
        <row>
          <entry>headerBackgroundColor</entry>
          
          <entry>background-color</entry>
        </row>
        <row>
          <entry>headerBackgroundColor</entry>
          
          <entry>border-color</entry>
        </row>
      </tbody>
    </tgroup>
  </table>

    
    </section>
  
  <!-- END Skin Parameters Redefinition-->  

  <!-- Definition of Custom Style Classes-->  

  <section>
    <title>Definition of Custom Style Classes</title>
    <para>On the screenshot there are classes names that define styles for component elements.</para>


    <figure>
      <title>Classes names</title>
      <mediaobject>
        <imageobject>
          <imagedata fileref="images/inplaceSelectClasses.png"/>
        </imageobject>
      </mediaobject>
    </figure>    
    
    <table id="cn3">
      <title>Class name for the view state</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Class name</entry>
            <entry>Description</entry>
          </row>
        </thead>
        <tbody>
          <row>
            <entry>rich-inplace-select-view</entry>
            <entry>Defines styles for the select view</entry>
          </row>
          
         
        </tbody>
      </tgroup>
    </table>
    <table>
      <title>Class name for the input field in edit state</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Class name</entry>
            <entry>Description</entry>
          </row>
        </thead>
        <tbody>
          <row>
          <entry>rich-inplace-select-field</entry>
          <entry>Defines styles for the select field</entry>
          </row>
      
        </tbody>
      </tgroup>
    </table>
    
    
    
    
    
    
    <table>
      <title>Class name for the control</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Class name</entry>
            <entry>Description</entry>
          </row>
        </thead>
        <tbody>
          <row>
          <entry>rich-inplace-select-control</entry>
          <entry>Defines styles for the select control</entry>
          </row>
          <row>
          <entry>rich-inplace-select-control-press</entry>
          <entry>Defines styles for the pressed select control</entry>
          </row>

        </tbody>
      </tgroup>
    </table>
    
    
    <table>
      <title>Class name for the list</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Class name</entry>
            <entry>Description</entry>
          </row>
        </thead>
        <tbody>
          <row>
          <entry>rich-inplace-select-list-decoration</entry>
          <entry>Defines styles for a wrapper &lt;table&gt; element of an inplaceSelect</entry>
          </row>
                 
                </tbody>
      </tgroup>
    </table>
    
    
    
    
    <table>
      <title>Classes names for the selected item</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Class name</entry>
            <entry>Description</entry>
          </row>
        </thead>
        <tbody>
          
          <row>
          <entry>rich-inplace-select-selected-item</entry>
            <entry>Defines styles for the selected item</entry>
          </row>
         
          
        </tbody>
      </tgroup>
    </table>
    <table>
    <title>Classes names for the shadow</title>
    <tgroup cols="2">
    <thead>
    <row>
    <entry>Class name</entry>
    <entry>Description</entry>
    </row>
    </thead>
    <tbody>
    
    <row>
    <entry>rich-inplace-select-shadow-tl</entry>
    <entry>Defines styles for the top-left shadow</entry>
    </row>
    <row>
    <entry>rich-inplace-select-shadow-tr</entry>
    <entry>Defines styles for the top-right shadow</entry>
    </row>
    <row>
    <entry>rich-inplace-select-shadow-bl</entry>
    <entry>Defines styles for the bottom-left shadow</entry>
    </row>
    <row>
    <entry>rich-inplace-select-shadow-br</entry>
    <entry>Defines styles for the bottom-right shadow</entry>
    </row>
    
    
    </tbody>
    </tgroup>
    </table>
    
    
    

    <para>In order to redefine styles for all <emphasis role="bold">
      <property>&lt;rich:inplaceSelect&gt;</property>
    </emphasis> components on a page using CSS, it&apos;s enough to create classes with the
      same names (possible classes could be found in the tables <link linkend="cn3"> above</link>) and define necessary properties in them. </para> 
    
    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="CSS"><![CDATA[...
.rich-inplace-select-list-decoration{
    background-color: #ecf4fe;
}						
	
...]]></programlisting>  
    
    <para>This is the result:</para>
    
    <figure>
      <title>Redefinition styles with predefined classes</title>
      <mediaobject>
        <imageobject>
          <imagedata fileref="images/inplaceSelect1.png"/>
        </imageobject>
      </mediaobject>
    </figure>
    <para>In the shown example the background color for list is changed.</para>
    
    
    
    
    
    <para>It&apos;s aslo possible to change styles of a particular 
      <emphasis role="bold"> <property>&lt;rich:inplaceSelect&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold"><property>&lt;rich:inplaceSelect&gt;</property></emphasis> <property>styleClass</property> attributes. An example is placed below:</para>
    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="CSS"><![CDATA[...
.myClass {
    background-color:#bed6f8;
    font-style:italic;}
...]]></programlisting>  
    <para>The <emphasis><property>&quot;viewClass&quot;</property></emphasis> attribute for <emphasis role="bold"
      ><property>&lt;rich:inplaceSelect&gt; </property></emphasis> is defined as it’s shown in the example below:</para>
    
    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="CSS"><![CDATA[...<rich:inplaceSelect value="click to edit" viewClass="myClass"/>
]]></programlisting>    
    
    <para>This is a result:</para>
    
    <figure>
      <title>Modificaton of a look and feel with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title>
      <mediaobject>
        <imageobject>
          <imagedata fileref="images/inplaceSelect2.png"/>
        </imageobject>
      </mediaobject>
    </figure>  
    
    <para>As it could be seen on the picture above, the font style and background color in <property>view</property> state is changed.</para>
        
  </section>

  <section>
    <title>Relevant Resources Links</title>
    <para>
      <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/progressbar.jsf?c=inplaceInput">Here</ulink>
      you can see the example of <emphasis role="bold">
        <property>&lt;rich:inplaceIput&gt;</property>
      </emphasis> usage and sources for the given example. </para>
  </section>
</section>