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>&lt;rich:popup&gt;</sgmltag></title> + <!--<rich:accordion>--> + <section id="sect-Component_Reference-Panels_and_containers-richaccordion"> + <title><sgmltag>&lt;rich:accordion&gt;</sgmltag></title> <para> - The <sgmltag>&lt;rich:popup&gt;</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>&lt;rich:accordion&gt;</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>&lt;rich:accordion&gt;</sgmltag> component is a <sgmltag>&lt;rich:accordionItem&gt;</sgmltag> component. </para> + <figure id="figu-Component_Reference-richaccordion-richaccordion"> + <title><sgmltag>&lt;rich:accordion&gt;</sgmltag></title> + <mediaobject> + <imageobject> + <imagedata fileref="images/figu-Component_Reference-richaccordion-richaccordion.png" format="PNG" /> + </imageobject> + <textobject> + <para> + A <sgmltag>&lt;rich:accordion&gt;</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>&lt;rich:popup&gt;</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>&lt;rich:popup&gt;</sgmltag> component. + The <sgmltag>&lt;rich:accordion&gt;</sgmltag> component requires no attributes for basic usage. The component can contain any number of <sgmltag>&lt;rich:accordionItem&gt;</sgmltag> components as children. The headers of the <sgmltag>&lt;rich:accordionItem&gt;</sgmltag> components control the expanding and collapsing when clicked. Only a single <sgmltag>&lt;rich:accordionItem&gt;</sgmltag> can be displayed at a time. Refer to <xref linkend="sect-Component_Reference-Panels_and_containers-richaccordionItem" /> for details on the <sgmltag>&lt;rich:accordionItem&gt;</sgmltag> component. </para> - <example id="exam-Component_Reference-richpopup-richpopup_example"> - <title><sgmltag>&lt;rich:popup&gt;</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>&lt;rich:popup&gt;</sgmltag> component should always be placed outside the original <sgmltag>&lt;h:form&gt;</sgmltag>, and must include its own <sgmltag>&lt;h:form&gt;</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>&lt;rich:accordionItem&gt;</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>&lt;rich:accordionItem&gt;</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>&lt;rich:accordionItem&gt;</sgmltag> components to update on the client side. JavaScript changes the styles such that one <sgmltag>&lt;rich:accordionItem&gt;</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>&lt;rich:panel&gt;</sgmltag> component, the size of the <sgmltag>&lt;rich:accordion&gt;</sgmltag> can be specified using <varname>width</varname> and <varname>height</varname> attributes. If unspecified, these values default to 100%. </para> - <para> - The <sgmltag>&lt;rich:popup&gt;</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>&lt;body&gt;</sgmltag> element of the page, and setting a very high z-index. However, this may produce unwanted behavior in sufficiently complex layouts. The <sgmltag>&lt;rich:popup&gt;</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>&lt;embed&gt;</sgmltag> tag will typically be rendered in front of a <sgmltag>&lt;rich:popup&gt;</sgmltag> component. The <sgmltag>&lt;rich:popup&gt;</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>&lt;rich:accordion&gt;</sgmltag> events</title> <para> - The <sgmltag>&lt;rich:popup&gt;</sgmltag> component can contain any other rich component just like a normal panel. + The <sgmltag>&lt;rich:accordion&gt;</sgmltag> component uses the common events for all switchable panels: </para> - <para> - If the contents of the <sgmltag>&lt;rich:popup&gt;</sgmltag> component extend beyond the dimensions of the pop-up, they will be trimmed. However, the <sgmltag>&lt;rich:popup&gt;</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>&lt;rich:accordionItem&gt;</sgmltag></title> + <para> + The <sgmltag>&lt;rich:accordionItem&gt;</sgmltag> component is a panel for use with the <sgmltag>&lt;rich:accordion&gt;</sgmltag> component. Refer to <xref linkend="sect-Component_Reference-Panels_and_containers-richaccordion" /> for details on the <sgmltag>&lt;rich:accordion&gt;</sgmltag> component. + </para> + + <section id="sect-Component_Reference-richaccordionItem-richaccordionItem_events"> + <title><sgmltag>&lt;rich:accordionItem&gt;</sgmltag> events</title> <para> - A panel header and associated controls can be added to the <sgmltag>&lt;rich:popup&gt;</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>&lt;rich:accordionItem&gt;</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>&lt;rich:popup&gt;</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>&lt;rich:panel&gt;</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>&lt;rich:panelBar&gt;</sgmltag></title> + <!--<rich:popupPanel>--> + <section id="sect-Component_Reference-Panels_and_containers-richpopupPanel"> + <title><sgmltag>&lt;rich:popupPanel&gt;</sgmltag></title> <para> - The <sgmltag>&lt;rich:panelBar&gt;</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>&lt;rich:panelBar&gt;</sgmltag> component is a <sgmltag>&lt;rich:panelBarItem&gt;</sgmltag> component. + The <sgmltag>&lt;rich:popupPanel&gt;</sgmltag> component provides a pop-up panel or window that appears in front of the rest of the application. The <sgmltag>&lt;rich:popupPanel&gt;</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>&lt;rich:panelBar&gt;</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>&lt;rich:popupPanel&gt;</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>&lt;rich:popupPanel&gt;</sgmltag> component can be shown and hidden manually through two different methods: + </para> + <itemizedlist> + <listitem> <para> - A <sgmltag>&lt;rich:panelBar&gt;</sgmltag> component displaying details on different cameras. Only the first panel is expanded. + Using the <sgmltag>&lt;rich:componentControl&gt;</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>&lt;rich:componentControl&gt;</sgmltag> component and the <code>rich:component</code> function to show and hide the <sgmltag>&lt;rich:popupPanel&gt;</sgmltag> component. + </para> + <example id="exam-Component_Reference-richpopupPanel-richpopupPanel_example"> + <title><sgmltag>&lt;rich:popupPanel&gt;</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>&lt;rich:popupPanel&gt;</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>&lt;rich:panelBar&gt;</sgmltag> component requires no attributes for basic usage. The component can contain any number of <sgmltag>&lt;rich:panelBarItem&gt;</sgmltag> components as children. The headers of the <sgmltag>&lt;rich:panelBarItem&gt;</sgmltag> components control the expanding and collapsing when clicked. Only a single <sgmltag>&lt;rich:panelBarItem&gt;</sgmltag> can be displayed at a time. + By default, the <sgmltag>&lt;rich:popupPanel&gt;</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>&lt;rich:panel&gt;</sgmltag> component, the size of the <sgmltag>&lt;rich:panelBar&gt;</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>&lt;rich:popupPanel&gt;</sgmltag> component is usually rendered in front of any other objects on the page. This is achieved by attaching the component to the <sgmltag>&lt;body&gt;</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>&lt;rich:popupPanel&gt;</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>&lt;embed&gt;</sgmltag> tag will typically be rendered in front of a <sgmltag>&lt;rich:popupPanel&gt;</sgmltag> component. The <sgmltag>&lt;rich:popupPanel&gt;</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>&lt;embed&gt;</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>&lt;rich:popupPanel&gt;</sgmltag> component can contain any other rich component just like a normal panel. + </para> + <para> + If the contents of the <sgmltag>&lt;rich:popupPanel&gt;</sgmltag> component extend beyond the borders of the pop-up panel, they will be trimmed. However, the <sgmltag>&lt;rich:popupPanel&gt;</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>&lt;rich:popupPanel&gt;</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>&lt;rich:popupPanel&gt;</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>&lt;rich:panelBarItem&gt;</sgmltag></title> - <para> - The <sgmltag>&lt;rich:panelBarItem&gt;</sgmltag> component is a panel for use with the <sgmltag>&lt;rich:panelBar&gt;</sgmltag> component. - </para> - </section> - <section id="sect-Component_Reference-Panels_and_containers-richsimpleTogglePanel"> <title><sgmltag>&lt;rich:simpleTogglePanel&gt;</sgmltag></title> <para> The <sgmltag>&lt;rich:simpleTogglePanel&gt;</sgmltag> component is a collapsible panel that shows or hides content when the header bar is activated. It is a simplified version of <sgmltag>&lt;rich:togglePanel&gt;</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>&lt;rich:tab&gt;</sgmltag></title> <para> - The <sgmltag>&lt;rich:tab&gt;</sgmltag> component represents an individual tab inside a <sgmltag>&lt;rich:tabPanel&gt;</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>&lt;rich:tab&gt;</sgmltag> component represents an individual tab inside a <sgmltag>&lt;rich:tabPanel&gt;</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>&lt;rich:tabPanel&gt;</sgmltag> component. </para> - <para> - Basic usage of the <sgmltag>&lt;rich:tab&gt;</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>&lt;rich:tab&gt;</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>&lt;rich:tabPanel&gt;</sgmltag> component, or set individually for each <sgmltag>&lt;rich:tab&gt;</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>&lt;rich:tab&gt;</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>&lt;rich:tab&gt;</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>&lt;rich:tab&gt;</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>&lt;rich:tabPanel&gt;</sgmltag> component, or set individually for each <sgmltag>&lt;rich:tab&gt;</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>&lt;rich:tab&gt;</sgmltag> events</title> + <para> + The <sgmltag>&lt;rich:tab&gt;</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>&lt;rich:tabPanel&gt;</sgmltag></title> <para> - The <sgmltag>&lt;rich:tabPanel&gt;</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>&lt;rich:tabPanel&gt;</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>&lt;rich:tabPanel&gt;</sgmltag> container is a <sgmltag>&lt;rich:tab&gt;</sgmltag> component. Refer to <xref linkend="sect-Component_Reference-Panels_and_containers-richtab" /> for further details on the <sgmltag>&lt;rich:tab&gt;</sgmltag> component. </para> <note> - <title>Form elements required</title> + <title><sgmltag>&lt;a4j:form&gt;</sgmltag> elements required</title> <para> - All <sgmltag>&lt;rich:tabPanel&gt;</sgmltag> components should be wrapped in a form element so that content is correctly submitted. + All <sgmltag>&lt;rich:tabPanel&gt;</sgmltag> components should be wrapped in an <sgmltag>&lt;a4j:form&gt;</sgmltag> element so that content is correctly submitted. Alternatively, each <sgmltag>&lt;rich:tab&gt;</sgmltag> component within the <sgmltag>&lt;rich:tabPanel&gt;</sgmltag> component should be wrapped in an <sgmltag>&lt;a4j:form&gt;</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>&lt;rich:tabPanel&gt;</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>&lt;rich:tabPanel&gt;</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>&lt;rich:tabPanel&gt;</sgmltag> events</title> + <para> + The <sgmltag>&lt;rich:tabPanel&gt;</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>&lt;rich:togglePanel&gt;</sgmltag></title> + <!--<rich:toggleControl>--> + <section id="sect-Component_Reference-Panels_and_containers-richtoggleControl"> + <title><sgmltag>&lt;rich:toggleControl&gt;</sgmltag></title> <para> - The <sgmltag>&lt;rich:togglePanel&gt;</sgmltag> component is a wrapper component with named facets. Each facet is displayed after activating a corresponding <sgmltag>&lt;rich:toggleControl&gt;</sgmltag> component. + The <sgmltag>&lt;rich:toggleControl&gt;</sgmltag> behavior can be attached to any interface component. It works with a <sgmltag>&lt;rich:toggleLayout&gt;</sgmltag> component to switch between different <sgmltag>&lt;rich:togglePanel&gt;</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>&lt;rich:toggleControl&gt;</sgmltag> can be used to cycle through <sgmltag>&lt;rich:togglePanel&gt;</sgmltag> components in a <sgmltag>&lt;rich:toggleLayout&gt;</sgmltag> container, or to switch directly to a named <sgmltag>&lt;rich:togglePanel&gt;</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>&lt;rich:toggleLayout&gt;</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>&lt;rich:togglePanel&gt;</sgmltag> can be activated through a <sgmltag>&lt;rich:toggleControl&gt;</sgmltag> component with the <varname>targetItem</varname> attribute. The <varname>targetItem</varname> attribute points to the <varname>id</varname> identifier of the <sgmltag>&lt;rich:togglePanel&gt;</sgmltag> to display. + </para> + + <example id="exam-Component_Reference-richtoggleControl-richtoggleControl_example"> + <title><sgmltag>&lt;rich:toggleControl&gt;</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>&lt;rich:toggleLayout&gt;</sgmltag></title> + <para> + The <sgmltag>&lt;rich:toggleLayout&gt;</sgmltag> component is a wrapper for multiple <sgmltag>&lt;rich:togglePanel&gt;</sgmltag> components. Each child component is displayed after being activated with the <sgmltag>&lt;rich:toggleControl&gt;</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>&lt;rich:togglePanel&gt;</sgmltag></title> + <para> + The <sgmltag>&lt;rich:togglePanel&gt;</sgmltag> component is a switchable panel for use with the <sgmltag>&lt;rich:toggleLayout&gt;</sgmltag> component. Switching between <sgmltag>&lt;rich:togglePanel&gt;</sgmltag> components is handled by the <sgmltag>&lt;rich:toggleControl&gt;</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>&lt;rich:toggleControl&gt;</sgmltag></title> - <para> - The <sgmltag>&lt;rich:toggleControl&gt;</sgmltag> component works with a <sgmltag>&lt;rich:togglePanel&gt;</sgmltag> component to switch between panel states. It can be located either inside or outside the <sgmltag>&lt;rich:togglePanel&gt;</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>&lt;rich:toggleControl&gt;</sgmltag> requires the <code>for</code> attribute, which points to the <code>id</code> attribute of the <sgmltag>&lt;rich:togglePanel&gt;</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>&lt;rich:toggleControl&gt;</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"> -&lt;rich:togglePanel id="panel" initialState="empty" switchType="client"&gt; - &lt;f:facet name="first"&gt; - &lt;h:panelGroup&gt; - &lt;rich:toggleControl for="helloForm:panel" value="Empty" switchToState="empty"/&gt; - &lt;rich:toggleControl for="helloForm:panel" value=" Second" switchToState="second"/&gt; - &lt;!-Some content-&gt; - &lt;/h:panelGroup&gt; - &lt;/f:facet&gt; - &lt;f:facet name="second"&gt; - &lt;h:panelGroup&gt; - &lt;rich:toggleControl for="helloForm:panel" value="Empty" switchToState="empty"/&gt; - &lt;rich:toggleControl for="helloForm:panel" value=" first" switchToState="first"/&gt; - &lt;!-Some content-&gt; - &lt;/h:panelGroup&gt; - &lt;/f:facet&gt; - &lt;f:facet name="empty"&gt; - &lt;h:panelGroup&gt; - &lt;rich:toggleControl for="helloForm:panel" value="first" switchToState="first"/&gt; - &lt;rich:toggleControl for="helloForm:panel" value=" second" switchToState="second"/&gt; - &lt;/h:panelGroup&gt; - &lt;/f:facet&gt; -&lt;/rich:togglePanel&gt; -</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)