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

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

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

                    <entry>org.richfaces.OrderingListRenderer</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:orderingList value="#{bean.list}" var="list">
        <rich:column>
            <f:facet name="header">
	    <h:outputText value="Name" />
            </f:facet>
            <h:inputText value="#{list.name}" />
        </rich:column>
<rich:orderingList>
...]]></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.HtmlOrderingList;
...	
HtmlOrderingList myOrderingList = new HtmlOrderingList();
...]]></programlisting>
    </section>
    <section>
        <title>Details of Usage</title>

        <!--maintenance of component  orderingList-->

        <para>The <emphasis role="bold">
                <property>&lt;rich:orderingList&gt;</property>
            </emphasis> component consists of <itemizedlist>
                <listitem><para><property>Item list</property> element that displays a list of items. It
                    has three different representations for a single element: common, selected,
                    active. Combination of these states is possible.</para></listitem>
                <listitem><para>
                    <property>Ordering controls set</property>
                </para></listitem>
            </itemizedlist>
        </para>

        <!-- attributes of component  orderingList -->

        <para>The <emphasis>
                <property> &quot;value&quot;</property>
            </emphasis> and <emphasis>
                <property>&quot;var&quot; </property>
            </emphasis> attributes are used to access the values of a list. </para>

        <para>Controls rendering is based on the <emphasis>
            <property>&quot;controlsType&quot; </property>
        </emphasis> attribute. Possible types are button or none.
        </para>
        <note>
            <para>
                Currently the button controls type is based on <emphasis role="bold"><property>&lt;div&gt;</property></emphasis> element.     
            </para>
        </note>
        <para>The information about the <emphasis><property>&quot;converter&quot;</property></emphasis> attribute is <link linkend="conv">here</link>.</para>
        <para> The <emphasis>
                <property>&quot;selection&quot; </property>
            </emphasis> attribute stores the collection of items selected by you. In the example
            below after submitting the form the current collection is placed in the object&apos;s
            property and then <emphasis role="bold">
                <property>&lt;rich:dataTable&gt;</property>
            </emphasis> with selected items is shown. </para>

        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<h:form>
        <rich:orderingList value="#{bean.simpleItems}" var="item" selection="#{bean.selection}" controlsType="button">
                <rich:column>
                    <f:facet name="header">
                            <h:outputText value="Cars" />
                    </f:facet>
                            <h:outputText value="#{item}" />
                </rich:column>
        </rich:orderingList>
        <rich:dataTable id="infoPanelID" value="#{bean.info}" var="info" rendered="true">
                <rich:column>
                            <h:outputText value="#{info}" />
                </rich:column>
        </rich:dataTable>
        <a4j:commandButton value="reRender" reRender="infoPanelID" />
</h:form>
...]]></programlisting>
        <para> The <emphasis role="bold">
                <property>&lt;rich:orderingList&gt;</property>
            </emphasis> component allows to use <emphasis><property>&quot;caption&quot;</property></emphasis>
            <!--and <emphasis>
                <property>&quot;footer&quot; </property>
            </emphasis> -->
             facet.
            A caption could be also defined with  <emphasis>
                <property>&quot;captionLabel&quot;</property></emphasis> attribute.           
        </para>

        <!-- ADD SCREENSHOT-->

        <para>Simple example is placed below.</para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:orderingList value="#{bean.simpleItems}" var="item" controlsType="button" selection="#{bean.selection}">
        <f:facet name="caption">
                <h:outputText value="Caption Facet" />
        </f:facet>
        <rich:column>
                <f:facet name="header">
	            <h:outputText value="Cars" />
                </f:facet>
                <h:outputText value="#{item.name}" />
        </rich:column>
        <rich:column>
                <f:facet name="header">
	            <h:outputText value="Price" />
                </f:facet>
                <h:outputText value="#{item.price}" />
        </rich:column>
</rich:orderingList>
...]]></programlisting>

        <!-- ordering control set-->
        <para>The <emphasis role="bold">
                <property>&lt;rich:orderingList&gt;</property>
            </emphasis> component provides the possibility to use <property>ordering controls
            set</property>, which performs reordering. Every control has possibility to be disabled. </para>
        <para>An <property>ordering controls set</property> could be defined with <emphasis>
                <property>&quot;topControlLabel&quot;</property>
            </emphasis>, <emphasis>
                <property>&quot;bottomControlLabel&quot;</property>
            </emphasis>, <emphasis>
                <property>&quot;upControlLabel&quot;</property>
            </emphasis>, <emphasis>
                <property>&quot;downControlLabel&quot;</property>
            </emphasis>attributes. </para>
        <para>It is also possible to use <emphasis><property>&quot;topControl&quot; </property></emphasis>,
            <emphasis><property>&quot;topControlDisabled&quot;</property></emphasis>, <emphasis><property>&quot;bottomControl&quot;</property></emphasis>, 
            <emphasis><property>&quot;bottomControlDisabled&quot; </property></emphasis>, <emphasis><property>&quot;upControl&quot; </property></emphasis>,
            <emphasis><property>&quot;upControlDisabled&quot; </property></emphasis>, 
            <emphasis><property>&quot;downControl&quot;</property></emphasis>, <emphasis><property>&quot;downControlDisabled&quot; </property></emphasis> facets in order to replace the default controls with facets content. </para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:orderingList value="#{bean.simpleItems}" var="item" controlsType="button" selection="#{bean.selection}">
        <f:facet name="topControl">
                <h:outputText value="Move to top" />
        </f:facet>
        <f:facet name="upControl">
                <h:outputText value="Move up" />
        </f:facet>
        <f:facet name="downControl">
                <h:outputText value="Move down" />
        </f:facet>
        <f:facet name="bottomControl">
                <h:outputText value="Move to bottom" />
        </f:facet>
<rich:orderingList>
...]]></programlisting>

        <para>The position of the controls relatively to a list could be customized with: <itemizedlist>
                <!--listitem>
                    <emphasis>
                        <property>&quot;controlsPosition&quot;</property>
                    </emphasis> attribute. Possible values: <itemizedlist>
                        <listitem><para>left - controls could be rendered to the left side of a list</para></listitem>
                        <listitem><para>right(default) - controls could be rendered to the right side of a
                            list </para></listitem>
                        <listitem><para>top - controls could be rendered above the list </para></listitem>
                        <listitem><para>bottom - controls could be rendered below the list </para></listitem>
                    </itemizedlist>
                </listitem-->
                <listitem><para><emphasis>
                        <property> &quot;controlsHorizontalAlign&quot;</property>
                    </emphasis> attribute. Possible values: <itemizedlist>
                        <listitem><para>&quot;left&quot; - controls render to the left side of a list</para></listitem>
                        <listitem><para>&quot;right&quot; (default) - controls render to the right side of a list</para></listitem>
                        <listitem><para>&quot;center&quot; - controls is centered</para></listitem>
                    </itemizedlist>
                </para></listitem>
                <listitem><para><emphasis>
                        <property> &quot;controlsVerticalAlign&quot;</property>
                    </emphasis> attribute. Possible values: <itemizedlist>
                        <listitem><para>&quot;top&quot; - controls render aligned to the top side of a list </para></listitem>
                        <listitem><para>&quot;bottom&quot; - controls render aligned to the bottom side of a list </para></listitem>
                        <listitem><para>&quot;center&quot; (default) - controls is centered relatively to a list
                        </para></listitem>
                    </itemizedlist>
                </para></listitem>
                <!--listitem><emphasis>
                        <property>&quot;controlsLayout&quot;</property>
                    </emphasis> attribute. Possible values: <itemizedlist>
                        <listitem><para>inline - controls defined one by one in line </para></listitem>
                        <listitem><para>block - controls defined in column </para></listitem>
                    </itemizedlist>
                </listitem-->
            </itemizedlist>
        </para>

        <para>The <emphasis role="bold">
                <property>&lt;rich:orderingList&gt;</property>
            </emphasis> component has a possibility to hide any of the controls by pairs using
            following attributes: <itemizedlist>
                <listitem><para>
                    <emphasis>
                        <property>&quot;orderControlsVisible&quot;</property>
                    </emphasis> attribute has two values: &quot;true&quot; or &quot;false&quot;. If false
                    <property>Up</property> and <property>Down</property> controls are not
                    displayed.</para></listitem>
                <listitem><para>
                    <emphasis>
                        <property>&quot;fastOrderControlsVisible&quot;</property>
                    </emphasis> attribute has two values: &quot;true&quot; or &quot;false&quot;. If false
                    <property>Top</property> and <property>Bottom</property> controls are not
                    displayed.</para></listitem>
            </itemizedlist>
        </para>
        <para>
            The <emphasis role="bold"><property>&lt;rich:orderingList&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_SHUTTLES_TOP_LABEL</code>,
            <code>RICH_SHUTTLES_BOTTOM_LABEL</code>,
            <code>RICH_SHUTTLES_UP_LABEL</code>,
            <code>RICH_SHUTTLES_DOWN_LABEL</code> there.
        </para>
        <para>
            You could also pack <code>org.richfaces.renderkit.orderingList</code> resource bundle with your JARs defining the same properties.
        </para>
        <!-- Wiil be done for 3.2.0 version-->
        <!--para>The component provides possibility to be customized using templating. The
            customization could be performed by a layout definition nested into the component. 5
            elements are provided to be defined inside template: {list}, {topControl},
            {bottomControl}, {downCotrol}, {upControl}. <para>The example is placed below.</para>
        </para>
        <para>Example:</para>
        <programlisting role="XML"><![CDATA[...
<rich:orderingList>
        <h:panelGrid columns="2" columnClasses="class1 class2">
            <h:outputText value="{list}"/>
                <h:panelGroup>
                    <h:outputText value="{topControl}"/>
                    <h:outputText value="{upControl}"/>
                    <h:outputText value="{downControl}"/>
                    <h:outputText value="{bottomControl}"/>
                </h:panelGroup>
        </h:panelGrid>
</rich:orderingList>
...]]>
        </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>


        <table>
            <title>Keyboard usage for elements reordering</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Keys and combinations </entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <!--Sorting API -->
                    <row>
                        <entry>Page Up</entry>
                        <entry>Moves selected set to the top of a list</entry>
                    </row>
                    <row>
                        <entry>Page Down</entry>
                        <entry>Moves selected set to the bottom of a list</entry>
                    </row>
                    <row>
                        <entry>CTRL+Up arrow</entry>
                        <entry>Moves selected item to one position upper</entry>
                    </row>
                    <row>
                        <entry>CTRL+Down arrow</entry>
                        <entry>Moves selected item to one position lower</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 role="tbi">hide()</entry>
                        <entry role="tbi">Hides ordering control (to be implemented)</entry>
                    </row>
                    <row>
                        <entry role="tbi">show()</entry>
                        <entry role="tbi">Shows ordering control (to be implemented)</entry>
                    </row>
                    <row>
                        <entry role="tbi">isShown()</entry>
                        <entry role="tbi">Checks if current control is shown (to be implemented)</entry>
                    </row>
                    <row>
                        <entry role="tbi">enable()</entry>
                        <entry role="tbi">Enables ordering control (to be implemented)</entry>
                    </row>
                    <row>
                        <entry role="tbi">disable()</entry>
                        <entry role="tbi">Disables ordering control (to be implemented)</entry>
                    </row>
                    <row>
                        <entry role="tbi">isEnabled()</entry>
                        <entry role="tbi">Checks if current control is enabled (to be implemented)</entry>
                    </row>
                    <!--List managing API -->
                    <row>
                        <entry>Up()</entry>
                        <entry>Moves up selected item in the list</entry>
                    </row>
                    <row>
                        <entry>Down()</entry>
                        <entry>Moves down selected item in the list</entry>
                    </row>
                    <row>
                        <entry>Top()</entry>
                        <entry>Moves top selected item in the list</entry>
                    </row>
                    <row>
                        <entry>Bottom()</entry>
                        <entry>Moves bottom selected item in the 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>caption</entry>
                        <entry>Redefines the caption content. Related attribute is &quot;captionLabel&quot;</entry>
                    </row>
                    <row>
                        <entry>topControl</entry>
                        <entry>Redefines the label for the &quot;Top&quot; control. Related attribute is &quot;topControlLabel&quot;</entry>
                    </row>
                    <row>
                        <entry>bottomControl</entry>
                        <entry>Redefines the label for the &quot;Bottom&quot; control. Related attribute is &quot;bottomControlLabel&quot;</entry>
                    </row>
                    <row>
                        <entry>upControl</entry>
                        <entry>Redefines the label for the &quot;Up&quot; control. Related attribute is &quot;upControlLabel&quot;</entry>
                    </row>
                    <row>
                        <entry>downControl</entry>
                        <entry>Redefines the label for the &quot;Down&quot; control. Related attribute is &quot;downControlLabel&quot;</entry>
                    </row>
                    <row>
                        <entry>topControlDisabled</entry>
                        <entry>Redefines the disabled label for the &quot;Top&quot; control</entry>
                    </row>
                    <row>
                        <entry>bottomControlDisabled</entry>
                        <entry>Redefines the disabled label for the &quot;Bottom&quot; control</entry>
                    </row>
                    <row>
                        <entry>upControlDisabled</entry>
                        <entry>Redefines the disabled label for the &quot;Up&quot; control</entry>
                    </row>
                    <row>
                        <entry>downControlDisabled</entry>
                        <entry>Redefines the disabled label for the &quot;Down&quot; control</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:orderingList&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:orderingList&gt;</property>
                    </emphasis> component</para></listitem>
            </itemizedlist>
        </para>
    </section>

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

        <table>
            <title>Skin parameters redefinition for a wrapper &lt;div&gt; element of 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>
                    <row>
                        <entry>tableBorderColor</entry>
                        <entry>border-color</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>

        <table>
            <title>Skin parameters redefinition for a header cell of a list</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>trimColor</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>tableBorderWidth</entry>
                        <entry>border-right-width</entry>
                    </row>
                    <row>
                        <entry>tableBorderWidth</entry>
                        <entry>border-bottom-width</entry>
                    </row>
                    <row>
                        <entry>tableBorderColor</entry>
                        <entry>border-right-color</entry>
                    </row>
                    <row>
                        <entry>tableBorderColor</entry>
                        <entry>border-bottom-color</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>

        <table>
            <title>Skin parameters redefinition for caption element</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>
                    <row>
                        <entry>headerWeightFont</entry>
                        <entry>font-weight</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>

        <table>
            <title>Skin parameters redefinition for row element</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>headerGradientColor</entry>
                        <entry>background-color</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>

        <table>
            <title>Skin parameters redefinition for selected row element</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 cell element</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>generalFamilyFont</entry>
                        <entry>font-family</entry>
                    </row>
                    <row>
                        <entry>generalSizeFont</entry>
                        <entry>font-size</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>

        <table>
            <title>Skin parameters redefinition for selected cell element</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>generalFamilyFont</entry>
                        <entry>font-family</entry>
                    </row>
                    <row>
                        <entry>generalSizeFont</entry>
                        <entry>font-size</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>

        <table>
            <title>Skin parameters redefinition for active cell element</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>generalFamilyFont</entry>
                        <entry>font-family</entry>
                    </row>
                    <row>
                        <entry>generalSizeFont</entry>
                        <entry>font-size</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>trimColor</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>trimColor</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 button highlight</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>trimColor</entry>
                        <entry>background-color</entry>
                    </row>
                    <row>
                        <entry>selectControlColor</entry>
                        <entry>border-color</entry>
                    </row>
                    <row>
                        <entry>tableBorderWidth</entry>
                        <entry>border-width</entry>
                    </row>
                    <row>
                        <entry>headerFamilyFont</entry>
                        <entry>font-family</entry>
                    </row>
                    <row>
                        <entry>headerSizeFont</entry>
                        <entry>font-size</entry>
                    </row>
                    <row>
                        <entry>generalTextColor</entry>
                        <entry>color</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>additionalBackgroundColor</entry>
                        <entry>background-color</entry>
                    </row>
                    <row>
                        <entry>tableBorderColor</entry>
                        <entry>border-color</entry>
                    </row>
                    <row>
                        <entry>tableBorderWidth</entry>
                        <entry>border-width</entry>
                    </row>
                    <row>
                        <entry>headerFamilyFont</entry>
                        <entry>font-family</entry>
                    </row>
                    <row>
                        <entry>headerSizeFont</entry>
                        <entry>font-size</entry>
                    </row>
                    <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 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 top, bottom, up, down controls and for controls
                in disabled state</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>panelBorderColor</entry>
                        <entry>border-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/orderingList_cn.png"/>
                </imageobject>
            </mediaobject>
          
        </figure>

        <table id="OrderLC">
            <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-ordering-list-body</entry>
                        <entry>Defines styles for a wrapper table element of an orderingList</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-list-output</entry>
                        <entry>Defines styles for a wrapper &lt;div&gt; element of a
                        list</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-list-items</entry>
                        <entry>Defines styles for a wrapper table element of items in the
                        list</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-list-content</entry>
                        <entry>Defines styles for a list content</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-list-header</entry>
                        <entry>Defines styles for a wrapper &lt;div&gt; element for a list
                            header</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-list-table-header</entry>
                        <entry>Defines styles for a wrapper &lt;tr&gt; element for a list
                            header</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-list-table-header-cell</entry>
                        <entry>Defines styles for a header cell</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>

        <table>
            <title>Classes names that define a caption representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-ordering-list-caption</entry>
                        <entry>Defines styles for a caption</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-list-caption-disabled</entry>
                        <entry>Defines styles for a caption in disabled state</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-list-caption-active</entry>
                        <entry>Defines styles for a caption in active state</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-ordering-list-row</entry>
                        <entry>Defines styles for a row</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-list-row-selected</entry>
                        <entry>Defines styles for a selected row</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-list-row-active</entry>
                        <entry>Defines styles for an active row</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-list-row-disabled</entry>
                        <entry>Defines styles for a disabled row</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
        <table>
            <title>Classes names that define cells representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-ordering-list-cell</entry>
                        <entry>Defines styles for a cell</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-list-cell-selected</entry>
                        <entry>Defines styles for a selected cell</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-list-cell-active</entry>
                        <entry>Defines styles for an active cell</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-list-cell-disabled</entry>
                        <entry>Defines styles for a disabled cell</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-ordering-list-button</entry>
                        <entry>Defines styles for a button</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-list-button-disabled</entry>
                        <entry>Defines styles for a disabled button</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-list-button-light</entry>
                        <entry>Defines styles for a button highlight</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-list-button-press</entry>
                        <entry>Defines styles for a pressed button</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-list-button-content</entry>
                        <entry>Defines styles for a button content</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-list-button-selection</entry>
                        <entry>Defines styles for a button selection</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-list-button-valign</entry>
                        <entry>Defines styles for a wrapper &lt;td&gt; element for buttons
                            vertical align</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-list-button-layout</entry>
                        <entry>Defines styles for a wrapper &lt;div&gt; element of buttons
                            layout</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>



        <table>
            <title>Classes names that define controls representation</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-ordering-controls</entry>
                        <entry>Defines styles for a controls group</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-control-top</entry>
                        <entry>Defines styles for a &quot;top&quot; control</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-control-bottom</entry>
                        <entry>Defines styles for a &quot;bottom&quot; control</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-control-up</entry>
                        <entry>Defines styles for a &quot;up&quot; control</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-control-down</entry>
                        <entry>Defines styles for a &quot;down&quot; control</entry>
                    </row>
                    <row>
                        <entry>rich-ordering-control-disabled</entry>
                        <entry>Defines styles for controls in disabled state</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
        <para>In order to redefine styles for all <emphasis role="bold">
            <property>&lt;rich:orderingList&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="OrderLC"> above</link>) and define necessary properties in them. </para>
        
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="CSS"><![CDATA[...
.rich-ordering-list-table-header-cell{
        font-weight:bold;
}
...]]></programlisting>  
        
        <para>This is a result:</para>
        
        <figure>
            <title>Redefinition styles with predefined classes</title>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/orderingList_pc.png"/>
                </imageobject>
            </mediaobject>
        </figure>
        
        <para>In the example the font weight for header text was changed.</para>
        
        <para>Also it&apos;s possible to change styles of particular <emphasis role="bold"
            ><property>&lt;rich:orderingList&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold"
                ><property>&lt;rich:orderingList&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-style:italic;
}
...]]></programlisting>  
        <para>The <emphasis><property>&quot;rowClasses&quot;</property></emphasis> attribute for <emphasis role="bold"
            ><property>&lt;rich:orderingList&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:orderingList ... rowClasses="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/orderingList_oc.png"/>
                </imageobject>
            </mediaobject>
        </figure>  
        
        <para>As it could be seen on the picture above, the font style for rows was changed.</para>
        
        
        
    </section>

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

</section>
