Author: SeanRogers Date: 2010-08-20 02:08:40 -0400 (Fri, 20 Aug 2010) New Revision: 18836 Added: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richautocomplete-Defining_suggestion_values.xml_sample modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richautocomplete-richautocomplete.png modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richtabPanel-richtabPanel_component.png Removed: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcomboBox-Defining_suggestion_values.xml_sample modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richcomboBox-richcomboBox.png 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-Rich_inputs.xml modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richtoggleControl-richtoggleControl_example.xml_sample modules/docs/branches/draft/parent/pom.xml Log: Revised rich inputs and panels according to 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-20 00:30:13 UTC (rev 18835) +++ modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Panels_and_containers.xml 2010-08-20 06:08:40 UTC (rev 18836) @@ -21,14 +21,14 @@ 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> + <title>A <sgmltag>&lt;rich:accordion&gt;</sgmltag> component containing three <sgmltag>&lt;rich:accordionItem&gt;</sgmltag> components</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. + A <sgmltag>&lt;rich:accordion&gt;</sgmltag> component containing three <sgmltag>&lt;rich:accordionItem&gt;</sgmltag> components. Only the first panel is expanded. </para> </textobject> </mediaobject> @@ -46,23 +46,32 @@ <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 <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> + <variablelist> + <varlistentry> + <term><literal>server</literal></term> + <listitem> + <para> + The default setting. Activation of a <sgmltag>&lt;rich:accordionItem&gt;</sgmltag> component causes the parent <sgmltag>&lt;rich:accordion&gt;</sgmltag> component to perform a common submission, completely re-rendering the page. Only one panel at a time is uploaded to the client side. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><literal>ajax</literal></term> + <listitem> + <para> + Activation of a <sgmltag>&lt;rich:accordionItem&gt;</sgmltag> component causes the parent <sgmltag>&lt;rich:accordion&gt;</sgmltag> component 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> + </varlistentry> + <varlistentry> + <term><literal>client</literal></term> + <listitem> + <para> + Activation of a <sgmltag>&lt;rich:accordionItem&gt;</sgmltag> component causes the parent <sgmltag>&lt;rich:accordion&gt;</sgmltag> component to update on the client side. JavaScript changes the styles such that one panel component becomes hidden while the other is shown. + </para> + </listitem> + </varlistentry> + </variablelist> </section> <!-- TODO @@ -74,10 +83,10 @@ </section> --> - <section id="sect-Component_Reference-richaccordion-richaccordion_events"> - <title><sgmltag>&lt;rich:accordion&gt;</sgmltag> events</title> + <section id="sect-Component_Reference-richaccordion-richaccordion_client-side_events"> + <title><sgmltag>&lt;rich:accordion&gt;</sgmltag> client-side events</title> <para> - The <sgmltag>&lt;rich:accordion&gt;</sgmltag> component uses the common events for all switchable panels: + In addition to the standard Ajax events and HTML events, the <sgmltag>&lt;rich:accordion&gt;</sgmltag> component uses the client-side events common to all switchable panels: </para> <itemizedlist> <listitem> @@ -93,6 +102,20 @@ </itemizedlist> </section> + <section id="sect-Component_Reference-richaccordion-richaccordion_server-side_events"> + <title><sgmltag>&lt;rich:accordion&gt;</sgmltag> server-side events</title> + <para> + The <sgmltag>&lt;rich:accordion&gt;</sgmltag> component uses the server-side events common to all switchable panels: + </para> + <itemizedlist> + <listitem> + <para> + The <varname>ItemChangeEvent</varname> event occurs on the server side when an item is changed through Ajax using the <literal>server</literal> mode. It can be processed using the <varname>ItemChangeListener</varname> attribute. + </para> + </listitem> + </itemizedlist> + </section> + <section id="sect-Component_Reference-richaccordion-Reference_data"> <title>Reference data</title> <itemizedlist> @@ -131,12 +154,35 @@ <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> + <figure id="figu-Component_Reference-richaccordionItem-richaccordion"> + <title>A <sgmltag>&lt;rich:accordion&gt;</sgmltag> component containing three <sgmltag>&lt;rich:accordionItem&gt;</sgmltag> components</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 containing three <sgmltag>&lt;rich:accordionItem&gt;</sgmltag> components. Only the first panel is expanded. + </para> + </textobject> + </mediaobject> + </figure> - <section id="sect-Component_Reference-richaccordionItem-richaccordionItem_events"> - <title><sgmltag>&lt;rich:accordionItem&gt;</sgmltag> events</title> + <section id="sect-Component_Reference-richaccordionItem-Basic_usage"> + <title>Basic usage</title> <para> - The <sgmltag>&lt;rich:accordionItem&gt;</sgmltag> component uses the common events for all switchable panel items: + Basic usage of the <sgmltag>&lt;rich:accordionItem&gt;</sgmltag> component requires the <varname>label</varname> attribute, which provides the text on the panel header. The panel header is all that is visible when the accordion item is collapsed. </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-richaccordionItem-richaccordionItem_client-side_events"> + <title><sgmltag>&lt;rich:accordionItem&gt;</sgmltag> client-side events</title> + <para> + In addition to the standard HTML events, the <sgmltag>&lt;rich:accordionItem&gt;</sgmltag> component uses the client-side events common to all switchable panel items: + </para> <itemizedlist> <listitem> <para> @@ -290,7 +336,7 @@ 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: + The <sgmltag>&lt;rich:popupPanel&gt;</sgmltag> component can be shown and hidden manually using the <code>show()</code> and <code>hide()</code> methods from the JavaScript API. These can be implemented using two different approaches: </para> <itemizedlist> <listitem> @@ -332,13 +378,16 @@ <section id="sect-Component_Reference-richpopupPanel-Size_and_positioning"> <title>Size and positioning</title> <para> - 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 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>. + 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). This approach is taken because relatively-positioned elements could still overlap the pop-up panel if they exist at higher levels of the <acronym>DOM</acronym> hierarchy, even if their z-index is less than the <sgmltag>&lt;rich:popupPanel&gt;</sgmltag> component. However, to avoid form limitation of the pop-up panel on pages where no such elements exist, 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>. @@ -357,7 +406,7 @@ 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>. + Contents of the <sgmltag>&lt;rich:popupPanel&gt;</sgmltag> component which are positioned relatively may be trimmed if they extend beyond the borders of the pop-up panel. For certain in-line controls this behavior may be preferable, but for other dynamic controls it could be undesirable. If the <varname>trimOverlayedElements</varname> attribute is set to <literal>false</literal> then child components will not be trimmed if they extend beyond the borders of the pop-up panel. </para> </section> @@ -465,6 +514,20 @@ 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> + <figure id="figu-Component_Reference-richtab-richtabPanel_component"> + <title>A <sgmltag>&lt;rich:tabPanel&gt;</sgmltag> component containing three <sgmltag>&lt;rich:tab&gt;</sgmltag> components</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/figu-Component_Reference-richtabPanel-richtabPanel_component.png" format="PNG" /> + </imageobject> + <textobject> + <para> + A <sgmltag>&lt;rich:tabPanel&gt;</sgmltag> component containing three <sgmltag>&lt;rich:tab&gt;</sgmltag> components. + </para> + </textobject> + </mediaobject> + </figure> + <section id="sect-Component_Reference-richtab-Basic_usage"> <title>Basic usage</title> <para> @@ -485,10 +548,10 @@ </para> </section> - <section id="sect-Component_Reference-richtab-richtab_events"> - <title><sgmltag>&lt;rich:tab&gt;</sgmltag> events</title> + <section id="sect-Component_Reference-richtab-richtab_client-side_events"> + <title><sgmltag>&lt;rich:tab&gt;</sgmltag> client-side events</title> <para> - The <sgmltag>&lt;rich:tab&gt;</sgmltag> component uses the common events for all switchable panel items: + In addition to the standard HTML events, the <sgmltag>&lt;rich:tab&gt;</sgmltag> component uses the client-side events common to all switchable panel items: </para> <itemizedlist> <listitem> @@ -542,35 +605,60 @@ <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. 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> + <figure id="figu-Component_Reference-richtabPanel-richtabPanel_component"> + <title>A <sgmltag>&lt;rich:tabPanel&gt;</sgmltag> component containing three <sgmltag>&lt;rich:tab&gt;</sgmltag> components</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/figu-Component_Reference-richtabPanel-richtabPanel_component.png" format="PNG" /> + </imageobject> + <textobject> + <para> + A <sgmltag>&lt;rich:tabPanel&gt;</sgmltag> component containing three <sgmltag>&lt;rich:tab&gt;</sgmltag> components. + </para> + </textobject> + </mediaobject> + </figure> <note> - <title><sgmltag>&lt;a4j:form&gt;</sgmltag> elements required</title> + <title>Form elements required</title> <para> - 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. + All <sgmltag>&lt;rich:tabPanel&gt;</sgmltag> components should be wrapped in a form element so that the contents of the tab are processed correctly during a tab change in either <literal>ajax</literal> or <literal>server</literal> mode. </para> + <para> + Alternatively, the contents of a <sgmltag>&lt;rich:tab&gt;</sgmltag> component within the <sgmltag>&lt;rich:tabPanel&gt;</sgmltag> component could be wrapped in a form element, such that they will be processed using the inner submitting component only. In this case, the <sgmltag>&lt;rich:tabPanel&gt;</sgmltag> component will automatically add form tags around the tab's contents, and the contents will not be processed during switching. + </para> </note> <section id="sect-Component_Reference-richtabPanel-Switching_tabs"> - <title>Switching tabs</title> + <title>Switching panels</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 <sgmltag>&lt;rich:tabPanel&gt;</sgmltag> component 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:tabPanel&gt;</sgmltag> component 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 <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> + <variablelist> + <varlistentry> + <term><literal>server</literal></term> + <listitem> + <para> + The default setting. Activation of a <sgmltag>&lt;rich:tab&gt;</sgmltag> component causes the parent <sgmltag>&lt;rich:tabPanel&gt;</sgmltag> component to perform a common submission, completely re-rendering the page. Only one tab at a time is uploaded to the client side. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><literal>ajax</literal></term> + <listitem> + <para> + Activation of a <sgmltag>&lt;rich:tab&gt;</sgmltag> component causes the parent <sgmltag>&lt;rich:tabPanel&gt;</sgmltag> component to perform an Ajax form submission, and the content of the tab is rendered. Only one tab at a time is uploaded to the client side. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><literal>client</literal></term> + <listitem> + <para> + Activation of a <sgmltag>&lt;rich:tab&gt;</sgmltag> component causes the parent <sgmltag>&lt;rich:tabPanel&gt;</sgmltag> component to update on the client side. JavaScript changes the styles such that one tab becomes hidden while the other is shown. + </para> + </listitem> + </varlistentry> + </variablelist> <para> The <code>activeItem</code> attribute holds the active tab name. </para> @@ -662,10 +750,10 @@ </variablelist> </section> - <section id="sect-Component_Reference-richtabPanel-richtabPanel_events"> - <title><sgmltag>&lt;rich:tabPanel&gt;</sgmltag> events</title> + <section id="sect-Component_Reference-richtabPanel-richtabPanel_client-side_events"> + <title><sgmltag>&lt;rich:tabPanel&gt;</sgmltag> client-side events</title> <para> - The <sgmltag>&lt;rich:tabPanel&gt;</sgmltag> component uses the common events for all switchable panels: + In addition to the standard Ajax events and HTML events, the <sgmltag>&lt;rich:tabPanel&gt;</sgmltag> component uses the client-side events common to all switchable panels: </para> <itemizedlist> <listitem> @@ -681,6 +769,20 @@ </itemizedlist> </section> + <section id="sect-Component_Reference-richtabPanel-richtabPanel_server-side_events"> + <title><sgmltag>&lt;rich:tabPanel&gt;</sgmltag> server-side events</title> + <para> + The <sgmltag>&lt;rich:tabPanel&gt;</sgmltag> component uses the server-side events common to all switchable panels: + </para> + <itemizedlist> + <listitem> + <para> + The <varname>ItemChangeEvent</varname> event occurs on the server side when an item is changed through Ajax using the <literal>server</literal> mode. It can be processed using the <varname>ItemChangeListener</varname> attribute. + </para> + </listitem> + </itemizedlist> + </section> + <section id="sect-Component_Reference-richtabPanel-Reference_data"> <title>Reference data</title> <itemizedlist> @@ -717,24 +819,27 @@ <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> 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. + The <sgmltag>&lt;rich:toggleControl&gt;</sgmltag> behavior can be attached to any interface component. It works with a <sgmltag>&lt;rich:togglePanel&gt;</sgmltag> component to switch between different <sgmltag>&lt;rich:togglePanelItem&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. + Refer to <xref linkend="sect-Component_Reference-Panels_and_containers-richtogglePanel" /> and <xref linkend="sect-Component_Reference-Panels_and_containers-richtogglePanelItem" /> for details on how to use the components together. </para> <section id="sect-Component_Reference-richtoggleControl-Basic_usage"> <title>Basic usage</title> <para> - 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>. + The <sgmltag>&lt;rich:toggleControl&gt;</sgmltag> can be used to switch through <sgmltag>&lt;rich:togglePanelItem&gt;</sgmltag> components in a <sgmltag>&lt;rich:togglePanel&gt;</sgmltag> container. If the <sgmltag>&lt;rich:toggleControl&gt;</sgmltag> component is positioned inside a <sgmltag>&lt;rich:togglePanel&gt;</sgmltag> component, no attributes need to be defined, as the control is assumed to switch through the <sgmltag>&lt;rich:togglePanelItem&gt;</sgmltag> components of its parent. </para> <para> - 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. + A <sgmltag>&lt;rich:toggleControl&gt;</sgmltag> component can be located outside the <sgmltag>&lt;rich:togglePanel&gt;</sgmltag> component it needs to switch. Where this is the case, the <sgmltag>&lt;rich:togglePanel&gt;</sgmltag> is identified using the <varname>activePanel</varname> attribute. the Cycling through components requires the <varname>for</varname> attribute, which points to the <varname>id</varname> identifier of the <sgmltag>&lt;rich:togglePanel&gt;</sgmltag> that it controls. </para> + </section> + + <section id="sect-Component_Reference-richtoggleControl-Specifying_the_next_state"> + <title>Specifying the next state</title> <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. + The <sgmltag>&lt;rich:toggleControl&gt;</sgmltag> component will cycle through <sgmltag>&lt;rich:togglePanelItem&gt;</sgmltag> components in the order they are defined within the view. However, the next item to switch to can be explicitly defined by including a <sgmltag>&lt;rich:toggleControl&gt;</sgmltag> component within a <sgmltag>&lt;rich:togglePanelItem&gt;</sgmltag> and using the <varname>targetItem</varname> attribute. The <varname>targetItem</varname> attribute points to the <sgmltag>&lt;rich:togglePanelItem&gt;</sgmltag> to switch to when the state is next changed. <xref linkend="exam-Component_Reference-richtoggleControl-richtoggleControl_example" /> demonstrates how to specify the next switchable state in this way. </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> @@ -773,27 +878,30 @@ </section> </section> - <!--<rich:toggleLayout>--> - <section id="sect-Component_Reference-Panels_and_containers-richtoggleLayout"> - <title><sgmltag>&lt;rich:toggleLayout&gt;</sgmltag></title> + <!--<rich:togglePanel>--> + <section id="sect-Component_Reference-Panels_and_containers-richtogglePanel"> + <title><sgmltag>&lt;rich:togglePanel&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. + The <sgmltag>&lt;rich:togglePanel&gt;</sgmltag> component is a wrapper for multiple <sgmltag>&lt;rich:togglePanelItem&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> + <para> + The <sgmltag>&lt;rich:togglePanel&gt;</sgmltag> component is used as a base for the other switchable components, the <sgmltag>&lt;rich:accordion&gt;</sgmltag> component and the <sgmltag>&lt;rich:tabPanel&gt;</sgmltag> component. It provides an abstract switchable component without any associated markup. As such, the <sgmltag>&lt;rich:togglePanel&gt;</sgmltag> component could be customized to provide a switchable component when neither an accordion component or a tab panel component is appropriate. + </para> - <section id="sect-Component_Reference-richtoggleLayout-Basic_usage"> + <section id="sect-Component_Reference-richtogglePanel-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. + The initial state of the component can be configured using the <varname>activeItem</varname> attribute, which points to a child component to display. Alternatively, if no <varname>activeItem</varname> attribute is defined, the initial state will be blank until the user activates a child component using the <sgmltag>&lt;rich:toggleControl&gt;</sgmltag> component. </para> <para> - The child components are shown in the order in which they are defined in the <acronym>XHTML</acronym> code. + The child components are shown in the order in which they are defined in the view. </para> </section> - <section id="sect-Component_Reference-richtoggleLayout-Toggling_between_panels"> + <section id="sect-Component_Reference-richtogglePanel-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: @@ -817,74 +925,107 @@ </itemizedlist> </section> - <section id="sect-Component_Reference-richtoggleLayout-Reference_data"> + <section id="sect-Component_Reference-richtogglePanel-Switching_panels"> + <title>Switching panels</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> + <variablelist> + <varlistentry> + <term><literal>server</literal></term> + <listitem> + <para> + The default setting. Activation of a child component causes the parent <sgmltag>&lt;rich:togglePanel&gt;</sgmltag> component to perform a common submission, completely re-rendering the page. Only one child at a time is uploaded to the client side. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><literal>ajax</literal></term> + <listitem> + <para> + Activation of a child component causes the parent <sgmltag>&lt;rich:togglePanel&gt;</sgmltag> component to perform an Ajax form submission, and the content of the child is rendered. Only one child at a time is uploaded to the client side. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><literal>client</literal></term> + <listitem> + <para> + Activation of a child component causes the parent <sgmltag>&lt;rich:togglePanel&gt;</sgmltag> component to update on the client side. JavaScript changes the styles such that one child component becomes hidden while the other is shown. + </para> + </listitem> + </varlistentry> + </variablelist> + </section> + + <section id="sect-Component_Reference-richtogglePanel-Reference_data"> <title>Reference data</title> <itemizedlist> <listitem> <para> - <parameter>component-type</parameter>: <classname>org.richfaces.ToggleLayout</classname> + <parameter>component-type</parameter>: <classname>org.richfaces.TogglePanel</classname> </para> </listitem> <listitem> <para> - <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlToggleLayout</classname> + <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlTogglePanel</classname> </para> </listitem> <listitem> <para> - <parameter>component-family</parameter>: <classname>org.richfaces.ToggleLayout</classname> + <parameter>component-family</parameter>: <classname>org.richfaces.TogglePanel</classname> </para> </listitem> <listitem> <para> - <parameter>renderer-type</parameter>: <classname>org.richfaces.ToggleLayoutRenderer</classname> + <parameter>renderer-type</parameter>: <classname>org.richfaces.TogglePanelRenderer</classname> </para> </listitem> <listitem> <para> - <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.ToggleLayoutTag</classname> + <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.TogglePanelTag</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> + <!--<rich:togglePanelItem>--> + <section id="sect-Component_Reference-Panels_and_containers-richtogglePanelItem"> + <title><sgmltag>&lt;rich:togglePanelItem&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. + The <sgmltag>&lt;rich:togglePanelItem&gt;</sgmltag> component is a switchable panel for use with the <sgmltag>&lt;rich:togglePanel&gt;</sgmltag> component. Switching between <sgmltag>&lt;rich:togglePanelItem&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. + 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-richtogglePanel-Reference_data"> + <section id="sect-Component_Reference-richtogglePanelItem-Reference_data"> <title>Reference data</title> <itemizedlist> <listitem> <para> - <parameter>component-type</parameter>: <classname>org.richfaces.TogglePanel</classname> + <parameter>component-type</parameter>: <classname>org.richfaces.TogglePanelItem</classname> </para> </listitem> <listitem> <para> - <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlTogglePanel</classname> + <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlTogglePanelItem</classname> </para> </listitem> <listitem> <para> - <parameter>component-family</parameter>: <classname>org.richfaces.TogglePanel</classname> + <parameter>component-family</parameter>: <classname>org.richfaces.TogglePanelItem</classname> </para> </listitem> <listitem> <para> - <parameter>renderer-type</parameter>: <classname>org.richfaces.TogglePanelRenderer</classname> + <parameter>renderer-type</parameter>: <classname>org.richfaces.TogglePanelItemRenderer</classname> </para> </listitem> <listitem> <para> - <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.TogglePanelTag</classname> + <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.TogglePanelItemTag</classname> </para> </listitem> </itemizedlist> Modified: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Rich_inputs.xml =================================================================== --- modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Rich_inputs.xml 2010-08-20 00:30:13 UTC (rev 18835) +++ modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Rich_inputs.xml 2010-08-20 06:08:40 UTC (rev 18836) @@ -116,70 +116,70 @@ </section> --> - <!--<rich:comboBox>--> - <section id="sect-Component_Reference-Rich_inputs-richcomboBox"> - <title><sgmltag>&lt;rich:comboBox&gt;</sgmltag></title> + <!--<rich:autocomplete>--> + <section id="sect-Component_Reference-Rich_inputs-richautocomplete"> + <title><sgmltag>&lt;rich:autocomplete&gt;</sgmltag></title> <para> - The <sgmltag>&lt;rich:comboBox&gt;</sgmltag> component is an auto-completing combo-box with built-in Ajax capabilities. It supports client-side suggestions, browser-like selection, Seam entity converter support, and customization of the look and feel. + The <sgmltag>&lt;rich:autocomplete&gt;</sgmltag> component is an auto-completing input-box with built-in Ajax capabilities. It supports client-side suggestions, browser-like selection, and customization of the look and feel. </para> - <figure id="figu-Component_Reference-richcomboBox-richcomboBox"> - <title><sgmltag>&lt;rich:comboBox&gt;</sgmltag></title> + <figure id="figu-Component_Reference-richautocomplete-richautocomplete"> + <title><sgmltag>&lt;rich:autocomplete&gt;</sgmltag></title> <mediaobject> <imageobject> - <imagedata fileref="images/figu-Component_Reference-richcomboBox-richcomboBox.png" format="PNG" /> + <imagedata fileref="images/figu-Component_Reference-richautocomplete-richautocomplete.png" format="PNG" /> </imageobject> <textobject> <para> - A <sgmltag>&lt;rich:comboBox&gt;</sgmltag> component. The letter <wordasword>A</wordasword> has been entered, such that the suggestion list only shows those options beginning with <wordasword>A</wordasword>. + A <sgmltag>&lt;rich:autocomplete&gt;</sgmltag> component. The letter <wordasword>A</wordasword> has been entered, such that the suggestion list only shows those options beginning with <wordasword>A</wordasword>. </para> </textobject> </mediaobject> </figure> - <section id="sect-Component_Reference-richcomboBox-Basic_usage"> + <section id="sect-Component_Reference-richautocomplete-Basic_usage"> <title>Basic usage</title> <para> - The <varname>value</varname> attribute stores the selected value for the combo-box. Suggestions shown in the drop-down list for the combo-box can be specified in one of two ways: + The <varname>value</varname> attribute stores the text entered by the user for the auto-complete box. Suggestions shown in the auto-complete list can be specified using the <varname>autocompleteList</varname> attribute, which points to a collection of suggestions: </para> + <example id="exam-Component_Reference-richautocomplete-Defining_suggestion_values"> + <title>Defining suggestion values</title> + <programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Component_Reference-richautocomplete-Defining_suggestion_values.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + </example> + <!-- <itemizedlist> <listitem> <para> - Using the <varname>suggestionValues</varname> attribute, and defining a collection of suggestions: - </para> - <example id="exam-Component_Reference-richcomboBox-Defining_suggestion_values"> - <title>Defining suggestion values</title> - <programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Component_Reference-richcomboBox-Defining_suggestion_values.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> - </example> - </listitem> - <listitem> - <para> Using the JSF components <sgmltag>&lt;f:selectItem&gt;</sgmltag> and <sgmltag>&lt;f:selectItems&gt;</sgmltag> to define a list of items: </para> - <example id="exam-Component_Reference-richcomboBox-Defining_list_items_for_richinplaceSelect"> + <example id="exam-Component_Reference-richautocomplete-Defining_list_items_for_richinplaceSelect"> <title>Defining list items for <sgmltag>&lt;rich:inplaceSelect&gt;</sgmltag></title> - <programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Component_Reference-richcomboBox-Defining_list_items_for_richinplaceSelect.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-richautocomplete-Defining_list_items_for_richinplaceSelect.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> </example> </listitem> </itemizedlist> + --> </section> - <section id="sect-Component_Reference-richcomboBox-Interactivity_options"> + <section id="sect-Component_Reference-richautocomplete-Interactivity_options"> <title>Interactivity options</title> + <!-- TODO <para> The input box can display an instructional label before text is entered. This can be set through the <varname>defaultLabel</varname> attribute. </para> + --> <para> - Users can type into the combo-box's text field to enter a value, which also searches through the suggestion items in the drop-down box. By default, the first suggestion item is selected as the user types. This behavior can be deactivated by setting <code><varname>selectFirstOnUpdate</varname>="false"</code>. + Users can type into the combo-box's text field to enter a value, which also searches through the suggestion items in the drop-down box. By default, the first suggestion item is selected as the user types. This behavior can be deactivated by setting <code><varname>selectFirst</varname>="false"</code>. </para> <para> - Setting <code><varname>directInputSuggestions</varname>="true"</code> causes the combo-box to fill the text field box with a matching suggestion as the user types. Alternatively, the text field can be disabled by setting <code><varname>enableManualInput</varname>="false"</code>, which forces the users to pick from items in the drop-down box. + Setting <code><varname>autoFill</varname>="true"</code> causes the combo-box to fill the text field box with a matching suggestion as the user types. </para> </section> - <section id="sect-Component_Reference-richcomboBox-richcomboBox_events"> - <title><sgmltag>&lt;rich:comboBox&gt;</sgmltag> events</title> + <!-- TODO + <section id="sect-Component_Reference-richautocomplete-richautocomplete_events"> + <title><sgmltag>&lt;rich:autocomplete&gt;</sgmltag> events</title> <para> - The <sgmltag>&lt;rich:comboBox&gt;</sgmltag> component has two unique event handlers: + The <sgmltag>&lt;rich:autocomplete&gt;</sgmltag> component has two unique event handlers: </para> <itemizedlist> <listitem> @@ -194,33 +194,34 @@ </listitem> </itemizedlist> </section> + --> - <section id="sect-Component_Reference-richcomboBox-Reference_data"> + <section id="sect-Component_Reference-richautocomplete-Reference_data"> <title>Reference data</title> <itemizedlist> <listitem> <para> - <parameter>component-type</parameter>: <classname>org.richfaces.ComboBox</classname> + <parameter>component-type</parameter>: <classname>org.richfaces.autocomplete</classname> </para> </listitem> <listitem> <para> - <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlComboBox</classname> + <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlAutocomplete</classname> </para> </listitem> <listitem> <para> - <parameter>component-family</parameter>: <classname>org.richfaces.ComboBox</classname> + <parameter>component-family</parameter>: <classname>org.richfaces.autocomplete</classname> </para> </listitem> <listitem> <para> - <parameter>renderer-type</parameter>: <classname>org.richfaces.renderkit.ComboBoxRenderer</classname> + <parameter>renderer-type</parameter>: <classname>org.richfaces.renderkit.autocompleteRenderer</classname> </para> </listitem> <listitem> <para> - <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.ComboBoxTag</classname> + <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.autocompleteTag</classname> </para> </listitem> </itemizedlist> @@ -335,18 +336,20 @@ <section id="sect-Component_Reference-richinplaceInput-Interactivity_options"> <title>Interactivity options</title> + <!-- <para> When in the initial "view" state, the starting label can be set using the <varname>defaultLabel</varname> attribute, such as <code><varname>defaultLabel</varname>="click to edit"</code>. </para> - + --> <para> - By default, the event to switch the component to the "edit" state is a single mouse click. This can be changed using the <varname>editEvent</varname> attribute to specify a different event. When switching to "edit" mode, the existing text can be automatically highlighted to make editing easier by setting <code><varname>selectOnEdit</varname>="true"</code>. + By default, the event to switch the component to the "edit" state is a single mouse click. This can be changed using the <varname>editEvent</varname> attribute to specify a different event. </para> <para> The user can confirm and save their input by pressing the <keycap>Enter</keycap> key or cancel by pressing the <keycap>Esc</keycap> key. Alternatively, buttons for confirming or canceling can be added to the component by setting <code>showControls="true"</code>. These buttons can be positioned using the <varname>controlsHorizontalPosition</varname> attribute with settings of <literal>left</literal>, <literal>right</literal>, or <literal>center</literal>, and the <varname>controlsVerticalPosition</varname> attribute with settings <literal>bottom</literal>, <literal>center</literal>, or <literal>top</literal>. The confirmation control icons can be altered using the <varname>saveControlIcon</varname> and <varname>cancelControlIcon</varname>. Further customization is possible through the use of facets. </para> </section> + <!-- TODO <section id="sect-Component_Reference-richinplaceInput-richinplaceInput_events"> <title><sgmltag>&lt;rich:inplaceInput&gt;</sgmltag> events</title> <para> @@ -375,6 +378,7 @@ </listitem> </itemizedlist> </section> + --> <section id="sect-Component_Reference-richinplaceInput-Reference_data"> <title>Reference data</title> @@ -504,12 +508,12 @@ <section id="sect-Component_Reference-Rich_inputs-richinputNumberSlider"> <title><sgmltag>&lt;rich:inputNumberSlider&gt;</sgmltag></title> <para> - The <sgmltag>&lt;rich:inputNumberSlider&gt;</sgmltag> component provides a slider for changing numerical values. Optional features include a tool-tip to display the value while sliding, and a text field for typing the numerical value which can then be validated against the slider's range. + The <sgmltag>&lt;rich:inputNumberSlider&gt;</sgmltag> component provides a slider for changing numerical values. Optional features include control arrows to step through the values, a tool-tip to display the value while sliding, and a text field for typing the numerical value which can then be validated against the slider's range. </para> <section id="sect-Component_Reference-richinputNumberSlider-Basic_usage"> <title>Basic usage</title> <para> - Basic use of the component with no attributes specified will render a slider with a minimum value of 0, a maximum of 100, and a gradient step of 1, together with a text field for typing the desired numerical value. The slider is labeled with the minimum and maximum boundary values, and a tool-tip showing the current value is shown while sliding the slider. + Basic use of the component with no attributes specified will render a slider with a minimum value of 0, a maximum of 100, and a gradient step of 1, together with a text field for typing the desired numerical value. The slider is labeled with the minimum and maximum boundary values, and a tool-tip showing the current value is shown while sliding the slider. The <varname>value</varname> attribute is used for storing the currently selected value of the slider. </para> </section> @@ -525,7 +529,7 @@ The minimum and maximum labels on the slider can be hidden by setting <code><varname>showBoundaryValues</varname>="false"</code>. The tool-tip showing the current value can be hidden by setting <code><varname>showToolTip</varname>="false"</code>. </para> <para> - Arrow controls can be added to either side of the slider to adjust the value incrementally by setting <code>showArrows="true"</code>. Clicking the arrows move the slider indicator in that direction by the gradient step, and clicking and holding the arrows moves the indicator continuously. The time delay for each step when updating continuously can be defined using the <varname>delay</varname> attribute. + Arrow controls can be added to either side of the slider to adjust the value incrementally by setting <code><varname>showArrows</varname>="true"</code>. Clicking the arrows move the slider indicator in that direction by the gradient step, and clicking and holding the arrows moves the indicator continuously. The time delay for each step when updating continuously can be defined using the <varname>delay</varname> attribute. </para> </section> Copied: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richautocomplete-Defining_suggestion_values.xml_sample (from rev 18789, modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcomboBox-Defining_suggestion_values.xml_sample) =================================================================== --- modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richautocomplete-Defining_suggestion_values.xml_sample (rev 0) +++ modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richautocomplete-Defining_suggestion_values.xml_sample 2010-08-20 06:08:40 UTC (rev 18836) @@ -0,0 +1 @@ +<rich:autocomplete value="#{bean.state}" autocompleteList="#{bean.suggestions}" /> Deleted: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcomboBox-Defining_suggestion_values.xml_sample =================================================================== --- modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcomboBox-Defining_suggestion_values.xml_sample 2010-08-20 00:30:13 UTC (rev 18835) +++ modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcomboBox-Defining_suggestion_values.xml_sample 2010-08-20 06:08:40 UTC (rev 18836) @@ -1 +0,0 @@ -<rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" /> Modified: 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 2010-08-20 00:30:13 UTC (rev 18835) +++ modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richtoggleControl-richtoggleControl_example.xml_sample 2010-08-20 06:08:40 UTC (rev 18836) @@ -1,17 +1,17 @@ -<rich:toggleLayout id="layout" activeItem="short"> - <rich:togglePanel id="short"> +<rich:togglePanel id="layout" activeItem="short"> + <rich:togglePanelItem id="short"> //content <h:commandButton> <rich:toggleControl targetItem="details"> // switches to details state </h:commandButton> - </rich:togglePanel> - <rich:togglePanel id="details"> + </rich:togglePanelItem> + <rich:togglePanelItem id="details"> //content <h:commandButton> <rich:toggleControl targetItem="short"> //switches to short state </h:commandButton> - <rich:togglePanel> -</rich:toggleLayout> + <rich:togglePanelItem> +</rich:togglePanel> <h:commandButton> - <rich:toggleControl for="layout"/> // cycles through the states + <rich:toggleControl activePanel="layout"/> // cycles through the states </h:commandButton> Copied: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richautocomplete-richautocomplete.png (from rev 18789, modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richcomboBox-richcomboBox.png) =================================================================== (Binary files differ) Deleted: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richcomboBox-richcomboBox.png =================================================================== (Binary files differ) Added: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richtabPanel-richtabPanel_component.png =================================================================== (Binary files differ) Property changes on: modules/docs/branches/draft/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richtabPanel-richtabPanel_component.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Modified: modules/docs/branches/draft/parent/pom.xml =================================================================== --- modules/docs/branches/draft/parent/pom.xml 2010-08-20 00:30:13 UTC (rev 18835) +++ modules/docs/branches/draft/parent/pom.xml 2010-08-20 06:08:40 UTC (rev 18836) @@ -44,12 +44,12 @@ <dependency> <groupId>org.jboss</groupId> <artifactId>jbossorg-docbook-xslt</artifactId> - <version>1.1.0</version> + <version>1.1.1</version> </dependency> <dependency> <groupId>org.jboss</groupId> <artifactId>jbossorg-jdocbook-style</artifactId> - <version>1.1.0</version> + <version>1.1.1</version> <type>jdocbook-style</type> </dependency> </dependencies>