<?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>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: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>
        <!--para>
            The <emphasis>
                <property>&quot;label&quot;</property>
            </emphasis> attribute is a generic attribute.
            The <emphasis>
                <property>&quot;label&quot;</property>
            </emphasis> attribute provides an association between a component, and the message that the component (indirectly) produced.  
            This attribute defines the parameters of localized error and informational messages that
            occur as a result of conversion, validation, or other application actions during the request
            processing lifecycle. With the help of this attribute you can  replace the
            last parameter substitution token shown in the messages. For example, {1} for <code>&quot;DoubleRangeValidator.MAXIMUM&quot;</code>, {2}
            for <code>&quot;ShortConverter.SHORT&quot;</code>.
        </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/panelBar_cn.png" scalefit="1"/>
                </imageobject>
            </mediaobject>
        </figure>
        <table id="tab_pB">
            <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 (possible classes could be found in the tables <link linkend="tab_pB"> above</link>) and define necessary properties in them. </para>
        
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="CSS"><![CDATA[...
.rich-panelbar{
        font-style: italic;
}
...]]></programlisting>  
        
        <para>This is a result:</para>
        
        <figure>
            <title>Redefinition styles with predefined classes</title>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/panelBar_pc.png"/>
                </imageobject>
            </mediaobject>
        </figure>
        
        <para>In the example header and content font style was changed.</para>
        
        <para>Also it&apos;s possible to change styles of particular <emphasis role="bold"
            ><property>&lt;rich:panelBar&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold"
                ><property>&lt;rich:panelBar&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-family: Tahoma;
}
...]]></programlisting>  
        <para>The <emphasis><property>&quot;contentClass&quot;</property></emphasis> attribute for <emphasis role="bold"
            ><property>&lt;rich:panelBar&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:panelBar ... contentClass="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/panelBar_oc.png"/>
                </imageobject>
            </mediaobject>
        </figure>  
        
        <para>As it could be seen on the picture above, the font family for content were changed.</para>
        
    </section>
    <section>
        <title>Relevant Resources Links</title>
        <para>
            <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/panelBar.jsf?c=panelBar"
                >On the component LiveDemo page</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>
