<?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.targetValues}">
        <f:selectItem itemValue="Bentley" itemLabel="Bentley"/>
        <f:selectItems value="#{pickBean.sourceValues}"/>
</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><para>2 <property>item lists</property>. Every item has three different representations: common, selected, active.
                    Combination of these states is possible.</para></listitem>
                <listitem><para>
                    <property>Move controls set</property> is a set of controls, which performs moving items between lists.
                </para></listitem>
            </itemizedlist>
        </para>

        <para>
            The <emphasis><property>&quot;value&quot;</property></emphasis> attribute is the initial value of this component.  
        </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 define 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.sourceList}"/>
</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.sourceList}"/>
</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/pickList2.png"/>
                     </imageobject>
                 </mediaobject>
             </figure>       
  <para>
      Alternative to the given attributes are the following facets: <emphasis><property>&quot;copyAllControl&quot;</property></emphasis>,
      <emphasis><property>&quot;removeAllControl&quot;</property></emphasis>, 
      <emphasis><property>&quot;copyControl&quot;</property></emphasis>, 
      <emphasis><property>&quot;removeControl&quot;</property></emphasis>, 
      <emphasis><property>&quot;copyAllControlDisabled&quot;</property></emphasis>, 
      <emphasis><property>&quot;removeAllControlDisabled&quot;</property></emphasis>, 
      <emphasis><property>&quot;copyControlDisabled&quot;</property></emphasis>, 
      <emphasis><property>&quot;removeControlDisabled&quot;</property></emphasis>, 
      <emphasis><property>&quot;caption&quot;</property></emphasis>.
  </para>
        <para>
            It is an example of usage of the facets and it is identical to the previous example.
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:pickList value="#{pickBean.listValues}">
    <f:facet name="copyAllControl">
        <h:commandButton value="#{pickBean.copyAllLabel}" />
    </f:facet>
    <f:facet name="copyControl">
        <h:commandButton value="#{pickBean.copyLabel}" />
    </f:facet>
    <f:facet name="removeControl">
        <h:commandButton value="#{pickBean.removeLabel}" />
    </f:facet>
    <f:facet name="removeAllControl">
        <h:commandButton value="#{pickBean.removeAllLabel}" />
    </f:facet>
    <f:selectItem itemValue="Bentley" itemLabel="Bentley"/>
    <f:selectItem itemValue="Audi" itemLabel="Audi"/>
    <f:selectItems value="#{pickBean.sourceList}"/>
</rich:pickList>
...]]></programlisting>
        <para>
            With the help of <emphasis><property>&quot;moveControlsVerticalAlign&quot;</property></emphasis> attribute 
            you can align <property>move controls</property> vertically.
        </para>
        <para>The possible value for <emphasis><property>&quot;moveControlsVerticalAlign&quot;</property></emphasis> are &quot;top&quot;, &quot;bottom&quot; and &quot;center&quot; (default value).</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><para> 
                    <emphasis>
                        <property> &quot;listsHeight&quot;</property></emphasis> defines height of the lists.
                    
                </para></listitem>
                <listitem><para> 
                    <emphasis>
                        <property> &quot;sourceListWidth&quot;</property></emphasis> defines width of a source list.
                    
                </para></listitem>
                <listitem><para> 
                    <emphasis>
                        <property> &quot;targetListWidth&quot;</property></emphasis> defines width of a target list.
                    
                </para></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.sourceList}"/>
</rich:pickList>
...]]></programlisting>
             
        <para>The <emphasis role="bold"><property>&lt;rich:pickList&gt;</property></emphasis> component allows to use internationalization method 
            to redefine and localize the labels. You could use application resource bundle and define 
            <code>RICH_PICK_LIST_COPY_ALL_LABEL</code>,  
            <code>RICH_PICK_LIST_COPY_LABEL</code>, 
            <code>RICH_PICK_LIST_REMOVE_ALL_LABEL</code>, 
            <code>RICH_PICK_LIST_REMOVE_LABEL</code> there.
        </para>
        
        <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>Facets</title>
        <table>
            <title>Facets</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Facet</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>copyAllControl</entry>
                        <entry>Redefines the &quot;copyAll&quot; label with the control set. Related attribute is &quot;copyAllControlLabel&quot;</entry>
                    </row>
                    <row>
                        <entry>removeAllControl</entry>
                        <entry>Redefines the &quot;removeAll&quot; label with the control set. Related attribute is &quot;removeAllControlLabel&quot;</entry>
                    </row>
                    <row>
                        <entry>copyControl</entry>
                        <entry>Redefines the &quot;copy&quot; label with the control set. Related attribute is &quot;copyControlLabel&quot;</entry>
                    </row>
                    <row>
                        <entry>removeControl</entry>
                        <entry>Redefines the &quot;remove&quot; label with the control set. Related attribute is &quot;removeControlLabel&quot;</entry>
                    </row>
                    <row>
                        <entry>copyAllControlDisabled</entry>
                        <entry>Redefines the disabled &quot;copyAll&quot; label with the control set.</entry>
                    </row>
                    <row>
                        <entry>removeAllControlDisabled</entry>
                        <entry>Redefines the disabled &quot;removeAll&quot; label with the control set.</entry>
                    </row>
                    <row>
                        <entry>copyControlDisabled</entry>
                        <entry>Redefines the disabled &quot;copy&quot; label with the control set.</entry>
                    </row>
                    <row>
                        <entry>removeControlDisabled</entry>
                        <entry>Redefines the disabled &quot;remove&quot; label with the control set.</entry>
                    </row>
                    <row>
                        <entry>caption</entry>
                        <entry>Defines the &quot;caption&quot; label with the control set.</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><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:pickList&gt;</property>
                    </emphasis> component</para></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/pickList_cn.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-list-picklist</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 a wrapper &lt;div&gt; element of a source list</entry>
                    </row>
                    <row>
                        <entry>rich-picklist-target-items</entry>
                        <entry>Defines styles for a wrapper &lt;div&gt; element of a target list</entry>
                    </row>
                    
                    <row>
                        <entry>rich-picklist-body</entry>
                        <entry>Defines styles for a wrapper &lt;table&gt; element of a list body (source and target)</entry>
                    </row>
                    
                    <row>
                        <entry>rich-picklist-list</entry>
                        <entry>Defines styles for a (source and target) list</entry>
                    </row>
                    
                    <row>
                        <entry>rich-picklist-list-content</entry>
                        <entry>Defines styles for a (source and target) list content</entry>
                    </row>
                    
                    <row>
                        <entry>rich-picklist-internal-tab</entry>
                        <entry>Defines styles for a wrapper &lt;table&gt; element of list items (source and target)</entry>
                    </row>
                    
                </tbody>
            </tgroup>
        </table>
        
        <table >
            <title>Classes names that define rows representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-picklist-source-row</entry>
                        <entry>Defines styles for a source list row</entry>
                    </row>
                    <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 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 target list cell</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 control representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-picklist-controls</entry>
                        <entry>Defines styles for wrapper &lt;div&gt; element of a pickList controls</entry>
                    </row>
                    <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>
                    <row>
                        <entry>rich-picklist-control-img</entry>
                        <entry>Defines styles for a control image</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/pickList_pc.png"/>
                </imageobject>
            </mediaobject>
        </figure>
        
        <para>In the example the background color for lists is changed.</para>
        
        <para>Also it&apos;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> <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;styleClass&quot;</property></emphasis> attribute for <emphasis role="bold"
            ><property>&lt;rich:pickList&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:pickList ... styleClass="myClass"/>
]]></programlisting>    
        
        <para>This is a result:</para>
        
        <figure>
            <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/pickList_oc.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"
                >On RichFaces LiveDemo page </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>
