[richfaces-svn-commits] JBoss Rich Faces SVN: r18647 - in branches/development/docs/Component_Reference/src/main/docbook/en-US: extras and 1 other directories.

Author: SeanRogers Date: 2010-08-16 00:06:16 -0400 (Mon, 16 Aug 2010) New Revision: 18647 Added: branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richinplaceSelect-Defining_list_items_for_richinplaceSelect.xml_sample branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpanel-Adding_a_header-0.xml_sample branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpanel-Adding_a_header-1.xml_sample branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richtogglePanel-State_order_example.xml_sample branches/development/docs/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richpanel-Adding_a_header.png branches/development/docs/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richpanel-richpanel.png branches/development/docs/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richpanelBar-richpanelBar.png Modified: branches/development/docs/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Panels_and_containers.xml branches/development/docs/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Rich_inputs.xml Log: Updated panels (RF-8804, RF-8795) and inputs (RF-9036) Modified: branches/development/docs/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Panels_and_containers.xml =================================================================== --- branches/development/docs/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Panels_and_containers.xml 2010-08-15 21:03:21 UTC (rev 18646) +++ branches/development/docs/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Panels_and_containers.xml 2010-08-16 04:06:16 UTC (rev 18647) @@ -48,28 +48,156 @@ </section> --> - <!-- TODO not in M2 --> - <!-- <section id="sect-Component_Reference-Panels_and_containers-richpanel"> <title><sgmltag>&lt;rich:panel&gt;</sgmltag></title> <para> The <sgmltag>&lt;rich:panel&gt;</sgmltag> component is a bordered panel with an optional header. </para> - <para> - No attributes need to be listed for basic usage. To add a header to the panel, use the <code>header</code> attribute to specify the text to appear in the header. Alternatively the header can be constructed using a header facet. - </para> + <figure id="figu-Component_Reference-richpanel-richpanel"> + <title><sgmltag>&lt;rich:panel&gt;</sgmltag></title> + <mediaobject> + <imageobject> + <imagedata fileref="images/figu-Component_Reference-richpanel-richpanel.png" format="PNG" /> + </imageobject> + <textobject> + <para> + A <sgmltag>&lt;rich:Panel&gt;</sgmltag> component displaying details on a camera model. + </para> + </textobject> + </mediaobject> + </figure> + <section id="sect-Component_Reference-richpanel-Basic_usage"> + <title>Basic usage</title> + <para> + No attributes need to be listed for basic usage. a <sgmltag>&lt;rich:panel&gt;</sgmltag> without any attributes defined renders a bordered region with no header. + </para> + </section> + <section id="sect-Component_Reference-richpanel-Adding_a_header"> + <title>Adding a header</title> + <para> + To add a header to the panel, use the <varname>header</varname> attribute to specify the text to appear in the header. Alternatively the header can be constructed using a header facet. <xref linkend="exam-Component_Reference-richpanel-Adding_a_header" /> demonstrates the two different approaches. + </para> + <example id="exam-Component_Reference-richpanel-Adding_a_header"> + <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> + </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"> + <title>Reference data</title> + <itemizedlist> + <listitem> + <para> + <parameter>component-type</parameter>: <classname>org.richfaces.panel</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlPanel</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>component-family</parameter>: <classname>org.richfaces.panel</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>renderer-type</parameter>: <classname>org.richfaces.panelRenderer</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.panelTag</classname> + </para> + </listitem> + </itemizedlist> + </section> </section> - --> - <!-- TODO not in M2 --> - <!-- <section id="sect-Component_Reference-Panels_and_containers-richpanelBar"> <title><sgmltag>&lt;rich:panelBar&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. Another name for the component is "accordion". Each panel in contained in a <sgmltag>&lt;rich:panelBar&gt;</sgmltag> component is a <sgmltag>&lt;rich:panelBarItem&gt;</sgmltag> component. + 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. </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> + <para> + A <sgmltag>&lt;rich:panelBar&gt;</sgmltag> component displaying details on different cameras. Only the first panel is expanded. + </para> + </textobject> + </mediaobject> + </figure> + + <section id="sect-Component_Reference-richpanelBar-Basic_usage"> + <title>Basic usage</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. + </para> + </section> + + <section id="sect-Component_Reference-richpanelBar-Controlling_panel_size"> + <title>Controlling panel size</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%. + </para> + </section> + + <section id="sect-Component_Reference-richpanelBar-Reference_data"> + <title>Reference data</title> + <itemizedlist> + <listitem> + <para> + <parameter>component-type</parameter>: <classname>org.richfaces.panelBar</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlPanelBar</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>component-family</parameter>: <classname>org.richfaces.panelBar</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>renderer-type</parameter>: <classname>org.richfaces.panelBarRenderer</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.panelBarTag</classname> + </para> + </listitem> + </itemizedlist> + </section> </section> - --> <!-- TODO not in M2 --> <!-- @@ -117,6 +245,28 @@ </section> --> + <!-- TODO not in M2 --> + <!-- + <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. + </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> + --> + <section id="sect-Component_Reference-Panels_and_containers-richtabPanel"> <title><sgmltag>&lt;rich:tabPanel&gt;</sgmltag></title> <para> @@ -194,28 +344,6 @@ </section> </section> - <!-- TODO not in M2 --> - <!-- - <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. - </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> - --> - <section id="sect-Component_Reference-Panels_and_containers-richtogglePanel"> <title><sgmltag>&lt;rich:togglePanel&gt;</sgmltag></title> <para> @@ -232,18 +360,7 @@ </para> <example id="exam-Component_Reference-richtogglePanel-State_order_example"> <title>State order example</title> - <programlisting language="XML" role="XML">&lt;rich:togglePanel id="panel" initialState="panelB" switchType="client" stateOrder="panelA,panelB,panelC"&gt; - &lt;f:facet name="panelA"&gt; - ... - &lt;/f:facet&gt; - &lt;f:facet name="panelB"&gt; - ... - &lt;/f:facet&gt; - &lt;f:facet name="panelC"&gt; - ... - &lt;/f:facet&gt; - &lt;/rich:togglePanel&gt; - &lt;rich:toggleControl for="panel" value="Switch"/&gt;</programlisting> + <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> </example> </section> Modified: branches/development/docs/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Rich_inputs.xml =================================================================== --- branches/development/docs/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Rich_inputs.xml 2010-08-15 21:03:21 UTC (rev 18646) +++ branches/development/docs/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Rich_inputs.xml 2010-08-16 04:06:16 UTC (rev 18647) @@ -270,197 +270,241 @@ <section id="sect-Component_Reference-Rich_inputs-richinplaceInput"> <title><sgmltag>&lt;rich:inplaceInput&gt;</sgmltag></title> - <itemizedlist> - <listitem> - <para> - <parameter>component-type</parameter>: <classname>org.richfaces.inplaceInput</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlInplaceInput</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>component-family</parameter>: <classname>org.richfaces.inplaceInput</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>renderer-type</parameter>: <classname>org.richfaces.renderkit.inplaceInputRenderer</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.inplaceInputTag</classname> - </para> - </listitem> - </itemizedlist> <para> The <sgmltag>&lt;rich:inplaceInput&gt;</sgmltag> component allows information to be entered in-line in blocks of text, improving readability of the text. Changes can be rendered either in-line or for the whole block, and inputs can be focused with keyboard navigation. The component has three functional states: the "view" state, where the component displays its initial setting, such as "click to edit"; the "edit" state, where the user can input text; and the "changed" state, where the new value for the component has been confirmed but can be edited again if required. </para> - <para> - When in the initial "view" state, the starting label can be set using the <varname>defaultLabel</varname> attribute, such as <code>defaultLabel="click to edit"</code>. - </para> - <para> - Basic usage requires the <varname>value</varname> attribute to point to the expression for the current value of the component. - </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>selectOnEdit="true"</code>. - </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> - <para> - There are several event handlers that are specific to the <sgmltag>&lt;rich:inplaceInput&gt;</sgmltag> component: - </para> - <itemizedlist> - <listitem> - <para> - <varname>oneditactivation</varname> is triggered before the "edit" state is activated. - </para> - </listitem> - <listitem> - <para> - <varname>oneditactivated</varname> is triggered after the "edit" state is activated. - </para> - </listitem> - <listitem> - <para> - <varname>onviewactivation</varname> is triggered before the "view" or "changed" state is activated. - </para> - </listitem> - <listitem> - <para> - <varname>onviewactivated</varname> is triggered after the "view" or "changed" state is activated. - </para> - </listitem> - </itemizedlist> + + <section id="sect-Component_Reference-richinplaceInput-Basic_usage"> + <title>Basic usage</title> + <para> + Basic usage requires the <varname>value</varname> attribute to point to the expression for the current value of the component. + </para> + </section> + + <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>. + </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> + + <section id="sect-Component_Reference-richinplaceInput-richinplaceInput_events"> + <title><sgmltag>&lt;rich:inplaceInput&gt;</sgmltag> events</title> + <para> + There are several event handlers that are specific to the <sgmltag>&lt;rich:inplaceInput&gt;</sgmltag> component: + </para> + <itemizedlist> + <listitem> + <para> + <varname>oneditactivation</varname> is triggered before the "edit" state is activated. + </para> + </listitem> + <listitem> + <para> + <varname>oneditactivated</varname> is triggered after the "edit" state is activated. + </para> + </listitem> + <listitem> + <para> + <varname>onviewactivation</varname> is triggered before the "view" or "changed" state is activated. + </para> + </listitem> + <listitem> + <para> + <varname>onviewactivated</varname> is triggered after the "view" or "changed" state is activated. + </para> + </listitem> + </itemizedlist> + </section> + + <section id="sect-Component_Reference-richinplaceInput-Reference_data"> + <title>Reference data</title> + <itemizedlist> + <listitem> + <para> + <parameter>component-type</parameter>: <classname>org.richfaces.inplaceInput</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlInplaceInput</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>component-family</parameter>: <classname>org.richfaces.inplaceInput</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>renderer-type</parameter>: <classname>org.richfaces.renderkit.inplaceInputRenderer</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.inplaceInputTag</classname> + </para> + </listitem> + </itemizedlist> + </section> </section> <section id="sect-Component_Reference-Rich_inputs-richinplaceSelect"> <title><sgmltag>&lt;rich:inplaceSelect&gt;</sgmltag></title> - <itemizedlist> - <listitem> - <para> - <parameter>component-type</parameter>: <classname>org.richfaces.inplaceSelect</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlInplaceSelect</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>component-family</parameter>: <classname>org.richfaces.inplaceSelect</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>renderer-type</parameter>: <classname>org.richfaces.renderkit.inplaceSelectRenderer</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.inplaceSelectTag</classname> - </para> - </listitem> - </itemizedlist> <para> - The <sgmltag>&lt;rich:inplaceSelect&gt;</sgmltag> component is similar to the <sgmltag>&lt;rich:inplaceInput&gt;</sgmltag> component, but the uses a drop-down selection box to enter text instead of a regular text field. Changes can be rendered either in-line or for the whole block, and inputs can be focused with keyboard navigation. The component has three functional states: the "view" state, where the component displays its initial setting, such as "click to edit"; the "edit" state, where the user can select a value from a drop-down list; and the "changed" state, where the new value for the component has been confirmed but can be edited again if required. + The <sgmltag>&lt;rich:inplaceSelect&gt;</sgmltag> component is similar to the <sgmltag>&lt;rich:inplaceInput&gt;</sgmltag> component, except that the <sgmltag>&lt;rich:inplaceSelect&gt;</sgmltag> component uses a drop-down selection box to enter text instead of a regular text field. Changes can be rendered either in-line or for the whole block, and inputs can be focused with keyboard navigation. The component has three functional states: the "view" state, where the component displays its initial setting, such as "click to edit"; the "edit" state, where the user can select a value from a drop-down list; and the "changed" state, where the new value for the component has been confirmed but can be edited again if required. </para> - <para> - When in the initial "view" state, the starting label can be set using the <varname>defaultLabel</varname> attribute, such as <code>defaultLabel="click to edit"</code>. - </para> - <para> - Basic usage requires the <varname>value</varname> attribute to point to the expression for the current value of the component and a list of items. The list of items can be defined using the JSF components <sgmltag>&lt;f:selectItem/&gt;</sgmltag> and <sgmltag>&lt;f:selectItems/&gt;</sgmltag>. - </para> - <example id="exam-Component_Reference-richinplaceSelect-Defining_list_items_for_richinplaceSelect"> - <title>Defining list items for <sgmltag>&lt;rich:inplaceSelect&gt;</sgmltag></title> - -<programlisting language="XML" role="XML"> -&lt;rich:inplaceSelect value="#{bean.inputValue}" defaultLabel="click to edit" &gt; - &lt;f:selectItems value="#{bean.selectItems}" /&gt; - &lt;f.selectItem itemValue="1" itemLabel="Item 1" /&gt; - &lt;f.selectItem itemValue="2" itemLabel="Item 2" /&gt; - &lt;f.selectItem itemValue="3" itemLabel="Item 3" /&gt; - &lt;f.selectItem itemValue="4" itemLabel="Item 4" /&gt; -&lt;/rich:comboBox&gt; -</programlisting> - </example> - <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 drop-down list of possible values will automatically be displayed; this can be deactivated by setting <code>openOnEdit="false"</code>. - </para> - <para> - Once the user selects an option from the drop-down list, the item becomes the new value for the component and the state is switched to the "changed" state. 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> - <para> - There are several event handlers that are specific to the <sgmltag>&lt;rich:inplaceSelect&gt;</sgmltag> component: - </para> - <itemizedlist> - <listitem> - <para> - <varname>oneditactivation</varname> is triggered before the "edit" state is activated. - </para> - </listitem> - <listitem> - <para> - <varname>oneditactivated</varname> is triggered after the "edit" state is activated. - </para> - </listitem> - <listitem> - <para> - <varname>onviewactivation</varname> is triggered before the "view" or "changed" state is activated. - </para> - </listitem> - <listitem> - <para> - <varname>onviewactivated</varname> is triggered after the "view" or "changed" state is activated. - </para> - </listitem> - </itemizedlist> + + <section id="sect-Component_Reference-richinplaceSelect-Basic_usage"> + <title>Basic usage</title> + <para> + Basic usage requires the <varname>value</varname> attribute to point to the expression for the current value of the component and a list of items. The list of items can be defined using the JSF components <sgmltag>&lt;f:selectItem/&gt;</sgmltag> and <sgmltag>&lt;f:selectItems/&gt;</sgmltag>. + </para> + <example id="exam-Component_Reference-richinplaceSelect-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-richinplaceSelect-Defining_list_items_for_richinplaceSelect.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + </example> + </section> + + <section id="sect-Component_Reference-richinplaceSelect-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>defaultLabel="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 drop-down list of possible values will automatically be displayed; this can be deactivated by setting <code><varname>openOnEdit</varname>="false"</code>. + </para> + <para> + Once the user selects an option from the drop-down list, the item becomes the new value for the component and the state is switched to the "changed" state. 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> + + <section id="sect-Component_Reference-richinplaceInput-richinplaceSelect_events"> + <title><sgmltag>&lt;rich:inplaceSelect&gt;</sgmltag> events</title> + <para> + There are several event handlers that are specific to the <sgmltag>&lt;rich:inplaceSelect&gt;</sgmltag> component: + </para> + <itemizedlist> + <listitem> + <para> + <varname>oneditactivation</varname> is triggered before the "edit" state is activated. + </para> + </listitem> + <listitem> + <para> + <varname>oneditactivated</varname> is triggered after the "edit" state is activated. + </para> + </listitem> + <listitem> + <para> + <varname>onviewactivation</varname> is triggered before the "view" or "changed" state is activated. + </para> + </listitem> + <listitem> + <para> + <varname>onviewactivated</varname> is triggered after the "view" or "changed" state is activated. + </para> + </listitem> + </itemizedlist> + </section> + + <section id="sect-Component_Reference-richinplaceSelect-Reference_data"> + <title>Reference data</title> + <itemizedlist> + <listitem> + <para> + <parameter>component-type</parameter>: <classname>org.richfaces.inplaceSelect</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlInplaceSelect</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>component-family</parameter>: <classname>org.richfaces.inplaceSelect</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>renderer-type</parameter>: <classname>org.richfaces.renderkit.inplaceSelectRenderer</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.inplaceSelectTag</classname> + </para> + </listitem> + </itemizedlist> + </section> </section> <section id="sect-Component_Reference-Rich_inputs-richinputNumberSlider"> <title><sgmltag>&lt;rich:inputNumberSlider&gt;</sgmltag></title> - <itemizedlist> - <listitem> - <para> - <parameter>component-type</parameter>: <classname>org.richfaces.inputNumberSlider</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlInputNumberSlider</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>component-family</parameter>: <classname>org.richfaces.inputNumberSlider</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>renderer-type</parameter>: <classname>org.richfaces.renderkit.inputNumberSliderRenderer</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.inputNumberSliderTag</classname> - </para> - </listitem> - </itemizedlist> <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. </para> - <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 text field can be removed by setting <code>showInput="false"</code>, and the properties of the slider can be set with the attributes <varname>minValue</varname>, <varname>maxValue</varname>, and <varname>step</varname>. 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; these items can be turned off by setting <code>showBoundaryValues="false"</code> and <code>showToolTip="false"</code> respectively. - </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. - </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. + </para> + </section> + + <section id="sect-Component_Reference-richinputNumberSlider-Interactivity_options"> + <title>Interactivity options</title> + <para> + The text field can be removed by setting <code>showInput="false"</code>. + </para> + <para> + The properties of the slider can be set with the attributes <varname>minValue</varname>, <varname>maxValue</varname>, and <varname>step</varname>. + </para> + <para> + 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. + </para> + </section> + + <section id="sect-Component_Reference-richinputNumberSlider-Reference_data"> + <title>Reference data</title> + <itemizedlist> + <listitem> + <para> + <parameter>component-type</parameter>: <classname>org.richfaces.inputNumberSlider</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlInputNumberSlider</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>component-family</parameter>: <classname>org.richfaces.inputNumberSlider</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>renderer-type</parameter>: <classname>org.richfaces.renderkit.inputNumberSliderRenderer</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.inputNumberSliderTag</classname> + </para> + </listitem> + </itemizedlist> + </section> </section> <!-- TODO not in M2 --> Added: branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richinplaceSelect-Defining_list_items_for_richinplaceSelect.xml_sample =================================================================== --- branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richinplaceSelect-Defining_list_items_for_richinplaceSelect.xml_sample (rev 0) +++ branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richinplaceSelect-Defining_list_items_for_richinplaceSelect.xml_sample 2010-08-16 04:06:16 UTC (rev 18647) @@ -0,0 +1,7 @@ +<rich:inplaceSelect value="#{bean.inputValue}" defaultLabel="click to edit" > + <f:selectItems value="#{bean.selectItems}" /> + <f.selectItem itemValue="1" itemLabel="Item 1" /> + <f.selectItem itemValue="2" itemLabel="Item 2" /> + <f.selectItem itemValue="3" itemLabel="Item 3" /> + <f.selectItem itemValue="4" itemLabel="Item 4" /> +</rich:comboBox> Added: branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpanel-Adding_a_header-0.xml_sample =================================================================== --- branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpanel-Adding_a_header-0.xml_sample (rev 0) +++ branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpanel-Adding_a_header-0.xml_sample 2010-08-16 04:06:16 UTC (rev 18647) @@ -0,0 +1,3 @@ +<rich:panel header="This is the panel header"> + <h:outputText value="This is the panel content" /> +</rich:panel> Added: branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpanel-Adding_a_header-1.xml_sample =================================================================== --- branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpanel-Adding_a_header-1.xml_sample (rev 0) +++ branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richpanel-Adding_a_header-1.xml_sample 2010-08-16 04:06:16 UTC (rev 18647) @@ -0,0 +1,6 @@ +<rich:panel> + <f:facet name="header"> + <h:outputText value="This is the panel header"> + </f:facet> + <h:outputText value="This is the panel content" /> +</rich:panel> Added: branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richtogglePanel-State_order_example.xml_sample =================================================================== --- branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richtogglePanel-State_order_example.xml_sample (rev 0) +++ branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richtogglePanel-State_order_example.xml_sample 2010-08-16 04:06:16 UTC (rev 18647) @@ -0,0 +1,12 @@ +<rich:togglePanel id="panel" initialState="panelB" switchType="client" stateOrder="panelA,panelB,panelC"> + <f:facet name="panelA"> + ... + </f:facet> + <f:facet name="panelB"> + ... + </f:facet> + <f:facet name="panelC"> + ... + </f:facet> +</rich:togglePanel> +<rich:toggleControl for="panel" value="Switch"/> Added: branches/development/docs/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richpanel-Adding_a_header.png =================================================================== (Binary files differ) Property changes on: branches/development/docs/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richpanel-Adding_a_header.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: branches/development/docs/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richpanel-richpanel.png =================================================================== (Binary files differ) Property changes on: branches/development/docs/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richpanel-richpanel.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: branches/development/docs/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richpanelBar-richpanelBar.png =================================================================== (Binary files differ) Property changes on: branches/development/docs/Component_Reference/src/main/docbook/en-US/images/figu-Component_Reference-richpanelBar-richpanelBar.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream