[richfaces-svn-commits] JBoss Rich Faces SVN: r18793 - in modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US: extras and 1 other directories.
richfaces-svn-commits at lists.jboss.org
richfaces-svn-commits at lists.jboss.org
Thu Aug 19 02:02:38 EDT 2010
Author: SeanRogers
Date: 2010-08-19 02:02:37 -0400 (Thu, 19 Aug 2010)
New Revision: 18793
Added:
modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopupPanel-Header_and_controls.xml_sample
modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopupPanel-richpopupPanel_example.xml_sample
modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richtoggleControl-richtoggleControl_example.xml_sample
modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richaccordion-richaccordion.png
modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richpopupPanel-Header_and_controls.png
Removed:
modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopup-Header_and_controls.xml_sample
modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopup-richpopup_example.xml_sample
modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richpanelBar-richpanelBar.png
modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richpopup-Header_and_controls.png
Modified:
modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Panels_and_containers.xml
Log:
Updated Panels based on tech review
Modified: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Panels_and_containers.xml
===================================================================
--- modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Panels_and_containers.xml 2010-08-19 01:31:22 UTC (rev 18792)
+++ modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Panels_and_containers.xml 2010-08-19 06:02:37 UTC (rev 18793)
@@ -14,114 +14,176 @@
This chapter details those components which act as panels and containers to hold groups of other components.
</para>
- <!--<rich:popup>-->
- <section id="sect-Component_Reference-Panels_and_containers-richpopup">
- <title><sgmltag><rich:popup></sgmltag></title>
+ <!--<rich:accordion>-->
+ <section id="sect-Component_Reference-Panels_and_containers-richaccordion">
+ <title><sgmltag><rich:accordion></sgmltag></title>
<para>
- The <sgmltag><rich:popup></sgmltag> component provides a modal pop-up panel or window that blocks interaction with the rest of the application while active. It can be easily positioned on the screen, dragged to a new position by the user, and re-sized.
+ The <sgmltag><rich:accordion></sgmltag> is a series of panels stacked on top of each other, each collapsed such that only the header of the panel is showing. When the header of a panel is clicked, it is expanded to show the content of the panel. Clicking on a different header will collapse the previous panel and epand the selected one. Each panel contained in a <sgmltag><rich:accordion></sgmltag> component is a <sgmltag><rich:accordionItem></sgmltag> component.
</para>
+ <figure id="figu-Component_Reference-richaccordion-richaccordion">
+ <title><sgmltag><rich:accordion></sgmltag></title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/figu-Component_Reference-richaccordion-richaccordion.png" format="PNG" />
+ </imageobject>
+ <textobject>
+ <para>
+ A <sgmltag><rich:accordion></sgmltag> component displaying details on different cameras. Only the first panel is expanded.
+ </para>
+ </textobject>
+ </mediaobject>
+ </figure>
- <section id="sect-Component_Reference-richpopup-Basic_usage">
+ <section id="sect-Component_Reference-richaccordion-Basic_usage">
<title>Basic usage</title>
<para>
- The <sgmltag><rich:popup></sgmltag> must be given an <varname>id</varname> identifier. It can then be shown and hidden using JavaScript API functions. <xref linkend="exam-Component_Reference-richpopup-richpopup_example" /> demonstrates basic usage of the <sgmltag><rich:popup></sgmltag> component.
+ The <sgmltag><rich:accordion></sgmltag> component requires no attributes for basic usage. The component can contain any number of <sgmltag><rich:accordionItem></sgmltag> components as children. The headers of the <sgmltag><rich:accordionItem></sgmltag> components control the expanding and collapsing when clicked. Only a single <sgmltag><rich:accordionItem></sgmltag> can be displayed at a time. Refer to <xref linkend="sect-Component_Reference-Panels_and_containers-richaccordionItem" /> for details on the <sgmltag><rich:accordionItem></sgmltag> component.
</para>
- <example id="exam-Component_Reference-richpopup-richpopup_example">
- <title><sgmltag><rich:popup></sgmltag> example</title>
- <programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Component_Reference-richpopup-richpopup_example.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting>
- </example>
- <important>
- <title>Placement</title>
- <para>
- The <sgmltag><rich:popup></sgmltag> component should always be placed outside the original <sgmltag><h:form></sgmltag>, and must include its own <sgmltag><h:form></sgmltag> if performing submissions.
- </para>
- </important>
</section>
- <section id="sect-Component_Reference-richpopup-Size_and_positioning">
- <title>Size and positioning</title>
+ <section id="sect-Component_Reference-richaccordion-Switching_panels">
+ <title>Switching panels</title>
<para>
- By default, the pop-up panel can be both re-sized and re-positioned by the user. The minimum possible size for the panel can be set with the <varname>minWith</varname> and <varname>minHeight</varname> attributes. These abilities can be deactivated by setting <code>resizable</code> or <code>movable</code> to <literal>false</literal> as necessary. The state of the modal panel, including size and position on screen, can be maintained and restored after submitting and reloading by setting <code>keepVisualState="true"</code>.
+ The switching mode for performing submissions is determined by the <code>switchType</code> attribute, which can have one of the following three values:
</para>
+ <itemizedlist>
+ <listitem>
+ <para>
+ <literal>server</literal>, the default setting, which causes the <sgmltag><rich:accordionItem></sgmltag> components to perform a common submission, completely re-rendering the page. Only one panel at a time is uploaded to the client side.
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <literal>ajax</literal>, which causes the <sgmltag><rich:accordionItem></sgmltag> components to perform an Ajax form submission, and the content of the panel is rendered. Only one panel at a time is uploaded to the client side.
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <literal>client</literal>, which causes the <sgmltag><rich:accordionItem></sgmltag> components to update on the client side. JavaScript changes the styles such that one <sgmltag><rich:accordionItem></sgmltag> component becomes hidden while the other is shown.
+ </para>
+ </listitem>
+ </itemizedlist>
+ </section>
+
+ <!-- TODO
+ <section id="sect-Component_Reference-richaccordion-Controlling_panel_size">
+ <title>Controlling panel size</title>
<para>
- If <code>showWhenRendered="true"</code> then the modal panel will display when the page is first loaded.
+ Unlike the <sgmltag><rich:panel></sgmltag> component, the size of the <sgmltag><rich:accordion></sgmltag> can be specified using <varname>width</varname> and <varname>height</varname> attributes. If unspecified, these values default to 100%.
</para>
- <para>
- The <sgmltag><rich:popup></sgmltag> component is always rendered in front of any other objects on the page, even if they would ordinarily have a higher <emphasis>"z-index"</emphasis> (the stack order of the objects). This is achieved by attaching the component to the <sgmltag><body></sgmltag> element of the page, and setting a very high z-index. However, this may produce unwanted behavior in sufficiently complex layouts. The <sgmltag><rich:popup></sgmltag> component can be reattached to its original <acronym>DOM</acronym> element by setting <varname>domElementAttachment</varname> to either <literal>parent</literal> or <literal>form</literal>.
- </para>
- <para>
- Embedded objects inserted into the <acronym>HTML</acronym> with the <sgmltag><embed></sgmltag> tag will typically be rendered in front of a <sgmltag><rich:popup></sgmltag> component. The <sgmltag><rich:popup></sgmltag> component can be forcibly rendered in front of these objects by setting <code><varname>overlapEmbedObjects</varname>="true"</code>.
- </para>
</section>
+ -->
- <section id="sect-Component_Reference-richpopup-Contents_of_the_pop-up">
- <title>Contents of the pop-up</title>
+ <section id="sect-Component_Reference-richaccordion-richaccordion_events">
+ <title><sgmltag><rich:accordion></sgmltag> events</title>
<para>
- The <sgmltag><rich:popup></sgmltag> component can contain any other rich component just like a normal panel.
+ The <sgmltag><rich:accordion></sgmltag> component uses the common events for all switchable panels:
</para>
- <para>
- If the contents of the <sgmltag><rich:popup></sgmltag> component extend beyond the dimensions of the pop-up, they will be trimmed. However, the <sgmltag><rich:popup></sgmltag> component will expand to accommodate the contents if the <varname>trimOverlayedElements</varname> attribute is set to <literal>false</literal>.
- </para>
+ <itemizedlist>
+ <listitem>
+ <para>
+ The <varname>onitemchange</varname> event points to the function to perform when the switchable item is changed.
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ The <varname>onbeforeitemchange</varname> event points to the function to perform when before the switchable item is changed.
+ </para>
+ </listitem>
+ </itemizedlist>
</section>
- <section id="sect-Component_Reference-richpopup-Header_and_controls">
- <title>Header and controls</title>
+ <section id="sect-Component_Reference-richaccordion-Reference_data">
+ <title>Reference data</title>
+ <itemizedlist>
+ <listitem>
+ <para>
+ <parameter>component-type</parameter>: <classname>org.richfaces.accordion</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlAccordion</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <parameter>component-family</parameter>: <classname>org.richfaces.accordion</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <parameter>renderer-type</parameter>: <classname>org.richfaces.accordionRenderer</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.accordionTag</classname>
+ </para>
+ </listitem>
+ </itemizedlist>
+ </section>
+ </section>
+
+ <!--<rich:accordionItem>-->
+ <section id="sect-Component_Reference-Panels_and_containers-richaccordionItem">
+ <title><sgmltag><rich:accordionItem></sgmltag></title>
+ <para>
+ The <sgmltag><rich:accordionItem></sgmltag> component is a panel for use with the <sgmltag><rich:accordion></sgmltag> component. Refer to <xref linkend="sect-Component_Reference-Panels_and_containers-richaccordion" /> for details on the <sgmltag><rich:accordion></sgmltag> component.
+ </para>
+
+ <section id="sect-Component_Reference-richaccordionItem-richaccordionItem_events">
+ <title><sgmltag><rich:accordionItem></sgmltag> events</title>
<para>
- A panel header and associated controls can be added to the <sgmltag><rich:popup></sgmltag> component through the use of facets. The <literal>header</literal> facet displays a title for the panel, and the <literal>controls</literal> facet can be customized to allow window controls such as a button for closing the pop-up. <xref linkend="exam-Component_Reference-richpopup-Header_and_controls" /> demonstrates the use of the facets.
+ The <sgmltag><rich:accordionItem></sgmltag> component uses the common events for all switchable panel items:
</para>
- <example id="exam-Component_Reference-richpopup-Header_and_controls">
- <title>Header and controls</title>
- <programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Component_Reference-richpopup-Header_and_controls.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting>
- <blockquote>
- <figure id="figu-Component_Reference-richpopup-Header_and_controls">
- <title>Header and controls</title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/figu-Component_Reference-richpopup-Header_and_controls.png" format="PNG" />
- </imageobject>
- <textobject>
- <para>
- The <sgmltag><rich:popup></sgmltag> component, rendered with a title header and a button control for closing the pop-up.
- </para>
- </textobject>
- </mediaobject>
- </figure>
- </blockquote>
- </example>
+ <itemizedlist>
+ <listitem>
+ <para>
+ The <varname>onenter</varname> event points to the function to perform when the mouse enters the panel.
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ The <varname>onleave</varname> attribute points to the function to perform when the mouse leaves the panel.
+ </para>
+ </listitem>
+ </itemizedlist>
</section>
- <section id="sect-Component_Reference-richpopup-Reference_data">
+ <section id="sect-Component_Reference-richaccordionItem-Reference_data">
<title>Reference data</title>
<itemizedlist>
<listitem>
<para>
- <parameter>component-type</parameter>: <classname>org.richfaces.popup</classname>
+ <parameter>component-type</parameter>: <classname>org.richfaces.accordionItem</classname>
</para>
</listitem>
<listitem>
<para>
- <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlPopup</classname>
+ <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlAccordionItem</classname>
</para>
</listitem>
<listitem>
<para>
- <parameter>component-family</parameter>: <classname>org.richfaces.popup</classname>
+ <parameter>component-family</parameter>: <classname>org.richfaces.accordionItem</classname>
</para>
</listitem>
<listitem>
<para>
- <parameter>renderer-type</parameter>: <classname>org.richfaces.popupRenderer</classname>
+ <parameter>renderer-type</parameter>: <classname>org.richfaces.accordionItemRenderer</classname>
</para>
</listitem>
<listitem>
<para>
- <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.popupTag</classname>
+ <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.accordionItemTag</classname>
</para>
</listitem>
</itemizedlist>
</section>
</section>
+ <!--<rich:panel>-->
<section id="sect-Component_Reference-Panels_and_containers-richpanel">
<title><sgmltag><rich:panel></sgmltag></title>
<para>
@@ -155,25 +217,25 @@
<title>Adding a header</title>
<programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Component_Reference-richpanel-Adding_a_header-0.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting>
<programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Component_Reference-richpanel-Adding_a_header-1.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting>
+ <para>
+ Both the examples render an identical panel.
+ </para>
+ <blockquote>
+ <figure id="figu-Component_Reference-richpanel-Adding_a_header">
+ <title>Adding a header</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/figu-Component_Reference-richpanel-Adding_a_header.png" format="PNG" />
+ </imageobject>
+ <textobject>
+ <para>
+ A panel with a header that reads <phrase>"This is the panel header"</phrase> and content that reads <phrase>"This is the panel content"</phrase>.
+ </para>
+ </textobject>
+ </mediaobject>
+ </figure>
+ </blockquote>
</example>
- <para>
- Both the examples render an identical panel.
- </para>
- <blockquote>
- <figure id="figu-Component_Reference-richpanel-Adding_a_header">
- <title>Adding a header</title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/figu-Component_Reference-richpanel-Adding_a_header.png" format="PNG" />
- </imageobject>
- <textobject>
- <para>
- A panel with a header that reads <phrase>"This is the panel header"</phrase> and content that reads <phrase>"This is the panel content"</phrase>.
- </para>
- </textobject>
- </mediaobject>
- </figure>
- </blockquote>
</section>
<section id="sect-Component_Reference-richpanel-Reference_data">
@@ -208,65 +270,149 @@
</section>
</section>
- <section id="sect-Component_Reference-Panels_and_containers-richpanelBar">
- <title><sgmltag><rich:panelBar></sgmltag></title>
+ <!--<rich:popupPanel>-->
+ <section id="sect-Component_Reference-Panels_and_containers-richpopupPanel">
+ <title><sgmltag><rich:popupPanel></sgmltag></title>
<para>
- The <sgmltag><rich:panelBar></sgmltag> is a series of panels stacked on top of each other, each collapsed such that only the header of the panel is showing. When the header of a panel is clicked, it is expanded to show the content of the panel. Clicking on a different header will collapse the previous panel and epand the selected one. Similar controls are sometimes known as "accordion" controls. Each panel contained in a <sgmltag><rich:panelBar></sgmltag> component is a <sgmltag><rich:panelBarItem></sgmltag> component.
+ The <sgmltag><rich:popupPanel></sgmltag> component provides a pop-up panel or window that appears in front of the rest of the application. The <sgmltag><rich:popupPanel></sgmltag> component functions either as a modal window which blocks interaction with the rest of the application while active, or as a non-modal window. It can be positioned on the screen, dragged to a new position by the user, and re-sized.
</para>
- <figure id="figu-Component_Reference-richpanelBar-richpanelBar">
- <title><sgmltag><rich:panelBar></sgmltag></title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/figu-Component_Reference-richpanelBar-richpanelBar.png" format="PNG" />
- </imageobject>
- <textobject>
+
+ <section id="sect-Component_Reference-richpopupPanel-Basic_usage">
+ <title>Basic usage</title>
+ <para>
+ The <sgmltag><rich:popupPanel></sgmltag> does not require any compulsory attributes, though certain use cases require different attributes.
+ </para>
+ </section>
+
+ <section id="sect-Component_Reference-richpopupPanel-Showing_and_hiding_the_pop-up">
+ <title>Showing and hiding the pop-up</title>
+ <para>
+ If <code>show="true"</code> then the pop-up panel will display when the page is first loaded.
+ </para>
+ <para>
+ The <sgmltag><rich:popupPanel></sgmltag> component can be shown and hidden manually through two different methods:
+ </para>
+ <itemizedlist>
+ <listitem>
<para>
- A <sgmltag><rich:panelBar></sgmltag> component displaying details on different cameras. Only the first panel is expanded.
+ Using the <sgmltag><rich:componentControl></sgmltag> component. For details on the component, refer to <xref linkend="sect-Component_Reference-Actions-richcomponentControl" />.
</para>
- </textobject>
- </mediaobject>
- </figure>
+ </listitem>
+ <listitem>
+ <para>
+ Using the <code>rich:component</code> function. For details on the function, refer to <xref linkend="sect-Component_Reference-Functions-richcomponent" />.
+ </para>
+ </listitem>
+ </itemizedlist>
+ <para>
+ For explicit referencing when using the functions, the component can be given an <varname>id</varname> identifier. The component can, however, be referenced using other means, such as through a selector.
+ </para>
+ <para>
+ <xref linkend="exam-Component_Reference-richpopupPanel-richpopupPanel_example" /> demonstrates basic use of both the <sgmltag><rich:componentControl></sgmltag> component and the <code>rich:component</code> function to show and hide the <sgmltag><rich:popupPanel></sgmltag> component.
+ </para>
+ <example id="exam-Component_Reference-richpopupPanel-richpopupPanel_example">
+ <title><sgmltag><rich:popupPanel></sgmltag> example</title>
+ <programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Component_Reference-richpopupPanel-richpopupPanel_example.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting>
+ </example>
+ <important>
+ <title>Placement</title>
+ <para>
+ The <sgmltag><rich:popupPanel></sgmltag> component should usually be placed outside the original form, and include its own form if performing submissions. An exception to this is when using the <varname>domElementAttachment</varname> attribute, as described in <xref linkend="sect-Component_Reference-richpopupPanel-Size_and_positioning" />.
+ </para>
+ </important>
+ </section>
- <section id="sect-Component_Reference-richpanelBar-Basic_usage">
- <title>Basic usage</title>
+ <section id="sect-Component_Reference-richpopupPanel-Modal_and_non-modal_panels">
+ <title>Modal and non-modal panels</title>
<para>
- The <sgmltag><rich:panelBar></sgmltag> component requires no attributes for basic usage. The component can contain any number of <sgmltag><rich:panelBarItem></sgmltag> components as children. The headers of the <sgmltag><rich:panelBarItem></sgmltag> components control the expanding and collapsing when clicked. Only a single <sgmltag><rich:panelBarItem></sgmltag> can be displayed at a time.
+ By default, the <sgmltag><rich:popupPanel></sgmltag> appears as a modal window that blocks interaction with the other objects on the page. To implement a non-modal window instead, set <code><varname>modal</varname>="false"</code>. This will allow interaction with other objects outside the pop-up panel.
</para>
</section>
- <section id="sect-Component_Reference-richpanelBar-Controlling_panel_size">
- <title>Controlling panel size</title>
+ <section id="sect-Component_Reference-richpopupPanel-Size_and_positioning">
+ <title>Size and positioning</title>
<para>
- Unlike the <sgmltag><rich:panel></sgmltag> component, the size of the <sgmltag><rich:panelBar></sgmltag> can be specified using <varname>width</varname> and <varname>height</varname> attributes. If unspecified, these values default to 100%.
+ The pop-up panel can be both re-sized and re-positioned by the user. The minimum possible size for the panel can be set with the <varname>minWith</varname> and <varname>minHeight</varname> attributes. These abilities can be deactivated by setting <code>resizable</code> or <code>movable</code> to <literal>false</literal> as necessary. The state of the modal panel, including size and position on screen, can be maintained and restored after submitting and reloading by setting <code>keepVisualState="true"</code>.
</para>
+ <para>
+ The pop-up panel can be automatically sized when it is shown if the <varname>autosized</varname> attribute is set to <literal>true</literal>.
+ </para>
+ <para>
+ The <sgmltag><rich:popupPanel></sgmltag> component is usually rendered in front of any other objects on the page. This is achieved by attaching the component to the <sgmltag><body></sgmltag> element of the page, and setting a very high <emphasis>"z-index"</emphasis> (the stack order of the object). However, this may produce unwanted behavior in sufficiently complex layouts, such as those with multiple pop-up panels. To avoid this, the <sgmltag><rich:popupPanel></sgmltag> component can be reattached to its original <acronym>DOM</acronym> element by setting <varname>domElementAttachment</varname> to either <literal>parent</literal> or <literal>form</literal>.
+ </para>
+ <para>
+ Embedded objects inserted into the <acronym>HTML</acronym> with the <sgmltag><embed></sgmltag> tag will typically be rendered in front of a <sgmltag><rich:popupPanel></sgmltag> component. The <sgmltag><rich:popupPanel></sgmltag> component can be forcibly rendered in front of these objects by setting <code><varname>overlapEmbedObjects</varname>="true"</code>.
+ </para>
+ <note>
+ <title>Using <varname>overlapEmbedObjects</varname></title>
+ <para>
+ Due to the additional script processing required when using the <varname>overlapEmbedObjects</varname> attribute, applications can suffer from decreased performance. As such, <varname>overlapEmbedObjects</varname> should only be set to <literal>true</literal> when <sgmltag><embed></sgmltag> tags are being used. Do not set it to <literal>true</literal> for applications that do not require it.
+ </para>
+ </note>
</section>
- <section id="sect-Component_Reference-richpanelBar-Reference_data">
+ <section id="sect-Component_Reference-richpopupPanel-Contents_of_the_pop-up">
+ <title>Contents of the pop-up</title>
+ <para>
+ The <sgmltag><rich:popupPanel></sgmltag> component can contain any other rich component just like a normal panel.
+ </para>
+ <para>
+ If the contents of the <sgmltag><rich:popupPanel></sgmltag> component extend beyond the borders of the pop-up panel, they will be trimmed. However, the <sgmltag><rich:popupPanel></sgmltag> component will expand to accommodate the contents if the <varname>trimOverlayedElements</varname> attribute is set to <literal>false</literal>.
+ </para>
+ </section>
+
+ <section id="sect-Component_Reference-richpopupPanel-Header_and_controls">
+ <title>Header and controls</title>
+ <para>
+ A panel header and associated controls can be added to the <sgmltag><rich:popupPanel></sgmltag> component through the use of facets. The <literal>header</literal> facet displays a title for the panel, and the <literal>controls</literal> facet can be customized to allow window controls such as a button for closing the pop-up. <xref linkend="exam-Component_Reference-richpopupPanel-Header_and_controls" /> demonstrates the use of the facets.
+ </para>
+ <example id="exam-Component_Reference-richpopupPanel-Header_and_controls">
+ <title>Header and controls</title>
+ <programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Component_Reference-richpopupPanel-Header_and_controls.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting>
+ <blockquote>
+ <figure id="figu-Component_Reference-richpopupPanel-Header_and_controls">
+ <title>Header and controls</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/figu-Component_Reference-richpopupPanel-Header_and_controls.png" format="PNG" />
+ </imageobject>
+ <textobject>
+ <para>
+ The <sgmltag><rich:popupPanel></sgmltag> component, rendered with a title header and a button control for closing the pop-up.
+ </para>
+ </textobject>
+ </mediaobject>
+ </figure>
+ </blockquote>
+ </example>
+ </section>
+
+ <section id="sect-Component_Reference-richpopupPanel-Reference_data">
<title>Reference data</title>
<itemizedlist>
<listitem>
<para>
- <parameter>component-type</parameter>: <classname>org.richfaces.panelBar</classname>
+ <parameter>component-type</parameter>: <classname>org.richfaces.popupPanel</classname>
</para>
</listitem>
<listitem>
<para>
- <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlPanelBar</classname>
+ <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlpopupPanel</classname>
</para>
</listitem>
<listitem>
<para>
- <parameter>component-family</parameter>: <classname>org.richfaces.panelBar</classname>
+ <parameter>component-family</parameter>: <classname>org.richfaces.popupPanel</classname>
</para>
</listitem>
<listitem>
<para>
- <parameter>renderer-type</parameter>: <classname>org.richfaces.panelBarRenderer</classname>
+ <parameter>renderer-type</parameter>: <classname>org.richfaces.popupPanelRenderer</classname>
</para>
</listitem>
<listitem>
<para>
- <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.panelBarTag</classname>
+ <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.popupPanelTag</classname>
</para>
</listitem>
</itemizedlist>
@@ -275,20 +421,13 @@
<!-- TODO not in M2 -->
<!--
- <section id="sect-Component_Reference-Panels_and_containers-richpanelBarItem">
- <title><sgmltag><rich:panelBarItem></sgmltag></title>
- <para>
- The <sgmltag><rich:panelBarItem></sgmltag> component is a panel for use with the <sgmltag><rich:panelBar></sgmltag> component.
- </para>
- </section>
-
<section id="sect-Component_Reference-Panels_and_containers-richsimpleTogglePanel">
<title><sgmltag><rich:simpleTogglePanel></sgmltag></title>
<para>
The <sgmltag><rich:simpleTogglePanel></sgmltag> component is a collapsible panel that shows or hides content when the header bar is activated. It is a simplified version of <sgmltag><rich:togglePanel></sgmltag> component.
</para>
<para>
- Basic usage requires only the <code>label</code> attribute to be specified, which provides the title for the header element.
+ Basic usage requires only the <varname>label</varname> attribute to be specified, which provides the title for the header element.
</para>
<para>
The switching mode for performing submissions is determined by the <code>switchType</code> attribute, which can have one of the following three values:
@@ -319,41 +458,99 @@
</section>
-->
- <!-- TODO not in M2 -->
- <!--
+ <!--<rich:tab>-->
<section id="sect-Component_Reference-Panels_and_containers-richtab">
<title><sgmltag><rich:tab></sgmltag></title>
<para>
- The <sgmltag><rich:tab></sgmltag> component represents an individual tab inside a <sgmltag><rich:tabPanel></sgmltag> component, including the tab's content. Clicking on the tab header will bring its corresponding content to the front of other tabs.
+ The <sgmltag><rich:tab></sgmltag> component represents an individual tab inside a <sgmltag><rich:tabPanel></sgmltag> component, including the tab's content. Clicking on the tab header will bring its corresponding content to the front of other tabs. Refer to <xref linkend="sect-Component_Reference-Panels_and_containers-richtabPanel" /> for details on the <sgmltag><rich:tabPanel></sgmltag> component.
</para>
- <para>
- Basic usage of the <sgmltag><rich:tab></sgmltag> component requires the <code>label</code> attribute, which provides the text on the tab header. The content of the tab is then detailed inside the <sgmltag><rich:tab></sgmltag> tags.
- </para>
- <para>
- An individual tab can be disabled by setting <code>disabled="true"</code>. Disabled tabs cannot be activated or switched to.
- </para>
- <para>
- The switching mode for performing submissions can be inherited from <code>switchMode</code> attribute of the parent <sgmltag><rich:tabPanel></sgmltag> component, or set individually for each <sgmltag><rich:tab></sgmltag> component. Refer to <xref linkend="sect-Component_Reference-Panels_and_containers-richtabPanel" /> for details on the <code>switchMode</code> attribute.
- </para>
- <para>
- There are two event handlers that are unique to the <sgmltag><rich:tab></sgmltag> component. The <code>ontabenter</code> attribute points to the function to perform when the mouse enters the tab, while the <code>ontableave</code> attribute points to the function to perform when the mouse leaves the tab.
- </para>
+
+ <section id="sect-Component_Reference-richtab-Basic_usage">
+ <title>Basic usage</title>
+ <para>
+ Basic usage of the <sgmltag><rich:tab></sgmltag> component requires the <varname>label</varname> attribute, which provides the text on the tab header. The content of the tab is then detailed inside the <sgmltag><rich:tab></sgmltag> tags.
+ </para>
+ <para>
+ Alternatively the <literal>header</literal> facet could be used in place of the <varname>label</varname> attribute. This would allow for additional styles and custom content to be applied to the tab.
+ </para>
+ </section>
+
+ <section id="sect-Component_Reference-richtab-Switching_tabs">
+ <title>Switching tabs</title>
+ <para>
+ The switching mode for performing submissions can be inherited from the <varname>switchMode</varname> attribute of the parent <sgmltag><rich:tabPanel></sgmltag> component, or set individually for each <sgmltag><rich:tab></sgmltag> component. Refer to <xref linkend="sect-Component_Reference-Panels_and_containers-richtabPanel" /> for details on the <varname>switchMode</varname> attribute.
+ </para>
+ <para>
+ An individual tab can be disabled by setting <code><varname>disabled</varname>="true"</code>. Disabled tabs cannot be activated or switched to.
+ </para>
+ </section>
+
+ <section id="sect-Component_Reference-richtab-richtab_events">
+ <title><sgmltag><rich:tab></sgmltag> events</title>
+ <para>
+ The <sgmltag><rich:tab></sgmltag> component uses the common events for all switchable panel items:
+ </para>
+ <itemizedlist>
+ <listitem>
+ <para>
+ The <varname>onenter</varname> event points to the function to perform when the mouse enters the tab.
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ The <varname>onleave</varname> attribute points to the function to perform when the mouse leaves the tab.
+ </para>
+ </listitem>
+ </itemizedlist>
+ </section>
+
+ <section id="sect-Component_Reference-richtab-Reference_data">
+ <title>Reference data</title>
+ <itemizedlist>
+ <listitem>
+ <para>
+ <parameter>component-type</parameter>: <classname>org.richfaces.tab</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlTab</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <parameter>component-family</parameter>: <classname>org.richfaces.tab</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <parameter>renderer-type</parameter>: <classname>org.richfaces.tabRenderer</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.tabTag</classname>
+ </para>
+ </listitem>
+ </itemizedlist>
+ </section>
</section>
- -->
+ <!--<rich:tabPanel>-->
<section id="sect-Component_Reference-Panels_and_containers-richtabPanel">
<title><sgmltag><rich:tabPanel></sgmltag></title>
<para>
- The <sgmltag><rich:tabPanel></sgmltag> component provides a set of tabbed panels for displaying one panel of content at a time. The tabs can be highly customized and themed.
+ The <sgmltag><rich:tabPanel></sgmltag> component provides a set of tabbed panels for displaying one panel of content at a time. The tabs can be highly customized and themed. Each tab within a <sgmltag><rich:tabPanel></sgmltag> container is a <sgmltag><rich:tab></sgmltag> component. Refer to <xref linkend="sect-Component_Reference-Panels_and_containers-richtab" /> for further details on the <sgmltag><rich:tab></sgmltag> component.
</para>
<note>
- <title>Form elements required</title>
+ <title><sgmltag><a4j:form></sgmltag> elements required</title>
<para>
- All <sgmltag><rich:tabPanel></sgmltag> components should be wrapped in a form element so that content is correctly submitted.
+ All <sgmltag><rich:tabPanel></sgmltag> components should be wrapped in an <sgmltag><a4j:form></sgmltag> element so that content is correctly submitted. Alternatively, each <sgmltag><rich:tab></sgmltag> component within the <sgmltag><rich:tabPanel></sgmltag> component should be wrapped in an <sgmltag><a4j:form></sgmltag> element.
</para>
</note>
- <section id="sect-Component_Reference-richtabPanel-Basic_usage">
- <title>Basic usage</title>
+
+ <section id="sect-Component_Reference-richtabPanel-Switching_tabs">
+ <title>Switching tabs</title>
<para>
The switching mode for performing submissions is determined by the <code>switchType</code> attribute, which can have one of the following three values:
</para>
@@ -370,22 +567,120 @@
</listitem>
<listitem>
<para>
- <literal>client</literal>, which causes <sgmltag><rich:tabPanel></sgmltag> components to update on the client side, re-rendering themselves and any additional components listed with the <code>render</code> attribute.
+ <literal>client</literal>, which causes <sgmltag><rich:tabPanel></sgmltag> components to update on the client side. JavaScript changes the styles such that one panel becomes hidden while the other is shown.
</para>
</listitem>
</itemizedlist>
<para>
- The <code>selectedTab</code> attribute holds the active tab name.
+ The <code>activeItem</code> attribute holds the active tab name.
</para>
</section>
- <section id="sect-Component_Reference-richtabPanel-Tab_alignment">
- <title>Tab alignment</title>
+ <section id="sect-Component_Reference-richtabPanel-Tab_position_and_alignment">
+ <title>Tab position and alignment</title>
<para>
- The tabs themselves can be aligned using the <code>headerAlignment</code> attribute. The attribute can be set to <code>left</code>, <code>center</code>, or <code>right</code>, aligning the header tabs to the left, center, or right of the top edge of the panel respectively. If no alignment is specified, left-alignment is the default behavior.
+ The tab headers, used for switching between the tabs, can be positioned along any edge of the panel by using the <varname>headerPosition</varname> attribute. The possible values for the <varname>headerPosition</varname> attribute are as follows:
</para>
+ <variablelist>
+ <varlistentry>
+ <term><literal>top</literal></term>
+ <listitem>
+ <para>
+ The tab headers are positioned along the top of the panel. This is the default position.
+ </para>
+ </listitem>
+ </varlistentry>
+ <varlistentry>
+ <term><literal>left</literal></term>
+ <listitem>
+ <para>
+ The tab headers are positioned along the left edge of the panel.
+ </para>
+ </listitem>
+ </varlistentry>
+ <varlistentry>
+ <term><literal>right</literal></term>
+ <listitem>
+ <para>
+ The tab headers are positioned along the right edge of the panel.
+ </para>
+ </listitem>
+ </varlistentry>
+ <varlistentry>
+ <term><literal>bottom</literal></term>
+ <listitem>
+ <para>
+ The tab headers are positioned along the bottom of the panel.
+ </para>
+ </listitem>
+ </varlistentry>
+ </variablelist>
+ <para>
+ The tab headers themselves can be aligned using the <code>headerAlignment</code> attribute. The possible values for the <varname>headerAlignment</varname> attribute are as follows:
+ </para>
+ <variablelist>
+ <varlistentry>
+ <term><literal>top</literal></term>
+ <listitem>
+ <para>
+ The tab headers are aligned to the top of the tab header position.
+ </para>
+ </listitem>
+ </varlistentry>
+ <varlistentry>
+ <term><literal>left</literal></term>
+ <listitem>
+ <para>
+ The tab headers are aligned to the left of the tab header position. This is the default alignment.
+ </para>
+ </listitem>
+ </varlistentry>
+ <varlistentry>
+ <term><literal>right</literal></term>
+ <listitem>
+ <para>
+ The tab headers are aligned to the right of the tab header position.
+ </para>
+ </listitem>
+ </varlistentry>
+ <varlistentry>
+ <term><literal>bottom</literal></term>
+ <listitem>
+ <para>
+ The tab headers are aligned to the bottom of the tab header position.
+ </para>
+ </listitem>
+ </varlistentry>
+ <varlistentry>
+ <term><literal>center</literal></term>
+ <listitem>
+ <para>
+ The tab headers are aligned in the center of the tab header position.
+ </para>
+ </listitem>
+ </varlistentry>
+ </variablelist>
</section>
+ <section id="sect-Component_Reference-richtabPanel-richtabPanel_events">
+ <title><sgmltag><rich:tabPanel></sgmltag> events</title>
+ <para>
+ The <sgmltag><rich:tabPanel></sgmltag> component uses the common events for all switchable panels:
+ </para>
+ <itemizedlist>
+ <listitem>
+ <para>
+ The <varname>onitemchange</varname> event points to the function to perform when the switchable item is changed.
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ The <varname>onbeforeitemchange</varname> event points to the function to perform when before the switchable item is changed.
+ </para>
+ </listitem>
+ </itemizedlist>
+ </section>
+
<section id="sect-Component_Reference-richtabPanel-Reference_data">
<title>Reference data</title>
<itemizedlist>
@@ -396,7 +691,7 @@
</listitem>
<listitem>
<para>
- <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmltabPanel</classname>
+ <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlTabPanel</classname>
</para>
</listitem>
<listitem>
@@ -418,26 +713,152 @@
</section>
</section>
- <section id="sect-Component_Reference-Panels_and_containers-richtogglePanel">
- <title><sgmltag><rich:togglePanel></sgmltag></title>
+ <!--<rich:toggleControl>-->
+ <section id="sect-Component_Reference-Panels_and_containers-richtoggleControl">
+ <title><sgmltag><rich:toggleControl></sgmltag></title>
<para>
- The <sgmltag><rich:togglePanel></sgmltag> component is a wrapper component with named facets. Each facet is displayed after activating a corresponding <sgmltag><rich:toggleControl></sgmltag> component.
+ The <sgmltag><rich:toggleControl></sgmltag> behavior can be attached to any interface component. It works with a <sgmltag><rich:toggleLayout></sgmltag> component to switch between different <sgmltag><rich:togglePanel></sgmltag> components.
</para>
+ <para>
+ Refer to <xref linkend="sect-Component_Reference-Panels_and_containers-richtogglePanel" /> and <xref linkend="sect-Component_Reference-Panels_and_containers-richtoggleLayout" /> for details on how to use the components together.
+ </para>
- <section id="sect-Component_Reference-richtogglePanel-Basic_usage">
+ <section id="sect-Component_Reference-richtoggleControl-Basic_usage">
<title>Basic usage</title>
<para>
- The initial state of the component can be configured using the <code>initialState</code> attribute, which points to a facet name to display. Alternatively, setting <code>initialState="empty"</code>, the initial state will be blank until the user selects an option.
+ The <sgmltag><rich:toggleControl></sgmltag> can be used to cycle through <sgmltag><rich:togglePanel></sgmltag> components in a <sgmltag><rich:toggleLayout></sgmltag> container, or to switch directly to a named <sgmltag><rich:togglePanel></sgmltag>.
</para>
<para>
- The order in which the facets are shown can be defined using the <code>statusOrder</code> attribute, listing the facet names separated by commas, as shown in <xref linkend="exam-Component_Reference-richtogglePanel-State_order_example" />.
+ Cycling through components requires the <varname>for</varname> attribute, which points to the <varname>id</varname> identifier of the <sgmltag><rich:toggleLayout></sgmltag> that it controls.
</para>
- <example id="exam-Component_Reference-richtogglePanel-State_order_example">
- <title>State order example</title>
- <programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Component_Reference-richtogglePanel-State_order_example.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting>
+ <para>
+ A specific <sgmltag><rich:togglePanel></sgmltag> can be activated through a <sgmltag><rich:toggleControl></sgmltag> component with the <varname>targetItem</varname> attribute. The <varname>targetItem</varname> attribute points to the <varname>id</varname> identifier of the <sgmltag><rich:togglePanel></sgmltag> to display.
+ </para>
+
+ <example id="exam-Component_Reference-richtoggleControl-richtoggleControl_example">
+ <title><sgmltag><rich:toggleControl></sgmltag> example</title>
+ <programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Component_Reference-richtoggleControl-richtoggleControl_example.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting>
</example>
</section>
+ <section id="sect-Component_Reference-richtoggleControl-Reference_data">
+ <title>Reference data</title>
+ <itemizedlist>
+ <listitem>
+ <para>
+ <parameter>component-type</parameter>: <classname>org.richfaces.ToggleControl</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlToggleControl</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <parameter>component-family</parameter>: <classname>org.richfaces.ToggleControl</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <parameter>renderer-type</parameter>: <classname>org.richfaces.ToggleControlRenderer</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.ToggleControlTag</classname>
+ </para>
+ </listitem>
+ </itemizedlist>
+ </section>
+ </section>
+
+ <!--<rich:toggleLayout>-->
+ <section id="sect-Component_Reference-Panels_and_containers-richtoggleLayout">
+ <title><sgmltag><rich:toggleLayout></sgmltag></title>
+ <para>
+ The <sgmltag><rich:toggleLayout></sgmltag> component is a wrapper for multiple <sgmltag><rich:togglePanel></sgmltag> components. Each child component is displayed after being activated with the <sgmltag><rich:toggleControl></sgmltag> behavior.
+ </para>
+ <para>
+ Refer to <xref linkend="sect-Component_Reference-Panels_and_containers-richtoggleControl" /> and <xref linkend="sect-Component_Reference-Panels_and_containers-richtogglePanel" /> for details on how to use the components together.
+ </para>
+
+ <section id="sect-Component_Reference-richtoggleLayout-Basic_usage">
+ <title>Basic usage</title>
+ <para>
+ The initial state of the component can be configured using the <varname>activeItem</varname> attribute, which points to a facet name to display. Alternatively, if no <varname>activeItem</varname> attribute is defined, the initial state will be blank until the user selects an option.
+ </para>
+ <para>
+ The child components are shown in the order in which they are defined in the <acronym>XHTML</acronym> code.
+ </para>
+ </section>
+
+ <section id="sect-Component_Reference-richtoggleLayout-Toggling_between_panels">
+ <title>Toggling between components</title>
+ <para>
+ The switching mode for performing submissions is determined by the <code>switchType</code> attribute, which can have one of the following three values:
+ </para>
+ <itemizedlist>
+ <listitem>
+ <para>
+ <literal>server</literal>, the default setting, which causes the child components to perform a common submission, completely re-rendering the page. Only one panel at a time is uploaded to the client side.
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <literal>ajax</literal>, which causes the child components to perform an Ajax form submission, and the content of the panel is rendered. Only one panel at a time is uploaded to the client side.
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <literal>client</literal>, which causes the child components to update on the client side. JavaScript changes the styles such that one component becomes hidden while the other is shown.
+ </para>
+ </listitem>
+ </itemizedlist>
+ </section>
+
+ <section id="sect-Component_Reference-richtoggleLayout-Reference_data">
+ <title>Reference data</title>
+ <itemizedlist>
+ <listitem>
+ <para>
+ <parameter>component-type</parameter>: <classname>org.richfaces.ToggleLayout</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlToggleLayout</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <parameter>component-family</parameter>: <classname>org.richfaces.ToggleLayout</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <parameter>renderer-type</parameter>: <classname>org.richfaces.ToggleLayoutRenderer</classname>
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.ToggleLayoutTag</classname>
+ </para>
+ </listitem>
+ </itemizedlist>
+ </section>
+ </section>
+
+ <!--<rich:togglePanel>-->
+ <section id="sect-Component_Reference-Panels_and_containers-richtogglePanel">
+ <title><sgmltag><rich:togglePanel></sgmltag></title>
+ <para>
+ The <sgmltag><rich:togglePanel></sgmltag> component is a switchable panel for use with the <sgmltag><rich:toggleLayout></sgmltag> component. Switching between <sgmltag><rich:togglePanel></sgmltag> components is handled by the <sgmltag><rich:toggleControl></sgmltag> behavior.
+ </para>
+ <para>
+ Refer to <xref linkend="sect-Component_Reference-Panels_and_containers-richtoggleControl" /> and <xref linkend="sect-Component_Reference-Panels_and_containers-richtoggleLayout" /> for details on how to use the components together.
+ </para>
+
<section id="sect-Component_Reference-richtogglePanel-Reference_data">
<title>Reference data</title>
<itemizedlist>
@@ -470,49 +891,5 @@
</section>
</section>
- <!-- TODO not in M2 -->
- <!--
- <section id="sect-Component_Reference-Panels_and_containers-richtoggleControl">
- <title><sgmltag><rich:toggleControl></sgmltag></title>
- <para>
- The <sgmltag><rich:toggleControl></sgmltag> component works with a <sgmltag><rich:togglePanel></sgmltag> component to switch between panel states. It can be located either inside or outside the <sgmltag><rich:togglePanel></sgmltag> component, and can be used to switch to a specific state or cycle through a set of states.
- </para>
- <para>
- Basic usage for the <sgmltag><rich:toggleControl></sgmltag> requires the <code>for</code> attribute, which points to the <code>id</code> attribute of the <sgmltag><rich:togglePanel></sgmltag> that it controls. The <code>value</code> attribute specifies the label of the toggle button.
- </para>
- <para>
- The <code>switchToState</code> attribute can be used to explicitly set a target panel for the toggle to activate. If no <code>switchToState</code> attribute is defined, the toggle will switch to the next panel listed in the <code>switchOrder</code> attribute of the <sgmltag><rich:toggleControl></sgmltag> component. <xref linkend="exam-Component_Reference-richtoggleControl-Switching_panel_states" /> shows the use of the <code>switchToState</code> attribute.
- </para>
- <example id="exam-Component_Reference-richtoggleControl-Switching_panel_states">
- <title>Switching panel states</title>
-
-<programlisting language="XML" role="XML">
-<rich:togglePanel id="panel" initialState="empty" switchType="client">
- <f:facet name="first">
- <h:panelGroup>
- <rich:toggleControl for="helloForm:panel" value="Empty" switchToState="empty"/>
- <rich:toggleControl for="helloForm:panel" value=" Second" switchToState="second"/>
- <!-Some content->
- </h:panelGroup>
- </f:facet>
- <f:facet name="second">
- <h:panelGroup>
- <rich:toggleControl for="helloForm:panel" value="Empty" switchToState="empty"/>
- <rich:toggleControl for="helloForm:panel" value=" first" switchToState="first"/>
- <!-Some content->
- </h:panelGroup>
- </f:facet>
- <f:facet name="empty">
- <h:panelGroup>
- <rich:toggleControl for="helloForm:panel" value="first" switchToState="first"/>
- <rich:toggleControl for="helloForm:panel" value=" second" switchToState="second"/>
- </h:panelGroup>
- </f:facet>
-</rich:togglePanel>
-</programlisting>
- </example>
- </section>
- -->
-
</chapter>
Deleted: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopup-Header_and_controls.xml_sample
===================================================================
--- modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopup-Header_and_controls.xml_sample 2010-08-19 01:31:22 UTC (rev 18792)
+++ modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopup-Header_and_controls.xml_sample 2010-08-19 06:02:37 UTC (rev 18793)
@@ -1,15 +0,0 @@
-<a onclick="Richfaces.showModalPanel('pop');" href="#">Show pop-up</a>
-...
-<a4j:form>
- <rich:popup id="pop" >
- <f:facet name="header">
- <h:outputText value="The title of the panel" />
- </f:facet>
- <f:facet name="controls">
- <h:graphicImage value="/pages/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('pop')" />
- </f:facet>
- <p>
- This is the content of the panel.
- </p>
- </rich:popup>
-</a4j:form>
Deleted: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopup-richpopup_example.xml_sample
===================================================================
--- modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopup-richpopup_example.xml_sample 2010-08-19 01:31:22 UTC (rev 18792)
+++ modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopup-richpopup_example.xml_sample 2010-08-19 06:02:37 UTC (rev 18793)
@@ -1,6 +0,0 @@
-<a onclick="Richfaces.showModalPanel('pop');" href="#">Show pop-up</a>
-<a4j:form>
- <rich:popup id="pop" >
- <a onclick="Richfaces.hideModalPanel('pop');" href="#">Hide pop-up</a>
- </rich:popup>
-</a4j:form>
Copied: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopupPanel-Header_and_controls.xml_sample (from rev 18789, modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopup-Header_and_controls.xml_sample)
===================================================================
--- modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopupPanel-Header_and_controls.xml_sample (rev 0)
+++ modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopupPanel-Header_and_controls.xml_sample 2010-08-19 06:02:37 UTC (rev 18793)
@@ -0,0 +1,17 @@
+<h:commandLink value="Show pop-up">
+ <rich:componentControl target="popup" operation="show" />
+</h:commandLink>
+...
+<a4j:form>
+ <rich:popupPanel id="popup" modal="false" autosized="true" resizeable="false">
+ <f:facet name="header">
+ <h:outputText value="The title of the panel" />
+ </f:facet>
+ <f:facet name="controls">
+ <h:graphicImage value="/pages/close.png" style="cursor:pointer" onclick="#{rich:component('popup')}.hide()" />
+ </f:facet>
+ <p>
+ This is the content of the panel.
+ </p>
+ </rich:popupPanel>
+</a4j:form>
Copied: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopupPanel-richpopupPanel_example.xml_sample (from rev 18789, modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopup-richpopup_example.xml_sample)
===================================================================
--- modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopupPanel-richpopupPanel_example.xml_sample (rev 0)
+++ modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpopupPanel-richpopupPanel_example.xml_sample 2010-08-19 06:02:37 UTC (rev 18793)
@@ -0,0 +1,9 @@
+<h:commandButton value="Show the panel">
+ <rich:componentControl target="popup" operation="show" />
+</h:commandButton>
+...
+<a4j:form>
+ <rich:popupPanel id="popup">
+ <p><a href="#" onclick="#{rich:component('popup')}.hide()">Hide the panel</a></p>
+ </rich:popupPanel>
+</a4j:form>
Added: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richtoggleControl-richtoggleControl_example.xml_sample
===================================================================
--- modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richtoggleControl-richtoggleControl_example.xml_sample (rev 0)
+++ modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richtoggleControl-richtoggleControl_example.xml_sample 2010-08-19 06:02:37 UTC (rev 18793)
@@ -0,0 +1,17 @@
+<rich:toggleLayout id="layout" activeItem="short">
+ <rich:togglePanel id="short">
+ //content
+ <h:commandButton>
+ <rich:toggleControl targetItem="details"> // switches to details state
+ </h:commandButton>
+ </rich:togglePanel>
+ <rich:togglePanel id="details">
+ //content
+ <h:commandButton>
+ <rich:toggleControl targetItem="short"> //switches to short state
+ </h:commandButton>
+ <rich:togglePanel>
+</rich:toggleLayout>
+<h:commandButton>
+ <rich:toggleControl for="layout"/> // cycles through the states
+</h:commandButton>
Copied: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richaccordion-richaccordion.png (from rev 18789, modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richpanelBar-richpanelBar.png)
===================================================================
(Binary files differ)
Deleted: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richpanelBar-richpanelBar.png
===================================================================
(Binary files differ)
Deleted: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richpopup-Header_and_controls.png
===================================================================
(Binary files differ)
Copied: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richpopupPanel-Header_and_controls.png (from rev 18789, modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richpopup-Header_and_controls.png)
===================================================================
(Binary files differ)
More information about the richfaces-svn-commits
mailing list