<?xml version='1.0' encoding='UTF-8'?>
<section>
    <sectioninfo>
        <keywordset>
            <keyword>bar</keyword>
            <keyword>rich:panelbar</keyword>
            <keyword>HtmlPanelBar</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.PanelBar</entry>
                </row>
                <row>
                    <entry>component-class</entry>
                    <entry>org.richfaces.component.html.HtmlPanelBar</entry>
                </row>
                <row>
                    <entry>component-family</entry>
                    <entry>org.richfaces.PanelBar</entry>
                </row>
                <row>
                    <entry>renderer-type</entry>
                    <entry>org.richfaces.PanelBarRenderer</entry>
                </row>
                <row>
                    <entry>tag-class</entry>
                    <entry>org.richfaces.taglib.PanelBarTag</entry>
                </row>
            </tbody>
        </tgroup>
    </table>

    <section>
        <title>Creating the Component with a Page Tag</title>
        <para>Here is a simple example as it could be used on a page: </para>

        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
    <rich:panelBar>
        <!--//... -->
        <rich:panelBarItem label="Canon">
            ...
        </rich:panelBarItem>
        <rich:panelBarItem label="Nikon">
            ...
        </rich:panelBarItem>
    </rich:panelBar>
...
]]></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.HtmlPanelBar;
...
HtmlPanelBar myBar = new HtmlPanelBar();
...
]]></programlisting>
    </section>
    <section>
        <title>Details of Usage</title>
        <para>As it was mentioned <link linkend="panelBar">above</link>,
            <property>panelBar</property> is used for grouping any content on the client, thus its
            customization deals only with specification of sizes and styles for rendering.</para>
        <para><emphasis>
                <property>&quot;width&quot;</property>
            </emphasis> and <emphasis>
                <property>&quot;height&quot;</property>
            </emphasis> (both are 100% on default) attributes stand apart.</para>
        <para>Style attributes are described further.</para>
        <para><property>panelBar</property> could contain any number of child
            <property>panelBarItem</property> components inside, which content is uploaded onto the
            client and headers are controls to open the corresponding child element.</para>

    </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:panelBar&gt;</property>
        </emphasis> components at once:</para>
        
        <itemizedlist>
            <listitem>
                <para>Redefine the corresponding skin parameters</para>
            </listitem>
            
            <listitem>
                <para>Add to your style sheets <emphasis>
                    <property>style classes</property>
                </emphasis> used by a <emphasis role="bold">
                    <property>&lt;rich:panelBar&gt;</property>
                </emphasis> component</para>
            </listitem>
        </itemizedlist>
    </section>

    <section>
        <title>Skin Parameters Redefinition</title>
        <table>
            <title>Skin parameter redefinition for a  whole component</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameter</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>headerBackgroundColor</entry>
                        <entry>border-color</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
    </section>

    <section>
        <title>Definition of Custom Style Classes</title>
        <para>There is one predefined class for the <emphasis role="bold">
                <property>&lt;rich:panelBar&gt;</property>
            </emphasis>, which is applicable to a whole component, specifying padding, borders, and
            etc.</para>
        <figure>
            <title>Style classes</title>

            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/panelBar2.png" scalefit="1"/>
                </imageobject>
            </mediaobject>
        </figure>
        <table>
            <title>Class name that define a component appearance</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Class description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-panelbar</entry>
                        <entry>Defines styles for a wrapper &lt;div&gt; element of a
                            component</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
        <para>Other classes responsible for elements rendering are described for child <emphasis
                role="bold">
                <property>&lt;rich:panelBarItem&gt;</property>
            </emphasis> elements and could be found in the components chapters.</para>

        <table>
            <title>Style component classes</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>A class attribute</entry>
                        <entry>A component element defined by an attribute</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>styleClass</entry>
                        <entry>Applicable to a whole component (together with headers)</entry>
                    </row>
                    <row>
                        <entry>headerClass</entry>
                        <entry>Applicable to a header element</entry>
                    </row>
                    <row>
                        <entry>contentClass</entry>
                        <entry>Applicable to a content </entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
        <para>In order to redefine styles for all <emphasis role="bold">
                <property>&lt;rich:panelBar&gt;</property>
            </emphasis> components on a page using CSS, it&apos;s enough to create classes with
            the same names and define necessary properties in them.</para>

        <para>To change styles of particular <emphasis role="bold">
                <property>&lt;rich:panelBar&gt;</property>
            </emphasis> components, define your own style classes in the corresponding <emphasis
                role="bold">
                <property>&lt;rich:panelBar&gt;</property>
            </emphasis>attributes.</para>
        <para>CSS code piece used on a page:</para>

        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="CSS"><![CDATA[...
    . rich-panelbar{
        padding:10px;
    }
    .myClass{
        font-style:italic;
    }
...
]]></programlisting>
        <para>When using headerClass and headerClassActive attributes the declaration of headerClass
            should precede the one of headerClassActive:</para>

        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="CSS"><![CDATA[...
    .headerClass{
        ...
    }
    .headerClassActive{
        ...
    }
...
]]></programlisting>
        <para>The component is defined in the following way:</para>
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[...
    <rich:panelBar contentClass="myClass">
        <rich:panelBarItem>
        ...
        </rich:panelBarItem>
    </rich:panelBar>
...
]]></programlisting>
        <para>Hence, padding for all <emphasis role="bold">
                <property>&lt;rich:panelBar&gt;</property>
            </emphasis> is changed on a page as well as a font for particular
            <emphasis role="bold">
                <property>&lt;rich:panelBarItem&gt;</property>
            </emphasis> content.</para>
    </section>
    <section>
        <title>Relevant Resources Links</title>
        <para>
            <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/panelBar.jsf?c=panelBar"
                >Here</ulink> you can see the example of <emphasis role="bold">
                <property>&lt;rich:panelBar&gt;</property>
            </emphasis> usage and sources for the given example. </para>
    </section>

</section>
