<?xml version="1.0" encoding="UTF-8"?>
<section>
    <sectioninfo>
        <keywordset>
            <keyword>rich:comboBox</keyword>
            <keyword>comboBox</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.ComboBox</entry>
                </row>
                <row>
                    <entry>component-class</entry>
                    <entry>org.richfaces.component.html.HtmlComboBox</entry>
                </row>
                <row>
                    <entry>component-family</entry>
                    <entry>org.richfaces.ComboBox</entry>
                </row>
                <row>
                    <entry>renderer-type</entry>
                    <entry>org.richfaces.renderkit.ComboBoxRenderer</entry>
                </row>
                <row>
                    <entry>tag-class</entry>
                    <entry>org.richfaces.taglib.ComboBoxTag</entry>
                </row>
            </tbody>
        </tgroup>
    </table>
    <section>
        <title>Creating the Component with a Page Tag</title>
        <para>Here is a simple example as it could be used on a page: </para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" />
...]]></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.HtmlComboBox;
...	
HtmlComboBox myComboBox = new HtmlComboBox();
...]]></programlisting>
    </section>
    <section>
        <title>Details of Usage</title>
        <para>The <emphasis role="bold">
            <property>&lt;rich:comboBox&gt;</property>
        </emphasis> 
            is a simplified suggestion box component, that provides input with client side suggestions.
            <!--
            component consists of an <property>input field</property>, the <property>button</property> and the <property>popup list</property> of suggestions 
            attached to input. If you want to see the popup list you can press the <property>button</property> or type the first letter of suggested word in the <property>input field</property>.
            -->
            
            The component could be in two states:
            
            <!-- NEED DESCRIPTION "HOW TO MANAGE THIS"-->
           
            <itemizedlist>
                <listitem><para>Default - only input and button is shown</para></listitem>
                <listitem><para>Input, button and a popup list of suggestions attached to input is shown</para></listitem>
            </itemizedlist>
        </para>
        <para>
            There are two ways to get values for the popup list of suggestions:
        </para>
            <itemizedlist>
                <listitem>
                    <para>Using the <emphasis><property>&quot;suggestionValues&quot;</property></emphasis> attribute, that defines the suggestion collection</para>
                    <para>
                        <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="XML"><![CDATA[...
<rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" />    
...]]></programlisting>                        
                </listitem>
                <listitem>
                <para>
                Using the <emphasis role="bold"><property>&lt;f:selectItem /&gt;</property></emphasis> or <emphasis role="bold">
                    <property>&lt;f:selectItems /&gt;</property></emphasis> JSF components.
                </para>
                <para>
                    <emphasis role="bold">Example:</emphasis>
                </para>
                <programlisting role="XML"><![CDATA[...
<rich:comboBox value="#{bean.state}" valueChangeListener="#{bean.selectionChanged}">
        <f:selectItems  value="#{bean.selectItems}"/>
        <f:selectItem itemValue="Oregon"/>			  
        <f:selectItem itemValue="Pennsylvania"/>
        <f:selectItem itemValue="Rhode Island"/>
        <f:selectItem itemValue="South Carolina"/>
</rich:comboBox>            
...]]></programlisting> 
                    <note>
                        <title>Note:</title>
                        <para>
                            These JSF components consider only the <emphasis><property>&quot;value&quot;</property></emphasis> attribute for this component.
                        </para>
                    </note>
             </listitem>
            </itemizedlist>
        <para> Popup list content loads at page render time. No additional requests could be performed on the popup calling.
        </para>
        <para>
            The <emphasis><property> &quot;value&quot;</property></emphasis> attribute stores value from input after submit. 
        </para>
        <para>
            The <emphasis><property> &quot;directInputSuggestions&quot;</property></emphasis> attribute defines, how the first value from the suggested one appears in an input field. 
            If it&apos;s &quot;true&quot; the first value appears with the suggested part highlighted. 
        </para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" directInputSuggestions="true" />            
...]]></programlisting>        
        <para>This is a result:</para>
            <figure>
                <title><emphasis role="bold">
                    <property>&lt;rich:comboBox&gt;</property>
                </emphasis> with <emphasis><property> &quot;directInputSuggestions&quot;</property></emphasis> attribute.</title>
                <mediaobject>
                    <imageobject>
                        <imagedata fileref="images/comboBox3.png"/>
                    </imageobject>
                </mediaobject>
            </figure>
            
        <para>
        The <emphasis><property> &quot;selectFirstOnUpdate&quot;</property></emphasis> attribute defines if the first value from suggested is selected in a popup list. 
        If it&apos;s &quot;false&quot; nothing is selected in the list before a user hovers some item with the mouse. 
        </para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" selectFirstOnUpdate="false" />           
...]]></programlisting>     
        <para>This is a result:</para>
            <figure>
                <title><emphasis role="bold">
                    <property>&lt;rich:comboBox&gt;</property>
                </emphasis> with <emphasis><property> &quot;selectFirstOnUpdate&quot;</property></emphasis> attribute.</title>
                <mediaobject>
                    <imageobject>
                        <imagedata fileref="images/comboBox4.png"/>
                    </imageobject>
                </mediaobject>
            </figure>
       
        <!--para>
            The <emphasis><property> &quot;filterNewValues&quot;</property></emphasis> attribute defines the appearance of values in the list.
            If it&apos;s &quot;true&quot; only the part of a list, which satisfies the prefix entered appears in a popup list.
            If it&apos;s &quot;false&quot; all values appear in the popup list and the list is scrolled to the first value that satisfies the prefix.            
            </para-->
        <para>
          The <emphasis><property>&quot;defaultLabel&quot;</property></emphasis> attribute defines the default label of the input element. Simple example is placed below.
        </para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" defaultLabel="Select a city..." />            
...]]></programlisting>     
        <para>This is a result:</para>
            <figure>
                <title><emphasis role="bold">
                    <property>&lt;rich:comboBox&gt;</property>
                </emphasis> with <emphasis><property> &quot;defaultLabel&quot;</property></emphasis> attribute.</title>
                <mediaobject>
                    <imageobject>
                        <imagedata fileref="images/comboBox5.png"/>
                    </imageobject>
                </mediaobject>
            </figure>   
     
            <para>
                With the help of the <emphasis><property>&quot;disabled&quot;</property></emphasis> attribute you can disable the whole 
                <emphasis role="bold"><property>&lt;rich:comboBox&gt;</property></emphasis> component. See the following example.
            </para>
            <para>
                <emphasis role="bold">Example:</emphasis>
            </para>
            <programlisting role="XML"><![CDATA[...
<rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" defaultLabel="Select a city..." disabled="true" />            
...]]></programlisting>  
        <para>This is a result:</para>
                <figure>
                    <title><emphasis role="bold">
                        <property>&lt;rich:comboBox&gt;</property>
                    </emphasis> with <emphasis><property> &quot;disabled&quot;</property></emphasis> attribute.</title>
                    <mediaobject>
                        <imageobject>
                            <imagedata fileref="images/comboBox6.png"/>
                        </imageobject>
                    </mediaobject>
                </figure>      
        <para>
      	The 
      		<emphasis>
      			<property>
      				&quot;enableManualInput&quot;
      			</property>
      		</emphasis> 
      	attribute enables/disables input field, so when 
      	<code>
      		enableManualInput = &quot;false&quot;
      	</code>,
      	user can only pick the value manually and has no possibility to type in the value 
      	(default value is &quot;false&quot;).
      </para>
        <!--para>
        The <emphasis role="bold"><property>&lt;rich:comboBox&gt;</property></emphasis> component provides the possibility to use 
            specific event attribute <emphasis><property> &quot;onlistcall&quot;</property></emphasis> which is fired before the list opening.
        </para-->
        
        <para>
            The <emphasis role="bold"><property>&lt;rich:comboBox&gt;</property></emphasis> component provides to use 
            specific event attributes:
            <itemizedlist>
            <listitem><para>
                <emphasis><property> &quot;onlistcall&quot;</property></emphasis>which is fired before the list opening and gives you a possibility to cancel list popup/update 
            </para></listitem>
            <listitem><para>
                <emphasis><property> &quot;onselect&quot;</property></emphasis>which gives you a possibility to send AJAX request when item is selected 
            </para></listitem>
            </itemizedlist>   
         </para>
        
        <para>
            The <emphasis role="bold"><property>&lt;rich:comboBox&gt;</property></emphasis> component allows to use sizes attributes:
            <itemizedlist>
                <listitem><para>
                    <emphasis><property> &quot;listWidth&quot;</property></emphasis> and <emphasis><property> &quot;listHeight&quot;</property></emphasis> attributes
                    specify popup list sizes with values in pixels
                </para></listitem>
                <listitem><para>
                    <emphasis><property> &quot;width&quot;</property></emphasis> attribute customizes the size of input element with values in pixels.
                </para></listitem>
            </itemizedlist>  
        </para>
       <!-- <para>It&apos;s possible to handle events for comboBox from JavaScript code. A simplest example of usage JavaScript API is placed below:</para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
    <rich:comboBox defaultLabel="Enter some value" id="comboBoxID">
        ...
    </rich:comboBox>
...
<h:commandButton value="Enable" onclick="#{rich:component('comboBoxID')}.enable(event)"/>     
...]]></programlisting>  -->
        
          </section>
    <section>
        <title>JavaScript API</title>
        <table>
            <title>JavaScript API</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Function</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>showList()</entry>
                        <entry>Shows the popup list</entry>
                    </row>
                    <row>
                        <entry>hideList()</entry>
                        <entry>Hides the popup list</entry>
                    </row>
                    <row>
                        <entry>   enable()</entry>
                        <entry > Enables the control for input</entry>
                    </row>
                    <row>
                        <entry>  disable()</entry>
                        <entry >Disables the control for input</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
    </section>
    
    <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:comboBox&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:comboBox&gt;</property>
            </emphasis> component</para></listitem>
        </itemizedlist>
        </para>
    </section>
    <section>
        <title>Skin Parameters Redefinition</title>
        <table>
            <title>Skin parameters redefinition for a popup list</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>tableBackgroundColor</entry>
                        <entry>background</entry>
                    </row>
                    <row>
                        <entry>panelBorderColor</entry>
                        <entry>border-color</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
                <table>
                    <title>Skin parameters redefinition for a button background, inactive button background, button background in pressed and disabled state</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>
                   
                </tbody>
            </tgroup>
                </table>
        <table>
            <title>Skin parameters redefinition for a button</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    
                    <row>
                        <entry>panelBorderColor</entry>
                        <entry>border-top-color</entry>
                    </row>
                    <row>
                        <entry>panelBorderColor</entry>
                        <entry>border-left-color</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        <table>
            <title>Skin parameters redefinition for an inactive button</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                  
                     <row>
                         <entry>panelBorderColor</entry>
                        <entry>border-top-color</entry>
                    </row>
                    <row>
                        <entry>panelBorderColor</entry>
                        <entry>border-left-color</entry>
                    </row>
              
                </tbody>
            </tgroup>
        </table>
        <table>
            <title>Skin parameters redefinition for a disabled button</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    
                    <row>
                        <entry>panelBorderColor</entry>
                        <entry>border-top-color</entry>
                    </row>
                    <row>
                        <entry>panelBorderColor</entry>
                        <entry>border-left-color</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        <table>
            <title>Skin parameters redefinition for a hovered button</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    
                    <row>
                        <entry>selectControlColor</entry>
                        <entry>border-color</entry>
                    </row>
                                    
                </tbody>
            </tgroup>
        </table>
        
        <table>
            <title>Skin parameters redefinition for a font</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>generalSizeFont</entry>
                        <entry>font-size</entry>
                    </row>
                    <row>
                        <entry>generalFamilyFont</entry>
                        <entry>font-family</entry>
                    </row>
                    <row>
                        <entry>generalTextColor</entry>
                        <entry>color</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
        <table>
            <title>Skin parameters redefinition for a font in inactive state</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>generalSizeFont</entry>
                        <entry>font-size</entry>
                    </row>
                    <row>
                        <entry>generalFamilyFont</entry>
                        <entry>font-family</entry>
                    </row>
                    <row>
                        <entry>generalTextColor</entry>
                        <entry>color</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
        <table>
            <title>Skin parameters redefinition for a font in disabled state</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>headerFamilyFont</entry>
                        <entry>font-size</entry>
                    </row>
                    <row>
                        <entry>headerFamilyFont</entry>
                        <entry>font-family</entry>
                    </row>
           
                </tbody>
            </tgroup>
        </table>
        <table>
            <title>Skin parameters redefinition for an input field</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>controlBackgroundColor</entry>
                        <entry>background-color</entry>
                    </row>
                    <row>
                        <entry>panelBorderColor</entry>
                        <entry>border-bottom-color</entry>
                    </row>
                    <row>
                        <entry>panelBorderColor</entry>
                        <entry>border-right-color</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        <table>
            <title>Skin parameters redefinition for an inactive input field</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>controlBackgroundColor</entry>
                        <entry>background-color</entry>
                    </row>
                    <row>
                        <entry>panelBorderColor</entry>
                        <entry>border-bottom-color</entry>
                    </row>
                    <row>
                        <entry>panelBorderColor</entry>
                        <entry>border-right-color</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        <table>
            <title>Skin parameters redefinition for a disabled input field</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>controlBackgroundColor</entry>
                        <entry>background-color</entry>
                    </row>
                    <row>
                        <entry>panelBorderColor</entry>
                        <entry>border-bottom-color</entry>
                    </row>
                    <row>
                        <entry>panelBorderColor</entry>
                        <entry>border-right-color</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        <table>
            <title>Skin parameters redefinition for an item</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>generalSizeFont</entry>
                        <entry>font-size</entry>
                    </row>
                    <row>
                        <entry>generalFamilyFont</entry>
                        <entry>font-family</entry>
                    </row>
                    <row>
                        <entry>generalTextColor</entry>
                        <entry>color</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        <table>
            <title>Skin parameters redefinition for a selected item</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>headerBackgroundColor</entry>
                        <entry>background-color</entry>
                    </row>
                    <row>
                        <entry>headerBackgroundColor</entry>
                        <entry>border-color</entry>
                    </row>
                    <row>
                        <entry>generalTextColor</entry>
                        <entry>color</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        
    </section>
    <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/comboBox_cn1.png"/>
                </imageobject>
            </mediaobject>
        </figure>
        <figure>
            <title>Classes names</title>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/comboBox_cn2.png"/>
                </imageobject>
            </mediaobject>
        </figure>
      
        <table id="comboBoxC">
            <title>Classes names that define popup list representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>

                    <row>
                        <entry>rich-combobox-shell</entry>
                        <entry>Defines styles for a wrapper &lt;div&gt; element of a list</entry>
                    </row>
                    <row>
                        <entry>rich-combobox-list-position</entry>
                        <entry>Defines position of a list</entry>
                    </row>              
                    <row>
                        <entry>rich-combobox-list-decoration</entry>
                        <entry>Defines styles for a list</entry>
                    </row>
                    <row>
                        <entry>rich-combobox-list-scroll</entry>
                        <entry>Defines styles for a list scrolling</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>    

        <table>
            <title>Classes names that define font representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-combobox-font</entry>
                        <entry>Defines styles for a font</entry>
                    </row>
                    <row>
                        <entry>rich-combobox-font-inactive</entry>
                        <entry>Defines styles for an inactive font</entry>
                    </row>
                    <row>
                        <entry>rich-combobox-font-disabled</entry>
                        <entry>Defines styles for a disabled font</entry>
                    </row>
                  </tbody>
            </tgroup>
        </table>
        
        <table>
            <title>Classes names that define input field representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    
                    <row>
                        <entry>rich-combobox-input</entry>
                        <entry>Defines styles for an input field</entry>
                    </row>
                    <row>
                        <entry>rich-combobox-input-disabled</entry>
                        <entry>Defines styles for an input field in disabled state</entry>
                    </row>
                    <row>
                        <entry>rich-combobox-input-inactive</entry>
                        <entry>Defines styles for an inactive input field</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        
        <table>
            <title>Classes names that define item representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-combobox-item</entry>
                        <entry>Defines styles for an item</entry>
                    </row>
                    <row>
                        <entry>rich-combobox-item-selected</entry>
                        <entry>Defines styles for a selected item</entry>
                    </row>
                 </tbody>
            </tgroup>
        </table>
        
        <table>
            <title>Classes names that define button representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-combobox-button</entry>
                        <entry>Defines styles for a button</entry>
                    </row>
                    <row>
                        <entry>rich-combobox-button-inactive</entry>
                        <entry>Defines styles for an inactive button</entry>
                    </row>
                    <row>
                        <entry>rich-combobox-button-disabled</entry>
                        <entry>Defines styles for a button in disabled state</entry>
                    </row>
                    <row>
                        <entry>rich-combobox-button-hovered</entry>
                        <entry>Defines styles for a hovered button</entry>
                    </row>
                    <row>
                        <entry>rich-combobox-button-background</entry>
                        <entry>Defines styles for a button background</entry>
                    </row>
                    <row>
                        <entry>rich-combobox-button-background-disabled</entry>
                        <entry>Defines styles for a disabled button background</entry>
                    </row>
                    <row>
                        <entry>rich-combobox-button-background-inactive</entry>
                        <entry>Defines styles for an inactive button background</entry>
                    </row>
                    <row>
                        <entry>rich-combobox-button-pressed-background</entry>
                        <entry>Defines styles for a pressed button background</entry>
                    </row>
                    <row>
                        <entry>rich-combobox-button-icon</entry>
                        <entry>Defines styles for a button icon</entry>
                    </row>
                    <row>
                        <entry>rich-combobox-button-icon-inactive</entry>
                        <entry>Defines styles for an inactive button icon</entry>
                    </row>
                    <row>
                        <entry>rich-combobox-button-icon-disabled</entry>
                        <entry>Defines styles for a disabled button icon</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
        
        <table>
            <title>Classes names that define shadow representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-combobox-shadow</entry>
                        <entry>Defines styles for a wrapper &lt;div&gt; element of a shadow</entry>
                    </row>
                    <row>
                        <entry>rich-combobox-shadow-tl</entry>
                        <entry>Defines styles for a top-left element of a shadow</entry>
                    </row>
                    <row>
                        <entry>rich-combobox-shadow-tr</entry>
                        <entry>Defines styles for a top-right element of a shadow</entry>
                    </row>
                    <row>
                        <entry>rich-combobox-shadow-bl</entry>
                        <entry>Defines styles for a bottom-left element of a shadow</entry>
                    </row>
                    <row>
                        <entry>rich-combobox-shadow-br</entry>
                        <entry>Defines styles for a bottom-right element of a shadow</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
        
        <para>In order to redefine styles for all <emphasis role="bold">
            <property>&lt;rich:comboBox&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="comboBoxC"> above</link>) and define necessary properties in them. </para>
        
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="CSS"><![CDATA[...
.rich-combobox-list-decoration{
        background-color:#ecf4fe;
}
...]]></programlisting>  
        
        <para>This is a result:</para>
        
        <figure>
            <title>Redefinition styles with predefined classes</title>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/comboBox_pc.png"/>
                </imageobject>
            </mediaobject>
        </figure>
        
        <para>In the example background color for popup list was changed.</para>
        
        <para>Also it&apos;s possible to change styles of particular <emphasis role="bold"
            ><property>&lt;rich:comboBox&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold"
                ><property>&lt;rich:comboBox&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para>
        
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="CSS"><![CDATA[...
.myClass{
        font-weight:bold;
}
...]]></programlisting>  
        <para>The <emphasis><property>&quot;listClass&quot;</property></emphasis> attribute for <emphasis role="bold"
            ><property>&lt;rich:comboBox&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:comboBox ... listClass="myClass"/>
]]></programlisting>    
        
        <para>This is a result:</para>
        
        <figure>
            <title>Redefinition styles with own classes and <emphasis><property>&quot;styleClass&quot;</property></emphasis> attributes</title>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/comboBox_oc.png"/>
                </imageobject>
            </mediaobject>
        </figure>  
        
        <para>As it could be seen on the picture above, the font weight for items was changed.</para>
        
        
        
    </section>
    <section>
        <title>Relevant Resources Links</title>
        <para>
            <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/comboBox.jsf?c=comboBox">On RichFaces LiveDemo page </ulink> you can see an example of <emphasis role="bold"><property>&lt;rich:comboBox&gt;</property></emphasis> usage 
            and sources for the given example. 
        </para>
    </section>
</section>