[richfaces-svn-commits] JBoss Rich Faces SVN: r1468 - branches/3.0.2/docs/userguide/en/src/main/docbook/included.

Author: vkorluzhenko Date: 2007-07-04 12:24:58 -0400 (Wed, 04 Jul 2007) New Revision: 1468 Modified: branches/3.0.2/docs/userguide/en/src/main/docbook/included/dataFilterSlider.xml branches/3.0.2/docs/userguide/en/src/main/docbook/included/dataTable.xml branches/3.0.2/docs/userguide/en/src/main/docbook/included/datascroller.xml branches/3.0.2/docs/userguide/en/src/main/docbook/included/dragIndicator.xml branches/3.0.2/docs/userguide/en/src/main/docbook/included/dragSupport.xml branches/3.0.2/docs/userguide/en/src/main/docbook/included/dropDownMenu.xml branches/3.0.2/docs/userguide/en/src/main/docbook/included/dropSupport.xml branches/3.0.2/docs/userguide/en/src/main/docbook/included/gmap.xml branches/3.0.2/docs/userguide/en/src/main/docbook/included/inputNumberSlider.xml branches/3.0.2/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.xml branches/3.0.2/docs/userguide/en/src/main/docbook/included/modalPanel.xml branches/3.0.2/docs/userguide/en/src/main/docbook/included/paint2D.xml branches/3.0.2/docs/userguide/en/src/main/docbook/included/panel.xml branches/3.0.2/docs/userguide/en/src/main/docbook/included/panelBar.xml branches/3.0.2/docs/userguide/en/src/main/docbook/included/separator.xml branches/3.0.2/docs/userguide/en/src/main/docbook/included/simpleTogglePanel.xml branches/3.0.2/docs/userguide/en/src/main/docbook/included/spacer.xml branches/3.0.2/docs/userguide/en/src/main/docbook/included/suggestionBox.xml branches/3.0.2/docs/userguide/en/src/main/docbook/included/tabPanel.xml branches/3.0.2/docs/userguide/en/src/main/docbook/included/togglePanel.xml branches/3.0.2/docs/userguide/en/src/main/docbook/included/toolBar.xml branches/3.0.2/docs/userguide/en/src/main/docbook/included/tree.xml Log: http://jira.jboss.org/jira/browse/RF-390 http://jira.jboss.org/jira/browse/RF-396 Modified: branches/3.0.2/docs/userguide/en/src/main/docbook/included/dataFilterSlider.xml =================================================================== --- branches/3.0.2/docs/userguide/en/src/main/docbook/included/dataFilterSlider.xml 2007-07-04 16:18:03 UTC (rev 1467) +++ branches/3.0.2/docs/userguide/en/src/main/docbook/included/dataFilterSlider.xml 2007-07-04 16:24:58 UTC (rev 1468) @@ -1,40 +1,40 @@ <?xml version='1.0' encoding='UTF-8'?> <section> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.dataFilterSlider</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmldataFilterSlider</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.dataFilterSlider</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.dataFilterSliderRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.dataFilterSliderTag</entry> - </row> - </tbody> - </tgroup> - </table> - + + <table> + <title>Component identification parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.dataFilterSlider</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmldataFilterSlider</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.dataFilterSlider</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.dataFilterSliderRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.dataFilterSliderTag</entry> + </row> + </tbody> + </tgroup> + </table> + <section> <title>Creating the Component with a Page Tag</title> <para>Here is a simple example as it might be used in a page:</para> @@ -58,10 +58,13 @@ </section> <section> <title>Details of Usage</title> - <para>The <property>dataFilterSlider</property> component is bound to some UIData component using a - <emphasis role="italic"><property>&quot;for&quot;</property></emphasis> attribute and - filters data in this table. </para> - <para><emphasis role="bold">Example:</emphasis></para> + <para>The <property>dataFilterSlider</property> component is bound to some UIData component + using a <emphasis role="italic"> + <property>&quot;for&quot;</property> + </emphasis> attribute and filters data in this table. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> <programlisting role="XML"><![CDATA[... <rich:dataFilterSlider sliderListener="#{mybean.doSlide}" startRange="0" @@ -78,33 +81,46 @@ </h:dataTable> ... ]]></programlisting> -<para>In this example other two attributes are used for filtering:</para> - <itemizedlist> - <listitem> - <emphasis role="italic"><property>&quot;forValRef&quot;</property></emphasis> is a string - which is used in a value attribute of the target UIData component. It&apos;s designed for - resetting the UIData component back to the original list provided by a backing bean. - </listitem> - <listitem> - <emphasis role="italic"><property>&quot;filterBy&quot;</property></emphasis> is a getter of - an object member that is to be compared to a slider value. It&apos;s a value that is used in - results filtering. - </listitem> - </itemizedlist> -<para><emphasis role="italic"><property>&quot;handleValue&quot;</property></emphasis> is an attribute - for keeping the current handler position on the <property>dataFilterSlider</property> component. - Based on the current value, appropriate values obtained from a getter method defined in - <emphasis role="italic"><property>&quot;filterBy&quot;</property></emphasis> are - filtered.</para> -<para>One more important attribute is a -<emphasis role="italic"><property>&quot;storeResults&quot;</property></emphasis> one that allows the -<property>dataFilterSlider</property> component to keep UIData target object in session.</para> -<para>If it&apos;s necessary the component submits a form on event of a handler state changing, use -the <emphasis role="italic"><property>&quot;onSlide&quot;</property></emphasis> attribute -(<emphasis role="italic"><property>&quot;onChange&quot;</property></emphasis> is its alias). When -the attribute definition = true, submission on this event is defined.</para> + <para>In this example other two attributes are used for filtering:</para> + <itemizedlist> + <listitem> + <emphasis role="italic"> + <property>&quot;forValRef&quot;</property> + </emphasis> is a string which is used in a value attribute of the target UIData component. + It&apos;s designed for resetting the UIData component back to the original list provided + by a backing bean. </listitem> + <listitem> + <emphasis role="italic"> + <property>&quot;filterBy&quot;</property> + </emphasis> is a getter of an object member that is to be compared to a slider value. + It&apos;s a value that is used in results filtering. </listitem> + </itemizedlist> + <para><emphasis role="italic"> + <property>&quot;handleValue&quot;</property> + </emphasis> is an attribute for keeping the current handler position on the + <property>dataFilterSlider</property> component. Based on the current value, appropriate + values obtained from a getter method defined in <emphasis role="italic"> + <property>&quot;filterBy&quot;</property> + </emphasis> are filtered.</para> + <para>One more important attribute is a <emphasis role="italic"> + <property>&quot;storeResults&quot;</property> + </emphasis> one that allows the <property>dataFilterSlider</property> component to keep UIData + target object in session.</para> + <para>If it&apos;s necessary the component submits a form on event of a handler state + changing, use the <emphasis role="italic"> + <property>&quot;onSlide&quot;</property> + </emphasis> attribute (<emphasis role="italic"> + <property>&quot;onChange&quot;</property> + </emphasis> is its alias). When the attribute definition = true, submission on this event is + defined.</para> + </section> + <section> + <title>Relevant resources links</title> <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataFilterS... you can see the example of <emphasis role="bold">&lt;rich:dataFilterSlider&gt;</emphasis> usage and sources for the given example. + <ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataFilterS... + >Here</ulink> you can see the example of <emphasis role="bold" + >&lt;rich:dataFilterSlider&gt;</emphasis> usage and sources for the given example. </para> </section> -</section> \ No newline at end of file +</section> Modified: branches/3.0.2/docs/userguide/en/src/main/docbook/included/dataTable.xml =================================================================== --- branches/3.0.2/docs/userguide/en/src/main/docbook/included/dataTable.xml 2007-07-04 16:18:03 UTC (rev 1467) +++ branches/3.0.2/docs/userguide/en/src/main/docbook/included/dataTable.xml 2007-07-04 16:24:58 UTC (rev 1468) @@ -1,47 +1,47 @@ <?xml version='1.0' encoding='UTF-8'?> <section> -<sectioninfo> -<keywordset> -<keyword>table</keyword> -<keyword>rich:dataTable</keyword> -<keyword>HtmlDataTable</keyword> -</keywordset> -</sectioninfo> + <sectioninfo> + <keywordset> + <keyword>table</keyword> + <keyword>rich:dataTable</keyword> + <keyword>HtmlDataTable</keyword> + </keywordset> + </sectioninfo> - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.DataTable</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlDataTable</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.DataTable</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.DataTableRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.DataTableTag</entry> - </row> - </tbody> - </tgroup> - </table> + <table> + <title>Component identification parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.DataTable</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlDataTable</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.DataTable</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.DataTableRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.DataTableTag</entry> + </row> + </tbody> + </tgroup> + </table> <section> <title>Creating the Component with a Page Tag</title> @@ -63,18 +63,25 @@ </section> <section> <title>Details of Usage</title> - <para>The <property>table</property> component is very similar to the custom JSF dataTable one, except for the common - peculiarities of any rich component:</para> - <itemizedlist> - <listitem>Skin support. The <property>table</property> completely meets a three-class principle of Rich Faces skinnability</listitem> - <listitem>Support of AJAX updates for a limited set of strings</listitem> - </itemizedlist> - <para>Skins support is described in the <link linkend="ArchitectureOverview">corresponding section</link>. - AJAX support is possible because the component is created basing on the <emphasis role="bold"><property>&lt;a4j:repeat&gt;</property></emphasis> component and - as a result the component has its possibilities of AJAX updates for a limited set of strings. - The component is implemented with the <emphasis role="italic"><property>&quot;ajaxKeys&quot;</property></emphasis> attribute for a <property>table</property> and in contrast to - the <emphasis role="bold"><property>&lt;a4j:repeat&gt;</property></emphasis> outputs the standard HTML structure for table rendering.</para> - <programlisting role="XML"><![CDATA[... + <para>The <property>table</property> component is very similar to the custom JSF dataTable one, + except for the common peculiarities of any rich component:</para> + <itemizedlist> + <listitem>Skin support. The <property>table</property> completely meets a three-class + principle of Rich Faces skinnability</listitem> + <listitem>Support of AJAX updates for a limited set of strings</listitem> + </itemizedlist> + <para>Skins support is described in the <link linkend="ArchitectureOverview">corresponding + section</link>. AJAX support is possible because the component is created basing on the + <emphasis role="bold"> + <property>&lt;a4j:repeat&gt;</property> + </emphasis> component and as a result the component has its possibilities of AJAX updates for + a limited set of strings. The component is implemented with the <emphasis role="italic"> + <property>&quot;ajaxKeys&quot;</property> + </emphasis> attribute for a <property>table</property> and in contrast to the <emphasis + role="bold"> + <property>&lt;a4j:repeat&gt;</property> + </emphasis> outputs the standard HTML structure for table rendering.</para> + <programlisting role="XML"><![CDATA[... <rich:dataTable value="#{capitalsBean.capitals}" var="capitals" ajaxKeys="#{bean.ajaxSet}" binding="#{bean.table}" id="table"> <!--Set of columns and header/footer facets--> @@ -83,47 +90,47 @@ <a4j:commandButton action="#{bean.someAction}" reRender="table"/> ... ]]></programlisting> -<para>For such a table during <property>someAction</property> method processing called with AJAX request when the key is pressed it&apos;s possible to fill in - lot&apos;s of ajaxKeys with strings indices that are to be updated. A resulting output on the client - contains only required strings and they are updated in the tree, even when update is specified for - the whole table.</para> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.j... you can see the example of <emphasis role="bold">&lt;rich:dataTable&gt;</emphasis> usage and sources for the given example. - </para> + <para>For such a table during <property>someAction</property> method processing called with AJAX + request when the key is pressed it&apos;s possible to fill in lot&apos;s of ajaxKeys + with strings indices that are to be updated. A resulting output on the client contains only + required strings and they are updated in the tree, even when update is specified for the whole + table.</para> </section> <section> - <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis -role="italic"><property>style class redefinition method</property></emphasis>.</para> - <para>Default style classes are mapped on <emphasis -role="italic"><property>skin parameters</property>.</emphasis></para> - <para>To redefine appearance of all dataTables at once, there are two ways:</para> - <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis -role="italic"><property>style classes</property></emphasis> used by the dataTable to your page style sheets</listitem> - </itemizedlist> - </section> - <section> - <title>Definition custom Style Classes:</title> - <figure> -<title>DataTable class names</title> -<mediaobject> + <title>Look-and-Feel Customization</title> + <para>For skinnability implementation the components use a <emphasis role="italic"> + <property>style class redefinition method</property> + </emphasis>.</para> + <para>Default style classes are mapped on <emphasis role="italic"><property>skin + parameters</property>.</emphasis></para> + <para>To redefine appearance of all dataTables at once, there are two ways:</para> + <itemizedlist> + <listitem>to redefine corresponding skin parameters</listitem> + <listitem>to add <emphasis role="italic"> + <property>style classes</property> + </emphasis> used by the dataTable to your page style sheets</listitem> + </itemizedlist> + </section> + <section> + <title>Definition custom Style Classes:</title> + <figure> + <title>DataTable class names</title> + <mediaobject> <imageobject> - <imagedata fileref="images/dataTable2.gif"/> + <imagedata fileref="images/dataTable2.gif"/> </imageobject> - </mediaobject> - </figure> + </mediaobject> + </figure> <para>On the screenshot there are class names defining the marked elements.</para> - <title></title> + <title/> <table> - <title>Component skin classes</title> + <title>Component skin classes</title> <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>An element defined with a class</entry> - </row> + <thead> + <row> + <entry>Class name</entry> + <entry>An element defined with a class</entry> + </row> </thead> <tbody> <row> @@ -135,55 +142,60 @@ <entry>Applied to facet=&quot;caption&quot;</entry> </row> <row> - <entry>rich-table-header</entry> - <entry>Applied to a whole header &quot;header&quot;</entry> + <entry>rich-table-header</entry> + <entry>Applied to a whole header &quot;header&quot;</entry> </row> <row> - <entry>rich-table-headercell</entry> - <entry>Applied to a particular cell of a header &quot;header&quot;</entry> + <entry>rich-table-headercell</entry> + <entry>Applied to a particular cell of a header &quot;header&quot;</entry> </row> <row> - <entry>rich-table-subheader</entry> - <entry>Applied to the whole subheader &quot;header&quot;</entry> + <entry>rich-table-subheader</entry> + <entry>Applied to the whole subheader &quot;header&quot;</entry> </row> <row> - <entry>rich-table-subheadercell</entry> - <entry>Applied to a particular cell of subheader &quot;header&quot;</entry> + <entry>rich-table-subheadercell</entry> + <entry>Applied to a particular cell of subheader &quot;header&quot;</entry> </row> <row> - <entry>rich-table-cell</entry> - <entry> Applied to a particular table cell</entry> + <entry>rich-table-cell</entry> + <entry> Applied to a particular table cell</entry> </row> <row> - <entry>rich-table-row</entry> - <entry>Applied to the whole table row</entry> + <entry>rich-table-row</entry> + <entry>Applied to the whole table row</entry> </row> <row> - <entry>rich-table-subfooter</entry> - <entry>Applied to the whole subheader &quot;footer&quot;</entry> + <entry>rich-table-subfooter</entry> + <entry>Applied to the whole subheader &quot;footer&quot;</entry> </row> <row> - <entry>rich-table-subfootercell</entry> - <entry>Applied to a particular subheader &quot;footer&quot;</entry> + <entry>rich-table-subfootercell</entry> + <entry>Applied to a particular subheader &quot;footer&quot;</entry> </row> <row> - <entry>rich-table-footer</entry> - <entry>Applied to the whole &quot;footer&quot;</entry> + <entry>rich-table-footer</entry> + <entry>Applied to the whole &quot;footer&quot;</entry> </row> <row> - <entry>rich-table- footercell</entry> - <entry>Applied to the specific of &quot;footer&quot;</entry> + <entry>rich-table- footercell</entry> + <entry>Applied to the specific of &quot;footer&quot;</entry> </row> - </tbody> + </tbody> </tgroup> - </table> - <para>To redefine an appearance of all <property>tables</property> on a page, redefine the corresponding class in the - CSS file used with the page.</para> - <para>To redefine a style of a particular page, use <emphasis role="italic"><property>&quot;component class&quot;</property></emphasis> attributes which list is the same - as the <property>dataTable</property> one and is known to you.</para> - </section> - </section> - - - - \ No newline at end of file + </table> + <para>To redefine an appearance of all <property>tables</property> on a page, redefine the + corresponding class in the CSS file used with the page.</para> + <para>To redefine a style of a particular page, use <emphasis role="italic"> + <property>&quot;component class&quot;</property> + </emphasis> attributes which list is the same as the <property>dataTable</property> one and is + known to you.</para> + </section> + <section> + <title>Relevant resources links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.j... + >Here</ulink> you can see the example of <emphasis role="bold" + >&lt;rich:dataTable&gt;</emphasis> usage and sources for the given example. </para> + </section> +</section> Modified: branches/3.0.2/docs/userguide/en/src/main/docbook/included/datascroller.xml =================================================================== --- branches/3.0.2/docs/userguide/en/src/main/docbook/included/datascroller.xml 2007-07-04 16:18:03 UTC (rev 1467) +++ branches/3.0.2/docs/userguide/en/src/main/docbook/included/datascroller.xml 2007-07-04 16:24:58 UTC (rev 1468) @@ -1,48 +1,48 @@ <?xml version='1.0' encoding='UTF-8'?> <section> -<sectioninfo> -<keywordset> -<keyword>scroller</keyword> -<keyword>rich:Datascroller</keyword> -<keyword>HtmlDatascroller</keyword> -<keyword>tables</keyword> -</keywordset> -</sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.Datascroller</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlDatascroller</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.Datascroller</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.DatascrollerRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.DatascrollerTag</entry> - </row> - </tbody> - </tgroup> - </table> - + <sectioninfo> + <keywordset> + <keyword>scroller</keyword> + <keyword>rich:Datascroller</keyword> + <keyword>HtmlDatascroller</keyword> + <keyword>tables</keyword> + </keywordset> + </sectioninfo> + + <table> + <title>Component identification parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.Datascroller</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlDatascroller</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.Datascroller</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.DatascrollerRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.DatascrollerTag</entry> + </row> + </tbody> + </tgroup> + </table> + <section> <title>Creating the Component with a Page Tag</title> <para>Here is a simple example as it might be used in a page:</para> @@ -65,23 +65,31 @@ </section> <section> <title>Details of Usage</title> - <para>The <emphasis role="bold"><property>&lt;rich:Datascroller&gt;</property></emphasis> component provides table scrolling functionality the same as - tomahawk scroller but with AJAX requests usage.</para> + <para>The <emphasis role="bold"> + <property>&lt;rich:Datascroller&gt;</property> + </emphasis> component provides table scrolling functionality the same as tomahawk scroller but + with AJAX requests usage.</para> <para>The component should be placed into footer of the parent table or be bound to it with the - <emphasis role="italic"><property>&quot;for&quot;</property></emphasis> attribute.</para> - <para>The table should also have the defined <emphasis role="italic"><property>&quot;rows&quot;</property></emphasis> attribute limiting the quantity of inputted - table rows.</para> - <para>The scroller could limit the maximum quantity of rendered links on the table pages with the - help of the <emphasis role="italic"><property>&quot;maxPages&quot;</property></emphasis> attribute.</para> - <para>Component provides two controllers groups for switching:</para> - <itemizedlist> - <listitem>Page numbers for switching onto a particular page</listitem> - <listitem>The controls of fast switching: &quot;first&quot;, &quot;last&quot;, &quot;next&quot;, - &quot;previous&quot;, &quot;fastforward&quot;, &quot;fastrewind&quot;</listitem> - </itemizedlist> - <para>The controls of fast switching are created adding the facets component with the - corresponding name:</para> - <programlisting role="XML"><![CDATA[ ... + <emphasis role="italic"> + <property>&quot;for&quot;</property> + </emphasis> attribute.</para> + <para>The table should also have the defined <emphasis role="italic"> + <property>&quot;rows&quot;</property> + </emphasis> attribute limiting the quantity of inputted table rows.</para> + <para>The scroller could limit the maximum quantity of rendered links on the table pages with + the help of the <emphasis role="italic"> + <property>&quot;maxPages&quot;</property> + </emphasis> attribute.</para> + <para>Component provides two controllers groups for switching:</para> + <itemizedlist> + <listitem>Page numbers for switching onto a particular page</listitem> + <listitem>The controls of fast switching: &quot;first&quot;, &quot;last&quot;, + &quot;next&quot;, &quot;previous&quot;, &quot;fastforward&quot;, + &quot;fastrewind&quot;</listitem> + </itemizedlist> + <para>The controls of fast switching are created adding the facets component with the + corresponding name:</para> + <programlisting role="XML"><![CDATA[ ... <rich:datascroller for="table" maxPages="10"> <f:facet name="first"> <h:outputText value="First"/> @@ -89,39 +97,43 @@ <f:facet name="last"> <h:outputText value="Last"/> </f:facet> - </rich:Datascroller> + </rich:datascroller> ... ]]></programlisting> - <para> - There are also facets used to create the disabled states: &quot;first_disabled&quot;, &quot;last_disabled&quot;, &quot;next_disabled&quot;, &quot;previous_disabled&quot;, &quot;fastforward_disabled&quot;, &quot;fastrewind_disabled&quot;. - </para> -<figure> - <title>Datascroller controls</title> - <mediaobject> + <para> There are also facets used to create the disabled states: + &quot;first_disabled&quot;, &quot;last_disabled&quot;, + &quot;next_disabled&quot;, &quot;previous_disabled&quot;, + &quot;fastforward_disabled&quot;, &quot;fastrewind_disabled&quot;. </para> + <figure> + <title>Datascroller controls</title> + <mediaobject> <imageobject> - <imagedata fileref="images/datascroller2.gif"/> + <imagedata fileref="images/datascroller2.gif"/> </imageobject> - </mediaobject> + </mediaobject> </figure> <para>The screenshot shows one controller from each group.</para> - <para>For the <property>&quot;fastforward&quot;</property>/<property>&quot;rewind&quot;</property> controls customization the additional <emphasis role="italic"><property>&quot;fastStep&quot;</property></emphasis> attribute is used. - The attribute indicates pages quantity to switch onto when fast scrolling is used. </para> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTableSc... you can see the example of <emphasis role="bold">&lt;rich:dataScroller&gt;</emphasis> usage and sources for the given example. - </para> - </section> + <para>For the + <property>&quot;fastforward&quot;</property>/<property>&quot;rewind&quot;</property> + controls customization the additional <emphasis role="italic"> + <property>&quot;fastStep&quot;</property> + </emphasis> attribute is used. The attribute indicates pages quantity to switch onto when fast + scrolling is used. </para> + + </section> <section> <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis -role="italic"><property>style class redefinition method</property>.</emphasis></para> - <para>Default style classes are mapped on <emphasis -role="italic"><property>skin parameters</property>.</emphasis></para> - <para>To redefine appearance of all dataScrollers at once, there are two ways:</para> - <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis -role="italic"><property>style classes</property></emphasis> used by the dataScroller to your page style sheets</listitem> - </itemizedlist> + <para>For skinnability implementation the components use a <emphasis role="italic" + ><property>style class redefinition method</property>.</emphasis></para> + <para>Default style classes are mapped on <emphasis role="italic"><property>skin + parameters</property>.</emphasis></para> + <para>To redefine appearance of all dataScrollers at once, there are two ways:</para> + <itemizedlist> + <listitem>to redefine corresponding skin parameters</listitem> + <listitem>to add <emphasis role="italic"> + <property>style classes</property> + </emphasis> used by the dataScroller to your page style sheets</listitem> + </itemizedlist> </section> <section> <title>Skin parameters redefinition</title> @@ -146,7 +158,7 @@ </tbody> </tgroup> </table> - + <table> <title>Skin Parameters for Button element</title> <tgroup cols="2"> @@ -176,7 +188,7 @@ </tbody> </tgroup> </table> - + <table> <title>Skin Parameters for Active Button element</title> <tgroup cols="2"> @@ -206,7 +218,7 @@ </tbody> </tgroup> </table> - + <table> <title>Skin Parameters for Inactive Button element</title> <tgroup cols="2"> @@ -236,18 +248,18 @@ </tbody> </tgroup> </table> - + <figure> - <title>Datascroller style classes</title> - <mediaobject> + <title>Datascroller style classes</title> + <mediaobject> <imageobject> <imagedata fileref="images/datascroller3.gif"/> </imageobject> </mediaobject> </figure> - + <para>On the screenshot, there are classes names that define specified elements.</para> - + <table> <title>Component skin class</title> <tgroup cols="2"> @@ -267,7 +279,7 @@ <entry>Customization class for button</entry> </row> </tbody> - + </tgroup> </table> <table> @@ -292,8 +304,16 @@ </tgroup> </table> <para>To redefine an appearance of all scrollers on a page, just redefine one of this classes</para> - <para>And to redefine the appearance of the particular scroller, one may use corresponding class attributes on the component.</para> + <para>And to redefine the appearance of the particular scroller, one may use corresponding class + attributes on the component.</para> </section> - - </section> - \ No newline at end of file + <section> + <title>Relevant resources links</title> + <para> + <ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTableSc... + >Here</ulink> you can see the example of <emphasis role="bold" + >&lt;rich:dataScroller&gt;</emphasis> usage and sources for the given example. + </para> + </section> +</section> Modified: branches/3.0.2/docs/userguide/en/src/main/docbook/included/dragIndicator.xml =================================================================== --- branches/3.0.2/docs/userguide/en/src/main/docbook/included/dragIndicator.xml 2007-07-04 16:18:03 UTC (rev 1467) +++ branches/3.0.2/docs/userguide/en/src/main/docbook/included/dragIndicator.xml 2007-07-04 16:24:58 UTC (rev 1468) @@ -1,48 +1,48 @@ <?xml version='1.0' encoding='UTF-8'?> <section> -<sectioninfo> -<keywordset> -<keyword>dragged element</keyword> -<keyword>rich:dragIndicator</keyword> -<keyword>HtmlDragIndicator</keyword> -<keyword>dndParam</keyword> -</keywordset> -</sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.Draggable</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlDragIndicator</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.DragIndicator</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.DragIndicatorRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.DragIndicatorTag</entry> - </row> - </tbody> - </tgroup> - </table> - + <sectioninfo> + <keywordset> + <keyword>dragged element</keyword> + <keyword>rich:dragIndicator</keyword> + <keyword>HtmlDragIndicator</keyword> + <keyword>dndParam</keyword> + </keywordset> + </sectioninfo> + + <table> + <title>Component identification parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.Draggable</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlDragIndicator</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.DragIndicator</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.DragIndicatorRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.DragIndicatorTag</entry> + </row> + </tbody> + </tgroup> + </table> + <section> <title>Creating the Component with a Page Tag</title> <para>Here is a simple example as it might be used in a page:</para> @@ -60,8 +60,8 @@ ]]></programlisting> </section> <section> -<title>Creating the Component Dynamically Using Java</title> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlDragIndicator; + <title>Creating the Component Dynamically Using Java</title> + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlDragIndicator; ... HtmlDragIndicator myDragIndicator = new HtmlDragIndicator(); ... @@ -69,59 +69,57 @@ </section> <section> <title>Details of Usage</title> - <para>The component seems to be combined of two elements: an icon on the left and informational - part on the right. The definition and usage is described further for each element.</para> - <section> - <title>Indicator informational part</title> - <para>Inside the component, the definition should present for two facets with single and multiple - names providing templates for rendering during dragging one or several elements. The facets - define the right side of the <property>indicator</property> element.</para> - <para>The following elements on a page are obtained for a code defined in the example:</para> - <figure> - <title>DragIndicator informational part</title> - <mediaobject> - <imageobject> + <para>The component seems to be combined of two elements: an icon on the left and informational + part on the right. The definition and usage is described further for each element.</para> + <section> + <title>Indicator informational part</title> + <para>Inside the component, the definition should present for two facets with single and + multiple names providing templates for rendering during dragging one or several elements. + The facets define the right side of the <property>indicator</property> element.</para> + <para>The following elements on a page are obtained for a code defined in the example:</para> + <figure> + <title>DragIndicator informational part</title> + <mediaobject> + <imageobject> <imagedata fileref="images/dragIndicator2.gif"/> - </imageobject> - </mediaobject> - </figure> -<para>Hence, defining dndParam corresponding to drag areas, information transmitted into an - <property>indicator</property> - is defined.</para> - </section> - <section> - <title>Indicator icon element</title> - <para>Inside the component there also could be definitions for three faces with - <emphasis role="italic"><property>&quot;accept&quot;</property>,</emphasis> - <emphasis role="italic"><property>&quot;reject&quot;</property></emphasis> and - <emphasis role="italic"><property>&quot;default&quot;</property></emphasis> names that specify icons on the left side according to states when an - <property>indicator</property> is above:</para> -<itemizedlist> - <listitem> - a drop zone that processes the facets written in the - <emphasis role="italic"><property>&quot;acceptedTypes&quot;</property></emphasis> attribute - of this drop zone - </listitem> - <listitem> - a drop zone that doesn&apos;t process the facets - </listitem> - <listitem> - not above any drop zone - </listitem> + </imageobject> + </mediaobject> + </figure> + <para>Hence, defining dndParam corresponding to drag areas, information transmitted into an + <property>indicator</property> is defined.</para> + </section> + <section> + <title>Indicator icon element</title> + <para>Inside the component there also could be definitions for three faces with <emphasis + role="italic"><property>&quot;accept&quot;</property>,</emphasis> + <emphasis role="italic"> + <property>&quot;reject&quot;</property> + </emphasis> and <emphasis role="italic"> + <property>&quot;default&quot;</property> + </emphasis> names that specify icons on the left side according to states when an + <property>indicator</property> is above:</para> + <itemizedlist> + <listitem> a drop zone that processes the facets written in the <emphasis role="italic"> + <property>&quot;acceptedTypes&quot;</property> + </emphasis> attribute of this drop zone </listitem> + <listitem> a drop zone that doesn&apos;t process the facets </listitem> + <listitem> not above any drop zone </listitem> </itemizedlist> - <para>Here is an example for an accept facet:</para> - <programlisting role="XML"><![CDATA[... + <para>Here is an example for an accept facet:</para> + <programlisting role="XML"><![CDATA[... <f:dndParam name="accept"> <h:graphicImage value="./images/1.gif"/> </f:dndParam> ... ]]></programlisting> -<para>Each of these three facets have a default structure for icons rendering on the left side.</para> -<para>When it&apos;s necessary to define individual icons for dragged above elements of a <property>drop zone</property> from each - particular drag area, use a <property>drop zone</property> - <emphasis role="italic"><property>&quot;typeMapping&quot;</property></emphasis> attribute for the - corresponding icons.</para> -<programlisting role="XML"><![CDATA[... + <para>Each of these three facets have a default structure for icons rendering on the left + side.</para> + <para>When it&apos;s necessary to define individual icons for dragged above elements of a + <property>drop zone</property> from each particular drag area, use a <property>drop zone</property> + <emphasis role="italic"> + <property>&quot;typeMapping&quot;</property> + </emphasis> attribute for the corresponding icons.</para> + <programlisting role="XML"><![CDATA[... <rich:dropSupport acceptedTypes="[iconsDragged, textDragged]" typeMapping="{iconsDragged: DropIcon}"> <dnd:dndParam name="DropIcon"> <h:graphicImage value="/images/drop-icon.png"/> @@ -129,13 +127,22 @@ <rich:dropSupport/> ... ]]></programlisting> -<para>Here, drag areas that are to be processed with this drop zone are of iconsDragged and -textDragged type. An icon is redefined for iconsDragged with the help of the drop zone - <emphasis role="italic"><property>&quot;typeMapping&quot;</property></emphasis> attribute - defined with the <emphasis role="bold"><property>&lt;rich:dndParam&gt;</property></emphasis>component.</para> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport... you can see the example of <emphasis role="bold">&lt;rich:dragIndicator&gt;</emphasis> usage and sources for the given example. - </para> - </section> + <para>Here, drag areas that are to be processed with this drop zone are of iconsDragged and + textDragged type. An icon is redefined for iconsDragged with the help of the drop zone + <emphasis role="italic"> + <property>&quot;typeMapping&quot;</property> + </emphasis> attribute defined with the <emphasis role="bold"> + <property>&lt;rich:dndParam&gt;</property> + </emphasis>component.</para> </section> -</section> \ No newline at end of file + </section> + <section> + <title>Relevant resources links</title> + <para> + <ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport... + >Here</ulink> you can see the example of <emphasis role="bold" + >&lt;rich:dragIndicator&gt;</emphasis> usage and sources for the given example. + </para> + </section> +</section> Modified: branches/3.0.2/docs/userguide/en/src/main/docbook/included/dragSupport.xml =================================================================== --- branches/3.0.2/docs/userguide/en/src/main/docbook/included/dragSupport.xml 2007-07-04 16:18:03 UTC (rev 1467) +++ branches/3.0.2/docs/userguide/en/src/main/docbook/included/dragSupport.xml 2007-07-04 16:24:58 UTC (rev 1468) @@ -8,54 +8,54 @@ </keywordset> </sectioninfo> - - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> + <table> + <title>Component identification parameters</title> - <entry>Value</entry> - </row> - </thead> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> - <tbody> - <row> - <entry>component-type</entry> + <entry>Value</entry> + </row> + </thead> - <entry>org.richfaces.DragSupport</entry> - </row> + <tbody> + <row> + <entry>component-type</entry> - <row> - <entry>component-class</entry> + <entry>org.richfaces.DragSupport</entry> + </row> - <entry>org.richfaces.component.html.DragSupport</entry> - </row> + <row> + <entry>component-class</entry> - <row> - <entry>component-family</entry> + <entry>org.richfaces.component.html.DragSupport</entry> + </row> - <entry>org.richfaces.DragSupport</entry> - </row> + <row> + <entry>component-family</entry> - <row> - <entry>renderer-type</entry> + <entry>org.richfaces.DragSupport</entry> + </row> - <entry>org.richfaces.DragSupportRenderer</entry> - </row> + <row> + <entry>renderer-type</entry> - <row> - <entry>tag-class</entry> + <entry>org.richfaces.DragSupportRenderer</entry> + </row> - <entry>org.richfaces.taglib.DragSupportTag</entry> - </row> - </tbody> - </tgroup> - </table> - + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.DragSupportTag</entry> + </row> + </tbody> + </tgroup> + </table> + + <section> <title>Creating the Component with a Page Tag</title> @@ -83,14 +83,12 @@ <section> <title>Details of Usage</title> - <para>The <property>dragSupport</property> tag inside a component - completely specifies the events and JavaScript required to use the - component and it's children for dragging as part of a drag-and-drop - operation. In order to work, though, <property>dragSupport</property> must - be placed inside a wrapper component that outputs child components and - that has the right events defined on it. Thus, this example won't work, - because the <property>h:column</property> tag doesn't provide the - necessary properties for redefining events on the client:</para> + <para>The <property>dragSupport</property> tag inside a component completely specifies the + events and JavaScript required to use the component and it's children for dragging as part of + a drag-and-drop operation. In order to work, though, <property>dragSupport</property> must be + placed inside a wrapper component that outputs child components and that has the right events + defined on it. Thus, this example won't work, because the <property>h:column</property> tag + doesn't provide the necessary properties for redefining events on the client:</para> <programlisting role="XML">... &lt;h:column&gt; @@ -102,9 +100,8 @@ ... </programlisting> - <para>However, using <property>a4j:outputPanel</property> as a wrapper - inside <property>h:column</property>, the following code could be used - successfully:</para> + <para>However, using <property>a4j:outputPanel</property> as a wrapper inside + <property>h:column</property>, the following code could be used successfully:</para> <programlisting role="XML">... &lt;h:column&gt; @@ -120,11 +117,10 @@ <para>This code makes all rows of this column draggable.</para> - <para>One of the main attributes for <property>dragSupport</property> is - <emphasis role="italic"><property>"dragType"</property>,</emphasis> which - associates a name with the drag zone. Only drop zones with this name as an - acceptable type can be used in drag-and-drop operations. Here is an - example:</para> + <para>One of the main attributes for <property>dragSupport</property> is <emphasis role="italic" + ><property>"dragType"</property>,</emphasis> which associates a name with the drag zone. + Only drop zones with this name as an acceptable type can be used in drag-and-drop operations. + Here is an example:</para> <programlisting role="XML">... &lt;h:panelGrid id="drag1"&gt; @@ -144,33 +140,27 @@ ... </programlisting> - <para>In this example, the <property>drop1</property> panel grid is a drop - zone that invokes drag-and-drop for drops of items from the first - <property>drag1</property> panel grid, but not the second - <property>drag2</property> panel grid. In the section about - <property>dropSupport</property>, you will find an example that shows more - detailed information about moving data between tables with drag and - drop.</para> + <para>In this example, the <property>drop1</property> panel grid is a drop zone that invokes + drag-and-drop for drops of items from the first <property>drag1</property> panel grid, but not + the second <property>drag2</property> panel grid. In the section about + <property>dropSupport</property>, you will find an example that shows more detailed + information about moving data between tables with drag and drop.</para> - <para>The <property>dragSupport</property> component also has a <emphasis - role="italic"> + <para>The <property>dragSupport</property> component also has a <emphasis role="italic"> <property>"value"</property> - </emphasis> attribute for passing data into the processing after a drop - event.</para> + </emphasis> attribute for passing data into the processing after a drop event.</para> <para>One more important attribute for <emphasis role="bold"> <property>&lt;rich:dragSupport&gt;</property> </emphasis> is the <emphasis role="italic"> <property>"dragIndicator"</property> - </emphasis> attribute that point to the component id of the <emphasis - role="bold"> + </emphasis> attribute that point to the component id of the <emphasis role="bold"> <property>&lt;rich:dragIndicator&gt;</property> - </emphasis> component to be used for dragged items from this drag zone. - If it isn't defined, a default indicator for drag operations is - used.</para> + </emphasis> component to be used for dragged items from this drag zone. If it isn't defined, a + default indicator for drag operations is used.</para> - <para>Finally, the component has the following extra attributes for event - processing on the client:</para> + <para>Finally, the component has the following extra attributes for event processing on the + client:</para> <itemizedlist> <listitem>ondragenter</listitem> @@ -178,11 +168,8 @@ <listitem>ondragexit</listitem> </itemizedlist> - <para>Developers can use their own custom JavaScript functions to handle - these events.</para> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport... you can see the example of <emphasis role="bold">&lt;rich:dragSupport&gt;</emphasis> usage and sources for the given example. - </para> + <para>Developers can use their own custom JavaScript functions to handle these events.</para> + </section> <section> @@ -190,4 +177,12 @@ <para>The component doesn&apos;t have its own representation.</para> </section> -</section> \ No newline at end of file + <section> + <title>Relevant resources links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport... + >Here</ulink> you can see the example of <emphasis role="bold" + >&lt;rich:dragSupport&gt;</emphasis> usage and sources for the given example. + </para> + </section> +</section> Modified: branches/3.0.2/docs/userguide/en/src/main/docbook/included/dropDownMenu.xml =================================================================== --- branches/3.0.2/docs/userguide/en/src/main/docbook/included/dropDownMenu.xml 2007-07-04 16:18:03 UTC (rev 1467) +++ branches/3.0.2/docs/userguide/en/src/main/docbook/included/dropDownMenu.xml 2007-07-04 16:24:58 UTC (rev 1468) @@ -76,9 +76,8 @@ <section> <title>Details of Usage</title> - <para>All attributes except "value" are optional. The "value" attribute - defines text to be represented. If you can use the "label" facet, you can - even not use the "value" attribute.</para> + <para>All attributes except "value" are optional. The "value" attribute defines text to be + represented. If you can use the "label" facet, you can even not use the "value" attribute.</para> <para>Here is an example:</para> @@ -89,9 +88,8 @@ ... </programlisting> - <para>Use the "event" attribute to define an event for the represented - element that triggers a menu appearance. An example of a menu appearance - on a click can be seen below.</para> + <para>Use the "event" attribute to define an event for the represented element that triggers a + menu appearance. An example of a menu appearance on a click can be seen below.</para> <programlisting role="xml">... &lt;rich:dropDownMenu event="onclick" value="Item1"&gt; @@ -99,8 +97,9 @@ &lt;/rich:dropDownMenu&gt; ...</programlisting> - <para>The <emphasis role="bold"><property>&lt;rich:dropDownMenu&gt;</property></emphasis> "mode" attribute can be set to three - possible parameters:</para> + <para>The <emphasis role="bold"> + <property>&lt;rich:dropDownMenu&gt;</property> + </emphasis> "mode" attribute can be set to three possible parameters:</para> <itemizedlist> <listitem> @@ -108,8 +107,7 @@ </listitem> </itemizedlist> - <para>The standard form submission is performed and the page is completely - refreshed.</para> + <para>The standard form submission is performed and the page is completely refreshed.</para> <itemizedlist> <listitem> @@ -117,8 +115,8 @@ </listitem> </itemizedlist> - <para>An AJAX form submission is performed, and specified elements in the - "reRender" attribute are rerendered.</para> + <para>An AJAX form submission is performed, and specified elements in the "reRender" attribute + are rerendered.</para> <itemizedlist> <listitem> @@ -126,38 +124,34 @@ </listitem> </itemizedlist> - <para>The "action" and "actionListener" item's attributes are ignored. - Menu items don't fire any submits themselves. The behavior is fully - defined by the components nested inside items.</para> + <para>The "action" and "actionListener" item's attributes are ignored. Menu items don't fire any + submits themselves. The behavior is fully defined by the components nested inside items.</para> - <note><title>Note:</title> As the <emphasis role="bold"><property>&lt;rich:dropDownMenu&gt;</property></emphasis> component - doesn't provide its own form, use it between &lt;h:form&gt; and - &lt;/h:form&gt; tags.</note> + <note><title>Note:</title> As the <emphasis role="bold"> + <property>&lt;rich:dropDownMenu&gt;</property> + </emphasis> component doesn't provide its own form, use it between &lt;h:form&gt; and + &lt;/h:form&gt; tags.</note> - <para>The "direction" and "jointPoint" attributes are used for defining - aspects of menu appearance.</para> + <para>The "direction" and "jointPoint" attributes are used for defining aspects of menu + appearance.</para> <para>Possible values for the "direction" attribute are:</para> <itemizedlist> <listitem> - <para>top-left - a menu attached to the top-right corner of the - label</para> + <para>top-left - a menu attached to the top-right corner of the label</para> </listitem> <listitem> - <para>top-right - a menu attached to the top-left corner of the - label</para> + <para>top-right - a menu attached to the top-left corner of the label</para> </listitem> <listitem> - <para>bottom-left - a menu attached to the bottom-right corner of the - label</para> + <para>bottom-left - a menu attached to the bottom-right corner of the label</para> </listitem> <listitem> - <para>bottom-right - a menu attached to the bottom-left corner of the - label</para> + <para>bottom-right - a menu attached to the bottom-left corner of the label</para> </listitem> <listitem> @@ -189,8 +183,7 @@ </listitem> </itemizedlist> - <para>By default, the "direction" and "jointPoint" attributes are set to - "auto".</para> + <para>By default, the "direction" and "jointPoint" attributes are set to "auto".</para> <para>Here is an example:</para> @@ -208,14 +201,13 @@ <mediaobject> <imageobject> - <imagedata fileref="images/dropDownMenu2.png" /> + <imagedata fileref="images/dropDownMenu2.png"/> </imageobject> </mediaobject> </figure> - <para>You can correct an offset of the pop-up list relative to the label - using the following attributes: "horizontalOffset" and - "verticalOffset".</para> + <para>You can correct an offset of the pop-up list relative to the label using the following + attributes: "horizontalOffset" and "verticalOffset".</para> <para>Here is an example:</para> @@ -229,29 +221,24 @@ <para>This is the result:</para> <figure> - <title>Using the "horizontalOffset" and "verticalOffset" - attributes</title> + <title>Using the "horizontalOffset" and "verticalOffset" attributes</title> <mediaobject> <imageobject> - <imagedata fileref="images/dropDownMenu3.png" /> + <imagedata fileref="images/dropDownMenu3.png"/> </imageobject> </mediaobject> </figure> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dropDownMen... you can see the example of <emphasis role="bold">&lt;rich:dropDownMenu&gt;</emphasis> usage and sources for the given example. - </para> + </section> <section> <title>Look-and-Feel Customization</title> - <para>For skinnability implementation, the components use a style class - redefinition method. Default style classes are mapped on skin - parameters.</para> + <para>For skinnability implementation, the components use a style class redefinition method. + Default style classes are mapped on skin parameters.</para> - <para>There are two ways to redefine the appearance of all dropDownMenus - at once:</para> + <para>There are two ways to redefine the appearance of all dropDownMenus at once:</para> <itemizedlist> <listitem> @@ -259,8 +246,7 @@ </listitem> <listitem> - <para>Add to a user's style sheets style classes used by a - dropDownMenu</para> + <para>Add to a user's style sheets style classes used by a dropDownMenu</para> </listitem> </itemizedlist> </section> @@ -396,15 +382,14 @@ <section> <title>Definition of Custom Style Classes</title> - <para>In the screenshot, there are classes names that define the element - label.</para> + <para>In the screenshot, there are classes names that define the element label.</para> <figure> <title>Classes names</title> <mediaobject> <imageobject> - <imagedata fileref="images/dropDownMenu4.png" /> + <imagedata fileref="images/dropDownMenu4.png"/> </imageobject> </mediaobject> </figure> @@ -431,36 +416,34 @@ <row> <entry>Rich-ddmenu-label</entry> - <entry>Defines the class for wrapping div element of a - representation element</entry> + <entry>Defines the class for wrapping div element of a representation element</entry> </row> <row> <entry>Rich-ddmenu-label-select</entry> - <entry>Defines the class for wrapping div element of the selected - representation element</entry> + <entry>Defines the class for wrapping div element of the selected representation + element</entry> </row> <row> <entry>Rich-ddmenu-label-unselect</entry> - <entry>Defines the class for wrapping div element of a - representation element that isn't selected</entry> + <entry>Defines the class for wrapping div element of a representation element that isn't + selected</entry> </row> </tbody> </tgroup> </table> - <para>In the screenshot, there are classes names that define an element - pop-up.</para> + <para>In the screenshot, there are classes names that define an element pop-up.</para> <figure> <title>Classes names</title> <mediaobject> <imageobject> - <imagedata fileref="images/dropDownMenu5.png" /> + <imagedata fileref="images/dropDownMenu5.png"/> </imageobject> </mediaobject> </figure> @@ -493,12 +476,19 @@ </tgroup> </table> - <para>In order to redefine the style for all drop-down menus on a page - using CSS, it's enough to create classes with the same names and define - the necessary properties in them.</para> + <para>In order to redefine the style for all drop-down menus on a page using CSS, it's enough to + create classes with the same names and define the necessary properties in them.</para> - <para>To change the style peculiarities of the particular drop-down menus - define your own style classes in the corresponding dropDownMenu - attributes.</para> + <para>To change the style peculiarities of the particular drop-down menus define your own style + classes in the corresponding dropDownMenu attributes.</para> </section> -</section> \ No newline at end of file + <section> + <title>Relevant resources links</title> + <para> + <ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/dropDownMen... + >Here</ulink> you can see the example of <emphasis role="bold" + >&lt;rich:dropDownMenu&gt;</emphasis> usage and sources for the given example. + </para> + </section> +</section> Modified: branches/3.0.2/docs/userguide/en/src/main/docbook/included/dropSupport.xml =================================================================== --- branches/3.0.2/docs/userguide/en/src/main/docbook/included/dropSupport.xml 2007-07-04 16:18:03 UTC (rev 1467) +++ branches/3.0.2/docs/userguide/en/src/main/docbook/included/dropSupport.xml 2007-07-04 16:24:58 UTC (rev 1468) @@ -59,9 +59,8 @@ <section> <title>Creating the Component with a Page Tag</title> - <para>This simple example shows how to make a panel component a potential - drop target for drag-and-drop operations using "text" elements as the - dragged items.</para> + <para>This simple example shows how to make a panel component a potential drop target for + drag-and-drop operations using "text" elements as the dragged items.</para> <programlisting role="XML">... &lt;rich:panel&gt; @@ -88,15 +87,15 @@ <property>&lt;rich:dropSupport&gt;</property> </emphasis> is <emphasis role="italic"> <property>"acceptedTypes"</property> - </emphasis>. This attribute defines the types of draggable items that - can be dropped onto the designated drop zone.</para> + </emphasis>. This attribute defines the types of draggable items that can be dropped onto the + designated drop zone.</para> <para>The second most important attribute for <emphasis role="bold"> <property>&lt;rich:dropSupport&gt;</property> </emphasis> is <emphasis role="italic"> <property>"typeMapping"</property> - </emphasis>. This attribute maps a specific type among the acceptable - types for draggable items to a specific <emphasis role="bold"> + </emphasis>. This attribute maps a specific type among the acceptable types for draggable + items to a specific <emphasis role="bold"> <property>&lt;rich:dndParam&gt;</property> </emphasis> child element under <emphasis role="bold"> <property>&lt;rich:dropSupport&gt;</property> @@ -111,16 +110,16 @@ </programlisting> <para>In this example, dropping a draggable item of an &quot;iconsDragged&quot; type - will trigger the use a parameter named &quot;DropIcon&quot; in the event processing - after a drop event. (Also, an AJAX request is sent, and the action and - dropListener defined for the component are called.)</para> + will trigger the use a parameter named &quot;DropIcon&quot; in the event processing + after a drop event. (Also, an AJAX request is sent, and the action and dropListener defined + for the component are called.)</para> - <para>Here is an example of moving records between tables. The example - describes all the pieces for drag-and-drop. (To get extra information on - these components, read the sections for these components.)</para> + <para>Here is an example of moving records between tables. The example describes all the pieces + for drag-and-drop. (To get extra information on these components, read the sections for these + components.)</para> - <para>As draggable items, this table contains a list of such items - designated as being of type "text":</para> + <para>As draggable items, this table contains a list of such items designated as being of type + "text":</para> <programlisting role="XML">... &lt;rich:dataTable value="#{capitalsBean.capitals}" var="caps"&gt; @@ -137,8 +136,8 @@ ... </programlisting> - <para>As a drop zone, this panel will accept draggable items of type - "text" and then rerender an element with the ID of "box":</para> + <para>As a drop zone, this panel will accept draggable items of type "text" and then rerender an + element with the ID of "box":</para> <programlisting role="XML">... &lt;rich:panel style="width:100px;height:100px;"&gt; @@ -149,8 +148,8 @@ ... </programlisting> - <para>As a part of the page that can be updated in a partial page update, - this table has an ID of "box":</para> + <para>As a part of the page that can be updated in a partial page update, this table has an ID + of "box":</para> <programlisting role="XML">... &lt;rich:dataTable value="#{capitalsBean.capitals2}" var="cap2" id="box"&gt; @@ -161,8 +160,7 @@ &lt;/rich:dataTable&gt; ...</programlisting> - <para>And finally, as a listener, this listener will implement the dropped - element:</para> + <para>And finally, as a listener, this listener will implement the dropped element:</para> <programlisting role="JAVA">... public void addCapital2(DropEvent event) { @@ -174,8 +172,7 @@ ... </programlisting> - <para>Here is the result after a few drops of items from the first - table:</para> + <para>Here is the result after a few drops of items from the first table:</para> <figure> <title>Results of drop actions</title> @@ -187,24 +184,22 @@ </mediaobject> </figure> - <para>In this example, items are dragged element-by-element from the - rendered list in the first table and dropped on a panel in the middle. - After each drop, a drop event is generated and a common AJAX request is - performed that renders results in the third table.</para> + <para>In this example, items are dragged element-by-element from the rendered list in the first + table and dropped on a panel in the middle. After each drop, a drop event is generated and a + common AJAX request is performed that renders results in the third table.</para> <para>As with every AJAX action component, <emphasis role="bold"> <property>&lt;rich:dropSupport&gt;</property> - </emphasis> has all the common attributes (<emphasis - role="italic"><property>"timeout"</property>,</emphasis> <emphasis - role="italic"><property>"limitToList"</property>,</emphasis> <emphasis - role="italic"><property>"reRender"</property>,</emphasis> etc.) for AJAX - request customization. To get detailed information on these attributes, - read the <ulink - url="http://labs.jboss.com/file-access/default/members/jbossajax4jsf... - Developer Guide</ulink>.</para> + </emphasis> has all the common attributes (<emphasis role="italic" + ><property>"timeout"</property>,</emphasis> + <emphasis role="italic"><property>"limitToList"</property>,</emphasis> + <emphasis role="italic"><property>"reRender"</property>,</emphasis> etc.) for AJAX request + customization. To get detailed information on these attributes, read the <ulink + url="http://labs.jboss.com/file-access/default/members/jbossajax4jsf... + >Ajax4jsf Developer Guide</ulink>.</para> - <para>Finally, the component has the following extra attributes for event - processing on the client:</para> + <para>Finally, the component has the following extra attributes for event processing on the + client:</para> <itemizedlist> <listitem>ondragenter</listitem> @@ -216,11 +211,7 @@ <listitem>ondropend</listitem> </itemizedlist> - <para>Developers can use their own custom JavaScript functions to handle - these events.</para> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport... you can see the example of <emphasis role="bold">&lt;rich:dropSupport&gt;</emphasis> usage and sources for the given example. - </para> + <para>Developers can use their own custom JavaScript functions to handle these events.</para> </section> <section> @@ -228,4 +219,12 @@ <para>The component doesn&apos;t have its own visual presentation.</para> </section> -</section> \ No newline at end of file + <section> + <title>Relevant resources links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport... + >Here</ulink> you can see the example of <emphasis role="bold" + >&lt;rich:dropSupport&gt;</emphasis> usage and sources for the given example. + </para> + </section> +</section> Modified: branches/3.0.2/docs/userguide/en/src/main/docbook/included/gmap.xml =================================================================== --- branches/3.0.2/docs/userguide/en/src/main/docbook/included/gmap.xml 2007-07-04 16:18:03 UTC (rev 1467) +++ branches/3.0.2/docs/userguide/en/src/main/docbook/included/gmap.xml 2007-07-04 16:24:58 UTC (rev 1468) @@ -1,47 +1,47 @@ <?xml version='1.0' encoding='UTF-8'?> <section> -<sectioninfo> -<keywordset> -<keyword>map</keyword> -<keyword>gmapVar</keyword> -<keyword>HtmlGmap</keyword> -</keywordset> -</sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.Gmap</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlGmap</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.Gmap</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.GmapRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.GmapTag</entry> - </row> - </tbody> - </tgroup> - </table> - + <sectioninfo> + <keywordset> + <keyword>map</keyword> + <keyword>gmapVar</keyword> + <keyword>HtmlGmap</keyword> + </keywordset> + </sectioninfo> + + <table> + <title>Component identification parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.Gmap</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlGmap</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.Gmap</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.GmapRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.GmapTag</entry> + </row> + </tbody> + </tgroup> + </table> + <section> <title>Creating the Component with a Page Tag</title> <para>Here is a simple example as it might be used in a page: </para> @@ -60,103 +60,111 @@ </section> <section> <title>Details of Usage</title> - <para>To use <emphasis role="italic"><property>Google Map</property></emphasis> in your - application, generate a key on <ulink url="http://google.com/apis/maps">Google Map official resource</ulink>. One key could be used for one directory on - the server.</para> - <para>Here are the main settings of initial rendering performed with a component - <property>map</property> that are accessible with the following attributes:</para> - <itemizedlist> - <listitem> - <emphasis role="italic"><property>&quot;zoom&quot;</property></emphasis> defines an - approximation size (boundary values 1-18) - </listitem> - <listitem> - <emphasis role="italic"><property>&quot;lat&quot;</property></emphasis> specifies an initial - latitude coordinate in degrees, as a number between -90 and +90 - </listitem> - <listitem> - <emphasis role="italic"><property>&quot;lng&quot;</property></emphasis> specifies an initial - longitude coordinate in degrees, as a number between -180 and +180 - </listitem> - <listitem> - <emphasis role="italic"><property>&quot;mapType&quot;</property></emphasis> specifies a type - of a rendered map (G_NORMAL_MAP, G_SATELLITE_MAP (DEFAULT), G_HYBRID_MAP) - </listitem> - </itemizedlist> - <para>For example, the city of Paris is shown after rendering with the following - initial settings: <emphasis role="italic"><property>&quot;lat&quot;</property></emphasis>= 48.44, - <emphasis role="italic"><property>&quot;lng&quot;</property></emphasis>= 2.24 and - <emphasis role="italic"><property>&quot;zoom&quot;</property></emphasis>= 5.</para> -<figure> - <title>Gmap initial rendering</title> - <mediaobject> + <para>To use <emphasis role="italic"> + <property>Google Map</property> + </emphasis> in your application, generate a key on <ulink url="http://google.com/apis/maps" + >Google Map official resource</ulink>. One key could be used for one directory on the + server.</para> + <para>Here are the main settings of initial rendering performed with a component + <property>map</property> that are accessible with the following attributes:</para> + <itemizedlist> + <listitem> + <emphasis role="italic"> + <property>&quot;zoom&quot;</property> + </emphasis> defines an approximation size (boundary values 1-18) </listitem> + <listitem> + <emphasis role="italic"> + <property>&quot;lat&quot;</property> + </emphasis> specifies an initial latitude coordinate in degrees, as a number between -90 and + +90 </listitem> + <listitem> + <emphasis role="italic"> + <property>&quot;lng&quot;</property> + </emphasis> specifies an initial longitude coordinate in degrees, as a number between -180 + and +180 </listitem> + <listitem> + <emphasis role="italic"> + <property>&quot;mapType&quot;</property> + </emphasis> specifies a type of a rendered map (G_NORMAL_MAP, G_SATELLITE_MAP (DEFAULT), + G_HYBRID_MAP) </listitem> + </itemizedlist> + <para>For example, the city of Paris is shown after rendering with the following initial + settings: <emphasis role="italic"> + <property>&quot;lat&quot;</property> + </emphasis>= 48.44, <emphasis role="italic"> + <property>&quot;lng&quot;</property> + </emphasis>= 2.24 and <emphasis role="italic"> + <property>&quot;zoom&quot;</property> + </emphasis>= 5.</para> + <figure> + <title>Gmap initial rendering</title> + <mediaobject> <imageobject> - <imagedata fileref="images/gmap1.gif"/> + <imagedata fileref="images/gmap1.gif"/> </imageobject> -</mediaobject> -</figure> - <para> - It&apos;s also possible to set accessible controls on the <property>map</property> with the help - of the attributes:</para> - <itemizedlist> - <listitem> - <emphasis role="italic"><property>&quot;showGMapTypeControl&quot;</property></emphasis> - determines whether the controls for a map type definition are switched on - </listitem> - <listitem> - <emphasis role="italic"><property>&quot;showGScaleControl&quot;</property></emphasis> - determines whether the controls for scaling are switched on - </listitem> - <listitem> - <emphasis role="italic"><property>&quot;showGLargeMapControl&quot;</property></emphasis> - determines whether the control for <property>map</property> scale rendering is rendered - </listitem> - </itemizedlist> - <figure> + </mediaobject> + </figure> + <para> It&apos;s also possible to set accessible controls on the <property>map</property> + with the help of the attributes:</para> + <itemizedlist> + <listitem> + <emphasis role="italic"> + <property>&quot;showGMapTypeControl&quot;</property> + </emphasis> determines whether the controls for a map type definition are switched on </listitem> + <listitem> + <emphasis role="italic"> + <property>&quot;showGScaleControl&quot;</property> + </emphasis> determines whether the controls for scaling are switched on </listitem> + <listitem> + <emphasis role="italic"> + <property>&quot;showGLargeMapControl&quot;</property> + </emphasis> determines whether the control for <property>map</property> scale rendering is + rendered </listitem> + </itemizedlist> + <figure> <title>Gmap accessible controls</title> -<mediaobject> + <mediaobject> <imageobject> - <imagedata fileref="images/gmap3.gif"/> + <imagedata fileref="images/gmap3.gif"/> </imageobject> -</mediaobject> + </mediaobject> </figure> -<para>To set all these parameters and perform some activity (Zoom In/Out etc.) is possible with your -JavaScript, i.e. declare a name of an object on a <property>map</property> in the -<emphasis role="italic"><property>&quot;gmapVar&quot;</property></emphasis> attribute -and then call the object directly with API -<emphasis role="italic"><property>Google Map</property>.</emphasis></para> - <para>For example, to approximate a map for - <emphasis role="italic"><property>&quot;gmapVar&quot;</property></emphasis>= <property>&quot;map&quot;</property> - declared inside the component, call map.zoomIn() on an event.</para> - <para>Moreover, to add e.g. some JavaScript effects, events defined on it are used.</para> - <itemizedlist> - <listitem> - onmouseover - </listitem> - <listitem> - onclick - </listitem> - <listitem> - onmouseout - </listitem> - <listitem> - etc. - </listitem> - </itemizedlist> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/gmap.jsf?c=... you can see the example of <emphasis role="bold">&lt;rich:gmap&gt;</emphasis> usage and sources for the given example. - </para> - </section> - <section> + <para>To set all these parameters and perform some activity (Zoom In/Out etc.) is possible with + your JavaScript, i.e. declare a name of an object on a <property>map</property> in the + <emphasis role="italic"> + <property>&quot;gmapVar&quot;</property> + </emphasis> attribute and then call the object directly with API <emphasis role="italic" + ><property>Google Map</property>.</emphasis></para> + <para>For example, to approximate a map for <emphasis role="italic"> + <property>&quot;gmapVar&quot;</property> + </emphasis>= <property>&quot;map&quot;</property> declared inside the component, call + map.zoomIn() on an event.</para> + <para>Moreover, to add e.g. some JavaScript effects, events defined on it are used.</para> + <itemizedlist> + <listitem> onmouseover </listitem> + <listitem> onclick </listitem> + <listitem> onmouseout </listitem> + <listitem> etc. </listitem> + </itemizedlist> + + </section> + <section> <title>Look-and-Feel Customization</title> <para><property>Gmap</property> component isn&apos;t tied to skin parameters, as there is no - additional elements on it, except the ones provided with - <emphasis role="italic"><property>Google Map</property>.</emphasis></para> - </section> - <section> + additional elements on it, except the ones provided with <emphasis role="italic" + ><property>Google Map</property>.</emphasis></para> + </section> + <section> <title>Definition custom style classes:</title> - <para>rich-gmap is a predefined style class for the map. It&apos;s possible to define some - standard properties for all <property>maps</property> components on a page (padding, border, etc.) - with the definition of the component.</para> + <para>rich-gmap is a predefined style class for the map. It&apos;s possible to define some + standard properties for all <property>maps</property> components on a page (padding, border, + etc.) with the definition of the component.</para> + </section> + <section> + <title>Relevant resources links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/gmap.jsf?c=... + you can see the example of <emphasis role="bold">&lt;rich:gmap&gt;</emphasis> usage + and sources for the given example. </para> + </section> </section> -</section> \ No newline at end of file Modified: branches/3.0.2/docs/userguide/en/src/main/docbook/included/inputNumberSlider.xml =================================================================== --- branches/3.0.2/docs/userguide/en/src/main/docbook/included/inputNumberSlider.xml 2007-07-04 16:18:03 UTC (rev 1467) +++ branches/3.0.2/docs/userguide/en/src/main/docbook/included/inputNumberSlider.xml 2007-07-04 16:24:58 UTC (rev 1468) @@ -1,46 +1,46 @@ <?xml version='1.0' encoding='UTF-8'?> <section> -<sectioninfo> -<keywordset> -<keyword>dragged handle control</keyword> -<keyword>rich:unputNumberSlider</keyword> -<keyword>HtmlInputNumberSlider</keyword> -</keywordset> -</sectioninfo> - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.inputNumberSlider</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlInputNumberSlider</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.inputNumberSlider</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.InputNumberSliderRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.InputNumberSliderTag</entry> - </row> - </tbody> - </tgroup> - </table> - + <sectioninfo> + <keywordset> + <keyword>dragged handle control</keyword> + <keyword>rich:unputNumberSlider</keyword> + <keyword>HtmlInputNumberSlider</keyword> + </keywordset> + </sectioninfo> + <table> + <title>Component identification parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.inputNumberSlider</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlInputNumberSlider</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.inputNumberSlider</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.InputNumberSliderRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.InputNumberSliderTag</entry> + </row> + </tbody> + </tgroup> + </table> + <section> <title>Creating the Component with a Page Tag</title> <para>Here is a simple example as it might be used in a page: </para> @@ -59,96 +59,89 @@ </section> <section> <title>Details of Usage</title> - <para><emphasis role="bold"><property>&lt;rich:inputNumberSlider&gt;</property></emphasis> is - used to facilitate user data input with rich UI Controls.</para> - <para>Here is the simplest variant of a slider definition with <emphasis + <para><emphasis role="bold"> + <property>&lt;rich:inputNumberSlider&gt;</property> + </emphasis> is used to facilitate user data input with rich UI Controls.</para> + <para>Here is the simplest variant of a slider definition with <emphasis role="italic" + ><property>&quot;minValue&quot;</property>,</emphasis> + <emphasis role="italic"> + <property>&quot;maxValue&quot;</property> + </emphasis> and <emphasis role="italic"> + <property>&quot;step&quot;</property> + </emphasis> (on default = &quot;1&quot;) attributes, which define the beginning and + the end of a numerical area and a <property>slider</property> property step.</para> -role="italic"><property>&quot;minValue&quot;</property>,</emphasis> <emphasis + <programlisting role="XML"><![CDATA[<rich:inputNumberSlider></rich:inputNumberSlider>]]></programlisting> -role="italic"><property>&quot;maxValue&quot;</property></emphasis> and <emphasis - -role="italic"><property>&quot;step&quot;</property></emphasis> (on default = &quot;1&quot;) attributes, - which define the beginning and the end of a numerical area and a <property>slider</property> - property step.</para> - - <programlisting role="XML"><![CDATA[<rich:inputNumberSlider></rich:inputNumberSlider>]]></programlisting> - - <para>It generates on a page:</para> - <figure> - <title>Generated inputNumberSlider</title> -<mediaobject> + <para>It generates on a page:</para> + <figure> + <title>Generated inputNumberSlider</title> + <mediaobject> <imageobject> - <imagedata fileref="images/slider2.gif"/> + <imagedata fileref="images/slider2.gif"/> </imageobject> - </mediaobject> + </mediaobject> </figure> - <para> - Using <emphasis role="italic"><property>&quot;showInput&quot;</property></emphasis> (default is true) and - <emphasis role="italic"><property>&quot;enableManualInput&quot;</property></emphasis> (default value is - true) attributes, it&apos;s - possible to output the input area near the slider, and make it read-only or editable.</para> - <para>To remove input area use <emphasis role="italic"><property>&quot;showInput=&quot;false&quot;</property></emphasis>:</para> - <programlisting role="XML"><![CDATA[<rich:inputNumberSlider minValue="1" maxValue="100" showInput="false"/>]]></programlisting> + <para> Using <emphasis role="italic"> + <property>&quot;showInput&quot;</property> + </emphasis> (default is true) and <emphasis role="italic"> + <property>&quot;enableManualInput&quot;</property> + </emphasis> (default value is true) attributes, it&apos;s possible to output the input + area near the slider, and make it read-only or editable.</para> + <para>To remove input area use <emphasis role="italic"> + <property>&quot;showInput=&quot;false&quot;</property> + </emphasis>:</para> + <programlisting role="XML"><![CDATA[<rich:inputNumberSlider minValue="1" maxValue="100" showInput="false"/>]]></programlisting> <para>It looks at page like:</para> -<figure> -<title>InputNumberSlider without input field</title> -<mediaobject> + <figure> + <title>InputNumberSlider without input field</title> + <mediaobject> <imageobject> - <imagedata fileref="images/slider3.gif"/> + <imagedata fileref="images/slider3.gif"/> </imageobject> - </mediaobject> + </mediaobject> </figure> -<para>It&apos;s also possible to switch off displaying of &quot;boundary values&quot; and a tooltip - showing on a handle drawing. This could be performed with the help of the component defined - attributes: <emphasis role="italic"><property>&quot;showBoundaryValues&quot;</property></emphasis> which is responsible for -&quot;boundary values&quot; displaying (default is true) and <emphasis role="italic"><property>&quot;showToolTip&quot;</property></emphasis> which is responsible for - tooltip displaying (default is true).</para> + <para>It&apos;s also possible to switch off displaying of &quot;boundary + values&quot; and a tooltip showing on a handle drawing. This could be performed with the + help of the component defined attributes: <emphasis role="italic"> + <property>&quot;showBoundaryValues&quot;</property> + </emphasis> which is responsible for &quot;boundary values&quot; displaying (default + is true) and <emphasis role="italic"> + <property>&quot;showToolTip&quot;</property> + </emphasis> which is responsible for tooltip displaying (default is true).</para> -<para>Moreover, to add e.g. some JavaScript effects, events defined on it are used.</para> - <itemizedlist> - <listitem> - onchange - </listitem> - <listitem> - onmouseover - </listitem> - <listitem> - onclick - </listitem> - <listitem> - onfocus - </listitem> - <listitem> - onmouseout - </listitem> - <listitem> - etc. - </listitem> - </itemizedlist> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/inputNumber... you can see the example of <emphasis role="bold">&lt;rich:inputNumberSlider&gt;</emphasis> usage and sources for the given example. - </para> + <para>Moreover, to add e.g. some JavaScript effects, events defined on it are used.</para> + <itemizedlist> + <listitem> onchange </listitem> + <listitem> onmouseover </listitem> + <listitem> onclick </listitem> + <listitem> onfocus </listitem> + <listitem> onmouseout </listitem> + <listitem> etc. </listitem> + </itemizedlist> </section> - <section> + <section> <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis -role="italic"><property>style class redefinition method</property></emphasis>.</para> - <para>Default style classes are mapped on <emphasis -role="italic"><property>skin parameters</property>.</emphasis></para> - <para>To redefine appearance of all inputNumberSliders at once, there are two ways:</para> - <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis -role="italic"><property>style classes</property></emphasis> used by the inputNumberSlider to your page style sheets</listitem> - </itemizedlist> -<table> - <title>Skin parameters redefinition:</title> + <para>For skinnability implementation the components use a <emphasis role="italic"> + <property>style class redefinition method</property> + </emphasis>.</para> + <para>Default style classes are mapped on <emphasis role="italic"><property>skin + parameters</property>.</emphasis></para> + <para>To redefine appearance of all inputNumberSliders at once, there are two ways:</para> + <itemizedlist> + <listitem>to redefine corresponding skin parameters</listitem> + <listitem>to add <emphasis role="italic"> + <property>style classes</property> + </emphasis> used by the inputNumberSlider to your page style sheets</listitem> + </itemizedlist> + <table> + <title>Skin parameters redefinition:</title> <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters for a hint</entry> - <entry>CSS properties</entry> - </row> + <thead> + <row> + <entry>Skin parameters for a hint</entry> + <entry>CSS properties</entry> + </row> </thead> <tbody> <row> @@ -162,14 +155,14 @@ </tbody> </tgroup> </table> - <table> - <title>Parameters for header element:</title> + <table> + <title>Parameters for header element:</title> <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> </thead> <tbody> <row> @@ -179,33 +172,34 @@ </tbody> </tgroup> </table> - </section> - <section> + </section> + <section> <title>Definition custom style classes:</title> <figure> - <title>Custom style classes of inputNumberSlider</title> - <mediaobject> + <title>Custom style classes of inputNumberSlider</title> + <mediaobject> <imageobject> - <imagedata fileref="images/slider5.gif"/> + <imagedata fileref="images/slider5.gif"/> </imageobject> - </mediaobject> + </mediaobject> </figure> <para>On the screenshot, there are classes names that define specified elements</para> - <table> - <title>Predefined component skin class</title> + <table> + <title>Predefined component skin class</title> <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Class description</entry> - </row> + <thead> + <row> + <entry>Class name</entry> + <entry>Class description</entry> + </row> </thead> <tbody> <row> <entry>rich-slider-bound</entry> - <entry>The class defines panel common style. It&apos;s used in the outside <emphasis role="bold"> -<property>&lt;div&gt;</property> -</emphasis>element</entry> + <entry>The class defines panel common style. It&apos;s used in the outside <emphasis + role="bold"> + <property>&lt;div&gt;</property> + </emphasis>element</entry> </row> <row> <entry>rich-slider-track</entry> @@ -215,25 +209,27 @@ <entry>rich-slider-handle</entry> <entry>a slider handle</entry> </row> - <row> + <row> <entry>rich-slider-input</entry> <entry>a text field</entry> </row> - <row> + <row> <entry>rich-slider-tip</entry> <entry>a tooltip</entry> </row> </tbody> </tgroup> </table> - <para>It&apos;s necessary only to define a class according to the corresponding name, so as an - appearance of all <property>sliders</property> on a page is changed at once. </para> - <para>To redefine appearance of particular <property>sliders</property>, it&apos;s possible to - define your own CSS class with one of the names listed there. And then just define one of the - components class attributes modifying component style properties.</para> - <para><emphasis role="bold">Example:</emphasis></para> - <para>CSS code piece used on the page:</para> -<programlisting role="HTML"><![CDATA[... + <para>It&apos;s necessary only to define a class according to the corresponding name, so as + an appearance of all <property>sliders</property> on a page is changed at once. </para> + <para>To redefine appearance of particular <property>sliders</property>, it&apos;s possible + to define your own CSS class with one of the names listed there. And then just define one of + the components class attributes modifying component style properties.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <para>CSS code piece used on the page:</para> + <programlisting role="HTML"><![CDATA[... .rich-slider-handle{ border:2px solid; } @@ -242,10 +238,19 @@ } ... ]]></programlisting> -<para>The component is defined in the following way:</para> -<programlisting role="XML"><![CDATA[<rich:inputNumberSlider ... inputClass="myClass" .../> + <para>The component is defined in the following way:</para> + <programlisting role="XML"><![CDATA[<rich:inputNumberSlider ... inputClass="myClass" .../> ]]></programlisting> -<para>Hence, header border width of all <property>sliders</property> is redefined on a page as well -as a style font for an input field of a particular <property>slider</property>.</para> + <para>Hence, header border width of all <property>sliders</property> is redefined on a page as + well as a style font for an input field of a particular <property>slider</property>.</para> + </section> + <section> + <title>Relevant resources links</title> + <para> + <ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/inputNumber... + >Here</ulink> you can see the example of <emphasis role="bold" + >&lt;rich:inputNumberSlider&gt;</emphasis> usage and sources for the given example. + </para> + </section> </section> -</section> \ No newline at end of file Modified: branches/3.0.2/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.xml =================================================================== --- branches/3.0.2/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.xml 2007-07-04 16:18:03 UTC (rev 1467) +++ branches/3.0.2/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.xml 2007-07-04 16:24:58 UTC (rev 1468) @@ -1,47 +1,47 @@ <?xml version='1.0' encoding='UTF-8'?> <section> -<sectioninfo> -<keywordset> -<keyword>unput field</keyword> -<keyword>rich:inputNumberSpinner</keyword> -<keyword>HtmlInputNumberSpinner</keyword> -</keywordset> -</sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.InputNumberSpinner</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlInputNumberSpinner</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.inputNumberSpinner</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.InputNumberSpinnerRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.InputNumberSpinnerTag</entry> - </row> - </tbody> - </tgroup> - </table> - + <sectioninfo> + <keywordset> + <keyword>unput field</keyword> + <keyword>rich:inputNumberSpinner</keyword> + <keyword>HtmlInputNumberSpinner</keyword> + </keywordset> + </sectioninfo> + + <table> + <title>Component identification parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.InputNumberSpinner</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlInputNumberSpinner</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.inputNumberSpinner</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.InputNumberSpinnerRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.InputNumberSpinnerTag</entry> + </row> + </tbody> + </tgroup> + </table> + <section> <title>Creating the Component with a Page Tag</title> <para>Here is a simple example as it might be used in a page: </para> @@ -60,86 +60,84 @@ </section> <section> <title>Details of Usage</title> - <para><emphasis role="bold"><property>&lt;rich:inputNumberSpinner&gt;</property></emphasis> is used to facilitate user data input with rich UI Controls.</para> - <para>Here is the simplest variant of <property>spinner</property> definition with <emphasis - -role="italic"><property>&quot;minValue&quot;</property>,</emphasis> <emphasis - -role="italic"><property>&quot;maxValue&quot;</property></emphasis> - and <emphasis - -role="italic"><property>&quot;step&quot;</property></emphasis> (on default = &quot;1&quot;) attributes, which define the beginning and the end of numerical area - and a <property>spinner</property> step.</para> - <para><emphasis role="bold">Example:</emphasis></para> + <para><emphasis role="bold"> + <property>&lt;rich:inputNumberSpinner&gt;</property> + </emphasis> is used to facilitate user data input with rich UI Controls.</para> + <para>Here is the simplest variant of <property>spinner</property> definition with <emphasis + role="italic"><property>&quot;minValue&quot;</property>,</emphasis> + <emphasis role="italic"> + <property>&quot;maxValue&quot;</property> + </emphasis> and <emphasis role="italic"> + <property>&quot;step&quot;</property> + </emphasis> (on default = &quot;1&quot;) attributes, which define the beginning and + the end of numerical area and a <property>spinner</property> step.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> <programlisting role="XML"><![CDATA[... <rich:inputNumberSpinner minValue="1" maxValue="100"/> ... ]]></programlisting> -<para>It generates on a page:</para> -<figure> -<title>Generated inputNumberSpinner</title> -<mediaobject> + <para>It generates on a page:</para> + <figure> + <title>Generated inputNumberSpinner</title> + <mediaobject> <imageobject> - <imagedata fileref="images/inputNumberSpinner2.gif"/> + <imagedata fileref="images/inputNumberSpinner2.gif"/> </imageobject> - </mediaobject> + </mediaobject> </figure> - <para>There are also several attributes to define functional peculiarities:</para> - <itemizedlist> - <listitem> - <emphasis role="italic"><property>&quot;cycled&quot;</property></emphasis> if the attribute is &quot;true&quot; after the current value reaches the border value it's be reversed to another border value after next increasing/decreasing. In other case possibilities of next increasing/decreasing are locked - </listitem> - <listitem> - <emphasis role="italic"><property>&quot;disabled&quot;</property></emphasis> is an attribute that defines whether a component is active on a page - </listitem> - <listitem> - <emphasis role="italic"><property>&quot;manualInput&quot;</property></emphasis> is an attribute that defines whether a keyboard input is possible or only UI controls could be used</listitem> - </itemizedlist> -<para>Moreover, to add e.g. some JavaScript effects, events defined on it are used</para> - <itemizedlist> - <listitem> - onchange - </listitem> - <listitem> - onmouseover - </listitem> - <listitem> - onclick - </listitem> - <listitem> - onfocus - </listitem> - <listitem> - onmouseout - </listitem> - <listitem> - etc. - </listitem> - </itemizedlist> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/inputNumber... you can see the example of <emphasis role="bold">&lt;rich:inputNumberSpinner&gt;</emphasis> usage and sources for the given example. - </para> + <para>There are also several attributes to define functional peculiarities:</para> + <itemizedlist> + <listitem> + <emphasis role="italic"> + <property>&quot;cycled&quot;</property> + </emphasis> if the attribute is &quot;true&quot; after the current value reaches the + border value it's be reversed to another border value after next increasing/decreasing. In + other case possibilities of next increasing/decreasing are locked </listitem> + <listitem> + <emphasis role="italic"> + <property>&quot;disabled&quot;</property> + </emphasis> is an attribute that defines whether a component is active on a page </listitem> + <listitem> + <emphasis role="italic"> + <property>&quot;manualInput&quot;</property> + </emphasis> is an attribute that defines whether a keyboard input is possible or only UI + controls could be used</listitem> + </itemizedlist> + <para>Moreover, to add e.g. some JavaScript effects, events defined on it are used</para> + <itemizedlist> + <listitem> onchange </listitem> + <listitem> onmouseover </listitem> + <listitem> onclick </listitem> + <listitem> onfocus </listitem> + <listitem> onmouseout </listitem> + <listitem> etc. </listitem> + </itemizedlist> + </section> - <section> + <section> <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis -role="italic"><property>style class redefinition method</property></emphasis>.</para> - <para>Default style classes are mapped on <emphasis -role="italic"><property>skin parameters</property>.</emphasis></para> - <para>To redefine appearance of all inputNumberSpinners at once, there are two ways:</para> - <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis -role="italic"><property>style classes</property></emphasis> used by the inputNumberSpinner to your page style sheets</listitem> - </itemizedlist> -<table> - <title>Skin parameters redefinition:</title> + <para>For skinnability implementation the components use a <emphasis role="italic"> + <property>style class redefinition method</property> + </emphasis>.</para> + <para>Default style classes are mapped on <emphasis role="italic"><property>skin + parameters</property>.</emphasis></para> + <para>To redefine appearance of all inputNumberSpinners at once, there are two ways:</para> + <itemizedlist> + <listitem>to redefine corresponding skin parameters</listitem> + <listitem>to add <emphasis role="italic"> + <property>style classes</property> + </emphasis> used by the inputNumberSpinner to your page style sheets</listitem> + </itemizedlist> + <table> + <title>Skin parameters redefinition:</title> <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters for a container</entry> - <entry>CSS properties</entry> - </row> + <thead> + <row> + <entry>Skin parameters for a container</entry> + <entry>CSS properties</entry> + </row> </thead> <tbody> <row> @@ -149,14 +147,14 @@ </tbody> </tgroup> </table> - <table> - <title>Parameters for an entry field element:</title> + <table> + <title>Parameters for an entry field element:</title> <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> </thead> <tbody> <row> @@ -170,14 +168,14 @@ </tbody> </tgroup> </table> - <table> - <title>Parameters for buttons</title> + <table> + <title>Parameters for buttons</title> <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> </thead> <tbody> <row> @@ -187,26 +185,26 @@ </tbody> </tgroup> </table> -</section> - <section> + </section> + <section> <title>Definition custom style classes:</title> <figure> - <title>Custom style classes of inputNumberSpinner</title> - <mediaobject> + <title>Custom style classes of inputNumberSpinner</title> + <mediaobject> <imageobject> - <imagedata fileref="images/inputNumberSpinner3.gif"/> + <imagedata fileref="images/inputNumberSpinner3.gif"/> </imageobject> - </mediaobject> + </mediaobject> </figure> <para>On the screenshot, there are classes names that define specified elements.</para> - <table> - <title>Predefined component skin class</title> + <table> + <title>Predefined component skin class</title> <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Component Element</entry> - </row> + <thead> + <row> + <entry>Class name</entry> + <entry>Component Element</entry> + </row> </thead> <tbody> <row> @@ -221,23 +219,25 @@ <entry>rich-spinner-button-up</entry> <entry>a button for value increasing</entry> </row> - <row> + <row> <entry>rich-spinner-button-down</entry> <entry>a button for value decreasing</entry> </row> </tbody> </tgroup> </table> - <para>It&apos;s necessary only to define a class according to the corresponding name, so as an - appearance of all <property>spinners</property> on a page is changed at once. </para> - <para>To redefine appearance of the particular <property>spinner</property>, it&apos;s possible to - define your own CSS class. Then it&apos;s necessary just to define it in one of the <emphasis - -role="italic"><property>&quot;components class&quot;</property></emphasis> - attributes modifying component style properties.</para> - <para><emphasis role="bold">Example:</emphasis></para> - <para>CSS code piece used on the page:</para> -<programlisting role="XML"><![CDATA[... + <para>It&apos;s necessary only to define a class according to the corresponding name, so as + an appearance of all <property>spinners</property> on a page is changed at once. </para> + <para>To redefine appearance of the particular <property>spinner</property>, it&apos;s + possible to define your own CSS class. Then it&apos;s necessary just to define it in one + of the <emphasis role="italic"> + <property>&quot;components class&quot;</property> + </emphasis> attributes modifying component style properties.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <para>CSS code piece used on the page:</para> + <programlisting role="XML"><![CDATA[... . rich-spinner-input { font-style:italic; } @@ -246,11 +246,19 @@ } ... ]]></programlisting> -<para>The component is defined in the following way:</para> -<programlisting role="XML"><![CDATA[<rich:inputNumberSpinner inputClass="myClass" .../> + <para>The component is defined in the following way:</para> + <programlisting role="XML"><![CDATA[<rich:inputNumberSpinner inputClass="myClass" .../> ]]></programlisting> -<para>Hence, a font-style - of all <property>spinners</property> is redefined on a page as well as a - font-weight for an entry field of the particular <property>spinner</property>.</para> - </section> -</section> \ No newline at end of file + <para>Hence, a font-style of all <property>spinners</property> is redefined on a page as well as + a font-weight for an entry field of the particular <property>spinner</property>.</para> + </section> + <section> + <title>Relevant resources links</title> + <para> + <ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/inputNumber... + >Here</ulink> you can see the example of <emphasis role="bold" + >&lt;rich:inputNumberSpinner&gt;</emphasis> usage and sources for the given example. + </para> + </section> +</section> Modified: branches/3.0.2/docs/userguide/en/src/main/docbook/included/modalPanel.xml =================================================================== --- branches/3.0.2/docs/userguide/en/src/main/docbook/included/modalPanel.xml 2007-07-04 16:18:03 UTC (rev 1467) +++ branches/3.0.2/docs/userguide/en/src/main/docbook/included/modalPanel.xml 2007-07-04 16:24:58 UTC (rev 1468) @@ -217,9 +217,6 @@ handling in such a way that your own parameters could also be obtained: </para> <programlisting role="JAVA">onshow="alert(event.parameters.param1)"</programlisting> <para> Here, during modalPanel opening the value of a passing parameter is output. </para> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/modalPanel.... you can see the example of <emphasis role="bold">&lt;rich:modalPanel&gt;</emphasis> usage and sources for the given example. - </para> </section> <section> @@ -227,7 +224,7 @@ <para>For implementing skinnability the components use a <emphasis role="italic"> <property>style class redefinition method</property> -</emphasis>. Default style classes are mapped on <emphasis role="italic"><property>skin + </emphasis>. Default style classes are mapped on <emphasis role="italic"><property>skin parameters</property>.</emphasis></para> <para>There are two ways to redefine the appearance of all modal panels at once:</para> @@ -425,4 +422,11 @@ </tgroup> </table> </section> + <section> + <title>Relevant resources links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/modalPanel.... + >Here</ulink> you can see the example of <emphasis role="bold" + >&lt;rich:modalPanel&gt;</emphasis> usage and sources for the given example. </para> + </section> </section> Modified: branches/3.0.2/docs/userguide/en/src/main/docbook/included/paint2D.xml =================================================================== --- branches/3.0.2/docs/userguide/en/src/main/docbook/included/paint2D.xml 2007-07-04 16:18:03 UTC (rev 1467) +++ branches/3.0.2/docs/userguide/en/src/main/docbook/included/paint2D.xml 2007-07-04 16:24:58 UTC (rev 1468) @@ -1,47 +1,47 @@ <?xml version='1.0' encoding='UTF-8'?> <section> -<sectioninfo> -<keywordset> -<keyword>paint</keyword> -<keyword>rich:paint2D</keyword> -<keyword>HtmlPaint2D</keyword> -</keywordset> -</sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.Paint2D</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlPaint2D</entry> - </row> - <row> - <entry>component-family</entry> - <entry>javax.faces.Output</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.Paint2DRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.Paint2DTag</entry> - </row> - </tbody> - </tgroup> - </table> - + <sectioninfo> + <keywordset> + <keyword>paint</keyword> + <keyword>rich:paint2D</keyword> + <keyword>HtmlPaint2D</keyword> + </keywordset> + </sectioninfo> + + <table> + <title>Component identification parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.Paint2D</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlPaint2D</entry> + </row> + <row> + <entry>component-family</entry> + <entry>javax.faces.Output</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.Paint2DRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.Paint2DTag</entry> + </row> + </tbody> + </tgroup> + </table> + <section> <title>Creating the Component with a Page Tag</title> <para>Here is a simple example as it might be used in a page: </para> @@ -49,12 +49,11 @@ <rich:paint2D paint="#{paint2D.paint}" data="#{paint2DModel}"/> ... ]]></programlisting> -<para>Here <emphasis - -role="italic"><property>&quot;paint&quot;</property></emphasis> specifies the method performing -drawing and <emphasis - -role="italic"><property>&quot;data&quot;</property></emphasis> specifies Managed Bean property keeping the data used by the method.</para> + <para>Here <emphasis role="italic"> + <property>&quot;paint&quot;</property> + </emphasis> specifies the method performing drawing and <emphasis role="italic"> + <property>&quot;data&quot;</property> + </emphasis> specifies Managed Bean property keeping the data used by the method.</para> </section> <section> <title>Creating the Component Dynamically Using Java</title> @@ -69,31 +68,41 @@ <para>The example shows two main attributes of the component:</para> <itemizedlist> <listitem> - <para><emphasis role="italic"><property>&quot;paint&quot;</property></emphasis></para> - <para>Specify a method receiving an object specified in data as a parameter and sending graphical information into the stream</para> + <para> + <emphasis role="italic"> + <property>&quot;paint&quot;</property> + </emphasis> + </para> + <para>Specify a method receiving an object specified in data as a parameter and sending + graphical information into the stream</para> </listitem> <listitem> - <para><emphasis role="italic"><property>&quot;data&quot;</property></emphasis></para> + <para> + <emphasis role="italic"> + <property>&quot;data&quot;</property> + </emphasis> + </para> <para>Specifies a bean class keeping user&apos;s data for rendering</para> </listitem> </itemizedlist> <para> <note> - <title>Note:</title>data object should implement serializable interface - </note> + <title>Note:</title>data object should implement serializable interface </note> </para> - <para>The <emphasis role="italic"><property>&quot;format&quot;</property></emphasis> attribute of - the component defines a format of visual data passing to the server.</para> - <para>Generated data can be used as a cacheable or non-cacheable resource. It&apos;s defined with <emphasis - -role="italic"><property>&quot;cacheable&quot;</property></emphasis> attribute. - If cache support is turned on, a key is created in URI with a mix of size (width/height), <emphasis - -role="italic"><property>&quot;paint&quot;</property></emphasis> method, <emphasis - -role="italic"><property>&quot;format&quot;</property></emphasis> and <emphasis - -role="italic"><property>&quot;data&quot;</property></emphasis> attributes.</para> + <para>The <emphasis role="italic"> + <property>&quot;format&quot;</property> + </emphasis> attribute of the component defines a format of visual data passing to the server.</para> + <para>Generated data can be used as a cacheable or non-cacheable resource. It&apos;s defined + with <emphasis role="italic"> + <property>&quot;cacheable&quot;</property> + </emphasis> attribute. If cache support is turned on, a key is created in URI with a mix of + size (width/height), <emphasis role="italic"> + <property>&quot;paint&quot;</property> + </emphasis> method, <emphasis role="italic"> + <property>&quot;format&quot;</property> + </emphasis> and <emphasis role="italic"> + <property>&quot;data&quot;</property> + </emphasis> attributes.</para> <para>Example:</para> <programlisting role="JAVA"><![CDATA[paintBean.java: @@ -121,21 +130,25 @@ <rich:paint2D paint="#{paint2D.paint}" data="#{paint2DModel.data}"/> ... ]]></programlisting> + </section> + + <section> + <title>Look-and-Feel Customization</title> + <para><property>Paint2D</property> has no skin parameters and special <emphasis role="italic" + ><property>style classes</property>, </emphasis> as it consists of one element generated + with a user&apos;s method on the server.</para> + <para>To define some style properties such as an indent or a border, it&apos;s possible to + use <emphasis role="italic"> + <property>&quot;style&quot;</property> + </emphasis> and <emphasis role="italic"> + <property>&quot;styleClass&quot;</property> + </emphasis> attributes on the component.</para> + </section> + <section> + <title>Relevant resources links</title> <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/paint2D.jsf... you can see the example of <emphasis role="bold">&lt;rich:paint2D&gt;</emphasis> usage and sources for the given example. - </para> - </section> - - <section> - <title>Look-and-Feel Customization</title> - <para><property>Paint2D</property> has no skin parameters and special - <emphasis role="italic"><property>style classes</property>, </emphasis> as it consists - of one element generated with a user&apos;s method on the server.</para> - <para>To define some style properties such as an indent or a border, it&apos;s possible to - use <emphasis - -role="italic"><property>&quot;style&quot;</property></emphasis> - and <emphasis role="italic"><property>&quot;styleClass&quot;</property></emphasis> attributes - on the component.</para> - </section> - </section> \ No newline at end of file + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/paint2D.jsf... + >Here</ulink> you can see the example of <emphasis role="bold" + >&lt;rich:paint2D&gt;</emphasis> usage and sources for the given example. </para> + </section> +</section> Modified: branches/3.0.2/docs/userguide/en/src/main/docbook/included/panel.xml =================================================================== --- branches/3.0.2/docs/userguide/en/src/main/docbook/included/panel.xml 2007-07-04 16:18:03 UTC (rev 1467) +++ branches/3.0.2/docs/userguide/en/src/main/docbook/included/panel.xml 2007-07-04 16:24:58 UTC (rev 1468) @@ -1,47 +1,47 @@ <?xml version='1.0' encoding='UTF-8'?> <section> -<sectioninfo> -<keywordset> -<keyword>rectangle</keyword> -<keyword>rich:panel</keyword> -<keyword>HtmlPanel</keyword> -</keywordset> -</sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.panel</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlPanel</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.panel</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.PanelRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.PanelTag</entry> - </row> - </tbody> - </tgroup> - </table> - + <sectioninfo> + <keywordset> + <keyword>rectangle</keyword> + <keyword>rich:panel</keyword> + <keyword>HtmlPanel</keyword> + </keywordset> + </sectioninfo> + + <table> + <title>Component identification parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.panel</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlPanel</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.panel</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.PanelRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.PanelTag</entry> + </row> + </tbody> + </tgroup> + </table> + <section> <title>Creating the Component with a Page Tag</title> <para>Here is a simple example as it might be used in a page: </para> @@ -68,31 +68,38 @@ <section> <title>Details of Usage</title> <para><emphasis role="bold"> -<property>&lt;rich:panel&gt;</property> -</emphasis> components are used to group page content pieces on similarly formatted rectangular <property>panels</property>. -</para> - <para><emphasis role="bold">Example:</emphasis></para> + <property>&lt;rich:panel&gt;</property> + </emphasis> components are used to group page content pieces on similarly formatted + rectangular <property>panels</property>. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> <programlisting role="XML"><![CDATA[... <rich:panel> ... </rich:panel> ... ]]></programlisting> - <para>It&apos;s generating on a page in the following way:</para> + <para>It&apos;s generating on a page in the following way:</para> <figure> <title>Generated panel without header</title> - - <mediaobject> + + <mediaobject> <imageobject> - <imagedata fileref="images/panel.gif"/> + <imagedata fileref="images/panel.gif"/> </imageobject> - </mediaobject> + </mediaobject> </figure> - </section> - <section> + </section> + <section> <para>The example shows that similar rectangular areas are formed with a particular style.</para> -<para>When creating a <property>panel</property> with a header element, one more <emphasis role="bold"><property>&lt;div&gt;</property></emphasis> element is added with content defined for a header.</para> - <para><emphasis role="bold">Example:</emphasis></para> + <para>When creating a <property>panel</property> with a header element, one more <emphasis + role="bold"> + <property>&lt;div&gt;</property> + </emphasis> element is added with content defined for a header.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> <programlisting role="XML"><![CDATA[... <rich:panel> <f:facet name="header"> @@ -102,71 +109,56 @@ </rich:panel> ... ]]></programlisting> -<para>It&apos;s displayed on a page in the following way:</para> - <figure> - <title>Panel with header</title> - -<mediaobject> + <para>It&apos;s displayed on a page in the following way:</para> + <figure> + <title>Panel with header</title> + + <mediaobject> <imageobject> - <imagedata fileref="images/panel2.gif"/> + <imagedata fileref="images/panel2.gif"/> </imageobject> -</mediaobject> - </figure> - <para>As it has been mentioned above, the component is mostly used for a page style definition, - hence the main attributes are style ones.</para> - <itemizedlist> - <listitem> - styleClass and style - </listitem> - <listitem> - headerClass and headerStyle - </listitem> - <listitem> - bodyClass and bodyStyle - </listitem> - </itemizedlist> - <para>Moreover, to add e.g. some JavaScript effects, events defined on it are used.</para> - <itemizedlist> - <listitem> - onmouseover - </listitem> - <listitem> - onclick - </listitem> - <listitem> - onmouseout - </listitem> - <listitem> - etc. - </listitem> - </itemizedlist> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/panel.jsf?c... you can see the example of <emphasis role="bold">&lt;rich:panel&gt;</emphasis> usage and sources for the given example. - </para> + </mediaobject> + </figure> + <para>As it has been mentioned above, the component is mostly used for a page style definition, + hence the main attributes are style ones.</para> + <itemizedlist> + <listitem> styleClass and style </listitem> + <listitem> headerClass and headerStyle </listitem> + <listitem> bodyClass and bodyStyle </listitem> + </itemizedlist> + <para>Moreover, to add e.g. some JavaScript effects, events defined on it are used.</para> + <itemizedlist> + <listitem> onmouseover </listitem> + <listitem> onclick </listitem> + <listitem> onmouseout </listitem> + <listitem> etc. </listitem> + </itemizedlist> + </section> - <section> + <section> <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis -role="italic"><property>style class redefinition method</property>.</emphasis></para> - <para>Default style classes are mapped on <emphasis -role="italic"><property>skin parameters</property>.</emphasis></para> - <para>To redefine appearance of all panels at once, there are two ways:</para> - <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis -role="italic"><property>style classes</property></emphasis> used by the panel to your page style sheets</listitem> - </itemizedlist> -</section> -<section> -<title>Skin parameters redefinition</title> -<table> - <title>Skin parameters for the panel</title> + <para>For skinnability implementation the components use a <emphasis role="italic" + ><property>style class redefinition method</property>.</emphasis></para> + <para>Default style classes are mapped on <emphasis role="italic"><property>skin + parameters</property>.</emphasis></para> + <para>To redefine appearance of all panels at once, there are two ways:</para> + <itemizedlist> + <listitem>to redefine corresponding skin parameters</listitem> + <listitem>to add <emphasis role="italic"> + <property>style classes</property> + </emphasis> used by the panel to your page style sheets</listitem> + </itemizedlist> + </section> + <section> + <title>Skin parameters redefinition</title> + <table> + <title>Skin parameters for the panel</title> <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> </thead> <tbody> <row> @@ -180,14 +172,14 @@ </tbody> </tgroup> </table> - <table> - <title>Parameters for a header element</title> + <table> + <title>Parameters for a header element</title> <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> </thead> <tbody> <row> @@ -202,90 +194,97 @@ <entry>headerSizeFont</entry> <entry>font-size </entry> </row> - <row> + <row> <entry>headerTextColor</entry> <entry>color</entry> </row> - <row> + <row> <entry>headerWeightFont</entry> <entry>font-weight</entry> </row> - <row> + <row> <entry>headerFamilyFont</entry> <entry>font-family</entry> </row> </tbody> </tgroup> </table> - <table> - <title>Parameters for a body element</title> + <table> + <title>Parameters for a body element</title> <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> </thead> <tbody> - <row> + <row> <entry>generalSizeFont</entry> <entry>font-size</entry> </row> - <row> + <row> <entry>generalTextColor</entry> <entry>color</entry> </row> - <row> + <row> <entry>generalFamilyFont</entry> <entry>font-family</entry> </row> </tbody> </tgroup> </table> -</section> - <section> + </section> + <section> <title>Definition custom style classes</title> - <figure> - <title>Style classes of panel</title> - - <mediaobject> + <figure> + <title>Style classes of panel</title> + + <mediaobject> <imageobject> - <imagedata fileref="images/panel3.gif"/> + <imagedata fileref="images/panel3.gif"/> </imageobject> - </mediaobject> - </figure> + </mediaobject> + </figure> <para>On the screenshot, there are classes names that define specified elements.</para> - <table> - <title>Component skin class</title> + <table> + <title>Component skin class</title> <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Class description</entry> - </row> + <thead> + <row> + <entry>Class name</entry> + <entry>Class description</entry> + </row> </thead> <tbody> <row> <entry>rich-panel</entry> - <entry>The class defines a <property>panel</property> common style. It&apos;s used in the outside <emphasis role="bold"> -<property>&lt;div&gt;</property> -</emphasis>element</entry> + <entry>The class defines a <property>panel</property> common style. It&apos;s used + in the outside <emphasis role="bold"> + <property>&lt;div&gt;</property> + </emphasis>element</entry> </row> <row> <entry>rich-panel-header</entry> - <entry>The class defines a header style. It&apos;s applicable for header elements of all panels</entry> + <entry>The class defines a header style. It&apos;s applicable for header elements of + all panels</entry> </row> <row> <entry>rich-panel-body</entry> - <entry>The class defines a content style inside a panel. It&apos;s applicable for elements inside panels</entry> + <entry>The class defines a content style inside a panel. It&apos;s applicable for + elements inside panels</entry> </row> </tbody> </tgroup> </table> - <para>To redefine an appearance of a particular panel, define your own CSS class. Then it&apos;s necessary just to define it in one of components class attributes modifying component style properties.</para> - <para><emphasis role="bold">Example:</emphasis></para> - <para>CSS code piece used on the page:</para> -<programlisting role="XML"><![CDATA[... + <para>To redefine an appearance of a particular panel, define your own CSS class. Then + it&apos;s necessary just to define it in one of components class attributes modifying + component style properties.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <para>CSS code piece used on the page:</para> + <programlisting role="XML"><![CDATA[... .rich-panel-header{ background-color:#F99; } @@ -294,17 +293,25 @@ } ... ]]></programlisting> -<para>Hence, a header class is redefined for all <property>panels</property> (its color changed) of -this page and body class is extended with the custom style properties (font-style) for this particular - <property>panel</property>. As a result, the <property>panel</property> with a header redefined color and a text style in body is got.</para> - <figure> - <title>Panel with redefined header and body text style</title> - - <mediaobject> + <para>Hence, a header class is redefined for all <property>panels</property> (its color changed) + of this page and body class is extended with the custom style properties (font-style) for this + particular <property>panel</property>. As a result, the <property>panel</property> with a + header redefined color and a text style in body is got.</para> + <figure> + <title>Panel with redefined header and body text style</title> + + <mediaobject> <imageobject> - <imagedata fileref="images/panel4.gif"/> + <imagedata fileref="images/panel4.gif"/> </imageobject> </mediaobject> - </figure> - </section> -</section> \ No newline at end of file + </figure> + </section> + <section> + <title>Relevant resources links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/panel.jsf?c... + >Here</ulink> you can see the example of <emphasis role="bold" + >&lt;rich:panel&gt;</emphasis> usage and sources for the given example. </para> + </section> +</section> Modified: branches/3.0.2/docs/userguide/en/src/main/docbook/included/panelBar.xml =================================================================== --- branches/3.0.2/docs/userguide/en/src/main/docbook/included/panelBar.xml 2007-07-04 16:18:03 UTC (rev 1467) +++ branches/3.0.2/docs/userguide/en/src/main/docbook/included/panelBar.xml 2007-07-04 16:24:58 UTC (rev 1468) @@ -1,51 +1,51 @@ <?xml version='1.0' encoding='UTF-8'?> <section> -<sectioninfo> -<keywordset> -<keyword>bar</keyword> -<keyword>rich:panelbar</keyword> -<keyword>HtmlPanelBar</keyword> -</keywordset> -</sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.PanelBar</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlPanelBar</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.PanelBar</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.PanelBarRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.PanelBarTag</entry> - </row> - </tbody> - </tgroup> + <sectioninfo> + <keywordset> + <keyword>bar</keyword> + <keyword>rich:panelbar</keyword> + <keyword>HtmlPanelBar</keyword> + </keywordset> + </sectioninfo> + + <table> + <title>Component identification parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.PanelBar</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlPanelBar</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.PanelBar</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.PanelBarRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.PanelBarTag</entry> + </row> + </tbody> + </tgroup> </table> - <section> - <title>Creating the Component with a Page Tag</title> - <para>Here is a simple example as it might be used in a page: </para> - <programlisting role="XML"><![CDATA[... + <section> + <title>Creating the Component with a Page Tag</title> + <para>Here is a simple example as it might be used in a page: </para> + <programlisting role="XML"><![CDATA[... <rich:panelBar> <!--//... --> <rich:panelBarItem label="Canon"> @@ -57,106 +57,111 @@ </rich:panelBar> ... ]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlPanelBar; + </section> + <section> + <title>Creating the Component Dynamically Using Java</title> + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlPanelBar; ... HtmlPanelBar myBar = new HtmlPanelBar(); ... ]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>As it was mentioned above, <property>panelBar</property> is used for grouping any content on the client, - thus its customization deals only with specification of sizes and styles for rendering.</para> - <para><emphasis - -role="italic"><property>&quot;width&quot;</property></emphasis> and <emphasis - -role="italic"><property>&quot;height&quot;</property></emphasis> (both are 100% on default) attributes stand apart.</para> - <para>Style attributes are described further.</para> - <para><property>panelBar</property> could contain any number of child <property>panelBarItem</property> components inside, which content is uploaded onto the client and headers are controls to open the corresponding child element.</para> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/panelBar.js... you can see the example of <emphasis role="bold">&lt;rich:panelBar&gt;</emphasis> usage and sources for the given example. - </para> - </section> + </section> <section> - <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis -role="italic"><property>style class redefinition method</property>.</emphasis></para> - <para>Default style classes are mapped on <emphasis -role="italic"><property>skin parameters</property>.</emphasis></para> - <para>To redefine appearance of all panelBars at once, there are two ways:</para> + <title>Details of Usage</title> + <para>As it was mentioned above, <property>panelBar</property> is used for grouping any + content on the client, thus its customization deals only with specification of sizes and + styles for rendering.</para> + <para><emphasis role="italic"> + <property>&quot;width&quot;</property> + </emphasis> and <emphasis role="italic"> + <property>&quot;height&quot;</property> + </emphasis> (both are 100% on default) attributes stand apart.</para> + <para>Style attributes are described further.</para> + <para><property>panelBar</property> could contain any number of child + <property>panelBarItem</property> components inside, which content is uploaded onto the + client and headers are controls to open the corresponding child element.</para> + </section> + <section> + <title>Look-and-Feel Customization</title> + <para>For skinnability implementation the components use a <emphasis role="italic" + ><property>style class redefinition method</property>.</emphasis></para> + <para>Default style classes are mapped on <emphasis role="italic"><property>skin + parameters</property>.</emphasis></para> + <para>To redefine appearance of all panelBars at once, there are two ways:</para> <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis -role="italic"><property>style classes</property></emphasis> used by the panelBar to your page style sheets (<property>PanelBar</property> - itself has no properties mapped on a skin, it&apos;s described for its children).</listitem> -</itemizedlist> - </section> - <section> - <title>Definition custom style classes:</title> - <para>There is one predefined class for the <property>panelBar</property>, which is applicable - to the whole component, specifying padding, borders, and etc.</para> - <figure> - <title>Custom style class of panelBar</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/panelBar2.gif"/> - </imageobject> - </mediaobject> - </figure> - <table> - <title>Predefined component skin class</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Class description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-panelbar</entry> - <entry>applicable for the whole panelBar (padding, border)</entry> - </row> - </tbody> - </tgroup> - </table> - <para>Other classes responsible for elements rendering are described for child - panelBarItem elements and could be found in the components chapters.</para> - <para>To change style peculiarities of the particular <property>panelBar</property> - and child elements, define your own style classes in the corresponding <property>panelBar</property> attributes.</para> -<table> - <title>Style component classes</title> - <tgroup cols="2"> - <thead> - <row> - <entry>A class attribute</entry> - <entry>A component element defined by an attribute</entry> - </row> - </thead> - <tbody> - <row> - <entry>styleClass</entry> - <entry>applicable to the whole panel together with headers</entry> - </row> - <row> - <entry>headerClass</entry> - <entry>applicable to headers elements</entry> - </row> - <row> - <entry>contentClass</entry> - <entry>applicable to panels</entry> - </row> - </tbody> - </tgroup> - </table> - <para><emphasis role="bold">Example:</emphasis></para> - <para>CSS code piece used on the page:</para> -<programlisting role="HTML"><![CDATA[... + <listitem>to redefine corresponding skin parameters</listitem> + <listitem>to add <emphasis role="italic"> + <property>style classes</property> + </emphasis> used by the panelBar to your page style sheets + (<property>PanelBar</property> itself has no properties mapped on a skin, + it&apos;s described for its children).</listitem> + </itemizedlist> + </section> + <section> + <title>Definition custom style classes:</title> + <para>There is one predefined class for the <property>panelBar</property>, which is + applicable to the whole component, specifying padding, borders, and etc.</para> + <figure> + <title>Custom style class of panelBar</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/panelBar2.gif"/> + </imageobject> + </mediaobject> + </figure> + <table> + <title>Predefined component skin class</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Class description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-panelbar</entry> + <entry>applicable for the whole panelBar (padding, border)</entry> + </row> + </tbody> + </tgroup> + </table> + <para>Other classes responsible for elements rendering are described for child panelBarItem + elements and could be found in the components chapters.</para> + <para>To change style peculiarities of the particular <property>panelBar</property> and + child elements, define your own style classes in the corresponding + <property>panelBar</property> attributes.</para> + <table> + <title>Style component classes</title> + <tgroup cols="2"> + <thead> + <row> + <entry>A class attribute</entry> + <entry>A component element defined by an attribute</entry> + </row> + </thead> + <tbody> + <row> + <entry>styleClass</entry> + <entry>applicable to the whole panel together with headers</entry> + </row> + <row> + <entry>headerClass</entry> + <entry>applicable to headers elements</entry> + </row> + <row> + <entry>contentClass</entry> + <entry>applicable to panels</entry> + </row> + </tbody> + </tgroup> + </table> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <para>CSS code piece used on the page:</para> + <programlisting role="HTML"><![CDATA[... . rich-panelbar{ padding:10px; } @@ -165,9 +170,9 @@ } ... ]]></programlisting> -<para>When using headerClass and headerClassActive attributes the declaration of headerClass should precede the - one of headerClassActive:</para> -<programlisting role="HTML"><![CDATA[... + <para>When using headerClass and headerClassActive attributes the declaration of headerClass + should precede the one of headerClassActive:</para> + <programlisting role="HTML"><![CDATA[... .headerClass{ ... } @@ -176,9 +181,11 @@ } ... ]]></programlisting> -<para>The component is defined in the following way:</para> -<para><emphasis role="bold">Example:</emphasis></para> -<programlisting role="XML"><![CDATA[... + <para>The component is defined in the following way:</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:panelBar contentClass="myClass"> <rich:panelBarItem> ... @@ -186,7 +193,15 @@ </rich:panelBar> ... ]]></programlisting> -<para>Hence, padding for all <property>panelBars</property> is changed on a page as well as a -font for particular <property>panelBarItems</property> content.</para> + <para>Hence, padding for all <property>panelBars</property> is changed on a page as well as + a font for particular <property>panelBarItems</property> content.</para> + </section> + <section> + <title>Relevant resources links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/panelBar.js... + >Here</ulink> you can see the example of <emphasis role="bold" + >&lt;rich:panelBar&gt;</emphasis> usage and sources for the given example. + </para> + </section> </section> -</section> \ No newline at end of file Modified: branches/3.0.2/docs/userguide/en/src/main/docbook/included/separator.xml =================================================================== --- branches/3.0.2/docs/userguide/en/src/main/docbook/included/separator.xml 2007-07-04 16:18:03 UTC (rev 1467) +++ branches/3.0.2/docs/userguide/en/src/main/docbook/included/separator.xml 2007-07-04 16:24:58 UTC (rev 1468) @@ -1,47 +1,47 @@ <?xml version='1.0' encoding='UTF-8'?> <chapter> -<sectioninfo> -<keywordset> -<keyword>horizontal line</keyword> -<keyword>rich:separator</keyword> -<keyword>HtmlSeparator</keyword> -</keywordset> -</sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.separator</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlSeparator</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.SeparatorRenderer</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.SeparatorRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.SeparatorTag</entry> - </row> - </tbody> - </tgroup> - </table> - + <sectioninfo> + <keywordset> + <keyword>horizontal line</keyword> + <keyword>rich:separator</keyword> + <keyword>HtmlSeparator</keyword> + </keywordset> + </sectioninfo> + + <table> + <title>Component identification parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.separator</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlSeparator</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.SeparatorRenderer</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.SeparatorRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.SeparatorTag</entry> + </row> + </tbody> + </tgroup> + </table> + <section> <title>Creating the Component with a Page Tag</title> <para>Here is a simple example as it might be used in a page:</para> @@ -50,7 +50,7 @@ ... ]]></programlisting> </section> - <section> + <section> <title>Creating the Component Dynamically Using Java</title> <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlSeparator; ... @@ -61,53 +61,62 @@ <section> <title>Details of Usage</title> <para><emphasis role="bold"> -<property>&lt;rich:separator&gt;</property> -</emphasis> is a simple layout component which represents a <property>separator</property> stylized as a skin. Thus, -the main attributes that define its style are <emphasis - -role="italic"><property>&quot;style&quot;</property></emphasis> and <emphasis - - role="italic"><property>&quot;styleClass&quot;.</property></emphasis> In addition there are <emphasis role="italic"><property>width</property></emphasis> and <emphasis role="italic"><property>height</property></emphasis> attributes that should be specified in pixels.</para> -<para>The line type can be customized with the <emphasis role="italic"><property>&quot;lineType&quot;</property></emphasis> parameter. - For example, different line types are shown after rendering with the following initial settings <emphasis role="italic"><property>lineType=&quot;double&quot;</property></emphasis>and <emphasis role="italic"><property>&quot;lineType=&quot;solid&quot;.</property></emphasis> + <property>&lt;rich:separator&gt;</property> + </emphasis> is a simple layout component which represents a <property>separator</property> + stylized as a skin. Thus, the main attributes that define its style are <emphasis + role="italic"> + <property>&quot;style&quot;</property> + </emphasis> and <emphasis role="italic"> + <property>&quot;styleClass&quot;.</property> + </emphasis> In addition there are <emphasis role="italic"> + <property>width</property> + </emphasis> and <emphasis role="italic"> + <property>height</property> + </emphasis> attributes that should be specified in pixels.</para> + <para>The line type can be customized with the <emphasis role="italic"> + <property>&quot;lineType&quot;</property> + </emphasis> parameter. For example, different line types are shown after rendering with the + following initial settings <emphasis role="italic"> + <property>lineType=&quot;double&quot;</property> + </emphasis>and <emphasis role="italic"> + <property>&quot;lineType=&quot;solid&quot;.</property> + </emphasis> </para> <figure> <title>Different line types of separator</title> - <mediaobject> + <mediaobject> <imageobject> <imagedata fileref="images/separator1.gif"/> </imageobject> </mediaobject> - </figure> - - <para>Except style attributes, there are also event definition attributes.</para> - <itemizedlist> - <listitem> - onmouseover - </listitem> - <listitem> - onclick - </listitem> - <listitem> - onmouseout - </listitem> - <listitem> - etc. - </listitem> - </itemizedlist> + </figure> + + <para>Except style attributes, there are also event definition attributes.</para> + <itemizedlist> + <listitem> onmouseover </listitem> + <listitem> onclick </listitem> + <listitem> onmouseout </listitem> + <listitem> etc. </listitem> + </itemizedlist> + </section> + <section> + <title>Look-and-Feel Customization</title> + <para>On the component generation, the framework presents a default rich-separator class in + styleClass of a generated component, i.e. in order to redefine appearance of all + <property>separators</property> at once, it&apos;s necessary to redefine this class in + your own CSS (replacing in the result properties defined in a skin with your own).</para> + <para>To define appearance of a particular <property>separators</property>, it&apos;s + possible to write your own CSS classes and properties in the component style attributes + (<emphasis role="italic"><property>&quot;style&quot;</property>,</emphasis> + <emphasis role="italic"> + <property>&quot;styleClass&quot;</property> + </emphasis>) modifying component property.</para> + </section> + <section> + <title>Relevant resources links</title> <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/separator.j... you can see the example of <emphasis role="bold">&lt;rich:separator&gt;</emphasis> usage and sources for the given example. - </para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/separator.j... + >Here</ulink> you can see the example of <emphasis role="bold" + >&lt;rich:separator&gt;</emphasis> usage and sources for the given example. </para> </section> - <section> - <title>Look-and-Feel Customization</title> - <para>On the component generation, the framework presents a default rich-separator class in - styleClass of a generated component, i.e. in order to redefine appearance of all <property>separators</property> at - once, it&apos;s necessary to redefine this class in your own CSS (replacing in the result properties - defined in a skin with your own).</para> - <para>To define appearance of a particular <property>separators</property>, it&apos;s possible to - write your own CSS - classes and properties in the component style attributes - (<emphasis role="italic"><property>&quot;style&quot;</property>,</emphasis> <emphasis role="italic"><property>&quot;styleClass&quot;</property></emphasis>) modifying component property.</para> - </section> -</chapter> \ No newline at end of file +</chapter> Modified: branches/3.0.2/docs/userguide/en/src/main/docbook/included/simpleTogglePanel.xml =================================================================== --- branches/3.0.2/docs/userguide/en/src/main/docbook/included/simpleTogglePanel.xml 2007-07-04 16:18:03 UTC (rev 1467) +++ branches/3.0.2/docs/userguide/en/src/main/docbook/included/simpleTogglePanel.xml 2007-07-04 16:24:58 UTC (rev 1468) @@ -1,48 +1,48 @@ <?xml version='1.0' encoding='UTF-8'?> <section> -<sectioninfo> -<keywordset> -<keyword>panel</keyword> -<keyword>rich:simpleTogglePanel</keyword> -<keyword>HtmlSimpleTogglePanel</keyword> -<keyword>switch</keyword> -</keywordset> -</sectioninfo> - - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.SimpleTogglePanel</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlSimpleTogglePanel</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.SimpleTogglePanel</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.SimpleTogglePanelRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.SimpleTogglePanelTag</entry> - </row> - </tbody> - </tgroup> - </table> - + <sectioninfo> + <keywordset> + <keyword>panel</keyword> + <keyword>rich:simpleTogglePanel</keyword> + <keyword>HtmlSimpleTogglePanel</keyword> + <keyword>switch</keyword> + </keywordset> + </sectioninfo> + + <table> + <title>Component identification parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.SimpleTogglePanel</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlSimpleTogglePanel</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.SimpleTogglePanel</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.SimpleTogglePanelRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.SimpleTogglePanelTag</entry> + </row> + </tbody> + </tgroup> + </table> + <section> <title>Creating the Component with a Page Tag</title> <para>Here is a simple example as it might be used in a page: </para> @@ -63,80 +63,74 @@ </section> <section> <title>Details of Usage</title> - <para>The component is a simplified version of <property>toggle panel</property> that initially has a defined layout as a - panel with a header playing a role of a mode switching control. On a component header element, it&apos;s - possible to define a label using an attribute with the same name.</para> - -<para>Switching mode could be defined with the <emphasis + <para>The component is a simplified version of <property>toggle panel</property> that initially + has a defined layout as a panel with a header playing a role of a mode switching control. On a + component header element, it&apos;s possible to define a label using an attribute with the + same name.</para> -role="italic"><property>&quot;switchType&quot;</property></emphasis> attribute with three possible parameters.</para> -<itemizedlist> - <listitem> - Server (DEFAULT)<para>The common submission is performed around <property>simpleTogglePanel</property> and a page is completely rendered on a called panel. Only one at a time panel is uploaded onto the client side.</para> - </listitem> - <listitem> - Ajax<para>AJAX form submission is performed around the panel, content of the called panel is uploaded on AJAX request and additionally specified elements in the <emphasis - -role="italic"><property>&quot;reRender&quot;</property></emphasis> attribute are rendered. Only one at a time panel is uploaded on the client side.</para> - </listitem> - <listitem> - Client<para> - All panels are uploaded on the client side. Switching from the active to the hidden panel - is performed with client JavaScript.</para> - </listitem> - </itemizedlist> -<para>The component could also have an <emphasis - -role="italic"><property>&quot;expanded&quot;</property></emphasis> (true/false) attribute responsible for keeping a panel state. It gives an opportunity to manage a <property>simpleTogglePanel</property> state from a model.</para> - <itemizedlist> - <listitem> - onmouseover - </listitem> - <listitem> - onclick - </listitem> - <listitem> - onmouseout - </listitem> - <listitem> - etc. - </listitem> - </itemizedlist> + <para>Switching mode could be defined with the <emphasis role="italic"> + <property>&quot;switchType&quot;</property> + </emphasis> attribute with three possible parameters.</para> + <itemizedlist> + <listitem> Server (DEFAULT)<para>The common submission is performed around + <property>simpleTogglePanel</property> and a page is completely rendered on a called + panel. Only one at a time panel is uploaded onto the client side.</para> + </listitem> + <listitem> Ajax<para>AJAX form submission is performed around the panel, content of the called + panel is uploaded on AJAX request and additionally specified elements in the <emphasis + role="italic"> + <property>&quot;reRender&quot;</property> + </emphasis> attribute are rendered. Only one at a time panel is uploaded on the client + side.</para> + </listitem> + <listitem> Client<para> All panels are uploaded on the client side. Switching from the active + to the hidden panel is performed with client JavaScript.</para> + </listitem> + </itemizedlist> + <para>The component could also have an <emphasis role="italic"> + <property>&quot;expanded&quot;</property> + </emphasis> (true/false) attribute responsible for keeping a panel state. It gives an + opportunity to manage a <property>simpleTogglePanel</property> state from a model.</para> + <itemizedlist> + <listitem> onmouseover </listitem> + <listitem> onclick </listitem> + <listitem> onmouseout </listitem> + <listitem> etc. </listitem> + </itemizedlist> <figure> <title>SimpleTogglePanel states</title> - <mediaobject> + <mediaobject> <imageobject> <imagedata fileref="images/simpleTogglePanel2.gif"/> </imageobject> </mediaobject> </figure> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/simpleToggl... you can see the example of <emphasis role="bold">&lt;rich:simpleTogglePanel&gt;</emphasis> usage and sources for the given example. - </para> - </section> - <section> - <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis -role="italic"><property>style class redefinition method</property></emphasis>.</para> - <para>Default style classes are mapped on <emphasis -role="italic"><property>skin parameters</property>.</emphasis></para> - <para>To redefine appearance of all simpleTogglePanels at once, there are two ways:</para> - <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis -role="italic"><property>style classes</property></emphasis> used by the simpleTogglePanel to your page style sheets</listitem> - </itemizedlist> - </section> - <section> - <title>Skin parameters redefinition</title> -<table> - <title>Skin parameters for the whole simpleTogglePanels</title> + </section> + <section> + <title>Look-and-Feel Customization</title> + <para>For skinnability implementation the components use a <emphasis role="italic"> + <property>style class redefinition method</property> + </emphasis>.</para> + <para>Default style classes are mapped on <emphasis role="italic"><property>skin + parameters</property>.</emphasis></para> + <para>To redefine appearance of all simpleTogglePanels at once, there are two ways:</para> + <itemizedlist> + <listitem>to redefine corresponding skin parameters</listitem> + <listitem>to add <emphasis role="italic"> + <property>style classes</property> + </emphasis> used by the simpleTogglePanel to your page style sheets</listitem> + </itemizedlist> + </section> + <section> + <title>Skin parameters redefinition</title> + <table> + <title>Skin parameters for the whole simpleTogglePanels</title> <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> </thead> <tbody> <row> @@ -150,14 +144,14 @@ </tbody> </tgroup> </table> - <table> - <title>Parameters for a header element</title> + <table> + <title>Parameters for a header element</title> <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> </thead> <tbody> <row> @@ -168,112 +162,118 @@ <entry>headerSizeFont</entry> <entry>font-size </entry> </row> - <row> + <row> <entry>headTextColor</entry> <entry>color</entry> </row> - <row> + <row> <entry>preferableHeaderWeightFont</entry> <entry>font-weight</entry> </row> - <row> + <row> <entry>headerFamilyFont</entry> <entry>font-family</entry> </row> </tbody> </tgroup> </table> - <table> - <title>Parameters for a body element</title> + <table> + <title>Parameters for a body element</title> <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> + <thead> + <row> + <entry>Skin parameters</entry> + <entry>CSS properties</entry> + </row> </thead> <tbody> <row> <entry>overAllBackground</entry> <entry>background-color</entry> </row> - <row> + <row> <entry>preferableDataSizeFont</entry> <entry>font-size</entry> </row> - <row> + <row> <entry>panelTextColor</entry> <entry>color</entry> </row> - <row> + <row> <entry>preferableDataFamilyFont</entry> <entry>font-family</entry> </row> </tbody> </tgroup> </table> - </section> - <section> - <title>Definition custom style classes</title> - <figure> - <title>Style classes of simpleTogglePanel</title> - <mediaobject> + </section> + <section> + <title>Definition custom style classes</title> + <figure> + <title>Style classes of simpleTogglePanel</title> + <mediaobject> <imageobject> - <imagedata fileref="images/simpleTogglePanel3.gif"/> + <imagedata fileref="images/simpleTogglePanel3.gif"/> </imageobject> - </mediaobject> - </figure> - <para>On the screenshot, there are specific classes names that define specified elements. Except - these two classes, one more class specified for the whole wrapper - <emphasis role="bold"><property>&lt;div&gt;</property></emphasis> element. See the table:</para> - <table> - <title>Predefined component skin classes</title> + </mediaobject> + </figure> + <para>On the screenshot, there are specific classes names that define specified elements. Except + these two classes, one more class specified for the whole wrapper <emphasis role="bold"> + <property>&lt;div&gt;</property> + </emphasis> element. See the table:</para> + <table> + <title>Predefined component skin classes</title> <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Class description</entry> - </row> + <thead> + <row> + <entry>Class name</entry> + <entry>Class description</entry> + </row> </thead> <tbody> <row> <entry>rich-stglpanel</entry> - <entry>The class defines a simpleTogglePanel common style. It&apos;s used in the outside <emphasis role="bold"> -<property>&lt;div&gt;</property> -</emphasis>element</entry> + <entry>The class defines a simpleTogglePanel common style. It&apos;s used in the + outside <emphasis role="bold"> + <property>&lt;div&gt;</property> + </emphasis>element</entry> </row> <row> <entry>rich-stglpanel-header</entry> - <entry>The class defines a header style. It&apos;s applicable for header elements of all simple toggle panels</entry> + <entry>The class defines a header style. It&apos;s applicable for header elements of + all simple toggle panels</entry> </row> <row> <entry>rich-stglpanel-body</entry> - <entry>The class defines content style inside a panel. It&apos;s applicable for elements inside simple toggle panels</entry> + <entry>The class defines content style inside a panel. It&apos;s applicable for + elements inside simple toggle panels</entry> </row> </tbody> </tgroup> </table> - <para>To redefine a style of all simple toggle panels on a page with CSS, create classes with the corresponding names and define the necessary properties in them.</para> - <para>To change style peculiarities of a particular <property>simpleTogglePanels</property>, - define your own style classes in the corresponding <property>simpleTogglePanels</property> attributes.</para> - <para>It&apos;s necessary to define a class according to the corresponding name, so as an - -appearance of all <property>simpleTogglePanels</property> on a page is changed at once.</para> - <table> - <title>Style component classes</title> + <para>To redefine a style of all simple toggle panels on a page with CSS, create classes with + the corresponding names and define the necessary properties in them.</para> + <para>To change style peculiarities of a particular <property>simpleTogglePanels</property>, + define your own style classes in the corresponding <property>simpleTogglePanels</property> + attributes.</para> + <para>It&apos;s necessary to define a class according to the corresponding name, so as an + appearance of all <property>simpleTogglePanels</property> on a page is changed at once.</para> + <table> + <title>Style component classes</title> <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Class description</entry> - </row> + <thead> + <row> + <entry>Class name</entry> + <entry>Class description</entry> + </row> </thead> <tbody> <row> <entry>styleClass</entry> - <entry>The class defines panel common style. It&apos;s used in the outside <emphasis role="bold"> -<property>&lt;div&gt;</property> -</emphasis>element</entry> + <entry>The class defines panel common style. It&apos;s used in the outside <emphasis + role="bold"> + <property>&lt;div&gt;</property> + </emphasis>element</entry> </row> <row> <entry>bodyClass</entry> @@ -286,5 +286,14 @@ </tbody> </tgroup> </table> - </section> -</section> \ No newline at end of file + </section> + <section> + <title>Relevant resources links</title> + <para> + <ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/simpleToggl... + >Here</ulink> you can see the example of <emphasis role="bold" + >&lt;rich:simpleTogglePanel&gt;</emphasis> usage and sources for the given example. + </para> + </section> +</section> Modified: branches/3.0.2/docs/userguide/en/src/main/docbook/included/spacer.xml =================================================================== --- branches/3.0.2/docs/userguide/en/src/main/docbook/included/spacer.xml 2007-07-04 16:18:03 UTC (rev 1467) +++ branches/3.0.2/docs/userguide/en/src/main/docbook/included/spacer.xml 2007-07-04 16:24:58 UTC (rev 1468) @@ -1,47 +1,47 @@ <?xml version='1.0' encoding='UTF-8'?> <section> -<sectioninfo> -<keywordset> -<keyword>transparent image</keyword> -<keyword>rich:spacer</keyword> -<keyword>HtmlSpacer</keyword> -</keywordset> -</sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.spacer</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlSpacer</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.spacer</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.SpacerRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.SpacerTag</entry> - </row> - </tbody> - </tgroup> - </table> - + <sectioninfo> + <keywordset> + <keyword>transparent image</keyword> + <keyword>rich:spacer</keyword> + <keyword>HtmlSpacer</keyword> + </keywordset> + </sectioninfo> + + <table> + <title>Component identification parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.spacer</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlSpacer</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.spacer</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.SpacerRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.SpacerTag</entry> + </row> + </tbody> + </tgroup> + </table> + <section> <title>Creating the Component with a Page Tag</title> <para>Here is a simple example as it might be used in a page:</para> @@ -49,7 +49,7 @@ <rich:spacer/> ...]]></programlisting> </section> - <section> + <section> <title>Creating the Component Dynamically Using Java</title> <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlSpacer; ... @@ -60,37 +60,45 @@ <section> <title>Details of Usage</title> <para><emphasis role="bold"> -<property>&lt;rich:spacer&gt;</property> -</emphasis> is a simple layout component which represents a transparent <property>spacer</property>. Thus, the main -attributes that define its style are <emphasis role="italic"><property>style</property></emphasis> and <emphasis role="italic"><property>styleClass</property>.</emphasis></para> -<para>In addition, the attributes are responsible for the component size: <emphasis role="italic"><property>&quot;width&quot;</property></emphasis> and <emphasis role="italic"><property>&quot;height&quot;</property>.</emphasis></para> - <para>Moreover, to add e.g. some JavaScript effects, events defined on it are used.</para> - <itemizedlist> - <listitem> - onmouseover - </listitem> - <listitem> - onclick - </listitem> - <listitem> - onmouseout - </listitem> - <listitem> - etc. - </listitem> - </itemizedlist> + <property>&lt;rich:spacer&gt;</property> + </emphasis> is a simple layout component which represents a transparent + <property>spacer</property>. Thus, the main attributes that define its style are <emphasis + role="italic"> + <property>style</property> + </emphasis> and <emphasis role="italic"><property>styleClass</property>.</emphasis></para> + <para>In addition, the attributes are responsible for the component size: <emphasis + role="italic"> + <property>&quot;width&quot;</property> + </emphasis> and <emphasis role="italic" + ><property>&quot;height&quot;</property>.</emphasis></para> + <para>Moreover, to add e.g. some JavaScript effects, events defined on it are used.</para> + <itemizedlist> + <listitem> onmouseover </listitem> + <listitem> onclick </listitem> + <listitem> onmouseout </listitem> + <listitem> etc. </listitem> + </itemizedlist> + </section> + <section> + <title>Look-and-Feel Customization</title> + <para>On the component generation, the framework presents a default rich-spacer class in + <emphasis role="italic"> + <property>styleClass</property> + </emphasis> of a generated component, i.e. in order to redefine appearance of all + <property>spacers</property> at once, it&apos;s necessary to redefine this class in your + own CSS (replacing in the result properties defined in a skin with your own).</para> + <para>To define appearance of the particular <property>spacer</property>, it&apos;s possible + to write your own CSS classes and properties in the component style attributes (<emphasis + role="italic"><property>style</property>, </emphasis> + <emphasis role="italic"> + <property>styleClass</property> + </emphasis>) modifying component property.</para> + </section> + <section> + <title>Relevant resources links</title> <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/spacer.jsf?... you can see the example of <emphasis role="bold">&lt;rich:spacer&gt;</emphasis> usage and sources for the given example. - </para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/spacer.jsf?... + >Here</ulink> you can see the example of <emphasis role="bold" + >&lt;rich:spacer&gt;</emphasis> usage and sources for the given example. </para> </section> - <section> - <title>Look-and-Feel Customization</title> - <para>On the component generation, the framework presents a default rich-spacer class in - <emphasis role="italic"><property>styleClass</property></emphasis> of a generated - component, i.e. in order to redefine appearance of all <property>spacers</property> - at once, it&apos;s necessary to redefine this class in your own CSS (replacing in the result properties - defined in a skin with your own).</para> - <para>To define appearance of the particular <property>spacer</property>, it&apos;s possible to write your own CSS classes - and properties in the component style attributes (<emphasis role="italic"><property>style</property>, </emphasis> <emphasis role="italic"><property>styleClass</property></emphasis>) modifying component property.</para> - </section> -</section> \ No newline at end of file +</section> Modified: branches/3.0.2/docs/userguide/en/src/main/docbook/included/suggestionBox.xml =================================================================== --- branches/3.0.2/docs/userguide/en/src/main/docbook/included/suggestionBox.xml 2007-07-04 16:18:03 UTC (rev 1467) +++ branches/3.0.2/docs/userguide/en/src/main/docbook/included/suggestionBox.xml 2007-07-04 16:24:58 UTC (rev 1468) @@ -1,51 +1,51 @@ <?xml version='1.0' encoding='UTF-8'?> <section> -<sectioninfo> -<keywordset> -<keyword>on-keypress suggestion</keyword> -<keyword>rich:suggestionBox</keyword> -<keyword>HtmlSuggestionBox</keyword> -</keywordset> -</sectioninfo> - - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.SuggestionBox</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlSuggestionBox</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.SuggestionBox</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.SuggestionBoxRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.SuggestionBoxTag</entry> - </row> - </tbody> - </tgroup> + <sectioninfo> + <keywordset> + <keyword>on-keypress suggestion</keyword> + <keyword>rich:suggestionBox</keyword> + <keyword>HtmlSuggestionBox</keyword> + </keywordset> + </sectioninfo> + + <table> + <title>Component identification parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.SuggestionBox</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlSuggestionBox</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.SuggestionBox</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.SuggestionBoxRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.SuggestionBoxTag</entry> + </row> + </tbody> + </tgroup> </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>Here is a simple example as it might be used in a page: </para> - <programlisting role="XML"><![CDATA[... + + <section> + <title>Creating the Component with a Page Tag</title> + <para>Here is a simple example as it might be used in a page: </para> + <programlisting role="XML"><![CDATA[... <h:inputText value="#{bean.property}" id="suggest"/> <rich:suggestionbox for="suggest" suggestionAction="#{bean.autocomplete}" var="suggest"> @@ -55,51 +55,61 @@ </rich:suggestionbox> ... ]]></programlisting> -<para>Here is the <emphasis role="italic"><property>bean.autocomplete</property></emphasis> - method that returns the collection to pop up:</para> -<programlisting role="JAVA"><![CDATA[public List autocomplete(Object event) { + <para>Here is the <emphasis role="italic"> + <property>bean.autocomplete</property> + </emphasis> method that returns the collection to pop up:</para> + <programlisting role="JAVA"><![CDATA[public List autocomplete(Object event) { String pref = event.toString(); //collecting some data that begins with "pref" letters. ... return result; } ]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlSuggestionBox; + </section> + <section> + <title>Creating the Component Dynamically Using Java</title> + <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlSuggestionBox; ... HtmlSuggestionBox myList = new HtmlSuggestionBox(); ... ]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>As it is shown in the example above, the main component attribute are:</para> -<itemizedlist> - <listitem> - <emphasis -role="italic"><property>&quot;for&quot;</property></emphasis><para>The attribute where there is an input component which activation causes a suggestion activation</para> - </listitem> - <listitem> - <emphasis - -role="italic"><property>&quot;suggestionAction&quot;</property></emphasis><para> is an accepting parameter of a SuggestionEvent type that returns as a result a collection for rendering in a tool tip window.</para> - </listitem> - <listitem> - <emphasis - -role="italic"><property>&quot;var&quot;</property></emphasis> <para> - a collection name that provides access for inputting into a table in a popup</para> - </listitem> - </itemizedlist> -<para>There are also two size attributes (<emphasis - -role="italic"><property>&quot;width&quot;</property></emphasis> and <emphasis - -role="italic"><property>&quot;height&quot;</property></emphasis>) that are obligatory for the suggestion component. The attributes have initial Defaults but should be specified manually in order to be changed.</para> -<para>The <property>suggestionBox</property> component, as it is shown on the screenshot, could get any collection for an output and outputs it in a tooltip window the same as a custom dataTable (in several columns)</para> -<programlisting role="XML"><![CDATA[... + </section> + <section> + <title>Details of Usage</title> + <para>As it is shown in the example above, the main component attribute are:</para> + <itemizedlist> + <listitem> + <emphasis role="italic"> + <property>&quot;for&quot;</property> + </emphasis> + <para>The attribute where there is an input component which activation causes a + suggestion activation</para> + </listitem> + <listitem> + <emphasis role="italic"> + <property>&quot;suggestionAction&quot;</property> + </emphasis> + <para> is an accepting parameter of a SuggestionEvent type that returns as a result + a collection for rendering in a tool tip window.</para> + </listitem> + <listitem> + <emphasis role="italic"> + <property>&quot;var&quot;</property> + </emphasis> + <para> a collection name that provides access for inputting into a table in a + popup</para> + </listitem> + </itemizedlist> + <para>There are also two size attributes (<emphasis role="italic"> + <property>&quot;width&quot;</property> + </emphasis> and <emphasis role="italic"> + <property>&quot;height&quot;</property> + </emphasis>) that are obligatory for the suggestion component. The attributes have + initial Defaults but should be specified manually in order to be changed.</para> + <para>The <property>suggestionBox</property> component, as it is shown on the screenshot, + could get any collection for an output and outputs it in a tooltip window the same as a + custom dataTable (in several columns)</para> + <programlisting role="XML"><![CDATA[... <rich:suggestionbox for="test" suggestionAction="#{bean.autocomplete}" var="cit" fetchValue="#{cit.text}"> <h:column> @@ -111,21 +121,25 @@ </rich:suggestionbox> ... ]]></programlisting> -<para>It looks on the page in the following way:</para> - <figure> - <title>SuggestionBox with tooltip window</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/suggestionbox2.gif"/> - </imageobject> -</mediaobject> - </figure> - <para>When some string is chosen input receives the corresponding value from the second column containing <property>#{cit.text}</property></para> - <para>There is also one more important attribute named <emphasis - -role="italic"><property>&quot;tokens&quot;</property></emphasis> that specifies separators after which a set of some characters sequence is defined as a new prefix beginning from this separator and not from the string beginning.</para> - <para><emphasis role="bold">Example:</emphasis></para> - <programlisting role="XML"><![CDATA[... + <para>It looks on the page in the following way:</para> + <figure> + <title>SuggestionBox with tooltip window</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/suggestionbox2.gif"/> + </imageobject> + </mediaobject> + </figure> + <para>When some string is chosen input receives the corresponding value from the second + column containing <property>#{cit.text}</property></para> + <para>There is also one more important attribute named <emphasis role="italic"> + <property>&quot;tokens&quot;</property> + </emphasis> that specifies separators after which a set of some characters sequence is + defined as a new prefix beginning from this separator and not from the string beginning.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... <rich:suggestiobox for="test" suggestionAction="#{bean.autocomplete}" var="cit" selfRendered="true" tokens=","> <h:column> @@ -134,28 +148,41 @@ </rich:suggestionbox> ... ]]></programlisting> -<para>This example shows that when a city is chosen and a comma and first letter character are input, -AJAX request is called again, but it submits a value starting from the last token:</para> - <figure> - <title>SuggestionBox with chosen word</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/suggestionbox3.gif"/> - </imageobject> -</mediaobject> - </figure> - <para>For a multiple definition use either &quot;,.; &quot; syntax as a value for tokens or link a parameter to some bean property transmitting separators collection.</para> - <para>The component also encompasses <emphasis -role="italic"><property>&quot;layout&quot;</property></emphasis> and <emphasis -role="italic"><property>&quot;style&quot;</property></emphasis> attributes corresponding to dataTable - ones for a table appearing in popup (for additional information, read JSF Reference) and custom - attribute managing AJAX requests sending (for additional information, see <ulink url="http://www.jboss.org/projects/jbossajax4jsf">Ajax4JSF Project</ulink>).</para> - <para>In addition to these attributes common for AJAX action components and limiting requests - quantity and frequency, <property>suggestionBox</property> has one more its own attribute limiting - requests (the <emphasis role="italic"><property>&quot;minChars&quot;</property></emphasis> attribute). The attribute defines characters quantity inputted into a field after which AJAX requests are called to perform suggestion.</para> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/suggestionB... you can see the example of <emphasis role="bold">&lt;rich:suggestionBox&gt;</emphasis> usage and sources for the given example. - </para> - - </section> -</section> \ No newline at end of file + <para>This example shows that when a city is chosen and a comma and first letter character + are input, AJAX request is called again, but it submits a value starting from the last + token:</para> + <figure> + <title>SuggestionBox with chosen word</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/suggestionbox3.gif"/> + </imageobject> + </mediaobject> + </figure> + <para>For a multiple definition use either &quot;,.; &quot; syntax as a value for + tokens or link a parameter to some bean property transmitting separators collection.</para> + <para>The component also encompasses <emphasis role="italic"> + <property>&quot;layout&quot;</property> + </emphasis> and <emphasis role="italic"> + <property>&quot;style&quot;</property> + </emphasis> attributes corresponding to dataTable ones for a table appearing in popup + (for additional information, read JSF Reference) and custom attribute managing AJAX + requests sending (for additional information, see <ulink + url="http://www.jboss.org/projects/jbossajax4jsf">Ajax4JSF Project</ulink>).</para> + <para>In addition to these attributes common for AJAX action components and limiting + requests quantity and frequency, <property>suggestionBox</property> has one more its own + attribute limiting requests (the <emphasis role="italic"> + <property>&quot;minChars&quot;</property> + </emphasis> attribute). The attribute defines characters quantity inputted into a field + after which AJAX requests are called to perform suggestion.</para> + </section> + <section> + <title>Relevant resources links</title> + <para> + <ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/suggestionB... + >Here</ulink> you can see the example of <emphasis role="bold" + >&lt;rich:suggestionBox&gt;</emphasis> usage and sources for the given + example. </para> + </section> +</section> Modified: branches/3.0.2/docs/userguide/en/src/main/docbook/included/tabPanel.xml =================================================================== --- branches/3.0.2/docs/userguide/en/src/main/docbook/included/tabPanel.xml 2007-07-04 16:18:03 UTC (rev 1467) +++ branches/3.0.2/docs/userguide/en/src/main/docbook/included/tabPanel.xml 2007-07-04 16:24:58 UTC (rev 1468) @@ -1,47 +1,47 @@ <?xml version='1.0' encoding='UTF-8'?> <section> -<sectioninfo> -<keywordset> -<keyword>tab</keyword> -<keyword>rich:tabPanel</keyword> -<keyword>HtmlTabPanel</keyword> -</keywordset> -</sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.TabPanel</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlTabPanel</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.TabPanel</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.TabPanelRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.TabPanelTag</entry> - </row> - </tbody> - </tgroup> - </table> - + <sectioninfo> + <keywordset> + <keyword>tab</keyword> + <keyword>rich:tabPanel</keyword> + <keyword>HtmlTabPanel</keyword> + </keywordset> + </sectioninfo> + + <table> + <title>Component identification parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.TabPanel</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlTabPanel</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.TabPanel</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.TabPanelRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.TabPanelTag</entry> + </row> + </tbody> + </tgroup> + </table> + <section> <title>Creating the Component with a Page Tag</title> <para>Here is a simple example as it might be used in a page: </para> @@ -66,41 +66,48 @@ <section> <title>Details of Usage</title> <para>As it was mentioned above, <property>TabPanel</property> groups content on panels and - performs switching from one to another. Hence, modes of switching between panels are described - first of all.</para> -<note><title>Note:</title> -All <property>tabPanels</property> should be wrapped into a form element so as content is correctly -submitted inside. If a form is placed into each tab, the Action elements of Tab controls appear to be out of the form and content submission inside the panels could be performed only for Action components inside tabs.</note> -<para>Switching mode could be chosen with the <property>tabPanel</property> attribute <emphasis + performs switching from one to another. Hence, modes of switching between panels are described + first of all.</para> + <note><title>Note:</title> All <property>tabPanels</property> should be wrapped into a form + element so as content is correctly submitted inside. If a form is placed into each tab, the + Action elements of Tab controls appear to be out of the form and content submission inside the + panels could be performed only for Action components inside tabs.</note> + <para>Switching mode could be chosen with the <property>tabPanel</property> attribute <emphasis + role="italic"> + <property>&quot;mode&quot;</property> + </emphasis> with three possible parameters.</para> + <itemizedlist> + <listitem> Server (DEFAULT)<para>The common submission is performed around + <property>tabPanel</property> and a page is completely rendered on a called panel. Only + one at a time <property>tabPanel</property> is uploaded onto the client side.</para> + </listitem> + <listitem> Ajax<para>AJAX form submission is performed around the + <property>tabPanel</property>, content of the called <property>tabPanel</property> is + uploaded on AJAX request and additionally specified elements in the <emphasis + role="italic"> + <property>&quot;reRender&quot;</property> + </emphasis> attribute are rendered. Only one at a time <property>tabPanel</property> is + uploaded on the client.</para> + </listitem> + <listitem> Client<para> All <property>tabPanels</property> are uploaded on the client side. + The switching from the active to the hidden <property>panel</property> is performed with + client JavaScript.</para> + </listitem> + </itemizedlist> + <para>As a result, the <property>tabPanel</property> is switched to the second tab according to + the action returning outcome for moving onto another page and switching from the second to the + first tab is performed.</para> + <para>There is also the <emphasis role="italic"> + <property>&quot;selectedTab&quot;</property> + </emphasis> attribute. The attribute keeps an active tab name; therefore, an active + <property>tabPanel</property> could be changed with setting a name of the necessary tab to + this attribute.</para> + <para>There is also the <emphasis role="italic"> + <property>&quot;headerAlignment&quot;</property> + </emphasis> attribute responsible for rendering of <property>tabPanel</property> components. + The attribute has several values: left (Default), right, center, which specify Tabs components + location on the top of the tabPanel.</para> -role="italic"><property>&quot;mode&quot;</property></emphasis> with three possible parameters.</para> -<itemizedlist> - <listitem> - Server (DEFAULT)<para>The common submission is performed around <property>tabPanel</property> and a page is completely rendered on a called panel. Only one at a time <property>tabPanel</property> is uploaded onto the client side.</para> - </listitem> - <listitem> - Ajax<para>AJAX form submission is performed around the <property>tabPanel</property>, content - of the called <property>tabPanel</property> is uploaded on AJAX request and additionally specified -elements in the <emphasis -role="italic"><property>&quot;reRender&quot;</property></emphasis> attribute are rendered. Only one at - a time <property>tabPanel</property> is uploaded on the client.</para> - </listitem> - <listitem> - Client<para> - All <property>tabPanels</property> are uploaded on the client side. The switching from the active to the hidden <property>panel</property> is performed with client JavaScript.</para> - </listitem> - </itemizedlist> -<para>As a result, the <property>tabPanel</property> is switched to the second tab according to the action returning outcome for moving onto another page and switching from the second to the first tab is performed.</para> -<para>There is also the <emphasis -role="italic"><property>&quot;selectedTab&quot;</property></emphasis> attribute. The attribute keeps - an active tab name; therefore, an active <property>tabPanel</property> could be changed with setting a name of the necessary - tab to this attribute.</para> - <para>There is also the <emphasis - -role="italic"><property>&quot;headerAlignment&quot;</property></emphasis> attribute responsible for -rendering of <property>tabPanel</property> components. The attribute has several values: left (Default), right, center, which specify -Tabs components location on the top of the tabPanel.</para> - <programlisting role="XML"><![CDATA[... <rich:tabPanel width="40%" headerAlignment="right"> <rich:tab label="Canon"> @@ -115,68 +122,64 @@ </rich:tabPanel> ... ]]></programlisting> - + <figure> <title>TabPanel with right aligned tabs</title> - <mediaobject> + <mediaobject> <imageobject> <imagedata fileref="images/tabPanel1.gif"/> </imageobject> </mediaobject> </figure> - -<para>Except the specific attributes, the component has all necessary attributes for JavaScript events definition.</para> -<itemizedlist> - <listitem> - onmouseover - </listitem> - <listitem> - onmouseout - </listitem> - <listitem> - etc. - </listitem> -</itemizedlist> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/tabPanel.js... you can see the example of <emphasis role="bold">&lt;rich:tabPanel&gt;</emphasis> usage and sources for the given example. - </para> - </section> - <section> + + <para>Except the specific attributes, the component has all necessary attributes for JavaScript + events definition.</para> + <itemizedlist> + <listitem> onmouseover </listitem> + <listitem> onmouseout </listitem> + <listitem> etc. </listitem> + </itemizedlist> + </section> + <section> <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis -role="italic"><property>style class redefinition method</property></emphasis>.</para> - <para>Default style classes are mapped on <emphasis -role="italic"><property>skin parameters</property>.</emphasis></para> - <para>To redefine appearance of all tabPanels at once, there are two ways:</para> - <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis -role="italic"><property>style classes</property></emphasis> used by the tabPanel to your page style sheets</listitem> - </itemizedlist> - -</section> - <section> + <para>For skinnability implementation the components use a <emphasis role="italic"> + <property>style class redefinition method</property> + </emphasis>.</para> + <para>Default style classes are mapped on <emphasis role="italic"><property>skin + parameters</property>.</emphasis></para> + <para>To redefine appearance of all tabPanels at once, there are two ways:</para> + <itemizedlist> + <listitem>to redefine corresponding skin parameters</listitem> + <listitem>to add <emphasis role="italic"> + <property>style classes</property> + </emphasis> used by the tabPanel to your page style sheets</listitem> + </itemizedlist> + + </section> + <section> <title>Definition custom style classes:</title> - - - <figure> - <title>TabPanel style classes</title> - <mediaobject> + + + <figure> + <title>TabPanel style classes</title> + <mediaobject> <imageobject> - <imagedata fileref="images/tabPanel4.gif"/> + <imagedata fileref="images/tabPanel4.gif"/> </imageobject> - </mediaobject> - </figure> - <para>On the screenshot, there are names on the redefined CSS classes that substituted automatically by the framework in order to define an appearance of the corresponding elements of all tab panels on a page.</para> + </mediaobject> + </figure> + <para>On the screenshot, there are names on the redefined CSS classes that substituted + automatically by the framework in order to define an appearance of the corresponding elements + of all tab panels on a page.</para> - <table> - <title>Component skin class</title> + <table> + <title>Component skin class</title> <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>An element defined with a class</entry> - </row> + <thead> + <row> + <entry>Class name</entry> + <entry>An element defined with a class</entry> + </row> </thead> <tbody> <row> @@ -185,25 +188,27 @@ </row> <row> <entry>rich-tabpanel-content-position</entry> - <entry>A class for wrapping element content. It should define a shift equal to borders width in order to overlap a panel and tabs</entry> + <entry>A class for wrapping element content. It should define a shift equal to borders + width in order to overlap a panel and tabs</entry> </row> <row> <entry>rich-tabhdr-side-border</entry> <entry>A class for side elements of a tab header</entry> </row> - <row> - <entry>rich-tabhdr-side-cell</entry> + <row> + <entry>rich-tabhdr-side-cell</entry> <entry>A class for a header internal element</entry> </row> - <row> - <entry>A class name for different tab header states (corresponds to rich-tabhdr-side-cell)</entry> - <entry>An element to apply a class to</entry> + <row> + <entry>A class name for different tab header states (corresponds to + rich-tabhdr-side-cell)</entry> + <entry>An element to apply a class to</entry> </row> - <row> - <entry>rich-tabhdr-cell-active</entry> - <entry>A class for an internal element of an active header</entry> - </row> <row> + <entry>rich-tabhdr-cell-active</entry> + <entry>A class for an internal element of an active header</entry> + </row> + <row> <entry>rich-tabhdr-cell-inactive</entry> <entry>A class for internal element of an inactive label </entry> </row> @@ -211,9 +216,18 @@ <entry>rich-tabhdr-cell-disabled</entry> <entry>A class for an internal element of a disabled label </entry> </row> - </tbody> + </tbody> </tgroup> </table> - </section> - <para>Also it is possible to change look-and-feel settings of individual tab panel component by writing your own style classes in corresponding class attributes of <property>tabPanel</property>.</para> - </section> \ No newline at end of file + <para>Also it is possible to change look-and-feel settings of individual tab panel component by + writing your own style classes in corresponding class attributes of + <property>tabPanel</property>.</para> + </section> + <section> + <title>Relevant resources links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/tabPanel.js... + >Here</ulink> you can see the example of <emphasis role="bold" + >&lt;rich:tabPanel&gt;</emphasis> usage and sources for the given example. </para> + </section> +</section> Modified: branches/3.0.2/docs/userguide/en/src/main/docbook/included/togglePanel.xml =================================================================== --- branches/3.0.2/docs/userguide/en/src/main/docbook/included/togglePanel.xml 2007-07-04 16:18:03 UTC (rev 1467) +++ branches/3.0.2/docs/userguide/en/src/main/docbook/included/togglePanel.xml 2007-07-04 16:24:58 UTC (rev 1468) @@ -1,47 +1,47 @@ <?xml version='1.0' encoding='UTF-8'?> <section> -<sectioninfo> -<keywordset> -<keyword>facet</keyword> -<keyword>rich:togglePanel</keyword> -<keyword>HtmlTogglePanel</keyword> -</keywordset> -</sectioninfo> - - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.TogglePanel</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlTogglePanel</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.TogglePanel</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.TogglePanelRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.TogglePanelTag</entry> - </row> - </tbody> - </tgroup> - </table> - + <sectioninfo> + <keywordset> + <keyword>facet</keyword> + <keyword>rich:togglePanel</keyword> + <keyword>HtmlTogglePanel</keyword> + </keywordset> + </sectioninfo> + + <table> + <title>Component identification parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.TogglePanel</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlTogglePanel</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.TogglePanel</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.TogglePanelRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.TogglePanelTag</entry> + </row> + </tbody> + </tgroup> + </table> + <section> <title>Creating the Component with a Page Tag</title> <para>Here is a simple example as it might be used in a page: </para> @@ -70,41 +70,44 @@ </section> <section> <title>Details of Usage</title> - <para>As it was mentioned above, <property>togglePanel</property> splits content into named - facets that rendered and processed when a click performed on controls linked to this <property>togglePanel</property> - (either switched on the client or send requests on the server for switching).</para> -<para>The initial component state is defined with <emphasis - -role="italic"><property>&quot;initialState&quot;</property></emphasis> attribute, where a facet name that is shown at first is defined.</para> -<note><title>Note:</title> -It&apos;s also possible to define an <property>&quot;empty&quot;</property> facet to implement the functionality as -drop-down panels have and make the facet active when no content is required to be rendered.</note> -<para>Switching mode could be defined with the <emphasis - -role="italic"><property>&quot;switchType&quot;</property></emphasis> attribute with three possible - parameters:</para> -<itemizedlist> - <listitem> - Server (DEFAULT)<para>The common submission is performed around <property>togglePanel</property> and a page is completely rendered on a called panel. Only one at a time panel is uploaded onto the client side.</para> - </listitem> - <listitem> - Ajax<para>AJAX form submission is performed around the panel, content of the called panel is - uploaded on an AJAX request and additionally specified elements in the <emphasis - -role="italic"><property>&quot;reRender&quot;</property></emphasis> attribute are rendered. Only one at a time panel is uploaded on the client side.</para> - </listitem> - <listitem> - Client<para> - All panels are uploaded on the client side. The switching from the active to the hidden panel - is performed with client JavaScript.</para> - </listitem> - </itemizedlist> -<para>&quot;Facets&quot; switching order could be defined on - the side of <emphasis role="bold"><property>&lt;rich:toggleControl&gt;</property></emphasis> component or on the panel. On the side of the togglePanel it&apos;s possible to define facets switching order with the <emphasis -role="italic"><property>&quot;stateOrder&quot;</property></emphasis> attribute. The facets names are enumerated in - such an order that they are rendered when a control is clicked, as it&apos;s not defined where - to switch beforehand.</para> -<programlisting role="XML"><![CDATA[... + <para>As it was mentioned above, <property>togglePanel</property> splits content into named + facets that rendered and processed when a click performed on controls linked to this + <property>togglePanel</property> (either switched on the client or send requests on the + server for switching).</para> + <para>The initial component state is defined with <emphasis role="italic"> + <property>&quot;initialState&quot;</property> + </emphasis> attribute, where a facet name that is shown at first is defined.</para> + <note><title>Note:</title> It&apos;s also possible to define an + <property>&quot;empty&quot;</property> facet to implement the functionality as + drop-down panels have and make the facet active when no content is required to be rendered.</note> + <para>Switching mode could be defined with the <emphasis role="italic"> + <property>&quot;switchType&quot;</property> + </emphasis> attribute with three possible parameters:</para> + <itemizedlist> + <listitem> Server (DEFAULT)<para>The common submission is performed around + <property>togglePanel</property> and a page is completely rendered on a called panel. + Only one at a time panel is uploaded onto the client side.</para> + </listitem> + <listitem> Ajax<para>AJAX form submission is performed around the panel, content of the called + panel is uploaded on an AJAX request and additionally specified elements in the <emphasis + role="italic"> + <property>&quot;reRender&quot;</property> + </emphasis> attribute are rendered. Only one at a time panel is uploaded on the client + side.</para> + </listitem> + <listitem> Client<para> All panels are uploaded on the client side. The switching from the + active to the hidden panel is performed with client JavaScript.</para> + </listitem> + </itemizedlist> + <para>&quot;Facets&quot; switching order could be defined on the side of <emphasis + role="bold"> + <property>&lt;rich:toggleControl&gt;</property> + </emphasis> component or on the panel. On the side of the togglePanel it&apos;s possible + to define facets switching order with the <emphasis role="italic"> + <property>&quot;stateOrder&quot;</property> + </emphasis> attribute. The facets names are enumerated in such an order that they are rendered + when a control is clicked, as it&apos;s not defined where to switch beforehand.</para> + <programlisting role="XML"><![CDATA[... <rich:togglePanel id="panel" initialState="panelB" switchType="client" stateOrder="panelA,panelB,panelC"> <f:facet name="panelA"> @@ -120,13 +123,20 @@ <rich:toggleControl for="panel" value="Switch"/> ... ]]></programlisting> -<para>The example shows a <property>togglePanel</property> initial state when the second facet (panelB) is rendered and successive switching from the first to the second happens.</para> + <para>The example shows a <property>togglePanel</property> initial state when the second facet + (panelB) is rendered and successive switching from the first to the second happens.</para> + </section> + <section> + <title>Look-and-Feel Customization</title> + <para>The component doesn&apos;t have its own representation rendering only content of its + facets, thus all look and feel is set only for content.</para> + </section> + <section> + <title>Relevant resources links</title> <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/togglePanel... you can see the example of <emphasis role="bold">&lt;rich:togglePanel&gt;</emphasis> usage and sources for the given example. + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/togglePanel... + >Here</ulink> you can see the example of <emphasis role="bold" + >&lt;rich:togglePanel&gt;</emphasis> usage and sources for the given example. </para> - </section> - <section> - <title>Look-and-Feel Customization</title> - <para>The component doesn&apos;t have its own representation rendering only content of its facets, thus all look and feel is set only for content.</para> - </section> -</section> \ No newline at end of file + </section> +</section> Modified: branches/3.0.2/docs/userguide/en/src/main/docbook/included/toolBar.xml =================================================================== --- branches/3.0.2/docs/userguide/en/src/main/docbook/included/toolBar.xml 2007-07-04 16:18:03 UTC (rev 1467) +++ branches/3.0.2/docs/userguide/en/src/main/docbook/included/toolBar.xml 2007-07-04 16:24:58 UTC (rev 1468) @@ -1,47 +1,47 @@ <?xml version='1.0' encoding='UTF-8'?> <section> -<sectioninfo> -<keywordset> -<keyword>bar</keyword> -<keyword>rich:toolBar</keyword> -<keyword>HtmlToolBar</keyword> -</keywordset> -</sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.ToolBar</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlToolBar</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.ToolBar</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.ToolBarRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.ToolBarTag</entry> - </row> - </tbody> - </tgroup> - </table> - + <sectioninfo> + <keywordset> + <keyword>bar</keyword> + <keyword>rich:toolBar</keyword> + <keyword>HtmlToolBar</keyword> + </keywordset> + </sectioninfo> + + <table> + <title>Component identification parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.ToolBar</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlToolBar</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.ToolBar</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.ToolBarRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.ToolBarTag</entry> + </row> + </tbody> + </tgroup> + </table> + <section> <title>Creating the Component with a Page Tag</title> <para>Here is a simple example as it might be used in a page: </para> @@ -62,88 +62,92 @@ </section> <section> <title>Details of Usage</title> - <para>A <property>toolBar</property> is a wrapper component that facilitates creation of menu and - <property>tool bars</property>. All components defined inside are located on a stylized bar with possibility to group, - arrange on the both bar sides, and place predefined separators between them.</para> - <para>Grouping and an input side definition is described for <property>toolBarGroup</property> that defines this - functionality.</para> - <para>Separators are located between components with the help of the <emphasis - -role="italic"><property>&quot;itemSeparator&quot;</property></emphasis> attribute - with four predefined values:</para> - <itemizedlist> - <listitem> - none - </listitem> - <listitem> - line - </listitem> - <listitem> - square - </listitem> - <listitem> - disc - </listitem> - </itemizedlist> - <para>For example, when setting a separator of a disc type, the following result is produced:</para> + <para>A <property>toolBar</property> is a wrapper component that facilitates creation of menu + and <property>tool bars</property>. All components defined inside are located on a stylized + bar with possibility to group, arrange on the both bar sides, and place predefined separators + between them.</para> + <para>Grouping and an input side definition is described for <property>toolBarGroup</property> + that defines this functionality.</para> + <para>Separators are located between components with the help of the <emphasis role="italic"> + <property>&quot;itemSeparator&quot;</property> + </emphasis> attribute with four predefined values:</para> + <itemizedlist> + <listitem> none </listitem> + <listitem> line </listitem> + <listitem> square </listitem> + <listitem> disc </listitem> + </itemizedlist> + <para>For example, when setting a separator of a disc type, the following result is produced:</para> <figure> <title>Toolbar with a &quot;disc&quot; separator</title> - - <mediaobject> + + <mediaobject> <imageobject> - <imagedata fileref="images/toolBar2.gif"/> + <imagedata fileref="images/toolBar2.gif"/> </imageobject> - </mediaobject> + </mediaobject> </figure> - <para>Moreover, for <property>toolBar</property> style - <emphasis role="italic"><property>&quot;width&quot;</property></emphasis> and <emphasis role="italic"><property>&quot;height&quot;</property></emphasis> attributes - are placed above all.</para> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/toolBar.jsf... you can see the example of <emphasis role="bold">&lt;rich:toolBar&gt;</emphasis> usage and sources for the given example. - </para> + <para>Moreover, for <property>toolBar</property> style <emphasis role="italic"> + <property>&quot;width&quot;</property> + </emphasis> and <emphasis role="italic"> + <property>&quot;height&quot;</property> + </emphasis> attributes are placed above all.</para> + </section> - <section> + <section> <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis -role="italic"><property>style class redefinition method</property></emphasis>.</para> - <para>Default style classes are mapped on <emphasis -role="italic"><property>skin parameters</property>.</emphasis></para> - <para>To redefine appearance of all toolBars at once, there are two ways:</para> - <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis -role="italic"><property>style classes</property></emphasis> used by the toolBar to your page style sheets</listitem> - </itemizedlist> + <para>For skinnability implementation the components use a <emphasis role="italic"> + <property>style class redefinition method</property> + </emphasis>.</para> + <para>Default style classes are mapped on <emphasis role="italic"><property>skin + parameters</property>.</emphasis></para> + <para>To redefine appearance of all toolBars at once, there are two ways:</para> + <itemizedlist> + <listitem>to redefine corresponding skin parameters</listitem> + <listitem>to add <emphasis role="italic"> + <property>style classes</property> + </emphasis> used by the toolBar to your page style sheets</listitem> + </itemizedlist> <table> - <title>Skin parameters redefinition</title> + <title>Skin parameters redefinition</title> <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters for the toolbar component</entry> - <entry>Corresponding CSS parameters</entry> - </row> + <thead> + <row> + <entry>Skin parameters for the toolbar component</entry> + <entry>Corresponding CSS parameters</entry> + </row> </thead> <tbody> <row> <entry>tableBorderColor</entry> <entry>border-color</entry> </row> - <row> + <row> <entry>headerBackgroundColor</entry> <entry>background-color</entry> </row> </tbody> </tgroup> </table> - </section> - <section> + </section> + <section> <title>Definition custom style classes</title> - <para>On generating, the component substitutes the default class rich-toolbar-exterior - into <emphasis role="italic"><property>style class</property></emphasis> - of a generated component, i.e. to redefine at once all <property>toolBars</property> appearance - on a page, redefine this class in your CSS.</para> - <para>The component also has the standard attributes <emphasis role="italic"><property>&quot;style&quot;</property></emphasis> and - <emphasis role="italic"><property>&quot;styleClass&quot;</property></emphasis> that could redefine an - appearance of a particular component variants.</para> - </section> -</section> \ No newline at end of file + <para>On generating, the component substitutes the default class rich-toolbar-exterior into + <emphasis role="italic"> + <property>style class</property> + </emphasis> of a generated component, i.e. to redefine at once all + <property>toolBars</property> appearance on a page, redefine this class in your CSS.</para> + <para>The component also has the standard attributes <emphasis role="italic"> + <property>&quot;style&quot;</property> + </emphasis> and <emphasis role="italic"> + <property>&quot;styleClass&quot;</property> + </emphasis> that could redefine an appearance of a particular component variants.</para> + </section> + <section> + <title>Relevant resources links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/toolBar.jsf... + >Here</ulink> you can see the example of <emphasis role="bold" + >&lt;rich:toolBar&gt;</emphasis> usage and sources for the given example. </para> + </section> +</section> Modified: branches/3.0.2/docs/userguide/en/src/main/docbook/included/tree.xml =================================================================== --- branches/3.0.2/docs/userguide/en/src/main/docbook/included/tree.xml 2007-07-04 16:18:03 UTC (rev 1467) +++ branches/3.0.2/docs/userguide/en/src/main/docbook/included/tree.xml 2007-07-04 16:24:58 UTC (rev 1468) @@ -1,47 +1,47 @@ <?xml version="1.0" encoding="UTF-8"?> <section> -<sectioninfo> -<keywordset> -<keyword>presentation of data</keyword> -<keyword>rich:tree</keyword> -<keyword>HtmlTree</keyword> -</keywordset> -</sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.Tree</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlTree</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.Tree</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.TreeRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.TreeTag</entry> - </row> - </tbody> - </tgroup> - </table> - + <sectioninfo> + <keywordset> + <keyword>presentation of data</keyword> + <keyword>rich:tree</keyword> + <keyword>HtmlTree</keyword> + </keywordset> + </sectioninfo> + + <table> + <title>Component identification parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.Tree</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlTree</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.Tree</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.TreeRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.TreeTag</entry> + </row> + </tbody> + </tgroup> + </table> + <section> <title>Creating the Component with a Page Tag</title> <para>Here is a simple example as it might be used in a page: </para> @@ -63,58 +63,66 @@ <section> <title>Details of Usage</title> <para>As it has been mentioned above the tree component allows to render any tree-like structure - of data.</para> - <para>A bean property is passed into a tree <property>value</property> attribute. The property keeps the - structure of a org.richfaces.component.TreeNode type. (You may look at this interface description in the API document) The default classes for lists building of a TreeNodeImpl type (it - implements a TreeNode interface) for an XML structure XmlNodeData and XmlTreeDataBuilder are - implemented in the tree component. Hence, in order to provide your own class for TreeNode, it&apos;s - necessary only to implement this interface, i.e. the <emphasis role="italic"><property>&quot;var&quot;</property></emphasis> attribute contains - a name providing an access to data defined with value. </para> - <para>For data output, named <property>tree</property> nodes elements are used. Each element, for - example depending on its definition, could be rendered with markup defined in one of - <property>tree</property> nodes. It&apos;s defined with the - <emphasis role="italic"><property>&quot;nodeFace&quot;</property></emphasis> - attribute that contains treeNode name for elements rendering. </para> - <para>On the screenshot there are examples of nodes defined with different templates on the - following conditions</para> - <programlisting role="JAVA"><![CDATA[nodeFace="#{data.name != 'param-value' ? 'input' : 'text'}" + of data.</para> + <para>A bean property is passed into a tree <property>value</property> attribute. The property + keeps the structure of a org.richfaces.component.TreeNode type. (You may look at this + interface description in the API document) The default classes for lists building of a + TreeNodeImpl type (it implements a TreeNode interface) for an XML structure XmlNodeData and + XmlTreeDataBuilder are implemented in the tree component. Hence, in order to provide your own + class for TreeNode, it&apos;s necessary only to implement this interface, i.e. the + <emphasis role="italic"> + <property>&quot;var&quot;</property> + </emphasis> attribute contains a name providing an access to data defined with value. </para> + <para>For data output, named <property>tree</property> nodes elements are used. Each element, + for example depending on its definition, could be rendered with markup defined in one of + <property>tree</property> nodes. It&apos;s defined with the <emphasis role="italic"> + <property>&quot;nodeFace&quot;</property> + </emphasis> attribute that contains treeNode name for elements rendering. </para> + <para>On the screenshot there are examples of nodes defined with different templates on the + following conditions</para> + <programlisting role="JAVA"><![CDATA[nodeFace="#{data.name != 'param-value' ? 'input' : 'text'}" ]]></programlisting> -<figure> - <title>Different nodes of tree</title> - - <mediaobject> + <figure> + <title>Different nodes of tree</title> + + <mediaobject> <imageobject> - <imagedata fileref="images/tree2.gif"/> + <imagedata fileref="images/tree2.gif"/> </imageobject> - </mediaobject> + </mediaobject> </figure> - <para>Switching on nodes opening/closing (expanded/collapsed) could be implemented in three modes. It could be specified - in the <emphasis role="italic"><property>&quot;switchType&quot;</property></emphasis> attribute. </para> + <para>Switching on nodes opening/closing (expanded/collapsed) could be implemented in three + modes. It could be specified in the <emphasis role="italic"> + <property>&quot;switchType&quot;</property> + </emphasis> attribute. </para> <itemizedlist> - <listitem>AJAX - request onto the server is used for switching </listitem> - <listitem>Server - custom requests onto the server are used for switching</listitem> - <listitem>Client - all data is uploaded onto the server, the switching is implemented with a - client script</listitem> - </itemizedlist> - <para>Common selecting allows also to activate AJAX requests with the - <emphasis role="italic"><property>&quot;ajaxSubmitSelection&quot;</property></emphasis> - attribute (true/false).</para> - <para>To set a model saving during requests, use the - <emphasis role="italic"><property>&quot;preserveModel&quot;</property></emphasis>attribute with - state, request (default) and none values. The attribute is used for cashing data between requests - in state or request. The - <emphasis role="italic"><property>&quot;treeDataLocator&quot;</property></emphasis> attribute - defines a class providing an access to cashed data according to the ids saved in state/request - on recovery or cashing data saving the Id on caching.</para> + <listitem>AJAX - request onto the server is used for switching </listitem> + <listitem>Server - custom requests onto the server are used for switching</listitem> + <listitem>Client - all data is uploaded onto the server, the switching is implemented with a + client script</listitem> + </itemizedlist> + <para>Common selecting allows also to activate AJAX requests with the <emphasis role="italic"> + <property>&quot;ajaxSubmitSelection&quot;</property> + </emphasis> attribute (true/false).</para> + <para>To set a model saving during requests, use the <emphasis role="italic"> + <property>&quot;preserveModel&quot;</property> + </emphasis>attribute with state, request (default) and none values. The attribute is used for + cashing data between requests in state or request. The <emphasis role="italic"> + <property>&quot;treeDataLocator&quot;</property> + </emphasis> attribute defines a class providing an access to cashed data according to the ids + saved in state/request on recovery or cashing data saving the Id on caching.</para> - <para> - The <emphasis role="italic"><property>&quot;icon&quot;</property></emphasis>, - <emphasis role="italic"><property>&quot;iconCollapsed&quot;</property></emphasis>, - <emphasis role="italic"><property>&quot;iconExpanded&quot;</property></emphasis>, - <emphasis role="italic"><property>&quot;iconLeaf&quot;</property></emphasis> - attributes define icons for the component. Also you can define icons using facets with the same names. If the facets are defined, - the corresponding attributes are ignored and facets contents are used as icons. The width of a rendered facet area is 16px. -<programlisting role="JAVA"><![CDATA[... + <para> The <emphasis role="italic"> + <property>&quot;icon&quot;</property> + </emphasis>, <emphasis role="italic"> + <property>&quot;iconCollapsed&quot;</property> + </emphasis>, <emphasis role="italic"> + <property>&quot;iconExpanded&quot;</property> + </emphasis>, <emphasis role="italic"> + <property>&quot;iconLeaf&quot;</property> + </emphasis> attributes define icons for the component. Also you can define icons using facets + with the same names. If the facets are defined, the corresponding attributes are ignored and + facets contents are used as icons. The width of a rendered facet area is 16px. <programlisting role="JAVA"><![CDATA[... <rich:tree ....> ... <f:facet name="icon"> @@ -133,29 +141,27 @@ </rich:tree> ... ]]></programlisting></para> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/tree.jsf?c=... you can see the example of <emphasis role="bold">&lt;rich:tree&gt;</emphasis> usage and sources for the given example. - </para> - </section> - <section> - <title>Built-In Drag and Drop</title> - <para>The tree component functionality provides a built-in support for Drag and Drop operations. - The main usage principles are the same as for Rich Faces Drag and Drop wrapper components. Hence, - to get additional information on the topic, read the corresponding chapters: - <link linkend="dndParam">&quot;rich:dndParam&quot;</link> - <link linkend="dragSupport">&quot;rich:dragSupport&quot;</link> - <link linkend="dragIndicator">&quot;rich:dragIndicator&quot;</link> - <link linkend="dropSupport">&quot;rich:dropSupport&quot;</link> - <property>Tree nodes</property> could be drag or drop elements, so tree has both attributes - groups.</para> - <table> - <title>Drag attributes description</title> + + </section> + <section> + <title>Built-In Drag and Drop</title> + <para>The tree component functionality provides a built-in support for Drag and Drop operations. + The main usage principles are the same as for Rich Faces Drag and Drop wrapper components. + Hence, to get additional information on the topic, read the corresponding chapters: <link + linkend="dndParam">&quot;rich:dndParam&quot;</link> + <link linkend="dragSupport">&quot;rich:dragSupport&quot;</link> + <link linkend="dragIndicator">&quot;rich:dragIndicator&quot;</link> + <link linkend="dropSupport">&quot;rich:dropSupport&quot;</link> + <property>Tree nodes</property> could be drag or drop elements, so tree has both attributes + groups.</para> + <table> + <title>Drag attributes description</title> <tgroup cols="2"> - <thead> - <row> - <entry>dragValue</entry> - <entry>Element value drag passing into processing after a Drop event.</entry> - </row> + <thead> + <row> + <entry>dragValue</entry> + <entry>Element value drag passing into processing after a Drop event.</entry> + </row> </thead> <tbody> <row> @@ -164,20 +170,20 @@ </row> <row> <entry>dragType</entry> - <entry>A drag zone name used to define whether processing is necessary with a Drop zone or - not.</entry> + <entry>A drag zone name used to define whether processing is necessary with a Drop zone + or not.</entry> </row> </tbody> </tgroup> </table> <table> - <title>Drop attributes description</title> + <title>Drop attributes description</title> <tgroup cols="2"> - <thead> - <row> - <entry>dropValue</entry> - <entry>Element value drop passed into processing after Drop events .</entry> - </row> + <thead> + <row> + <entry>dropValue</entry> + <entry>Element value drop passed into processing after Drop events .</entry> + </row> </thead> <tbody> <row> @@ -189,75 +195,88 @@ <entry>Drag zone names allowed to be processed with a drop zone.</entry> </row> <row> - <entry>typeMapping</entry> - <entry>Drag zones names mapping on the corresponding drop zone parameters.</entry> + <entry>typeMapping</entry> + <entry>Drag zones names mapping on the corresponding drop zone parameters.</entry> </row> </tbody> </tgroup> </table> - </section> - <section> - <title>Events handling</title> - <para>Listeners classes that process events on server side are defined with the help:</para> - <itemizedlist> - <listitem>nodeSelectListener is called during request sending on a node selecting event (if request sending on this - event is defined)</listitem> - <listitem>dropListener processes Drop event</listitem> - <listitem>changeExpandListener processes expand/collapse event of a tree node</listitem> - </itemizedlist> - <para>Moreover, to add e.g. some JavaScript effects, client events defined on it are used:</para> - <itemizedlist> - <listitem>onexpand - expand node event</listitem> - <listitem>oncollapse - collapse node event</listitem> - <listitem>ondragexit - element passing out from tree zone event</listitem> - <listitem>ondragstart - drag start event</listitem> - <listitem>ondragend - drag end event (drop event)</listitem> - <listitem>ondragenter - dragged element appearing on tree event</listitem> - </itemizedlist> - - - </section> - <section> - <title>Look-and-Feel Customization</title> - <para>For skinnability implementation the components use a <emphasis -role="italic"><property>style class redefinition method</property></emphasis>.</para> - <para>Default style classes are mapped on <emphasis -role="italic"><property>skin parameters</property>.</emphasis></para> - <para>To redefine appearance of all trees at once, there are two ways:</para> - <itemizedlist> - <listitem>to redefine corresponding skin parameters</listitem> - <listitem>to add <emphasis -role="italic"><property>style classes</property></emphasis> used by the tree to your page style sheets</listitem> - </itemizedlist> - </section> - <section> - <title>Skin parameters redefinition:</title> - <para>There is only one skin parameter for the <property>tree</property> since - <emphasis role="bold"><property>&lt;rich:tree&gt;</property></emphasis> - itself is a wrapper component for <property>tree</property> nodes. Look and feel is - described in details in the <link linkend="treeNode">&quot;treeNode&quot; chapter</link>.</para> - <table> - <title>Skin parameters for wrapper element</title> + </section> + <section> + <title>Events handling</title> + <para>Listeners classes that process events on server side are defined with the help:</para> + <itemizedlist> + <listitem>nodeSelectListener is called during request sending on a node selecting event (if + request sending on this event is defined)</listitem> + <listitem>dropListener processes Drop event</listitem> + <listitem>changeExpandListener processes expand/collapse event of a tree node</listitem> + </itemizedlist> + <para>Moreover, to add e.g. some JavaScript effects, client events defined on it are used:</para> + <itemizedlist> + <listitem>onexpand - expand node event</listitem> + <listitem>oncollapse - collapse node event</listitem> + <listitem>ondragexit - element passing out from tree zone event</listitem> + <listitem>ondragstart - drag start event</listitem> + <listitem>ondragend - drag end event (drop event)</listitem> + <listitem>ondragenter - dragged element appearing on tree event</listitem> + </itemizedlist> + + + </section> + <section> + <title>Look-and-Feel Customization</title> + <para>For skinnability implementation the components use a <emphasis role="italic"> + <property>style class redefinition method</property> + </emphasis>.</para> + <para>Default style classes are mapped on <emphasis role="italic"><property>skin + parameters</property>.</emphasis></para> + <para>To redefine appearance of all trees at once, there are two ways:</para> + <itemizedlist> + <listitem>to redefine corresponding skin parameters</listitem> + <listitem>to add <emphasis role="italic"> + <property>style classes</property> + </emphasis> used by the tree to your page style sheets</listitem> + </itemizedlist> + </section> + <section> + <title>Skin parameters redefinition:</title> + <para>There is only one skin parameter for the <property>tree</property> since <emphasis + role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> itself is a wrapper component for <property>tree</property> nodes. Look and feel + is described in details in the <link linkend="treeNode">&quot;treeNode&quot; + chapter</link>.</para> + <table> + <title>Skin parameters for wrapper element</title> <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters for wrapper element</entry> - <entry>Properties corresponding to CSS parameter</entry> - </row> + <thead> + <row> + <entry>Skin parameters for wrapper element</entry> + <entry>Properties corresponding to CSS parameter</entry> + </row> </thead> <tbody> <row> <entry>overAllBackground</entry> <entry>background-color </entry> </row> - </tbody> + </tbody> </tgroup> </table> - </section> - <section> - <title>Definition custom style classes:</title> - <para>The <property>tree</property> also has only one predefined Style Class responsible - for displaying a wrapper element of the <property>tree</property> - <emphasis role="bold"><property>&lt;rich:tree&gt;</property></emphasis> - redefining of which will change look and feel of all <property>trees</property> on the page.</para> - </section> - </section> \ No newline at end of file + </section> + <section> + <title>Definition custom style classes:</title> + <para>The <property>tree</property> also has only one predefined Style Class responsible for + displaying a wrapper element of the <property>tree</property> - <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> redefining of which will change look and feel of all <property>trees</property> on + the page.</para> + </section> + <section> + <title>Relevant resources links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/tree.jsf?c=... + you can see the example of <emphasis role="bold">&lt;rich:tree&gt;</emphasis> usage + and sources for the given example. </para> + </section> +</section>