<?xml version="1.0" encoding="UTF-8"?>
<section>
    <sectioninfo>
        <keywordset>
            <keyword>rich:listShuttle</keyword>
            <keyword>listShuttle</keyword>
        </keywordset>
    </sectioninfo>
    <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:listShuttle var="item" sourceValue="#{bean.source}" targetValue="#{bean.target}" converter="listShuttleconverter">
        <h:column>
                <f:facet name="header">
                        <h:outputText value="Cars" />
                </f:facet>
                <h:outputText value="#{item.name}" />
        </h:column>
</rich:listShuttle>
...]]></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.HtmlListShuttle;
...	
HtmlListShuttle myListShuttle = new HtmlListShuttle();
...]]></programlisting>
    </section>
    <section>
        <title>Details of Usage</title>
        <para>The <emphasis role="bold">
                <property>&lt;rich:listShuttle&gt;</property>
            </emphasis> component consists of the following parts: <itemizedlist>
                <listitem><para>two <property>item lists</property> (source and target). List consists of
                items. Each item has three different representations: common, selected, active</para></listitem>
                <listitem><para>optional <property>caption</property> element</para></listitem>
                <listitem><para><property>optional ordering controls set</property> is a set of controls
                that performs reordering</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;sourceValue&quot; </property>
        </emphasis> attribute defines a List or Array of items to be shown in the source list.</para>
        <para>The <emphasis>
            <property>&quot;targetValue&quot; </property>
        </emphasis> attribute defines a List or Array of items to be shown in the target list.</para>
        <para> The <emphasis>
            <property>&quot;var&quot; </property>
        </emphasis> attribute could be shared between both Lists or Arrays to define lists on the page.</para>
        
        <para>
            The <emphasis><property>&quot;sourceRequired&quot;</property></emphasis> and
            <emphasis><property>&quot;targetRequired&quot;</property></emphasis> attributes define the case when
            source and target values are being validated. If the value of both attributes is &quot;true&quot;
            there should be at least one item in source and target lists. Otherwise validation fails.  
        </para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<h:form id="myForm">
        <rich:messages>
                <f:facet name="errorMarker">
                        <h:graphicImage value="/images/ajax/error.gif" />   
                </f:facet>
        </rich:messages>
        <rich:listShuttle id="myListShuttle" sourceValue="#{toolBar.freeItems}" targetValue="#{toolBar.items}"  
                                sourceRequired = "true" targetRequired = "true" var="items" converter="listShuttleconverter"
                                sourceCaptionLabel="Source List" targetCaptionLabel="Target List">
                <rich:column>
                        <h:graphicImage value="#{items.iconURI}" />
                </rich:column>
                <rich:column>
                        <h:outputText value="#{items.label}" />
                </rich:column>
        </rich:listShuttle>
        <a4j:commandButton value="Submit" />
</h:form>
...]]></programlisting>
        <para>
            In the example above the source list is empty. If you submit the form validation fails and error message appears on a page. 
        </para>
        <para>
            This is the result:
        </para>
        <figure>
            <title>Style classes</title>
        <mediaobject>
            <imageobject>
                <imagedata fileref="images/listShuttle2.png" />
            </imageobject>
        </mediaobject>
        </figure>
        <para>
            The <emphasis>
                <property>&quot;converter&quot; </property>
            </emphasis> attribute is used to convert component data to a particular component&apos;s value.
            For example, when you select items in a list, a converter is used to format a set of objects to a strings to be displayed.  
        </para>
        <note>
            <para>
                It is necessary to override the <emphasis>
                    <property>&quot;equals&quot;</property></emphasis> and <emphasis>
                        <property>&quot;hashCode&quot;</property></emphasis> methods in your own class!
            </para>
        </note>
        <para>
            The <emphasis>
                <property>&quot;sourceSelection&quot; </property>
            </emphasis> attribute stores the collection of items selected by you in the source list. 
            The <emphasis>
                <property>&quot;targetSelection&quot; </property>
            </emphasis> attribute stores the collection of items selected by you in the target list. 
        </para>
        <para>Captions could be added to a list only after it was defined as a <emphasis>
                <property>&quot;sourceCaption&quot;</property>
            </emphasis> and <emphasis>
                <property>&quot;targetCaption&quot;</property>
            </emphasis> named facets inside the component or defined with the <emphasis>
                <property>&quot;sourceCaptionLabel&quot;</property>
            </emphasis> and <emphasis>
                <property>&quot;targetCaptionLabel&quot;</property>
            </emphasis> attribute.
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:listShuttle var="item" sourceValue="#{bean.source}" targetValue="#{bean.target}" sourceSelection="#{bean.sourceSelection}" 
                        targetSelection="#{bean.targetSelection}" converter="listShuttleconverter">
        <f:facet name="sourceCaption">
                <h:outputText value="Cars Store #1" />
        </f:facet>
        <f:facet name="targetCaption">
                <h:outputText value="Cars Store #2" />
        </f:facet>
        <rich:column>
                <h:outputText value="#{items.name}" />
        </rich:column>
</rich:listShuttle>
...]]></programlisting>
        <!-- ordering control set-->
        <para>The <emphasis role="bold">
                <property>&lt;rich:listShuttle&gt;</property>
            </emphasis> component provides the possibility to use <property>ordering controls
            set</property>, which performs reordering in the target item list. 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:listShuttle var="item" sourceValue="#{bean.source}" targetValue="#{bean.target}" converter="listShuttleconverter">
...			         
        <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:listShuttle>
...
]]></programlisting>
       
        <!-- copy/move control set -->
        
        <para>The <emphasis role="bold">
            <property>&lt;rich:listShuttle&gt;</property>
        </emphasis>component also provides 4 predefined controls in <property>move
            controls set</property> for moving items between source and target lists.
            Every control has possibility to be disabled. </para>
        <para>A <property>move controls set</property> could be defined with 
            <emphasis><property>&quot;copyControlLabel&quot;</property></emphasis>, <emphasis><property>&quot;removeControlLabel&quot;</property></emphasis>,
            <emphasis><property>&quot;copyAllControlLabel&quot;</property></emphasis>, <emphasis><property>&quot;removeAllControlLabel&quot;</property></emphasis>attributes.
        </para>
        <para>It is also possible to use
            <emphasis>
                <property>&quot;copyControl&quot; </property>
            </emphasis>, 
            <emphasis>
                <property>&quot;removeControl&quot; </property>
            </emphasis>, 
            <emphasis>
                <property>&quot;copyAllControl&quot; </property>
            </emphasis>, 
            <emphasis>
                <property>&quot;removeAllControl&quot; </property>
            </emphasis> 
          facets in order to replace the default controls with facets content.
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:listShuttle var="item" sourceValue="#{bean.source}" targetValue="#{bean.target}" converter="listShuttleconverter"
                        copyControlLabel="Copy" removeControlLabel="Remove"
                        copyAllControlLabel="Copy all" removeAllControlLabel="Remove all">
        <h:column>
                <f:facet name="header">
                        <h:outputText value="Cars" />
                </f:facet>
                <h:outputText value="#{item.name}" />
        </h:column>
</rich:listShuttle>
...
]]></programlisting>        
        
        <!-- The following facets currently do not work-->
        <!--<emphasis>
            <property>&quot;copy_disabled&quot; </property>
            </emphasis>, -->
        <!--<emphasis>
            <property>&quot;remove_disabled&quot; </property>
            </emphasis>, -->
        <!--<emphasis>
            <property>&quot;copyAll_disabled&quot; </property>
            </emphasis>, -->
        <!--<emphasis>
            <property>&quot;removeAll_disabled&quot; </property>
            </emphasis>-->
        
        <para>Controls rendering is based on the <emphasis>
                <property>&quot;controlsType&quot; </property>
            </emphasis> attribute. Possible types are <property>button</property> and
            <property>none</property>.</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 <emphasis role="bold"><property>&lt;rich:listShuttle&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> 
            
            <code>RICH_LIST_SHUTTLE_COPY_ALL_LABEL</code>,
            <code>RICH_LIST_SHUTTLE_COPY_LABEL</code>,
            <code>RICH_LIST_SHUTTLE_REMOVE_ALL_LABEL</code>,
            <code>RICH_LIST_SHUTTLE_REMOVE_LABEL</code>  there.
        </para>
        <para>
            You could also pack <code>org.richfaces.renderkit.listShuttle</code> resource bundle with your JARs defining the same properties.
        </para>
        <!-- template wiil be done in 3.2.0 -->
        <!--para>The <emphasis role="bold">
                <property>&lt;rich:listShuttle&gt;</property>
            </emphasis> component provides the possibility to be customized using templating. The
            customization could be performed by layout definition nested to component.</para>
        <para>10 elements could be provided to be defined inside template (all standard controls
            should also possible to use inside): {sourceList}, {targetList}, {CopyControl},
            {removeCotrol}, {copyAllControl}, {removeAllControl}, {topcontrol}, {bottomControl},
            {downCotrol}, {upControl}.</para>
        <para>The markup defined in the initial picture could be defined as in the following
            example.</para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
<rich:listShuttle>
...
		<h:panelGrid columns="4">
			<h:outputText value="{sourceList}"/>
			<h:panelGroup>
				<h:outputText value="{copyAllControl}"/>
				<h:outputText value="{copyControl}"/>
				<h:outputText value="{removeControl}"/>
				<h:outputText value="{removeAllControl}"/>
			</h:panelGroup>
			<h:outputText value="targetList"/>
			<h:panelGroup>
				<h:outputText value="{topControl}"/>
				<h:outputText value="{upControl}"/>
				<h:outputText value="{downControl}"/>
				<h:outputText value="{bottomControl}"/>
			</h:panelGroup>
		</h:panelGrid>
	</rich:listShuttle>
...
]]></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 actve 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 element to the next or previous in a list and make
                            it the only selected. Scroll follows the selection to keep it
                            visible</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>Home</entry>
                        <entry>Moves selected set to the top of a list</entry>
                    </row>
                    <row>
                        <entry>End</entry>
                        <entry>Moves selected set to the bottomof 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 <para>(to be implemented)</para></entry>
                    </row>
                    <row>
                        <entry role="tbi">show()</entry>
                        <entry role="tbi">Shows ordering control <para>(to be implemented)</para></entry>
                    </row>
                    <row>
                        <entry role="tbi">isShown()</entry>
                        <entry role="tbi">Checks if current control is shown <para>(to be implemented)</para></entry>
                    </row>
                    <row>
                        <entry role="tbi">enable()</entry>
                        <entry role="tbi">Enables ordering control <para>(to be implemented)</para></entry>
                    </row>
                    <row>
                        <entry role="tbi">disable()</entry>
                        <entry role="tbi">Disables ordering control <para>(to be implemented)</para></entry>
                    </row>
                    <row>
                        <entry role="tbi">isEnabled()</entry>
                        <entry role="tbi">Checks if current control is enabled <para>(to be implemented)</para></entry>
                    </row>
                    <!--List managing API -->
                    <row>
                        <entry role="tbi">Up()</entry>
                        <entry role="tbi">Moves up selected item in the list <para>(to be implemented)</para></entry>
                    </row>
                    <row>
                        <entry role="tbi">Down()</entry>
                        <entry role="tbi">Moves down selected item in the list <para>(to be implemented)</para></entry>
                    </row>
                    <row>
                        <entry role="tbi">Top()</entry>
                        <entry role="tbi">Moves top selected item in the list <para>(to be implemented)</para></entry>
                    </row>
                    <row>
                        <entry role="tbi">Bottom()</entry>
                        <entry role="tbi">Moves bottom selected item in the list <para>(to be implemented)</para></entry>
                    </row>
                    <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 role="tbi">getSelection()</entry>
                        <entry role="tbi">Returns currently selected item <para>(to be implemented)</para></entry>
                    </row>
                    <row>
                        <entry role="tbi">getItems()</entry>
                        <entry role="tbi">Returns the collection of all items <para>(to be implemented)</para></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:listShuttle&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:listShuttle&gt;</property>
                    </emphasis> component</para></listitem>
            </itemizedlist>
        </para>
    </section>
    
    <section>
        <title>Skin Parameters Redefinition</title>
        <table>
            <title>Skin parameters redefinition for items in the source and target lists</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 caption in the source and target lists</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 a selected rows in the source and target lists</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 header cell</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>headerBackgroundColor</entry>
                        <entry>background-color</entry>
                    </row>
                    <row>
                        <entry>headerTextColor</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>headerWeightFont</entry>
                        <entry>font-weight</entry>
                    </row-->
                    <row>
                        <entry>tableBorderWidth</entry>
                        <entry>border-width</entry>
                    </row>
                    <row>
                        <entry>subBorderColor</entry>
                        <entry>border-top-color</entry>
                    </row>
                    <row>
                        <entry>panelBorderColor</entry>
                        <entry>border-bottom-color</entry>
                    </row>
                    <row>
                        <entry>panelBorderColor</entry>
                        <entry>border-right-color</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
        
        <table>
            <title>Skin parameters redefinition for a selected 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>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 an active 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>
                </tbody>
            </tgroup>
        </table>
        
        <table>
            <title>Skin parameters redefinition for 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>
        
        <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>
        
    </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>Style classes</title>
            
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/listShuttle_cn2.png" scale="80" />
                </imageobject>
            </mediaobject>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/listShuttle_cn.png" scale="80"/>
                </imageobject>
            </mediaobject>
        </figure>

        <table id="CN">
            <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-shuttle</entry>
                        <entry>Defines styles for a wrapper table element of a listShuttle</entry>
                    </row>
                    <row>
                        <entry>rich-list-shuttle-caption</entry>
                        <entry>Defines styles for a list caption</entry>
                    </row>
                    <row>
                        <entry>rich-shuttle-body</entry>
                        <entry>Defines styles for a list body</entry>
                    </row>
                    <row>
                        <entry>rich-shuttle-list-content</entry>
                        <entry>Defines styles for a list content</entry>
                    </row>
                    <row>
                        <entry>rich-shuttle-source-items</entry>
                        <entry>Defines styles for a wrapper &lt;div&gt; element for source list</entry>
                    </row>
                    <row>
                        <entry>rich-shuttle-target-items</entry>
                        <entry>Defines styles for a wrapper &lt;div&gt; element for target list</entry>
                    </row>
                    <row>
                        <entry>rich-shuttle-list-header</entry>
                        <entry>Defines styles for a lists header</entry>
                    </row>
                    <row>
                        <entry>rich-shuttle-header-tab-cell</entry>
                        <entry>Defines styles for a header cell</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
        
        <table>
            <title>Classes names that define a caption representations in a source and target lists</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-shuttle-source-caption</entry>
                        <entry>Defines styles for a caption in a source list</entry>
                    </row>
                    <row>
                        <entry>rich-shuttle-target-caption</entry>
                        <entry>Defines styles for a caption in a target list</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>

        <table>
            <title>Classes names that define a rows representations in a source list</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-shuttle-source-row</entry>
                        <entry>Defines styles for a row in a source list</entry>
                    </row>
                    <row>
                        <entry>rich-shuttle-source-row-selected</entry>
                        <entry>Defines styles for a selected row in a source list</entry>
                    </row>
                    <row>
                        <entry>rich-shuttle-source-row-active</entry>
                        <entry>Defines styles for an active row in a source list</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
        <table>
            <title>Classes names that define a rows representations in a target list</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-shuttle-target-row</entry>
                        <entry>Defines styles for a row in a target list</entry>
                    </row>
                    <row>
                        <entry>rich-shuttle-target-row-selected</entry>
                        <entry>Defines styles for a selected row in a target list</entry>
                    </row>
                    <row>
                        <entry>rich-shuttle-target-row-active</entry>
                        <entry>Defines styles for an active row in a target list</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
        <table>
            <title>Classes names that define a cells representations in a source list</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-shuttle-source-cell</entry>
                        <entry>Defines styles for a cell in a source list</entry>
                    </row>
                    <row>
                        <entry>rich-shuttle-source-cell-selected</entry>
                        <entry>Defines styles for a selected cell in a source list</entry>
                    </row>
                    <row>
                        <entry>rich-shuttle-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 cells representations in a target list</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-shuttle-target-cell</entry>
                        <entry>Defines styles for a cell in a target list</entry>
                    </row>
                    <row>
                        <entry>rich-shuttle-target-cell-selected</entry>
                        <entry>Defines styles for a selected cell in a target list</entry>
                    </row>
                    <row>
                        <entry>rich-shuttle-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 controls representations</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-shuttle-controls</entry>
                        <entry>Defines styles for a controls group</entry>
                    </row>
                    <row>
                        <entry>rich-shuttle-top</entry>
                        <entry>Defines styles for a &quot;Top&quot; control</entry>
                    </row>
                    <row>
                        <entry>rich-shuttle-bottom</entry>
                        <entry>Defines styles for a &quot;Bottom&quot; control</entry>
                    </row>
                    <row>
                        <entry>rich-shuttle-up</entry>
                        <entry>Defines styles for a &quot;Up&quot; control</entry>
                    </row>
                    <row>
                        <entry>rich-shuttle-down</entry>
                        <entry>Defines styles for a &quot;Down&quot; control</entry>
                    </row>

                    <row>
                        <entry>rich-shuttle-copy</entry>
                        <entry>Defines styles for a &quot;Copy&quot; control</entry>
                    </row>

                    <row>
                        <entry>rich-shuttle-remove</entry>
                        <entry>Defines styles for a &quot;Remove&quot; control</entry>
                    </row>

                    <row>
                        <entry>rich-shuttle-copyAll</entry>
                        <entry>Defines styles for a &quot;copyAll&quot; control</entry>
                    </row>
                    <row>
                        <entry>rich-shuttle-removeAll</entry>
                        <entry>Defines styles for a &quot;removeAll&quot; control</entry>
                    </row>
                    <row>
                        <entry>rich-shuttle-control-disabled</entry>
                        <entry>Defines styles for a control in a disabled state</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-shuttle-button</entry>
                        <entry>Defines styles for a button</entry>
                    </row>
                    <row>
                        <entry>rich-list-shuttle-button-disabled</entry>
                        <entry>Defines styles for a disabled button</entry>
                    </row>
                    <row>
                        <entry>rich-list-shuttle-button-light</entry>
                        <entry>Defines styles for a button highlight</entry>
                    </row>
                    <row>
                        <entry>rich-list-shuttle-button-press</entry>
                        <entry>Defines styles for a pressed button</entry>
                    </row>
                    <row>
                        <entry>rich-list-shuttle-button-content</entry>
                        <entry>Defines styles for a button content</entry>
                    </row>
                    <row>
                        <entry>rich-list-shuttle-button-selection</entry>
                        <entry>Defines styles for a button selection</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
        <para>In order to redefine styles for all <emphasis role="bold">
            <property>&lt;rich:listShuttle&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="CN"> above</link>) and define necessary properties in them. </para>
        
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="CSS"><![CDATA[...
.rich-shuttle-source-row-active{
        background-color:#FFE4B5;
}	
...]]></programlisting>  
        
        <para>This is a result:</para>
        
        <figure>
            <title>Redefinition styles with predefined classes</title>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/listShuttle_pc.png"/>
                </imageobject>
            </mediaobject>
        </figure>
        
        <para>In the example an active row background color in the source list was changed.</para>
        
        <para>Also it&apos;s possible to change styles of particular <emphasis role="bold"
            ><property>&lt;rich:listShuttle&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold"
                ><property>&lt;rich:listShuttle&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:listShuttle&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:listShuttle ... 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/listShuttle_oc.png"/>
                </imageobject>
            </mediaobject>
        </figure>  
        
        <para>As it could be seen on the picture above, font style for row items  was changed.</para>
    </section>
    
    <section>
        <title>Relevant Resources Links</title>
        <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/listShuttle.jsf?c=listShuttle"
            >Here</ulink> you can see an example of <emphasis role="bold">
                <property>&lt;rich:listShuttle&gt;</property>
            </emphasis> usage and sources for the given example. </para>
    </section>
    
</section>
