<?xml version='1.0' encoding='UTF-8'?>
<section>
  <sectioninfo>
    <keywordset>
      <keyword>facet</keyword>
      <keyword>rich:togglePanel</keyword>
      <keyword>HtmltogglePanel</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.TogglePanel</entry>
        </row>
        <row>
          <entry>component-class</entry>
          <entry>org.richfaces.component.html.HtmlTogglePanel</entry>
        </row>
        <row>
          <entry>component-family</entry>
          <entry>org.richfaces.TogglePanel</entry>
        </row>
        <row>
          <entry>renderer-type</entry>
          <entry>org.richfaces.TogglePanelRenderer</entry>
        </row>
        <row>
          <entry>tag-class</entry>
          <entry>org.richfaces.Taglib.togglePanelTag</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 in a page: </para>

    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="XML"><![CDATA[...
    <rich:togglePanel>
        <f:facet name="first">
            ...
        </f:facet>
        <f:facet name="second">
            ...
        </f:facet>
            ...
    </rich:togglePanel>
    ...
    <!--//Set of the toggleControls somewhere on a page.-->
...
]]></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.HtmltogglePanel;
...	
HtmltogglePanel myPanel = new HtmltogglePanel();
...
]]></programlisting>
  </section>
  <section>
    <title>Details of Usage</title>
    <para>As it was mentioned <link linkend="togglePanel">above</link>, <property>togglePanel</property> splits content into named
      facets that become rendered and processed when a click performed on controls linked to this
        <property>togglePanel</property> (either switched on the client or send requests on the
      server for switching).</para>
    <para>The initial component state is defined with <emphasis>
        <property>&quot;initialState&quot;</property>
      </emphasis> attribute, where a facet name that is shown at first is defined.</para>
    <note><title>Note:</title> It&apos;s also possible to define an
        <property>&quot;empty&quot;</property> facet to implement the functionality as
      drop-down panels have and make the facet active when no content is required to be rendered.</note>
    <para>Switching mode could be defined with the <emphasis>
        <property>&quot;switchType&quot;</property>
      </emphasis> attribute with three possible parameters:</para>
    <itemizedlist>
      <listitem> Server (DEFAULT)<para>The common submission is performed around
            <property>togglePanel</property> and a page is completely rendered on a called panel.
          Only one at a time the panel is uploaded onto the client side.</para>
      </listitem>
      <listitem> Ajax<para>AJAX form submission is performed around the panel, content of the called
          panel is uploaded on an Ajax request and additionally specified elements in the <emphasis>
            <property>&quot;reRender&quot;</property>
          </emphasis> attribute are rendered. Only one at a time the panel is uploaded on the client
          side.</para>
      </listitem>
      <listitem> Client<para> All panels are uploaded on the client side. The switching from the
          active to the hidden panel is performed with client JavaScript.</para>
      </listitem>
    </itemizedlist>
    <para>&quot;Facets&quot; switching order could be defined on the side of <emphasis
        role="bold">
        <property>&lt;rich:toggleControl&gt;</property>
      </emphasis> component or on the panel. On the side of the togglePanel it&apos;s possible
      to define facets switching order with the <emphasis>
        <property>&quot;stateOrder&quot;</property>
      </emphasis> attribute. The facets names are enumerated in such an order that they are rendered
      when a control is clicked, as it&apos;s not defined where to switch beforehand.</para>

    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="XML"><![CDATA[...
    <rich:togglePanel id="panel" initialState="panelB" switchType="client"
                        stateOrder="panelA,panelB,panelC">
        <f:facet name="panelA">
            ...
        </f:facet>
        <f:facet name="panelB">
            ...
        </f:facet>
        <f:facet name="panelC">
            ...
        </f:facet>
    </rich:togglePanel> 
    <rich:toggleControl for="panel" value="Switch"/>
...
]]></programlisting>
    <para>The example shows a <property>togglePanel</property> initial state when the second facet
      (panelB) is rendered and successive switching from the first to the second happens.</para>

  </section>
  <section>
    <title>Look-and-Feel Customization</title>
    <para>The component doesn&apos;t have its own representation rendering only content of its
      facets, thus all look and feel is set only for content.</para>
  </section>
  
  <section>
    <title>Definition of Custom Style Classes</title>
    <table>
      <title>Classes names that define a component appearance</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Class name</entry>
            <entry>Description</entry>
          </row>
        </thead>
        <tbody>
          <row>
            <entry>rich-toggle-panel</entry>
            <entry>Defines styles for all component</entry>
          </row>
          
          <row>
            <entry>rich-tglctrl</entry>
            <entry>Defines styles for a toggle control</entry>
          </row>
          
        </tbody>
      </tgroup>
    </table>
    
  </section>
  
  <section>
    <title>Relevant Resources Links</title>
    <para>
      <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/togglePanel.jsf?c=togglePanel"
        >Here</ulink> you can see the example of <emphasis role="bold"
        ><property>&lt;rich:togglePanel&gt;</property></emphasis> usage and sources for the given example.
    </para>
  </section>
    
</section>
