<?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.InplaceSelect</entry>
                </row>
                <row>
                    <entry>component-class</entry>
                    <entry>org.richfaces.component.html.HtmlInplaceSelect</entry>
                </row>
                <row>
                  <entry>component-family</entry>
                  <entry>org.richfaces.InplaceSelect</entry>
                </row>
                <row>
                  <entry>renderer-type</entry>
                  <entry>org.richfaces.renderkit.InplaceSelectRenderer</entry>
                </row>
                <row>
                    <entry>tag-class</entry>
                  <entry>org.richfaces.taglib.InplaceSelectTag</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}">
    <f:selectItem itemValue="1" itemLabel="factory"/>
</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><property>&quot;value&quot;</property></emphasis> attribute is a value-binding expression for the current value of the component.
      </para>   
      <para>    
        The <emphasis role="bold"><property>&lt;rich:inplaceSelect&gt;</property>  </emphasis> component has three functional states: 
      </para>     
        <itemizedlist>        
          <listitem>
            <para>
              <property>View</property> state displays default label with the value taken from 
              <emphasis><property>&quot;value&quot;</property></emphasis> or <emphasis><property>&quot;defaultLabel&quot;</property></emphasis> attributes. 
            </para>
            <para>
              If the initial value of the <emphasis><property>&quot;value&quot;</property></emphasis> 
              attribute is &quot;null&quot; or <property>empty string</property>
              the <emphasis><property>&quot;defaultLabel&quot;</property></emphasis> attribute is used to define default label.
            </para>
            <para>
              <emphasis role="bold">Example:</emphasis>
            </para>  
            <programlisting role="XML"><![CDATA[...
<rich:inplaceSelect value="#{bean.value}" defaultLabel="click to edit">
    <f:selectItems value="#{bean.selectItems}" />
</rich:inplaceSelect>
...]]> </programlisting>
        <!--    <para>
              The managed bean code: 
            </para>
            <programlisting role="JAVA"><![CDATA[...
private String value = "";
...]]> </programlisting>-->
            
            
            <para>
              In the example above the <emphasis><property>&quot;value&quot;</property></emphasis> attribute is not initialized
              therefore &quot;<code>click to edit</code>&quot; text, that  
              <emphasis><property>&quot;defaultLabel&quot;</property></emphasis>, contains is displayed.
            </para>
            <para>
              This is the result:
            </para>
            <figure>
            <title>View state</title>  
            <mediaobject>
              <imageobject>
              <imagedata fileref="images/inplaceSelect2.png"/>
              </imageobject>
            </mediaobject>     
          </figure>  
          </listitem>
         <listitem>
           <para>
             <property>Edit </property>state  - select representation to allow value edit
           </para>       
           <figure>
            <title>Edit state</title>  
            <mediaobject>
              <imageobject>
              <imagedata fileref="images/inplaceSelect3.png"/>
              </imageobject>
            </mediaobject>     
          </figure>
          </listitem>
          <listitem>
            <para>
              <property>Changed</property> state - value representation after it was changed
            </para>     
       <figure>
            <title>Changed state</title>  
            <mediaobject>
              <imageobject>
		<imagedata fileref="images/inplaceSelect4.png"/>
              </imageobject>
            </mediaobject>     
          </figure>  
          </listitem>
    </itemizedlist>
   
 <para>
   You can form the 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> JSF components.
 </para>
 <para>
   Please, see the example below.
 </para>
 <para>
        <emphasis role="bold">Example:</emphasis>
</para>  
<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>      
      
<para>
 In the example above the value of the selected item is available via <emphasis><property>&quot;value&quot;</property></emphasis> attribute. 
</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;onclick&quot;. 
      </para>
      <para>
        <emphasis role="bold">Example:</emphasis>
      </para>  
      <programlisting role="XML"><![CDATA[...
<rich:inplaceSelect value="#{bean.inputValue}" defaultLabel="Double Click to edit" editEvent="ondblclick">
    <f:selectItems value="#{demo.selectItems}" />
</rich:inplaceSelect>
...]]></programlisting>      
      <para>
        The <emphasis role="bold"><property>&lt;rich:inplaceSelect&gt;</property></emphasis>
        component provides specific event attributes:
      </para>
      <itemizedlist>
        <listitem>
          <para>
            <emphasis><property>&quot;oneditactivation&quot;</property></emphasis> fired on <property>edit</property> state activation            
          </para>
        </listitem>
        <listitem>
          <para>
            <emphasis><property>&quot;oneditactivated&quot;</property></emphasis> fired when <property>edit</property> state is activated          
          </para>
        </listitem>
        <listitem>
          <para>
            <emphasis><property>&quot;onviewactivation&quot;</property></emphasis> fired on <property>view</property> state activation         
          </para>
        </listitem>
        <listitem>
          <para>
            <emphasis><property>&quot;onviewactivated&quot;</property></emphasis> fired after the component is changed to representation state
          </para>
        </listitem>
      </itemizedlist>
      
      <para>
        <emphasis role="bold">Example:</emphasis>
      </para>      
      <programlisting role="XML"><![CDATA[...
<rich:inplaceSelect value="#{bean.inputValue}" oneditactivation="if (!confirm('Are you sure you want to change the value?')){return false;}">
    <f:selectItems value="#{demo.selectItems}" />
</rich:inplaceSelect>
...]]> </programlisting>  
      <para>
        The given code illustrates how <emphasis><property>&quot;oneditactivation&quot;</property></emphasis> attribute works, 
        namely when the state is being changed from <property>view</property> to <property>edit</property>, 
        a confirmation window with a message <code>&quot;Are you sure you want to change value?&quot;</code> comes up.
      </para>
      
<!--      <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 field selected right after the change from <property>view</property> state to <property>edit</property> occurs. 
      </para>
        <programlisting role="XML"><![CDATA[...
<rich:inplaceSelect value="#{bean.inputValue}" selectOnEdit="true">
    <f:selectItems  value="#{bean.selectItems}"/>
</rich:inplaceSelect>
...]]></programlisting>  -->
      
      

      <para>
        To prevent opening the drop-down list by default, once <property>edit</property> state is activated, 
        set the <emphasis><property>&quot;openOnEdit&quot;</property></emphasis> attribute to &quot;false&quot;. 
        The default value is &quot;true&quot;.
      </para>

      <para>
        <emphasis role="bold">Example:</emphasis>
      </para> 
      <programlisting role="XML"><![CDATA[...
<rich:inplaceSelect value="#{bean.inputValue}" showControls="true" openOnEdit="false">
    <f:selectItems  value="#{bean.selectItems}"/>
</rich:inplaceSelect>
...]]></programlisting> 


      <para>
        This is the result:
      </para>
      <figure>
        <title>The <emphasis><property>&quot;openOnEdit&quot;</property></emphasis> attribute usage</title>  
        <mediaobject>
          <imageobject>
            <imagedata fileref="images/inplaceSelect5.png"/>
          </imageobject>
        </mediaobject>     
      </figure>  


      <para> 
       Nowever, if you want to confirm the data saving explicitly you can use the <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.
       <property>Edit</property> state can be deactivated by pressing &quot;Esc&quot; key. 
        An option in the drop-drown list can be also selected by pressing &quot;Enter&quot;. 
      </para>
      <para>
            <emphasis role="bold">Example:</emphasis>
      </para>      
          <programlisting role="XML"><![CDATA[...
<rich:inplaceSelect value="#{bean.inputValue}" showControls="true">
    <f:selectItems  value="#{bean.selectItems}"/>
</rich:inplaceSelect>
...]]></programlisting>  
      <para>
        This is the result:
      </para>
      <figure>
        <title>The <emphasis><property>&quot;showControls&quot;</property></emphasis> attribute usage</title>  
        <mediaobject>
          <imageobject>
            <imagedata fileref="images/inplaceSelect6.png"/>
          </imageobject>
        </mediaobject>     
      </figure>     
        
      <para>
        You can also position the controls relatively to the input field, by means of 
      </para>
      <itemizedlist>
        <listitem>
          <para>
            The <emphasis><property>&quot;controlsHorizontalPosition&quot;</property></emphasis> attribute 
            with &quot;left&quot;, &quot;right&quot; and  &quot;center&quot; definitions      
          </para>
        </listitem>
        <listitem>
          <para>
            The <emphasis><property>&quot;controlsVerticalPosition &quot;</property></emphasis> attribute
            with &quot;bottom&quot; and &quot;top&quot; definitions
          </para>
        </listitem>
      </itemizedlist>
      <para>
        <emphasis role="bold">Example:</emphasis>
      </para>      
      <programlisting role="XML"><![CDATA[...
<rich:inplaceSelect value="#{bean.inputValue}" controlsHorizontalPosition="left" controlsVerticalPosition="center" showControls="true">
    <f:selectItems  value="#{bean.selectItems}"/>
</rich:inplaceSelect>
...]]> </programlisting>  
      <para>
        This is the result:
      </para>
      <figure>
        <title>Controls positioning</title>  
        <mediaobject>
          <imageobject>
            <imagedata fileref="images/inplaceSelect7.png"/>
          </imageobject>
        </mediaobject>     
      </figure>   
      
      <para>It is also possible to use <emphasis><property>&quot;controls&quot;</property></emphasis>  
        facet in order to replace the default controls with facets content. See the example below.
      </para>
          <para>Please, see the example.</para>
          <para>
            <emphasis role="bold">Example:</emphasis>
          </para>      
          <programlisting role="XML"><![CDATA[...
<rich:inplaceSelect value="#{bean.inputValue}" showControls="true">
    <f:facet name="controls">
        <button onclick="#{rich:component('inplaceSelect')}.save();" type="button">Save</button>
        <button onclick="#{rich:component('inplaceSelect')}.cancel();" type="button">Cancel</button> 
    </f:facet>  
    <f:selectItems  value="#{bean.selectItems}"/>
</rich:inplaceSelect>
...]]> </programlisting>  
      <para>
        This is the result:
      </para>
      <figure>
        <title><emphasis><property>&quot;controls&quot;</property></emphasis> facet usage</title>  
        <mediaobject>
          <imageobject>
            <imagedata fileref="images/inplaceSelect8.png"/>
          </imageobject>
        </mediaobject>     
      </figure>   
     <note>
        <title>Note:</title>
        <para>
          The <emphasis> <property>&quot;controls&quot;</property></emphasis>facet also implies using 
          <emphasis><property>&quot;showControls&quot;</property></emphasis> 
          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>
        The <emphasis role="bold"><property>&lt;rich:inplaceSelect&gt;</property></emphasis> component could be rendered with 
        <emphasis role="bold"><property>&lt;span&gt;</property></emphasis> or <emphasis role="bold"><property>&lt;div&gt;</property></emphasis>  
        elements to display its value.
        In order to change default <emphasis role="bold"><property>&lt;span&gt;</property></emphasis> output, 
        use the <emphasis><property>&quot;layout&quot;</property></emphasis> attribute with &quot;block&quot; value.
      </para>
      
      <para>
        The <emphasis role="bold"><property>&lt;rich:inplaceSelect&gt;</property></emphasis> component supports standard
        <emphasis><property>&quot;tabindex&quot;</property></emphasis> attribute. 
        When the component gets focus the <property>edit</property> mode is activated and drop-down list is opened. 
      </para>  
      <para>
        The 
        <emphasis><property>&quot;selectWidth&quot;</property></emphasis>, 
        <emphasis><property>&quot;minSelectWidth&quot;</property></emphasis> and 
        <emphasis><property>&quot;maxSelectWidth&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>
    </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>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 and name</entry>
                  </row>
    
        </tbody>
      </tgroup>
    </table>
  </section>
    <!-- End of JavaScript API-->   
    
	<section>
		<title>Facets</title>
		<table>
			<title>Facets</title>
				<tgroup cols="2">
					<thead>
						<row>
							<entry>Facet name</entry>
							<entry>Description</entry>
						</row>
					</thead>
					<tbody>
						<row>
							<entry>controls</entry>
							<entry>Defines the contols contents. Related attributes are &quot;saveControlIcon&quot; and &quot;cancelControlIcon&quot;</entry>
						</row>
					</tbody>
				</tgroup>
		</table>
	</section>
	
    <!-- 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><para>Redefine the corresponding skin parameters</para></listitem>
            <listitem><para> Add to your style sheets style classes used by a <emphasis role="bold">
                <property>&lt;rich:inplaceSelect&gt;</property>
            </emphasis> component</para></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/inplaceSelect_cn.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/inplaceSelect_pc.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&apos;s shown in the example below:</para>
    
    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="XML"><![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/inplaceSelect_oc.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/inplaceSelect.jsf?c=inplaceSelect">On the component Live Demo page</ulink>
      you can see the example of <emphasis role="bold">
        <property>&lt;rich:inplaceSelect&gt;</property>
      </emphasis> usage and sources for the given example. </para>
  </section>
</section>