<?xml version="1.0" encoding="UTF-8"?>
<section>
    <sectioninfo>
        <keywordset>
            <keyword>rich:pickList</keyword>
            <keyword>pickList</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.PickList</entry>
                </row>
                <row>
                    <entry>component-class</entry>

                    <entry>org.richfaces.component.html.HtmlPickList</entry>
                </row>
                <row>
                    <entry>component-family</entry>

                    <entry>org.richfaces.PickList</entry>
                </row>
                <row>
                    <entry>renderer-type</entry>

                    <entry>org.richfaces.PickListRenderer</entry>
                </row>
                 <row>
                    <entry>tag-class</entry>

                    <entry>org.richfaces.taglib.PickListTag</entry>
                </row>
            </tbody>
        </tgroup>
    </table>
    <section>
        <title>Creating the Component with a Page Tag</title>
        <para>To create the simplest variant on a page use the following syntax:</para>

        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:pickList value="#{pickBean.listValues}">
        <f:selectItem itemValue="Bentley" itemLabel="Bentley"/>
        <f:selectItems value="#{pickBean.testList}"/>
</rich:pickList>
...]]></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.HtmlPickList;
...	
HtmlPickList myPickList = new HtmlPickList();
...]]></programlisting>
    </section>
    <section>
        <title>Details of Usage</title>
        <para>The <emphasis role="bold">
                <property>&lt;rich:pickList&gt;</property>
            </emphasis> component consists of <itemizedlist>
                <listitem>2 <property>item lists</property>. Every item has three different representations: common, selected, active.
                    Combination of these states is possible.</listitem>
                <listitem>
                    <property>Move controls set</property> is a set of controls, which performs moving items between lists.
                </listitem>
            </itemizedlist>
        </para>

        <para>
            The <emphasis><property>&quot;value&quot;</property></emphasis> attribute is used to access the values of a target list.  
        </para>
        <para>
            The <emphasis role="bold"><property>&lt;f:selectItem /&gt;</property></emphasis> or <emphasis role="bold">
                <property>&lt;f:selectItems /&gt;</property></emphasis> facets are used to access the values of a source list.
          </para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:pickList value="#{pickBean.listValues}">
        <f:selectItem itemValue="Bentley" itemLabel="Bentley"/>
        <f:selectItem itemValue="Audi" itemLabel="Audi"/>
        <f:selectItems value="#{pickBean.testList}"/>
</rich:pickList>
...]]></programlisting>

        <para>
            The <emphasis> <property> &quot;switchByClick&quot;</property></emphasis> attribute provides an option to copy and remove items between lists by one click. 
            Default value of this attribute is &quot;false&quot;, so you need a double click to copy, remove items from one list to another.
        </para> 
        <para>
            Lables of  the <property>move controls</property> can be defined with 
            <emphasis><property> &quot;copyAllControlLabel&quot;</property></emphasis>, 
            <emphasis><property> &quot;copyControlLabel&quot;</property></emphasis>,
            <emphasis> <property> &quot;removeControlLabel&quot;</property></emphasis>, 
            <emphasis> <property> &quot;removeAllControlLabel&quot;</property></emphasis> attributes.
        </para> 
        <para>
              <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:pickList copyAllControlLabel = "#{pickBean.copyAllLabel}" copyControlLabel = "#{pickBean.copyLabel}" removeControlLabel = "#{pickBean.removeLabel}" 
removeAllControlLabel ="#{pickBean.removeAllLabel}" value="#{pickBean.listValues}">
        <f:selectItem itemValue="Bentley" itemLabel="Bentley"/>
        <f:selectItem itemValue="Audi" itemLabel="Audi"/>
        <f:selectItems value="#{pickBean.testList}"/>
</rich:pickList>
...]]></programlisting>
         <para>
             If you don&apos;t want to display labels on the buttons you need to set  
             <emphasis><property> &quot;showButtonsLabel&quot;</property></emphasis> to &quot;false&quot;.    
         </para>
             <figure>
                 <title>Move control buttons without labels</title>
                 <mediaobject>
                     <imageobject>
                         <imagedata fileref="images/picklist_no_lbls.png"/>
                     </imageobject>
                 </mediaobject>
             </figure>       
  
        <para>
            With the help of <emphasis><property>&quot;moveControlsVerticalAlign&quot;</property></emphasis> attribute 
            you can align <property>move controls</property> vertically.
        </para>
        
        <para>
            The <emphasis role="bold">
                <property>&lt;rich:pickList&gt;</property></emphasis>
            component provides resizing of lists by using such attributes as:
            <itemizedlist>
                <listitem> 
                    <emphasis>
                        <property> &quot;listsHeight&quot;</property></emphasis> defines height of the lists.
                    
                </listitem>
                <listitem> 
                    <emphasis>
                        <property> &quot;sourceListWidth&quot;</property></emphasis> defines width of a source list.
                    
                </listitem>
                <listitem> 
                    <emphasis>
                        <property> &quot;targetListWidth&quot;</property></emphasis> defines width of a target list.
                    
                </listitem>
            </itemizedlist>
        </para> 
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:pickList listsHeight="#{pickBean.listsHeight}" sourceListWidth="#{pickBean.sourceListWidth}" targetListWidth="#{pickBean.targetListWidth}" value="#{pickBean.listValues}">
        <f:selectItem itemValue="Bentley" itemLabel="Bentley"/>
        <f:selectItem itemValue="Audi" itemLabel="Audi"/>
        <f:selectItems value="#{pickBean.testList}"/>
</rich:pickList>
...]]></programlisting>
             
        <table>
            <title>Keyboard usage for elements selection</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Keys and combinations </entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <!--Sorting API -->
                    <row>
                        <entry>CTRL+click</entry>
                        <entry>Inverts selection for an item</entry>
                    </row>
                    <row>
                        <entry>SHIFT+click</entry>
                        <entry>Selects all rows from active one to a clicked row if they differ,
                            else select the active row. All other selections are cleared</entry>
                    </row>
                    <row>
                        <entry>CTRL+A</entry>
                        <entry>Selects all elements inside the list if some active element is
                            already present in a list</entry>
                    </row>
                    <row>
                        <entry>Up, Down arrows</entry>
                        <entry>Changes the active and selected elements to the next or previous in a list</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
    </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-->
                    <!--Sorting API-->
                    <!--
                    <row>
                        <entry>SortAscending()</entry>
                        <entry>Sorts items in the list ascending</entry>
                    </row>
                    <row>
                        <entry>SortDescending()</entry>
                        <entry>Sorts items in the list descending</entry>
                    </row>
                    <row>
                        <entry>Sort()</entry>
                        <entry>Inverts current sorting</entry>
                    </row>
                    -->

                    <!--Controls common API -->
                    <!--row>
                        <entry>hide()</entry>
                        <entry>Hides ordering control</entry>
                    </row>
                    <row>
                        <entry>show()</entry>
                        <entry>Shows ordering control</entry>
                    </row>
                    <row>
                        <entry>isShown()</entry>
                        <entry>Checks if current control is shown</entry>
                    </row>
                    <row>
                        <entry>enable()</entry>
                        <entry>Enables ordering control</entry>
                    </row>
                    <row>
                        <entry>disable()</entry>
                        <entry>Disables ordering control</entry>
                    </row>
                    <row>
                        <entry>isEnabled()</entry>
                        <entry>Checksif current control is enabled</entry>
                    </row-->
                    <!--List managing API -->
                    <!--row>
                        <entry>copy()</entry>
                        <entry>Copies selected item from the source list to the target list</entry>
                    </row>
                    <row>
                        <entry>remove()</entry>
                        <entry>Removes selected item from the target list to the source list</entry>
                    </row>
                    <row>
                        <entry>copyAll()</entry>
                        <entry>Copies all items from the source list to the target list</entry>
                    </row>
                    <row>
                        <entry>removeAll()</entry>
                        <entry>Removes all items from the target list to the source list</entry>
                    </row>
                    <row>
                        <entry>getSelection()</entry>
                        <entry>Returns currently selected item</entry>
                    </row>
                    <row>
                        <entry>getItems()</entry>
                        <entry>Returns the collection of all items</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:pickList&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:pickList&gt;</property>
                    </emphasis> component</listitem>
            </itemizedlist>
        </para>
    </section>

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

        <table>
            <title>Skin parameters redefinition for a list</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>tableBackgroundColor</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>tabBackgroundColorr</entry>
                        <entry>background-color</entry>
                    </row>
                    <row>
                        <entry>generalTextColor</entry>
                        <entry>color</entry>
                    </row>
                    <row>
                        <entry>headerFamilyFont</entry>
                        <entry>font-family</entry>
                    </row>
                    <row>
                        <entry>headerSizeFont</entry>
                        <entry>font-size</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>tabBackgroundColor</entry>
                        <entry>background-color</entry>
                    </row>
                    <row>
                        <entry>tabDisabledTextColor</entry>
                        <entry>color</entry>
                    </row>
                    <row>
                        <entry>headerFamilyFont</entry>
                        <entry>font-family</entry>
                    </row>
                    <row>
                        <entry>headerSizeFont</entry>
                        <entry>font-size</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        
        <table>
            <title>Skin parameters redefinition for a pressed button</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>generalTextColor</entry>
                        <entry>color</entry>
                    </row>
                    <row>
                        <entry>headerFamilyFont</entry>
                        <entry>font-family</entry>
                    </row>
                    <row>
                        <entry>headerSizeFont</entry>
                        <entry>font-size</entry>
                    </row>
                    <row>
                        <entry>tableBorderColor</entry>
                        <entry>border-color</entry>
                    </row>
                    <row>
                        <entry>tableBorderWidth</entry>
                        <entry>border-width</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        <table>
            <title>Skin parameters redefinition for a highlighted button</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>generalTextColor</entry>
                        <entry>color</entry>
                    </row>
                    <row>
                        <entry>headerFamilyFont</entry>
                        <entry>font-family</entry>
                    </row>
                    <row>
                        <entry>headerSizeFon</entry>
                        <entry>font-size</entry>
                    </row>
                    <row>
                        <entry>selectControlColor</entry>
                        <entry>border-color</entry>
                    </row>
                    <row>
                        <entry>tableBorderWidth</entry>
                        <entry>border-width</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        
        <table>
            <title>Skin parameters redefinition for a button selection</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                     <row>
                         <entry>generalTextColor</entry>
                        <entry>color</entry>
                    </row>
                                        
                </tbody>
            </tgroup>
        </table>
        
        <table>
            <title>Skin parameters redefinition for a button content</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                     <row>
                         <entry>headerFamilyFont</entry>
                        <entry>font-family</entry>
                    </row>
                    <row>
                        <entry>headerSizeFont</entry>
                        <entry>font-size</entry>
                    </row>
                                        
                </tbody>
            </tgroup>
        </table>
                 
        <table>
            <title>Skin parameters redefinition for a source and target items</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>generalBackgroundColor</entry>
                        <entry>background-color</entry>
                    </row>
                    <row>
                        <entry>tableBorderColor</entry>
                        <entry>border-color</entry>
                    </row>
                    <row>
                        <entry>tableBorderWidth</entry>
                        <entry>border-width</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        
        <table>
            <title>Skin parameters redefinition for a source and target cell</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>generalTextColor</entry>
                        <entry>color</entry>
                    </row>
                    <row>
                        <entry>generalSizeFont</entry>
                        <entry>font-size</entry>
                    </row>
                    <row>
                        <entry>generalFamilyFont</entry>
                        <entry>font-family</entry>
                    </row>
                                        
                </tbody>
            </tgroup>
        </table>
        <table>
            <title>Skin parameters redefinition for a selected source and target cell</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>generalTextColor</entry>
                        <entry>color</entry>
                    </row>
                    <row>
                        <entry>generalSizeFont</entry>
                        <entry>font-size</entry>
                    </row>
                    <row>
                        <entry>generalFamilyFont</entry>
                        <entry>font-family</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        <table>
            <title>Skin parameters redefinition for an active source and target cell</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>border-top-color</entry>
                    </row>
                    <row>
                        <entry>generalTextColor</entry>
                        <entry>border-bottom-color</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        <table>
            <title>Skin parameters redefinition for a selected source and target row</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>additionalBackgroundColor</entry>
                        <entry>background-color</entry>
                    </row>
                                   
                </tbody>
            </tgroup>
        </table>
        
        <table>
            <title>Skin parameters redefinition for a controls</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>tableBorderColor</entry>
                        <entry>border-color</entry>
                    </row>
                    
                    
                </tbody>
            </tgroup>
        </table>
        

    </section>

    <section>
        <title>Definition of Custom Style Classes</title>

        <para>The following pictures illustrate how CSS classes  define styles for component elements.</para>


        <figure>
            <title>Classes names</title>

            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/pickListClasses1.png"/>
                </imageobject>
            </mediaobject>
        </figure>
        
        <figure>
            <title>Classes names</title>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/pickListClasses2.png"/>
                </imageobject>
            </mediaobject>
        </figure>

        <table id="pickListC">
            <title>Classes names that define a list representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-picklist-list</entry>
                        <entry>Defines styles for a wrapper &lt;table&gt; element of a pickList</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        
        <table >
            <title>Classes names that define a source and target items representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-picklist-source-items</entry>
                        <entry>Defines styles for an item in a source list</entry>
                    </row>
                    <row>
                        <entry>rich-picklist-target-items</entry>
                        <entry>Defines styles for an item in a target list</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        
        <table >
            <title>Classes names that define a source cell representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-picklist-source-cell</entry>
                        <entry>Defines styles for a cell in a source list</entry>
                    </row>
                    <row>
                        <entry>rich-picklist-source-cell-selected</entry>
                        <entry>Defines styles for a selected cell in a source list</entry>
                    </row>
                    <row>
                        <entry>rich-picklist-source-cell-active</entry>
                        <entry>Defines styles for an active cell in a source list</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
        
        <table >
            <title>Classes names that define a target cell representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-picklist-target-cell</entry>
                        <entry>Defines styles for a cell in a source list</entry>
                    </row>
                    <row>
                        <entry>rich-picklist-target-cell-selected</entry>
                        <entry>Defines styles for a selected cell in a target list</entry>
                    </row>
                    <row>
                        <entry>rich-picklist-target-cell-active</entry>
                        <entry>Defines styles for an active cell in a target list</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
        <table >
            <title>Classes names that define a selected source and target rows representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-picklist-source-row-selected</entry>
                        <entry>Defines styles for a selected row in a source list</entry>
                    </row>
                    <row>
                        <entry>rich-picklist-target-row-selected</entry>
                        <entry>Defines styles for a selected row in a target list</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        <table >
            <title>Classes names that define a control representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-picklist-control-disabled</entry>
                        <entry>Defines styles for a control in a disabled state</entry>
                    </row>
                    <row>
                        <entry>rich-picklist-control-copyall</entry>
                        <entry>Defines styles for a "copyAll" control</entry>
                    </row>
                    <row>
                        <entry>rich-picklist-control-copy</entry>
                        <entry>Defines styles for a "Copy" control</entry>
                    </row>
                    <row>
                        <entry>rich-picklist-control-remove</entry>
                        <entry>Defines styles for a "Remove" control</entry>
                    </row>
                    <row>
                        <entry>rich-picklist-control-removeall</entry>
                        <entry>Defines styles for a "removeAll" control</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        
        <table >
            <title>Classes names that define a button representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-list-picklist-button</entry>
                        <entry>Defines styles for a button</entry>
                    </row>
                    <row>
                        <entry>rich-list-picklist-button-disabled</entry>
                        <entry>Defines styles for a disabled button</entry>
                    </row>
                    <row>
                        <entry>rich-list-picklist-button-press</entry>
                        <entry>Defines styles for a pressed button</entry>
                    </row>
                    <row>
                        <entry>rich-list-picklist-button-light</entry>
                        <entry>Defines styles for a button highlight</entry>
                    </row>
                    <row>
                        <entry>rich-list-picklist-button-selection</entry>
                        <entry>Defines styles for a button selection</entry>
                    </row>
                    <row>
                        <entry>rich-list-picklist-button-content</entry>
                        <entry>Defines styles for a button content</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
        
        <para>In order to redefine styles for all <emphasis role="bold">
            <property>&lt;rich:pickList&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="pickListC"> above</link>) and define necessary properties in them. </para>
        
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="CSS"><![CDATA[...
.rich-picklist-list{
        background-color:#ecf4fe;
}
...]]></programlisting>  
        
        <para>This is a result:</para>
        
        <figure>
            <title>Redefinition styles with predefined classes</title>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/pickListClass.png"/>
                </imageobject>
            </mediaobject>
        </figure>
        
        <para>In the example the background color for lists is changed.</para>
        
        <para>Also it’s possible to change styles of particular <emphasis role="bold"
            ><property>&lt;rich:pickList&gt;</property></emphasis> component. In this case you should create own style classes and use them in the corresponding <emphasis role="bold"
                ><property>&lt;rich:pickList&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{
        font-weight:bold;
}
...]]></programlisting>  
        <para>The <emphasis><property>&quot;styleClass&quot;</property></emphasis> attribute for <emphasis role="bold"
            ><property>&lt;rich:pickList&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:pickList ... styleClass="myClass"/>
]]></programlisting>    
        
        <para>This is a result:</para>
        
        <figure>
            <title>Redefinition styles with own classes and styleClass attributes</title>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/pickListStyle.png"/>
                </imageobject>
            </mediaobject>
        </figure>  
        
        <para>As it could be seen on the picture above, the font style for buttons is changed.</para>
                       
    </section>
 
    <section>
        <title>Relevant Resources Links</title>
        <para><ulink
                url="http://livedemo.exadel.com/richfaces-demo/richfaces/pickList.jsf?c=pickList"
                >Here</ulink> you can see an example of <emphasis role="bold">
                <property>&lt;rich:pickList&gt;</property>
            </emphasis> usage and sources for the given example. </para>
    </section>

</section>
