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

Author: SeanRogers Date: 2010-08-16 02:25:19 -0400 (Mon, 16 Aug 2010) New Revision: 18648 Added: branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcolumn-Basic_column_example.xml_sample branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcolumn-Column_spanning_example.xml_sample branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcolumn-Row_spanning_example.xml_sample branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcolumnGroup-Complex_headers_using_column_groups.xml_sample branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcolumns-Basic_columns_example.xml_sample branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcolumns-Using_richcolumns_and_richcolumn_together.xml_sample branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richdataGrid-ajaxKeys_example.xml_sample Modified: branches/development/docs/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Tables_and_grids.xml Log: Updated tables and lists (RF-8859) Modified: branches/development/docs/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Tables_and_grids.xml =================================================================== --- branches/development/docs/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Tables_and_grids.xml 2010-08-16 04:06:16 UTC (rev 18647) +++ branches/development/docs/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Tables_and_grids.xml 2010-08-16 06:25:19 UTC (rev 18648) @@ -15,428 +15,367 @@ This chapter covers all components related to the display of tables and grids. </para> + <!--<a4j:repeat>--> <section id="sect-Component_Reference-Actions-a4jrepeat"> <title><sgmltag>&lt;a4j:repeat&gt;</sgmltag></title> - <itemizedlist> - <listitem> - <para> - <parameter>component-type</parameter>: <classname>org.ajax4jsf.Repeat</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>component-class</parameter>: <classname>org.ajax4jsf.component.html.HtmlAjaxRepeat</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>component-family</parameter>: <classname>javax.faces.Data</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>renderer-type</parameter>: <classname>org.ajax4jsf.components.RepeatRenderer</classname> - </para> - </listitem> - </itemizedlist> <para> The <sgmltag>&lt;a4j:repeat&gt;</sgmltag> component is used to iterate changes through a repeated collection of components. It allows specific rows of items to be updated without sending Ajax requests for the entire collection. The <sgmltag>&lt;a4j:repeat&gt;</sgmltag> component forms the basis for many of the tabular components detailed in <xref linkend="chap-Component_Reference-Tables_and_grids" />. </para> - <para> - The contents of the collection are determined using Expression Language (<acronym>EL</acronym>). The data model for the contents is specified with the <varname>value</varname> attribute. The <varname>var</varname> attribute names the object to use when iterating through the collection. This object is then referenced in the relevant child components. After an Ajax request, only the rows specified with the <varname>ajaxKeys</varname> attribute are updated rather than the entire collection. <xref linkend="exam-Component_Reference-a4jrepeat-a4jrepeat_example" /> shows how to use <sgmltag>&lt;a4j:repeat&gt;</sgmltag> to maintain a simple table. - </para> - <example id="exam-Component_Reference-a4jrepeat-a4jrepeat_example"> - <title><sgmltag>&lt;a4j:repeat&gt;</sgmltag> example</title> - -<programlisting language="XML" role="XML"><xi:include href="extras/exam-Component_Reference-Tables_and_grids-a4jrepeat_example.xml_sample" parse="text" xmlns:xi="http://www.w3.org/2001/XInclude" /> -</programlisting> + + <section id="sect-Component_Reference-a4jrepeat-Basic_usage"> + <title>Basic usage</title> <para> - Each row of a table contains two cells: one showing the item code, and the other showing the item price. The table is generated by iterating through items in the <code>repeatBeans.items</code> data model. + The contents of the collection are determined using Expression Language (<acronym>EL</acronym>). The data model for the contents is specified with the <varname>value</varname> attribute. The <varname>var</varname> attribute names the object to use when iterating through the collection. This object is then referenced in the relevant child components. After an Ajax request, only the rows specified with the <varname>ajaxKeys</varname> attribute are updated rather than the entire collection. <xref linkend="exam-Component_Reference-a4jrepeat-a4jrepeat_example" /> shows how to use <sgmltag>&lt;a4j:repeat&gt;</sgmltag> to maintain a simple table. </para> - </example> - <para> - The <sgmltag>&lt;a4j:repeat&gt;</sgmltag> component uses other attributes common to iteration components, such as the <varname>first</varname> attribute for specifying the first item for iteration, and the <varname>rows</varname> attribute for specifying the number of rows of items to display. - </para> + <example id="exam-Component_Reference-a4jrepeat-a4jrepeat_example"> + <title><sgmltag>&lt;a4j:repeat&gt;</sgmltag> example</title> + <programlisting language="XML" role="XML"><xi:include href="extras/exam-Component_Reference-Tables_and_grids-a4jrepeat_example.xml_sample" parse="text" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + <para> + Each row of a table contains two cells: one showing the item code, and the other showing the item price. The table is generated by iterating through items in the <code>repeatBeans.items</code> data model. + </para> + </example> + <para> + The <sgmltag>&lt;a4j:repeat&gt;</sgmltag> component uses other attributes common to iteration components, such as the <varname>first</varname> attribute for specifying the first item for iteration, and the <varname>rows</varname> attribute for specifying the number of rows of items to display. + </para> + </section> + + <section id="sect-Component_Reference-a4jrepeat-Reference_data"> + <title>Reference data</title> + <itemizedlist> + <listitem> + <para> + <parameter>component-type</parameter>: <classname>org.ajax4jsf.Repeat</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>component-class</parameter>: <classname>org.ajax4jsf.component.html.HtmlAjaxRepeat</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>component-family</parameter>: <classname>javax.faces.Data</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>renderer-type</parameter>: <classname>org.ajax4jsf.components.RepeatRenderer</classname> + </para> + </listitem> + </itemizedlist> + </section> </section> + <!--<rich:column>--> <section id="sect-Component_Reference-Tables_and_grids-richcolumn"> <title><sgmltag>&lt;rich:column&gt;</sgmltag></title> - <itemizedlist> - <listitem> - <para> - <parameter>component-type</parameter>: <classname>org.richfaces.Column</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlColumn</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>component-family</parameter>: <classname>org.richfaces.Column</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>renderer-type</parameter>: <classname>org.richfaces.renderkit.CellRenderer</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.ColumnTag</classname> - </para> - </listitem> - </itemizedlist> <para> The <sgmltag>&lt;rich:column&gt;</sgmltag> component facilitates columns in a table or other <classname>UIData</classname> component. It supports merging columns and rows, sorting, filtering, and customized skinning. </para> - <para> - In general usage, the <sgmltag>&lt;rich:column&gt;</sgmltag> component is used in the same was as the JavaServer Faces (<acronym>JSF</acronym>) <sgmltag>&lt;h:column&gt;</sgmltag> component. It requires no extra attributes for basic usage, as shown in <xref linkend="exam-Component_Reference-richcolumn-Basic_column_example" />. - </para> - <example id="exam-Component_Reference-richcolumn-Basic_column_example"> - <title>Basic column example</title> - -<programlisting language="XML" role="XML">&lt;rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"&gt; - &lt;rich:column&gt; - &lt;f:facet name="header"&gt;State Flag&lt;/f:facet&gt; - &lt;h:graphicImage value="#{cap.stateFlag}"/&gt; - &lt;/rich:column&gt; - &lt;rich:column&gt; - &lt;f:facet name="header"&gt;State Name&lt;/f:facet&gt; - &lt;h:outputText value="#{cap.state}"/&gt; - &lt;/rich:column&gt; - &lt;rich:column &gt; - &lt;f:facet name="header"&gt;State Capital&lt;/f:facet&gt; - &lt;h:outputText value="#{cap.name}"/&gt; - &lt;/rich:column&gt; - &lt;rich:column&gt; - &lt;f:facet name="header"&gt;Time Zone&lt;/f:facet&gt; - &lt;h:outputText value="#{cap.timeZone}"/&gt; - &lt;/rich:column&gt; -&lt;/rich:dataTable&gt; -</programlisting> - <blockquote> - <figure id="figu-Component_Reference-Basic_column_example-Basic_column_example"> - <title>Basic column example</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/figu-Component_Reference-richcolumn-Basic_column_example.png" format="PNG" /> - </imageobject> - <textobject> - <para> - The result of the basic column example, displaying a table with a header row and four columns. - </para> - </textobject> - </mediaobject> - </figure> - </blockquote> - </example> - <para> - Columns can be merged by using the <varname>colspan</varname> attribute to specify how many normal columns to span. The <varname>colspan</varname> attribute is used in conjunction with the <varname>breakBefore</varname> attribute on the next column to determine how the merged columns are laid out. <xref linkend="exam-Component_Reference-richcolumn-Column_spanning_example" />. - </para> - <example id="exam-Component_Reference-richcolumn-Column_spanning_example"> - <title>Column spanning example</title> - -<programlisting language="XML" role="XML">&lt;rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"&gt; - &lt;rich:column colspan="3"&gt; - &lt;h:graphicImage value="#{cap.stateFlag}"/&gt; - &lt;/rich:column&gt; - &lt;rich:column breakBefore="true"&gt; - &lt;h:outputText value="#{cap.state}"/&gt; - &lt;/rich:column&gt; - &lt;rich:column &gt; - &lt;h:outputText value="#{cap.name}"/&gt; - &lt;/rich:column&gt; - &lt;rich:column&gt; - &lt;h:outputText value="#{cap.timeZone}"/&gt; - &lt;/rich:column&gt; -&lt;/rich:dataTable&gt; -</programlisting> - <blockquote> - <figure id="figu-Component_Reference-Column_spanning_example-Column_spanning_example"> - <title>Column spanning example</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/figu-Component_Reference-richcolumn-Column_spanning_example.png" format="PNG" /> - </imageobject> - <textobject> - <para> - The result of the column spanning example, showing the first column (the state flag column) spanning a width of three columns, with the others broken onto the following line. - </para> - </textobject> - </mediaobject> - </figure> - </blockquote> - </example> - <para> - Similarly, the <varname>rowspan</varname> attribute can be used to merge and span rows. Again the <varname>breakBefore</varname> attribute needs to be used on related <sgmltag>&lt;rich:column&gt;</sgmltag> components to define the layout. <xref linkend="exam-Component_Reference-richcolumn-Row_spanning_example" /> and the resulting <xref linkend="figu-Component_Reference-Complex_headers_using_column_groups-Complex_headers_using_column_groups" /> show the first column of the table spanning three rows. - </para> - <example id="exam-Component_Reference-richcolumn-Row_spanning_example"> - <title>Row spanning example</title> - -<programlisting language="XML" role="XML">&lt;rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"&gt; - &lt;rich:column rowspan="3"&gt; - &lt;f:facet name="header"&gt;State Flag&lt;/f:facet&gt; - &lt;h:graphicImage value="#{cap.stateFlag}"/&gt; - &lt;/rich:column&gt; - &lt;rich:column&gt; - &lt;f:facet name="header"&gt;State Info&lt;/f:facet&gt; - &lt;h:outputText value="#{cap.state}"/&gt; - &lt;/rich:column&gt; - &lt;rich:column breakBefore="true"&gt; - &lt;h:outputText value="#{cap.name}"/&gt; - &lt;/rich:column&gt; - &lt;rich:column breakBefore="true"&gt; - &lt;h:outputText value="#{cap.timeZone}"/&gt; - &lt;/rich:column&gt; -&lt;/rich:dataTable&gt; -</programlisting> - <blockquote> - <figure id="figu-Component_Reference-Row_spanning_example-Row_spanning_example"> - <title>Row spanning example</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/figu-Component_Reference-richcolumn-Row_spanning_example.png" format="PNG" /> - </imageobject> - <textobject> - <para> - The result of the row spanning example, showing the first column of the table spanning three rows. - </para> - </textobject> - </mediaobject> - </figure> - </blockquote> - </example> - <para> - For details on filtering and sorting columns, refer to <xref linkend="sect-Component_Reference-Tables_and_grids-Table_filtering" /> and <xref linkend="sect-Component_Reference-Tables_and_grids-Table_sorting" />. - </para> + + <section id="sect-Component_Reference-richcolumn-Basic_usage"> + <title>Basic usage</title> + <para> + In general usage, the <sgmltag>&lt;rich:column&gt;</sgmltag> component is used in the same was as the JavaServer Faces (<acronym>JSF</acronym>) <sgmltag>&lt;h:column&gt;</sgmltag> component. It requires no extra attributes for basic usage, as shown in <xref linkend="exam-Component_Reference-richcolumn-Basic_column_example" />. + </para> + <example id="exam-Component_Reference-richcolumn-Basic_column_example"> + <title>Basic column example</title> + <programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Component_Reference-richcolumn-Basic_column_example.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + <blockquote> + <figure id="figu-Component_Reference-Basic_column_example-Basic_column_example"> + <title>Basic column example</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/figu-Component_Reference-richcolumn-Basic_column_example.png" format="PNG" /> + </imageobject> + <textobject> + <para> + The result of the basic column example, displaying a table with a header row and four columns. + </para> + </textobject> + </mediaobject> + </figure> + </blockquote> + </example> + </section> + + <section id="sect-Component_Reference-richcolumn-Spanning_columns"> + <title>Spanning columns</title> + <para> + Columns can be merged by using the <varname>colspan</varname> attribute to specify how many normal columns to span. The <varname>colspan</varname> attribute is used in conjunction with the <varname>breakBefore</varname> attribute on the next column to determine how the merged columns are laid out. <xref linkend="exam-Component_Reference-richcolumn-Column_spanning_example" />. + </para> + <example id="exam-Component_Reference-richcolumn-Column_spanning_example"> + <title>Column spanning example</title> + <programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Component_Reference-richcolumn-Column_spanning_example.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + <blockquote> + <figure id="figu-Component_Reference-Column_spanning_example-Column_spanning_example"> + <title>Column spanning example</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/figu-Component_Reference-richcolumn-Column_spanning_example.png" format="PNG" /> + </imageobject> + <textobject> + <para> + The result of the column spanning example, showing the first column (the state flag column) spanning a width of three columns, with the others broken onto the following line. + </para> + </textobject> + </mediaobject> + </figure> + </blockquote> + </example> + </section> + + <section id="sect-Component_Reference-richcolumn-Spanning_rows"> + <title>Spanning rows</title> + <para> + Similarly, the <varname>rowspan</varname> attribute can be used to merge and span rows. Again the <varname>breakBefore</varname> attribute needs to be used on related <sgmltag>&lt;rich:column&gt;</sgmltag> components to define the layout. <xref linkend="exam-Component_Reference-richcolumn-Row_spanning_example" /> and the resulting <xref linkend="figu-Component_Reference-Complex_headers_using_column_groups-Complex_headers_using_column_groups" /> show the first column of the table spanning three rows. + </para> + <example id="exam-Component_Reference-richcolumn-Row_spanning_example"> + <title>Row spanning example</title> + <programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Component_Reference-richcolumn-Row_spanning_example.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + <blockquote> + <figure id="figu-Component_Reference-Row_spanning_example-Row_spanning_example"> + <title>Row spanning example</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/figu-Component_Reference-richcolumn-Row_spanning_example.png" format="PNG" /> + </imageobject> + <textobject> + <para> + The result of the row spanning example, showing the first column of the table spanning three rows. + </para> + </textobject> + </mediaobject> + </figure> + </blockquote> + </example> + <para> + For details on filtering and sorting columns, refer to <xref linkend="sect-Component_Reference-Tables_and_grids-Table_filtering" /> and <xref linkend="sect-Component_Reference-Tables_and_grids-Table_sorting" />. + </para> + </section> + + <section id="sect-Component_Reference-richcolumn-Reference_data"> + <title>Reference data</title> + <itemizedlist> + <listitem> + <para> + <parameter>component-type</parameter>: <classname>org.richfaces.Column</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlColumn</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>component-family</parameter>: <classname>org.richfaces.Column</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>renderer-type</parameter>: <classname>org.richfaces.renderkit.CellRenderer</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.ColumnTag</classname> + </para> + </listitem> + </itemizedlist> + </section> </section> + <!--<rich:columnGroup>--> <section id="sect-Component_Reference-Tables_and_grids-richcolumnGroup"> <title><sgmltag>&lt;rich:columnGroup&gt;</sgmltag></title> - <itemizedlist> - <listitem> - <para> - <parameter>component-type</parameter>: <classname>org.richfaces.ColumnGroup</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlColumnGroup</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>component-family</parameter>: <classname>org.richfaces.ColumnGroup</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>renderer-type</parameter>: <classname>org.richfaces.ColumnGroupRenderer</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.ColumnGroupTag</classname> - </para> - </listitem> - </itemizedlist> <para> The <sgmltag>&lt;rich:columnGroup&gt;</sgmltag> component combines multiple columns in a single row to organize complex parts of a table. The resulting effect is similar to using the <varname>breakBefore</varname> attribute of the <sgmltag>&lt;rich:column&gt;</sgmltag> component, but is clearer and easier to follow in the source code. </para> - <para> - The <sgmltag>&lt;rich:columnGroup&gt;</sgmltag> can also be used to create complex headers in a table. <xref linkend="exam-Component_Reference-richcolumnGroup-Complex_headers_using_column_groups" /> and the resulting <xref linkend="figu-Component_Reference-Complex_headers_using_column_groups-Complex_headers_using_column_groups" /> demonstrate how complex headers can be achieved. - </para> - <example id="exam-Component_Reference-richcolumnGroup-Complex_headers_using_column_groups"> - <title>Complex headers using column groups</title> - -<programlisting language="XML" role="XML">&lt;rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5" id="sublist"&gt; - &lt;f:facet name="header"&gt; - &lt;rich:columnGroup&gt; - &lt;rich:column rowspan="2"&gt; - &lt;h:outputText value="State Flag"/&gt; - &lt;/rich:column&gt; - &lt;rich:column colspan="3"&gt; - &lt;h:outputText value="State Info"/&gt; - &lt;/rich:column&gt; - &lt;rich:column breakBefore="true"&gt; - &lt;h:outputText value="State Name"/&gt; - &lt;/rich:column&gt; - &lt;rich:column&gt; - &lt;h:outputText value="State Capital"/&gt; - &lt;/rich:column&gt; - &lt;rich:column&gt; - &lt;h:outputText value="Time Zone"/&gt; - &lt;/rich:column&gt; - &lt;/rich:columnGroup&gt; - &lt;/f:facet&gt; - &lt;rich:column&gt; - &lt;h:graphicImage value="#{cap.stateFlag}"/&gt; - &lt;/rich:column&gt; - &lt;rich:column&gt; - &lt;h:outputText value="#{cap.state}"/&gt; - &lt;/rich:column&gt; - &lt;rich:column&gt; - &lt;h:outputText value="#{cap.name}"/&gt; - &lt;/rich:column&gt; - &lt;rich:column&gt; - &lt;h:outputText value="#{cap.timeZone}"/&gt; - &lt;/rich:column&gt; -&lt;/rich:dataTable&gt; -</programlisting> - <blockquote> - <figure id="figu-Component_Reference-Complex_headers_using_column_groups-Complex_headers_using_column_groups"> - <title>Complex headers using column groups</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/figu-Component_Reference-richcolumnGroup-Complex_headers_using_column_groups.png" format="PNG" /> - </imageobject> - <textobject> - <para> - A table with a complex header, where three of the columns are grouped together under a common title. - </para> - </textobject> - </mediaobject> - </figure> - </blockquote> - </example> + <section id="sect-Component_Reference-richcolumnGroup-Complex_headers"> + <title>Complex headers</title> + <para> + The <sgmltag>&lt;rich:columnGroup&gt;</sgmltag> can also be used to create complex headers in a table. <xref linkend="exam-Component_Reference-richcolumnGroup-Complex_headers_using_column_groups" /> and the resulting <xref linkend="figu-Component_Reference-Complex_headers_using_column_groups-Complex_headers_using_column_groups" /> demonstrate how complex headers can be achieved. + </para> + <example id="exam-Component_Reference-richcolumnGroup-Complex_headers_using_column_groups"> + <title>Complex headers using column groups</title> + <programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Component_Reference-richcolumnGroup-Complex_headers_using_column_groups.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + <blockquote> + <figure id="figu-Component_Reference-Complex_headers_using_column_groups-Complex_headers_using_column_groups"> + <title>Complex headers using column groups</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/figu-Component_Reference-richcolumnGroup-Complex_headers_using_column_groups.png" format="PNG" /> + </imageobject> + <textobject> + <para> + A table with a complex header, where three of the columns are grouped together under a common title. + </para> + </textobject> + </mediaobject> + </figure> + </blockquote> + </example> + </section> + + <section id="sect-Component_Reference-richcolumnGroup-Reference_data"> + <title>Reference data</title> + <itemizedlist> + <listitem> + <para> + <parameter>component-type</parameter>: <classname>org.richfaces.ColumnGroup</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlColumnGroup</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>component-family</parameter>: <classname>org.richfaces.ColumnGroup</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>renderer-type</parameter>: <classname>org.richfaces.ColumnGroupRenderer</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.ColumnGroupTag</classname> + </para> + </listitem> + </itemizedlist> + </section> </section> + <!--<rich:columns>--> <section id="sect-Component_Reference-Tables_and_grids-richcolumns"> <title><sgmltag>&lt;rich:columns&gt;</sgmltag></title> - <itemizedlist> - <listitem> - <para> - <parameter>component-type</parameter>: <classname>org.richfaces.Column</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.ColumnsTagHandler</classname> - </para> - </listitem> - </itemizedlist> <para> The <sgmltag>&lt;rich:columns&gt;</sgmltag> component allows for dynamic sets of columns for tables. Columns and rows can be merged, and the look and feel can be highly customized. The component gets a list from a data model and creates a corresponding set of columns in a <sgmltag>&lt;rich:dataTable&gt;</sgmltag> component. The <sgmltag>&lt;rich:columns&gt;</sgmltag> component also supports <literal>header</literal> and <literal>footer</literal> facets. </para> - <para> - Basic usage of the <sgmltag>&lt;rich:columns&gt;</sgmltag> component requires the <varname>value</varname> attribute, which points to the data model; the <varname>var</varname> attribute, which holds the current variable for the collection of data; and the <varname>index</varname> attribute, which holds the current counter. The <varname>id</varname> attribute is used for when the individuals rows require identifiers for Ajax events. - </para> - <example id="exam-Component_Reference-richcolumns-Basic_columns_example"> - <title>Basic columns example</title> - -<programlisting language="XML" role="XML">&lt;rich:dataTable value="#{dataTableScrollerBean.model}" var="model" width="750"&gt; - &lt;rich:columns value="#{dataTableScrollerBean.columns}" var="columns" index="ind" id="column#{ind}"&gt; - &lt;f:facet name="header"&gt; - &lt;h:outputText value="#{columns.header}" /&gt; - &lt;/f:facet&gt; - &lt;h:outputText value="#{model[ind].model} " /&gt; - &lt;h:outputText value="#{model[ind].mileage} miles " /&gt; - &lt;h:outputText value="#{model[ind].price}$" /&gt; - &lt;/rich:columns&gt; -&lt;/rich:dataTable&gt; -</programlisting> - </example> - <para> - The output can be customized to display specific columns and rows. The <varname>columns</varname> attribute specifies the number of columns. The <varname>rowspan</varname> attribute specifies the number of rows to display; if the attribute is set to <literal>0</literal>, all remaining rows in the table are displayed. The <varname>begin</varname> and <varname>end</varname> attributes are used to specify the first and last zero-based iteration items to display in the table. Columns can be adjusted using the <varname>colspan</varname>, <varname>rowspan</varname>, and <varname>breakBefore</varname> attributes the same as with the <sgmltag>&lt;rich:column&gt;</sgmltag> component. - </para> - <para> - The <sgmltag>&lt;rich:columns&gt;</sgmltag> component can be used alongside <sgmltag>&lt;rich:column&gt;</sgmltag> components. - </para> - <example id="exam-Component_Reference-richcolumns-Using_richcolumns_and_richcolumn_together"> + <section id="sect-Component_Reference-richcolumns-Basic_usage"> + <title>Basic usage</title> + <para> + Basic usage of the <sgmltag>&lt;rich:columns&gt;</sgmltag> component requires the <varname>value</varname> attribute, which points to the data model; the <varname>var</varname> attribute, which holds the current variable for the collection of data; and the <varname>index</varname> attribute, which holds the current counter. The <varname>id</varname> attribute is used for when the individuals rows require identifiers for Ajax events. + </para> + <example id="exam-Component_Reference-richcolumns-Basic_columns_example"> + <title>Basic columns example</title> + <programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Component_Reference-richcolumns-Basic_columns_example.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + </example> + </section> + + <section id="sect-Component_Reference-richcolumns-Customizing_the_view"> + <title>Customizing the view</title> + <para> + The output can be customized to display specific columns and rows. The <varname>columns</varname> attribute specifies the number of columns. The <varname>rowspan</varname> attribute specifies the number of rows to display; if the attribute is set to <literal>0</literal>, all remaining rows in the table are displayed. The <varname>begin</varname> and <varname>end</varname> attributes are used to specify the first and last zero-based iteration items to display in the table. Columns can be adjusted using the <varname>colspan</varname>, <varname>rowspan</varname>, and <varname>breakBefore</varname> attributes the same as with the <sgmltag>&lt;rich:column&gt;</sgmltag> component. + </para> + </section> + + <section id="sect-Component_Reference-richcolumns-Using_richcolumns_and_richcolumn_together"> <title>Using <sgmltag>&lt;rich:columns&gt;</sgmltag> and <sgmltag>&lt;rich:column&gt;</sgmltag> together</title> - -<programlisting language="XML" role="XML">&lt;rich:dataTable value="#{dataTableScrollerBean.model}" var="model" width="500px" rows="5"&gt; - &lt;f:facet name="header"&gt; - &lt;h:outputText value="Cars Available"&gt;&lt;/h:outputText&gt; - &lt;/f:facet&gt; - &lt;rich:columns value="#{dataTableScrollerBean.columns}" var="columns" index="ind"&gt; - &lt;f:facet name="header"&gt; - &lt;h:outputText value="#{columns.header}" /&gt; - &lt;/f:facet&gt; - &lt;h:outputText value="#{model[ind].model} " /&gt; - &lt;/rich:columns&gt; - &lt;rich:column&gt; - &lt;f:facet name="header"&gt; - &lt;h:outputText value="Price" /&gt; - &lt;/f:facet&gt; - &lt;h:outputText value="Price" /&gt; - &lt;/rich:column&gt; - &lt;rich:columns value="#{dataTableScrollerBean.columns}" var="columns" index="ind"&gt; - &lt;f:facet name="header"&gt; - &lt;h:outputText value="#{columns.header}" /&gt; - &lt;/f:facet&gt; - &lt;h:outputText value="#{model[ind].mileage}$" /&gt; - &lt;/rich:columns&gt; -&lt;/rich:dataTable&gt; -</programlisting> - </example> - <para> - For details on filtering and sorting columns, refer to <xref linkend="sect-Component_Reference-Tables_and_grids-Table_filtering" /> and <xref linkend="sect-Component_Reference-Tables_and_grids-Table_sorting" />. - </para> + <para> + The <sgmltag>&lt;rich:columns&gt;</sgmltag> component can be used alongside one or more <sgmltag>&lt;rich:column&gt;</sgmltag> components. + </para> + <example id="exam-Component_Reference-richcolumns-Using_richcolumns_and_richcolumn_together"> + <title>Using <sgmltag>&lt;rich:columns&gt;</sgmltag> and <sgmltag>&lt;rich:column&gt;</sgmltag> together</title> + <programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Component_Reference-richcolumns-Using_richcolumns_and_richcolumn_together.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + </example> + <para> + For details on filtering and sorting columns, refer to <xref linkend="sect-Component_Reference-Tables_and_grids-Table_filtering" /> and <xref linkend="sect-Component_Reference-Tables_and_grids-Table_sorting" />. + </para> + </section> + + <section id="sect-Component_Reference-richcolumns-Reference_data"> + <title>Reference data</title> + <itemizedlist> + <listitem> + <para> + <parameter>component-type</parameter>: <classname>org.richfaces.Column</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.ColumnsTagHandler</classname> + </para> + </listitem> + </itemizedlist> + </section> </section> - <!-- TODO not in M2 --> - <!-- + <!--<rich:dataDefinitionList>--> <section id="sect-Component_Reference-Tables_and_grids-richdataDefinitionList"> <title><sgmltag>&lt;rich:dataDefinitionList&gt;</sgmltag></title> - <itemizedlist> - <listitem> - <para> - <parameter>component-type</parameter>: <classname>org.richfaces.DataDefinitionList</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlDataDefinitionList</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>component-family</parameter>: <classname>org.richfaces.DataDefinitionList</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>renderer-type</parameter>: <classname>org.richfaces.DataDefinitionListRenderer</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.DataDefinitionListTag</classname> - </para> - </listitem> - </itemizedlist> <para> The <sgmltag>&lt;rich:dataDefinitionList&gt;</sgmltag> component renders a list of items with definitions. The component uses a data model for managing the list items, which can be updated dynamically. </para> - <para> - The <varname>var</varname> attribute names a variable for iterating through the items in the data model. The items to iterate through are determined with the <varname>value</varname> attribute by using EL (Expression Lanugage). The <varname>first</varname> attribute specifies which item in the data model to start from, and the <varname>rows</varname> attribute specifies the number of items to list. The <varname>title</varname> attribute is used for a floating tool-tip. <xref linkend="exam-Component_Reference-richdataDefinitionList-richdataDefinitionList_example" /> shows a simple example using the <sgmltag>&lt;rich:dataDefinitionList&gt;</sgmltag> component. - </para> - <example id="exam-Component_Reference-richdataDefinitionList-richdataDefinitionList_example"> - <title><sgmltag>&lt;rich:dataDefinitionList&gt;</sgmltag> example</title> - -<programlisting language="XML" role="XML"><xi:include href="extras/exam-Component_Reference-Tables_and_grids-richdataDefinitionList_example.xml_sample" parse="text" xmlns:xi="http://www.w3.org/2001/XInclude" /> -</programlisting> - <blockquote> - <figure id="figu-Component_Reference-richdataDefinitionList_example-richdataDefinitionList_example"> - <title><sgmltag>&lt;rich:dataDefinitionList&gt;</sgmltag> example</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/figu-Component_Reference-Tables_and_grids-richdataDefinitionList_example.png" format="PNG" /> - </imageobject> - <textobject> - <para> - A list of cars with their price and mileage displayed as a data definition. - </para> - </textobject> - </mediaobject> - </figure> - </blockquote> - </example> + + <section id="sect-Component_Reference-richdataDefinitionList-Basic_usage"> + <title>Basic usage</title> + <para> + The <varname>var</varname> attribute names a variable for iterating through the items in the data model. The items to iterate through are determined with the <varname>value</varname> attribute by using EL (Expression Lanugage). + </para> + </section> + + <section id="sect-Component_Reference-richdataDefinitionList-Customizing_the_list"> + <title>Customizing the list</title> + <para> + The <varname>first</varname> attribute specifies which item in the data model to start from, and the <varname>rows</varname> attribute specifies the number of items to list. The <varname>title</varname> attribute is used for a floating tool-tip. <xref linkend="exam-Component_Reference-richdataDefinitionList-richdataDefinitionList_example" /> shows a simple example using the <sgmltag>&lt;rich:dataDefinitionList&gt;</sgmltag> component. + </para> + <example id="exam-Component_Reference-richdataDefinitionList-richdataDefinitionList_example"> + <title><sgmltag>&lt;rich:dataDefinitionList&gt;</sgmltag> example</title> + <programlisting language="XML" role="XML"><xi:include href="extras/exam-Component_Reference-Tables_and_grids-richdataDefinitionList_example.xml_sample" parse="text" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + <blockquote> + <figure id="figu-Component_Reference-richdataDefinitionList_example-richdataDefinitionList_example"> + <title><sgmltag>&lt;rich:dataDefinitionList&gt;</sgmltag> example</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/figu-Component_Reference-Tables_and_grids-richdataDefinitionList_example.png" format="PNG" /> + </imageobject> + <textobject> + <para> + A list of cars with their price and mileage displayed as a data definition. + </para> + </textobject> + </mediaobject> + </figure> + </blockquote> + </example> + </section> + + <section id="sect-Component_Reference-richdataDefinitionList-Reference_data"> + <title>Reference data</title> + <itemizedlist> + <listitem> + <para> + <parameter>component-type</parameter>: <classname>org.richfaces.DataDefinitionList</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlDataDefinitionList</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>component-family</parameter>: <classname>org.richfaces.DataDefinitionList</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>renderer-type</parameter>: <classname>org.richfaces.DataDefinitionListRenderer</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.DataDefinitionListTag</classname> + </para> + </listitem> + </itemizedlist> + </section> </section> - --> <!-- TODO not in M2 --> <!-- @@ -505,35 +444,9 @@ </section> --> + <!--<rich:dataGrid>--> <section id="sect-Component_Reference-Tables_and_grids-richdataGrid"> <title><sgmltag>&lt;rich:dataGrid&gt;</sgmltag></title> - <itemizedlist> - <listitem> - <para> - <parameter>component-type</parameter>: <classname>org.richfaces.DataGrid</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlDataGrid</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>component-family</parameter>: <classname>org.richfaces.DataGrid</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>renderer-type</parameter>: <classname>org.richfaces.DataGridRenderer</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.DataGridTag</classname> - </para> - </listitem> - </itemizedlist> <para> The <sgmltag>&lt;rich:dataGrid&gt;</sgmltag> component is used to arrange data objects in a grid. Values in the grid can be updated dynamically from the data model, and Ajax updates can be limited to specific rows. The component supports <literal>header</literal>, <literal>footer</literal>, and <literal>caption</literal> facets. </para> @@ -550,244 +463,317 @@ </textobject> </mediaobject> </figure> - <para> - The <sgmltag>&lt;rich:dataGrid&gt;</sgmltag> component requires the <varname>value</varname> attribute, which points to the data model, and the <varname>var</varname> attribute, which holds the current variable for the collection of data. The number of columns for the grid is specifed with the <varname>columns</varname> attribute, and the number of elements to layout among the columns is determined with the <varname>elements</varname> attribute. The <varname>first</varname> attribute references the zero-based element in the data model from which the grid starts. - </para> - <example id="exam-Component_Reference-richdataGrid-richdataGrid_example"> - <title><sgmltag>&lt;rich:dataGrid&gt;</sgmltag> example</title> - -<programlisting language="XML" role="XML"> -<xi:include href="extras/exam-Component_Reference-richdataGrid-richdataGrid_example.xml_sample" parse="text" xmlns:xi="http://www.w3.org/2001/XInclude" /> -</programlisting> - <blockquote> - <figure id="figu-Component_Reference-richdataGrid_example-richdataGrid_example"> - <title><sgmltag>&lt;rich:dataGrid&gt;</sgmltag> example</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/figu-Component_Reference-richdataGrid-richdataGrid_example.png" format="PNG" /> - </imageobject> - <textobject> - <para> - The result of the <sgmltag>&lt;rich:dataGrid&gt;</sgmltag> example, with the <literal>header</literal> facet, <literal>footer</literal> facet, and first element annotated. - </para> - </textobject> - </mediaobject> - </figure> - </blockquote> - </example> + + <section id="sect-Component_Reference-richdataGrid-Basic_usage"> + <title>Basic usage</title> + <para> + The <sgmltag>&lt;rich:dataGrid&gt;</sgmltag> component requires the <varname>value</varname> attribute, which points to the data model, and the <varname>var</varname> attribute, which holds the current variable for the collection of data. + </para> + </section> + + <section id="sect-Component_Reference-richdataGrid-Customizing_the_grid"> + <title>Customizing the grid</title> + <para> + The number of columns for the grid is specifed with the <varname>columns</varname> attribute, and the number of elements to layout among the columns is determined with the <varname>elements</varname> attribute. The <varname>first</varname> attribute references the zero-based element in the data model from which the grid starts. + </para> + <example id="exam-Component_Reference-richdataGrid-richdataGrid_example"> + <title><sgmltag>&lt;rich:dataGrid&gt;</sgmltag> example</title> + <programlisting language="XML" role="XML"><xi:include href="extras/exam-Component_Reference-richdataGrid-richdataGrid_example.xml_sample" parse="text" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + <blockquote> + <figure id="figu-Component_Reference-richdataGrid_example-richdataGrid_example"> + <title><sgmltag>&lt;rich:dataGrid&gt;</sgmltag> example</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/figu-Component_Reference-richdataGrid-richdataGrid_example.png" format="PNG" /> + </imageobject> + <textobject> + <para> + The result of the <sgmltag>&lt;rich:dataGrid&gt;</sgmltag> example, with the <literal>header</literal> facet, <literal>footer</literal> facet, and first element annotated. + </para> + </textobject> + </mediaobject> + </figure> + </blockquote> + </example> + </section> + <!-- TODO - <para> - The <sgmltag>&lt;rich:dataGrid&gt;</sgmltag> component can be used with the <sgmltag>&lt;rich:dataScroller&gt;</sgmltag> component to display multiple pages of grids. Refer to <xref linkend="sect-Component_Reference-Tables_and_grids-richdataScroller" /> for details on the <sgmltag>&lt;rich:dataScroller&gt;</sgmltag> component. - </para> - --> - <para> - As the component is based on the <sgmltag>&lt;a4j:repeat&gt;</sgmltag> component, it can be partially updated with Ajax. The <varname>ajaxKeys</varname> attribute allows row keys to be defined, which are updated after an Ajax request. - </para> - <example id="exam-Component_Reference-richdataGrid-ajaxKeys_example"> - <title><varname>ajaxKeys</varname> example</title> - -<programlisting language="XML" role="XML"> -&lt;rich:dataGrid value="#{dataTableScrollerBean.allCars}" var="car" ajaxKeys="#{listBean.list}" binding="#{listBean.dataGrid}" id="grid" elements="4" columns="2"&gt; - ... -&lt;/rich:dataGrid&gt; -... -&lt;a4j:commandButton action="#{listBean.action}" reRender="grid" value="Submit"/&gt; -</programlisting> - </example> + <section id="sect-Component_Reference-richdataGrid-Multiple-page_grids"> + <title>Multiple-page grids</title> + <para> + The <sgmltag>&lt;rich:dataGrid&gt;</sgmltag> component can be used with the <sgmltag>&lt;rich:dataScroller&gt;</sgmltag> component to display multiple pages of grids. Refer to <xref linkend="sect-Component_Reference-Tables_and_grids-richdataScroller" /> for details on the <sgmltag>&lt;rich:dataScroller&gt;</sgmltag> component. + </para> + </section> + --> + + <section id="sect-Component_Reference-richdataGrid-Patial_updates"> + <title>Patial updates</title> + <para> + As the component is based on the <sgmltag>&lt;a4j:repeat&gt;</sgmltag> component, it can be partially updated with Ajax. The <varname>ajaxKeys</varname> attribute allows row keys to be defined, which are updated after an Ajax request. + </para> + <example id="exam-Component_Reference-richdataGrid-ajaxKeys_example"> + <title><varname>ajaxKeys</varname> example</title> + <programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Component_Reference-richdataGrid-ajaxKeys_example.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + </example> + </section> + + <section id="sect-Component_Reference-richdataGrid-Reference_data"> + <title>Reference data</title> + <itemizedlist> + <listitem> + <para> + <parameter>component-type</parameter>: <classname>org.richfaces.DataGrid</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlDataGrid</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>component-family</parameter>: <classname>org.richfaces.DataGrid</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>renderer-type</parameter>: <classname>org.richfaces.DataGridRenderer</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.DataGridTag</classname> + </para> + </listitem> + </itemizedlist> + </section> </section> - <!-- TODO not in M2 --> - <!-- + <!--<rich:dataOrderedList>--> <section id="sect-Component_Reference-Tables_and_grids-richdataList"> <title><sgmltag>&lt;rich:dataList&gt;</sgmltag></title> - <itemizedlist> - <listitem> - <para> - <parameter>component-type</parameter>: <classname>org.richfaces.DataList</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlDataList</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>component-family</parameter>: <classname>org.richfaces.DataList</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>renderer-type</parameter>: <classname>org.richfaces.DataListRenderer</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.DataListTag</classname> - </para> - </listitem> - </itemizedlist> <para> The <sgmltag>&lt;rich:dataList&gt;</sgmltag> component renders an unordered list of items. The component uses a data model for managing the list items, which can be updated dynamically. </para> - <para> - The <varname>type</varname> attribute refers to the appearance of the bullet points. The values of the attribute correspond to the <varname>type</varname> parameter for the <sgmltag>&lt;ul&gt;</sgmltag> HTML element: - </para> - <variablelist> - <varlistentry> - <term><literal>circle</literal></term> + + <section id="sect-Component_Reference-richdataList-Basic_usage"> + <title>Basic usage</title> + <para> + The <varname>var</varname> attribute names a variable for iterating through the items in the data model. The items to iterate through are determined with the <varname>value</varname> attribute by using EL (Expression Lanugage). + </para> + </section> + + <section id="sect-Component_Reference-richdataList-Bullet_point_type"> + <title>Bullet point type</title> + <para> + The <varname>type</varname> attribute refers to the appearance of the bullet points. The values of the attribute correspond to the <varname>type</varname> parameter for the <sgmltag>&lt;ul&gt;</sgmltag> HTML element: + </para> + <variablelist> + <varlistentry> + <term><literal>circle</literal></term> + <listitem> + <para> + Displays an unfilled circle as a bullet point. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><literal>disc</literal></term> + <listitem> + <para> + Displays a filled disc as a bullet point. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><literal>square</literal></term> + <listitem> + <para> + Displays a square as a bullet point. + </para> + </listitem> + </varlistentry> + </variablelist> + </section> + + <section id="sect-Component_Reference-richdataList-Customizing_the_list"> + <title>Customizing the list</title> + <para> + The <varname>first</varname> attribute specifies which item in the data model to start from, and the <varname>rows</varname> attribute specifies the number of items to list. The <varname>title</varname> attribute is used for a floating tool-tip. <xref linkend="exam-Component_Reference-richdataDefinitionList-richdataDefinitionList_example" /> shows a simple example using the <sgmltag>&lt;rich:dataDefinitionList&gt;</sgmltag> component. + </para> + <example id="exam-Component_Reference-richdataList-richdataList_example"> + <title><sgmltag>&lt;rich:dataList&gt;</sgmltag> example</title> + <programlisting language="XML" role="XML"><xi:include href="extras/exam-Component_Reference-richdataList-richdataList_example.xml_sample" parse="text" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + <blockquote> + <figure id="figu-Component_Reference-richdataList_example-richdataList_example"> + <title><sgmltag>&lt;rich:dataList&gt;</sgmltag> example</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/figu-Component_Reference-richdataList-richdataList_example.png" format="PNG" /> + </imageobject> + <textobject> + <para> + A list of cars displayed in a list with bullet points. + </para> + </textobject> + </mediaobject> + </figure> + </blockquote> + </example> + </section> + + <section id="sect-Component_Reference-richdataList-Reference_data"> + <title>Reference data</title> + <itemizedlist> <listitem> <para> - Displays an unfilled circle as a bullet point. + <parameter>component-type</parameter>: <classname>org.richfaces.DataList</classname> </para> </listitem> - </varlistentry> - <varlistentry> - <term><literal>disc</literal></term> <listitem> <para> - Displays a filled disc as a bullet point. + <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlDataList</classname> </para> </listitem> - </varlistentry> - <varlistentry> - <term><literal>square</literal></term> <listitem> <para> - Displays a square as a bullet point. + <parameter>component-family</parameter>: <classname>org.richfaces.DataList</classname> </para> </listitem> - </varlistentry> - </variablelist> - <para> - The <varname>var</varname> attribute names a variable for iterating through the items in the data model. The items to iterate through are determined with the <varname>value</varname> attribute by using EL (Expression Lanugage). The <varname>first</varname> attribute specifies which item in the data model to start from, and the <varname>rows</varname> attribute specifies the number of items to list. The <varname>title</varname> attribute is used for a floating tool-tip. <xref linkend="exam-Component_Reference-richdataDefinitionList-richdataDefinitionList_example" /> shows a simple example using the <sgmltag>&lt;rich:dataDefinitionList&gt;</sgmltag> component. - </para> - <example id="exam-Component_Reference-richdataList-richdataList_example"> - <title><sgmltag>&lt;rich:dataList&gt;</sgmltag> example</title> - -<programlisting language="XML" role="XML"><xi:include href="extras/exam-Component_Reference-richdataList-richdataList_example.xml_sample" parse="text" xmlns:xi="http://www.w3.org/2001/XInclude" /> -</programlisting> - <blockquote> - <figure id="figu-Component_Reference-richdataList_example-richdataList_example"> - <title><sgmltag>&lt;rich:dataList&gt;</sgmltag> example</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/figu-Component_Reference-richdataList-richdataList_example.png" format="PNG" /> - </imageobject> - <textobject> - <para> - A list of cars displayed in a list with bullet points. - </para> - </textobject> - </mediaobject> - </figure> - </blockquote> - </example> + <listitem> + <para> + <parameter>renderer-type</parameter>: <classname>org.richfaces.DataListRenderer</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.DataListTag</classname> + </para> + </listitem> + </itemizedlist> + </section> </section> + <!--<rich:dataOrderedList>--> <section id="sect-Component_Reference-Tables_and_grids-richdataOrderedList"> <title><sgmltag>&lt;rich:dataOrderedList&gt;</sgmltag></title> - <itemizedlist> - <listitem> - <para> - <parameter>component-type</parameter>: <classname>org.richfaces.DataOrderedList</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlDataOrderedList</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>component-family</parameter>: <classname>org.richfaces.DataOrderedList</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>renderer-type</parameter>: <classname>org.richfaces.DataOrderedListRenderer</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.DataOrderedListTag</classname> - </para> - </listitem> - </itemizedlist> <para> The <sgmltag>&lt;rich:dataOrderedList&gt;</sgmltag> component renders an ordered list of items from a data model. Specific rows can be updated dynamically without updating the entire list. </para> - <para> - The <varname>type</varname> attribute defines the appearance of the numerating list markers for the list. The possible values for the <varname>type</varname> attribute are as follows: - </para> - <variablelist> - <varlistentry> - <term><literal>A</literal></term> + + <section id="sect-Component_Reference-richdataOrderedList-Basic_usage"> + <title>Basic usage</title> + <para> + The <varname>var</varname> attribute names a variable for iterating through the items in the data model. The items to iterate through are determined with the <varname>value</varname> attribute by using EL (Expression Lanugage). + </para> + </section> + + <section id="sect-Component_Reference-richdataOrderedList-Numeration_type"> + <title>Numeration type</title> + <para> + The <varname>type</varname> attribute defines the appearance of the numerating list markers for the list. The possible values for the <varname>type</varname> attribute are as follows: + </para> + <variablelist> + <varlistentry> + <term><literal>A</literal></term> + <listitem> + <para> + Numerates the list items as <wordasword>A</wordasword>, <wordasword>B</wordasword>, <wordasword>C</wordasword>, etc. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><literal>a</literal></term> + <listitem> + <para> + Numerates the list items as <wordasword>a</wordasword>, <wordasword>b</wordasword>, <wordasword>c</wordasword>, etc. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><literal>I</literal></term> + <listitem> + <para> + Numerates the list items as <wordasword>I</wordasword>, <wordasword>II</wordasword>, <wordasword>III</wordasword>, etc. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><literal>i</literal></term> + <listitem> + <para> + Numerates the list items as <wordasword>i</wordasword>, <wordasword>ii</wordasword>, <wordasword>iii</wordasword>, etc. + </para> + </listitem> + </varlistentry> + <varlistentry> + <term><literal>1</literal></term> + <listitem> + <para> + Numerates the list items as <wordasword>1</wordasword>, <wordasword>2</wordasword>, <wordasword>3</wordasword>, etc. + </para> + </listitem> + </varlistentry> + </variablelist> + </section> + + <section id="sect-Component_Reference-richdataOrderedList-Customizing_the_list"> + <title>Customizing the list</title> + <para> + The <varname>first</varname> attribute specifies which item in the data model to start from, and the <varname>rows</varname> attribute specifies the number of items to list. The <varname>title</varname> attribute defines a pop-up title. To only update a sub-set of the rows in the list, use the <varname>ajaxKeys</varname> attribute, which points to an object that contains the specified rows. + </para> + <example id="exam-Component_Reference-richdataOrderedList-richdataOrderedList_example"> + <title><sgmltag>&lt;rich:dataOrderedList&gt;</sgmltag> example</title> + <programlisting language="XML" role="XML"><xi:include href="extras/exam-Component_Reference-Tables_and_grids-richdataOrderedList_example.xml_sample" parse="text" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + <blockquote> + <figure id="figu-Component_Reference-richdataOrderedList_example-richdataOrderedList_example"> + <title><sgmltag>&lt;rich:dataOrderedList&gt;</sgmltag> example</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/figu-Component_Reference-Tables_and_grids-richdataOrderedList_example.png" format="PNG" /> + </imageobject> + <textobject> + <para> + A list of cars displayed in a numbered list. + </para> + </textobject> + </mediaobject> + </figure> + </blockquote> + </example> + </section> + + <section id="sect-Component_Reference-richdataOrderedList-Reference_data"> + <title>Reference data</title> + <itemizedlist> <listitem> <para> - Numerates the list items as <wordasword>A</wordasword>, <wordasword>B</wordasword>, <wordasword>C</wordasword>, etc. + <parameter>component-type</parameter>: <classname>org.richfaces.DataOrderedList</classname> </para> </listitem> - </varlistentry> - <varlistentry> - <term><literal>a</literal></term> <listitem> <para> - Numerates the list items as <wordasword>a</wordasword>, <wordasword>b</wordasword>, <wordasword>c</wordasword>, etc. + <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlDataOrderedList</classname> </para> </listitem> - </varlistentry> - <varlistentry> - <term><literal>I</literal></term> <listitem> <para> - Numerates the list items as <wordasword>I</wordasword>, <wordasword>II</wordasword>, <wordasword>III</wordasword>, etc. + <parameter>component-family</parameter>: <classname>org.richfaces.DataOrderedList</classname> </para> </listitem> - </varlistentry> - <varlistentry> - <term><literal>i</literal></term> <listitem> <para> - Numerates the list items as <wordasword>i</wordasword>, <wordasword>ii</wordasword>, <wordasword>iii</wordasword>, etc. + <parameter>renderer-type</parameter>: <classname>org.richfaces.DataOrderedListRenderer</classname> </para> </listitem> - </varlistentry> - <varlistentry> - <term><literal>1</literal></term> <listitem> <para> - Numerates the list items as <wordasword>1</wordasword>, <wordasword>2</wordasword>, <wordasword>3</wordasword>, etc. + <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.DataOrderedListTag</classname> </para> </listitem> - </varlistentry> - </variablelist> - <para> - The <varname>first</varname> attribute specifies which item in the data model to start from, and the <varname>rows</varname> attribute specifies the number of items to list. The <varname>title</varname> attribute defines a pop-up title. To only update a sub-set of the rows in the list, use the <varname>ajaxKeys</varname> attribute, which points to an object that contains the specified rows. - </para> - <example id="exam-Component_Reference-richdataOrderedList-richdataOrderedList_example"> - <title><sgmltag>&lt;rich:dataOrderedList&gt;</sgmltag> example</title> - -<programlisting language="XML" role="XML"><xi:include href="extras/exam-Component_Reference-Tables_and_grids-richdataOrderedList_example.xml_sample" parse="text" xmlns:xi="http://www.w3.org/2001/XInclude" /> -</programlisting> - <blockquote> - <figure id="figu-Component_Reference-richdataOrderedList_example-richdataOrderedList_example"> - <title><sgmltag>&lt;rich:dataOrderedList&gt;</sgmltag> example</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/figu-Component_Reference-Tables_and_grids-richdataOrderedList_example.png" format="PNG" /> - </imageobject> - <textobject> - <para> - A list of cars displayed in a numbered list. - </para> - </textobject> - </mediaobject> - </figure> - </blockquote> - </example> + </itemizedlist> + </section> </section> - --> <!-- TODO not in M2 --> <!-- @@ -826,35 +812,9 @@ </section> --> + <!--<rich:dataTable>--> <section id="sect-Component_Reference-Tables_and_grids-richdataTable"> <title><sgmltag>&lt;rich:dataTable&gt;</sgmltag></title> - <itemizedlist> - <listitem> - <para> - <parameter>component-type</parameter>: <classname>org.richfaces.DataTable</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlDataTable</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>component-family</parameter>: <classname>org.richfaces.DataTable</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>renderer-type</parameter>: <classname>org.richfaces.DataTableRenderer</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.DataTableTag</classname> - </para> - </listitem> - </itemizedlist> <para> The <sgmltag>&lt;rich:dataTable&gt;</sgmltag> component is used to render a table, including the table's header and footer. It works in conjunction with the <sgmltag>&lt;rich:column&gt;</sgmltag>, <sgmltag>&lt;rich:columnGroup&gt;</sgmltag>, and <sgmltag>&lt;rich:columns&gt;</sgmltag> components to list the contents of a data model. </para> @@ -864,67 +824,87 @@ The <sgmltag>&lt;rich:dataTable&gt;</sgmltag> component does not include extended table features, such as data scrolling, row selection, and column reordering. These features are available as part of the <sgmltag>&lt;rich:extendedDataTable&gt;</sgmltag> component; refer to <xref linkend="sect-Component_Reference-Tables_and_grids-richextendedDataTable" /> for further details. </para> </note> - <para> - The <varname>value</varname> attribute points to the data model, and the <varname>var</varname> attribute specifies a variable to use when iterating through the data model. The <varname>first</varname> attribute specifies which item in the data model to start from, and the <varname>rows</varname> attribute specifies the number of items to list. The <literal>header</literal>, <literal>footer</literal>, and <literal>caption</literal> facets can be used to display text, and to customize the appearance of the table through skinning. demonstrates a simple table implementation. - </para> - <example id="exam-Component_Reference-richdataTable-richdataTable_example"> - <title><sgmltag>&lt;rich:dataTable&gt;</sgmltag> example</title> + + <section id="sect-Component_Reference-richdataTable-Basic_usage"> + <title>Basic usage</title> + <para> + The <varname>value</varname> attribute points to the data model, and the <varname>var</varname> attribute specifies a variable to use when iterating through the data model. + </para> + </section> + + <section id="sect-Component_Reference-richdataTable-Customizing_the_table"> + <title>Customizing the table</title> + <para> + The <varname>first</varname> attribute specifies which item in the data model to start from, and the <varname>rows</varname> attribute specifies the number of items to list. The <literal>header</literal>, <literal>footer</literal>, and <literal>caption</literal> facets can be used to display text, and to customize the appearance of the table through skinning. demonstrates a simple table implementation. + </para> + <example id="exam-Component_Reference-richdataTable-richdataTable_example"> + <title><sgmltag>&lt;rich:dataTable&gt;</sgmltag> example</title> -<programlisting language="XML" role="XML"><xi:include href="extras/exam-Component_Reference-Tables_and_grids-richdataTable_example.xml_sample" parse="text" xmlns:xi="http://www.w3.org/2001/XInclude" /> -</programlisting> - <blockquote> - <figure id="figu-Component_Reference-richdataTable_example-richdataTable_example"> - <title><sgmltag>&lt;rich:dataTable&gt;</sgmltag> example</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/figu-Component_Reference-richdataTable_example.png" format="PNG" /> - </imageobject> - <textobject> - <para> - A data table made using the <sgmltag>&lt;rich:dataTable&gt;</sgmltag> component. - </para> - </textobject> - </mediaobject> - </figure> - </blockquote> - </example> - <para> - The <sgmltag>&lt;rich:dataTable&gt;</sgmltag> component is based on the <sgmltag>&lt;a4j:repeat&gt;</sgmltag> component, and as such it can be partially updated using Ajax. The <varname>ajaxKeys</varname> attribute defines the rows to be updated during an Ajax request. - </para> - <para> - For details on filtering and sorting data tables, refer to <xref linkend="sect-Component_Reference-Tables_and_grids-Table_filtering" /> and <xref linkend="sect-Component_Reference-Tables_and_grids-Table_sorting" />. - </para> + <programlisting language="XML" role="XML"><xi:include href="extras/exam-Component_Reference-Tables_and_grids-richdataTable_example.xml_sample" parse="text" xmlns:xi="http://www.w3.org/2001/XInclude" /> + </programlisting> + <blockquote> + <figure id="figu-Component_Reference-richdataTable_example-richdataTable_example"> + <title><sgmltag>&lt;rich:dataTable&gt;</sgmltag> example</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/figu-Component_Reference-richdataTable_example.png" format="PNG" /> + </imageobject> + <textobject> + <para> + A data table made using the <sgmltag>&lt;rich:dataTable&gt;</sgmltag> component. + </para> + </textobject> + </mediaobject> + </figure> + </blockquote> + </example> + <para> + For details on filtering and sorting data tables, refer to <xref linkend="sect-Component_Reference-Tables_and_grids-Table_filtering" /> and <xref linkend="sect-Component_Reference-Tables_and_grids-Table_sorting" />. + </para> + </section> + + <section id="sect-Component_Reference-richdataTable-Partial_updates"> + <title>Partial updates</title> + <para> + The <sgmltag>&lt;rich:dataTable&gt;</sgmltag> component is based on the <sgmltag>&lt;a4j:repeat&gt;</sgmltag> component, and as such it can be partially updated using Ajax. The <varname>ajaxKeys</varname> attribute defines the rows to be updated during an Ajax request. + </para> + </section> + + <section id="sect-Component_Reference-richdataTable-Reference_data"> + <title>Reference data</title> + <itemizedlist> + <listitem> + <para> + <parameter>component-type</parameter>: <classname>org.richfaces.DataTable</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlDataTable</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>component-family</parameter>: <classname>org.richfaces.DataTable</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>renderer-type</parameter>: <classname>org.richfaces.DataTableRenderer</classname> + </para> + </listitem> + <listitem> + <para> + <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.DataTableTag</classname> + </para> + </listitem> + </itemizedlist> + </section> </section> + <!--<rich:extendedDataTable>--> <section id="sect-Component_Reference-Tables_and_grids-richextendedDataTable"> <title><sgmltag>&lt;rich:extendedDataTable&gt;</sgmltag></title> - <itemizedlist> - <listitem> - <para> - <parameter>component-type</parameter>: <classname>org.richfaces.ExtendedDataTable</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlExtendedDataTable</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>component-family</parameter>: <classname>org.richfaces.ExtendedDataTable</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>renderer-type</parameter>: <classname>org.richfaces.ExtendedDataTableRenderer</classname> - </para> - </listitem> - <listitem> - <para> - <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.ExtendedDataTableTag</classname> - </para> - </listitem> - </itemizedlist> <para> The <sgmltag>&lt;rich:extendedDataTable&gt;</sgmltag> component builds on the functionality of the <sgmltag>&lt;rich:dataTable&gt;</sgmltag> component, adding features such as data scrolling, row and column selection, and rearranging of columns. </para> @@ -964,125 +944,194 @@ </para> </listitem> </itemizedlist> - <para> - Basic use of the <sgmltag>&lt;rich:extendedDataTable&gt;</sgmltag> component requires the <varname>value</varname> and <varname>var</varname> attributes, the same as with the <sgmltag>&lt;rich:dataTable&gt;</sgmltag> component. Refer to <xref linkend="sect-Component_Reference-Tables_and_grids-richdataTable" /> for details. - </para> - <para> - The <varname>height</varname> attribute is mandatory, and defines the height of the table on the page. This is set to <literal>500px</literal> by default. The width of the table can be set by using the <varname>width</varname> attribute. As with the <sgmltag>&lt;rich:dataTable&gt;</sgmltag> component, the look of the <sgmltag>&lt;rich:extendedDataTable&gt;</sgmltag> component can be customized and skinned using the <literal>header</literal>, <literal>footer</literal>, and <literal>caption</literal> facets. - </para> - <example id="exam-Component_Reference-richextendedDataTable-richextendedDataTable_example"> - <title><sgmltag>&lt;rich:extendedDataTable&gt;</sgmltag> example</title> + <section id="sect-Component_Reference-richextendedDataTable-Basic_usage"> + <title>Basic usage</title> + <para> + Basic use of the <sgmltag>&lt;rich:extendedDataTable&gt;</sgmltag> component requires the <varname>value</varname> and <varname>var</varname> attributes, the same as with the <sgmltag>&lt;rich:dataTable&gt;</sgmltag> component. Refer to <xref linkend="sect-Component_Reference-Tables_and_grids-richdataTable" /> for details. + </para> + </section> + + <section id="sect-Component_Reference-richextendedDataTable-Table_appearance"> + <title>Table appearance</title> + <para> + The <varname>height</varname> attribute defines the height of the table on the page. This is set to <literal>500px</literal> by default. The width of the table can be set by using the <varname>width</varname> attribute. As with the <sgmltag>&lt;rich:dataTable&gt;</sgmltag> component, the look of the <sgmltag>&lt;rich:extendedDataTable&gt;</sgmltag> component can be customized and skinned using the <literal>header</literal>, <literal>footer</literal>, and <literal>caption</literal> facets. + </para> + </section> + + <section id="sect-Component_Reference-richextendedDataTable-Extended_features"> + <title>Extended features</title> + <example id="exam-Component_Reference-richextendedDataTable-richextendedDataTable_example"> + <title><sgmltag>&lt;rich:extendedDataTable&gt;</sgmltag> example</title> + <programlisting language="XML" role="XML"><xi:include href="extras/exam-Component_Reference-Tables_and_grids-richextendedDataTable_example.xml_sample" parse="text" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting> + <blockquote> + <figure id="figu-Component_Reference-richextendedDataTable_example-richextendedDataTable_example"> + <title><sgmltag>&lt;rich:extendedDataTable&gt;</sgmltag> example</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/figu-Component_Reference-Tables_and_grids-richextendedDataTable_example.png" format="PNG" width="444" /> + </imageobject> + <textobject> + <para> + A data table made using the <sgmltag>&lt;rich:extendedDataTable&gt;</sgmltag> component. It features scrolling data, column sorting, and a column filter. + </para> + </textobject> + </mediaobject> + </figure> + </blockquote> + </example> + <para> + <xref linkend="exam-Component_Reference-richextendedDataTable-richextendedDataTable_example" /> shows an example extended data table. The implementation features a scrolling data table, selection of one or more rows, sorting by columns, grouping by column, and a filter on the <guilabel>Name</guilabel> column. + </para> -<programlisting language="XML" role="XML"><xi:include href="extras/exam-Component_Reference-Tables_and_grids-richextendedDataTable_example.xml_sample" parse="text" xmlns:xi="http://www.w3.org/2001/XInclude" /> -</programlisting> - <blockquote> - <figure id="figu-Component_Reference-richextendedDataTable_example-richextendedDataTable_example"> - <title><sgmltag>&lt;rich:extendedDataTable&gt;</sgmltag> example</title> + <section id="sect-Component_Reference-richextendedDataTable-Row_selection"> + <title>Row selection</title> + <para> + Row selection is determined by the <varname>selectionMode</varname> attribute. Setting the attribute to <literal>none</literal> allows for no row selection capability. Setting the <varname>selectionMode</varname> attribute to <literal>single</literal> allows the user to select a single row at a time using the mouse. With the <varname>selectionMode</varname> attribute set to <literal>multi</literal>, the user can select multiple rows by holding down the <keycap function="shift">Shift</keycap> or <keycap function="control">Ctrl</keycap> keys while clicking. The <varname>selection</varname> attribute points to the object that tracks which rows are selected. <xref linkend="figu-Component_Reference-richextendedDataTable-Selecting_multiple_rows" /> shows the table from the example with multiple rows selected. + </para> + <figure id="figu-Component_Reference-richextendedDataTable-Selecting_multiple_rows"> + <title>Selecting multiple rows</title> <mediaobject> <imageobject> - <imagedata fileref="images/figu-Component_Reference-Tables_and_grids-richextendedDataTable_example.png" format="PNG" width="444" /> + <imagedata fileref="images/figu-Component_Reference-Tables_and_grids-Selecting_multiple_rows.png" format="PNG" width="444" /> </imageobject> <textobject> <para> - A data table made using the <sgmltag>&lt;rich:extendedDataTable&gt;</sgmltag> component. It features scrolling data, column sorting, and a column filter. + The example table with rows numbered 1, 2, 3, and 5 selected. </para> </textobject> </mediaobject> </figure> - </blockquote> - </example> - <para> - <xref linkend="exam-Component_Reference-richextendedDataTable-richextendedDataTable_example" /> shows an example extended data table. The implementation features a scrolling data table, selection of one or more rows, sorting by columns, grouping by column, and a filter on the <guilabel>Name</guilabel> column. - </para> - <para> - Row selection is determined by the <varname>selectionMode</varname> attribute. Setting the attribute to <literal>none</literal> allows for no row selection capability. Setting the <varname>selectionMode</varname> attribute to <literal>single</literal> allows the user to select a single row at a time using the mouse. With the <varname>selectionMode</varname> attribute set to <literal>multi</literal>, the user can select multiple rows by holding down the <keycap function="shift">Shift</keycap> or <keycap function="control">Ctrl</keycap> keys while clicking. The <varname>selection</varname> attribute points to the object that tracks which rows are selected. <xref linkend="figu-Component_Reference-richextendedDataTable-Selecting_multiple_rows" /> shows the table from the example with multiple rows selected. - </para> - <figure id="figu-Component_Reference-richextendedDataTable-Selecting_multiple_rows"> - <title>Selecting multiple rows</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/figu-Component_Reference-Tables_and_grids-Selecting_multiple_rows.png" format="PNG" width="444" /> - </imageobject> - <textobject> + </section> + + <section id="sect-Component_Reference-richextendedDataTable-Filtering"> + <title>Filtering</title> + <para> + The example uses the <literal>filter</literal> facet of the <sgmltag>&lt;rich:column&gt;</sgmltag> component to display the text field. A user can type their criteria into the text field to customize the filter of the column below. For full details on filtering tables, refer to <xref linkend="sect-Component_Reference-Tables_and_grids-Table_filtering" />. + </para> + </section> + + <section id="sect-Component_Reference-richextendedDataTable-Sorting"> + <title>Sorting</title> + <para> + When hovering the mouse over a column header, a menu button appears to the right-hand side, as shown in <xref linkend="figu-Component_Reference-richextendedDataTable-Column_menu" />. This menu allows the user to sort the contents of the column, group the table by the column, or hide and show columns. + </para> + <figure id="figu-Component_Reference-richextendedDataTable-Column_menu"> + <title>Column menu</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/figu-Component_Reference-Tables_and_grids-Column_menu.png" format="PNG" width="444" /> + </imageobject> + <textobject> + <para> + The menu for sorting, grouping, and hiding or showing columns. + </para> + </textobject> + </mediaobject> + </figure> + <para> + Each column can allow sorting by setting the <sgmltag>&lt;rich:column&gt;</sgmltag> component's <varname>sortable</varname> attribute to <literal>true</literal>. The value of the data model to sort by is specified with the <varname>sortBy</varname> attribute. In addition to using the menu for sorting, columns can be quickly sorted either ascending or descending by clicking on the directional icon next to the column title. The directional icons are defined in each <sgmltag>&lt;rich:column&gt;</sgmltag> component with the <varname>sortIconAscending</varname> and <varname>sortIconDescending</varname> attributes, for ascending and descending icons respectively. For full details on sorting tables, refer to <xref linkend="sect-Component_Reference-Tables_and_grids-Table_sorting" />. + </para> + </section> + + <section id="sect-Component_Reference-richextendedDataTable-Grouping"> + <title>Grouping</title> + <para> + Grouping the table's entries by a column will organize the table into collapsible sections, as shown in <xref linkend="figu-Component_Reference-richextendedDataTable-Grouping_table_entries_by_column" />. + </para> + <figure id="figu-Component_Reference-richextendedDataTable-Grouping_table_entries_by_column"> + <title>Grouping table entries by column</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/figu-Component_Reference-Tables_and_grids-Grouping_table_entries_by_column.png" format="PNG" width="444" /> + </imageobject> + <textobject> + <para> + A table with entries grouped by the <guilabel>Group</guilabel> column. + </para> + </textobject> + </mediaobject> + </figure> + </section> + + <section id="sect-Component_Reference-richextendedDataTable-Hiding_columns"> + <title>Hiding columns</title> + <para> + The checkboxes in the column menu under the <guisubmenu>Columns</guisubmenu> sub-menu will hide or show the respective columns, as shown in <xref linkend="figu-Component_Reference-richextendedDataTable-Hiding_columns" />. + </para> + <figure id="figu-Component_Reference-richextendedDataTable-Hiding_columns"> + <title>Hiding columns</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/figu-Component_Reference-Tables_and_grids-Hiding_columns.png" format="PNG" width="444" /> + </imageobject> + <textobject> + <para> + The <guilabel>Date</guilabel> and <guilabel>Group</guilabel> columns are hidden from the table. + </para> + </textobject> + </mediaobject> + </figure> + </section> + + <section id="sect-Component_Reference-richextendedDataTable-Rearranging_columns"> + <title>Rearranging columns</title> + <para> + Columns in a <sgmltag>&lt;rich:extendedDataTable&gt;</sgmltag> component can be rearranged by the user by dragging each column to a different position. The <varname>label</varname> attribute for the <sgmltag>&lt;rich:column&gt;</sgmltag> component is displayed during dragging, as shown in + </para> + <figure id="figu-Component_Reference-richextendedDataTable-Dragging_columns"> + <title>Dragging columns</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/figu-Component_Reference-Tables_and_grids-Dragging_columns.png" format="PNG" width="444" /> + </imageobject> + <textobject> + <para> + Dragging the <guilabel>Name</guilabel> column rearranges the order of the columns. + </para> + </textobject> + </mediaobject> + </figure> + </section> + + <section id="sect-Component_Reference-richextendedDataTable-Saving_the_state"> + <title>Saving the state</title> + <para> + Once the contents of the table have been rearranged and customized by the user, the <varname>tableState</varname> attribute can be used to preserve the customization so it can be restored later. The <varname>tableState</varname> attribute points to a backing-bean property which can in turn be saved to a database separate from standard JSF state-saving mechanisms. + </para> + </section> + + </section> + + <section id="sect-Component_Reference-richextendedDataTable-Reference_data"> + <title>Reference data</title> + <itemizedlist> + <listitem> <para> - The example table with rows numbered 1, 2, 3, and 5 selected. + <parameter>component-type</parameter>: <classname>org.richfaces.ExtendedDataTable</classname> </para> - </textobject> - </mediaobject> - </figure> - <para> - The example uses the <literal>filter</literal> facet of the <sgmltag>&lt;rich:column&gt;</sgmltag> component to display the text field. A user can type their criteria into the text field to customize the filter of the column below. For full details on filtering tables, refer to <xref linkend="sect-Component_Reference-Tables_and_grids-Table_filtering" />. - </para> - <para> - When hovering the mouse over a column header, a menu button appears to the right-hand side, as shown in <xref linkend="figu-Component_Reference-richextendedDataTable-Column_menu" />. This menu allows the user to sort the contents of the column, group the table by the column, or hide and show columns. - </para> - <figure id="figu-Component_Reference-richextendedDataTable-Column_menu"> - <title>Column menu</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/figu-Component_Reference-Tables_and_grids-Column_menu.png" format="PNG" width="444" /> - </imageobject> - <textobject> + </listitem> + <listitem> <para> - The menu for sorting, grouping, and hiding or showing columns. + <parameter>component-class</parameter>: <classname>org.richfaces.component.html.HtmlExtendedDataTable</classname> </para> - </textobject> - </mediaobject> - </figure> - <para> - Each column can allow sorting by setting the <sgmltag>&lt;rich:column&gt;</sgmltag> component's <varname>sortable</varname> attribute to <literal>true</literal>. The value of the data model to sort by is specified with the <varname>sortBy</varname> attribute. In addition to using the menu for sorting, columns can be quickly sorted either ascending or descending by clicking on the directional icon next to the column title. The directional icons are defined in each <sgmltag>&lt;rich:column&gt;</sgmltag> component with the <varname>sortIconAscending</varname> and <varname>sortIconDescending</varname> attributes, for ascending and descending icons respectively. For full details on sorting tables, refer to <xref linkend="sect-Component_Reference-Tables_and_grids-Table_sorting" />. - </para> - <para> - Grouping the table's entries by a column will organize the table into collapsible sections, as shown in <xref linkend="figu-Component_Reference-richextendedDataTable-Grouping_table_entries_by_column" />. - </para> - <figure id="figu-Component_Reference-richextendedDataTable-Grouping_table_entries_by_column"> - <title>Grouping table entries by column</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/figu-Component_Reference-Tables_and_grids-Grouping_table_entries_by_column.png" format="PNG" width="444" /> - </imageobject> - <textobject> + </listitem> + <listitem> <para> - A table with entries grouped by the <guilabel>Group</guilabel> column. + <parameter>component-family</parameter>: <classname>org.richfaces.ExtendedDataTable</classname> </para> - </textobject> - </mediaobject> - </figure> - <para> - The checkboxes in the column menu under the <guisubmenu>Columns</guisubmenu> sub-menu will hide or show the respective columns, as shown in <xref linkend="figu-Component_Reference-richextendedDataTable-Hiding_columns" />. - </para> - <figure id="figu-Component_Reference-richextendedDataTable-Hiding_columns"> - <title>Hiding columns</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/figu-Component_Reference-Tables_and_grids-Hiding_columns.png" format="PNG" width="444" /> - </imageobject> - <textobject> + </listitem> + <listitem> <para> - The <guilabel>Date</guilabel> and <guilabel>Group</guilabel> columns are hidden from the table. + <parameter>renderer-type</parameter>: <classname>org.richfaces.ExtendedDataTableRenderer</classname> </para> - </textobject> - </mediaobject> - </figure> - <para> - Columns in a <sgmltag>&lt;rich:extendedDataTable&gt;</sgmltag> component can be rearranged by the user by dragging each column to a different position. The <varname>label</varname> attribute for the <sgmltag>&lt;rich:column&gt;</sgmltag> component is displayed during dragging, as shown in - </para> - <figure id="figu-Component_Reference-richextendedDataTable-Dragging_columns"> - <title>Dragging columns</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/figu-Component_Reference-Tables_and_grids-Dragging_columns.png" format="PNG" width="444" /> - </imageobject> - <textobject> + </listitem> + <listitem> <para> - Dragging the <guilabel>Name</guilabel> column rearranges the order of the columns. + <parameter>tag-class</parameter>: <classname>org.richfaces.taglib.ExtendedDataTableTag</classname> </para> - </textobject> - </mediaobject> - </figure> - <para> - Once the contents of the table have been rearranged and customized by the user, the <varname>tableState</varname> attribute can be used to preserve the customization so it can be restored later. The <varname>tableState</varname> attribute points to a backing-bean property which can in turn be saved to a database separate from standard JSF state-saving mechanisms. - </para> + </listitem> + </itemizedlist> + </section> </section> <!-- TODO Added: branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcolumn-Basic_column_example.xml_sample =================================================================== --- branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcolumn-Basic_column_example.xml_sample (rev 0) +++ branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcolumn-Basic_column_example.xml_sample 2010-08-16 06:25:19 UTC (rev 18648) @@ -0,0 +1,18 @@ +<rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"> + <rich:column> + <f:facet name="header">State Flag</f:facet> + <h:graphicImage value="#{cap.stateFlag}"/> + </rich:column> + <rich:column> + <f:facet name="header">State Name</f:facet> + <h:outputText value="#{cap.state}"/> + </rich:column> + <rich:column > + <f:facet name="header">State Capital</f:facet> + <h:outputText value="#{cap.name}"/> + </rich:column> + <rich:column> + <f:facet name="header">Time Zone</f:facet> + <h:outputText value="#{cap.timeZone}"/> + </rich:column> +</rich:dataTable> Added: branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcolumn-Column_spanning_example.xml_sample =================================================================== --- branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcolumn-Column_spanning_example.xml_sample (rev 0) +++ branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcolumn-Column_spanning_example.xml_sample 2010-08-16 06:25:19 UTC (rev 18648) @@ -0,0 +1,14 @@ +<rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"> + <rich:column colspan="3"> + <h:graphicImage value="#{cap.stateFlag}"/> + </rich:column> + <rich:column breakBefore="true"> + <h:outputText value="#{cap.state}"/> + </rich:column> + <rich:column > + <h:outputText value="#{cap.name}"/> + </rich:column> + <rich:column> + <h:outputText value="#{cap.timeZone}"/> + </rich:column> +</rich:dataTable> Added: branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcolumn-Row_spanning_example.xml_sample =================================================================== --- branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcolumn-Row_spanning_example.xml_sample (rev 0) +++ branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcolumn-Row_spanning_example.xml_sample 2010-08-16 06:25:19 UTC (rev 18648) @@ -0,0 +1,16 @@ +<rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"> + <rich:column rowspan="3"> + <f:facet name="header">State Flag</f:facet> + <h:graphicImage value="#{cap.stateFlag}"/> + </rich:column> + <rich:column> + <f:facet name="header">State Info</f:facet> + <h:outputText value="#{cap.state}"/> + </rich:column> + <rich:column breakBefore="true"> + <h:outputText value="#{cap.name}"/> + </rich:column> + <rich:column breakBefore="true"> + <h:outputText value="#{cap.timeZone}"/> + </rich:column> +</rich:dataTable> Added: branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcolumnGroup-Complex_headers_using_column_groups.xml_sample =================================================================== --- branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcolumnGroup-Complex_headers_using_column_groups.xml_sample (rev 0) +++ branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcolumnGroup-Complex_headers_using_column_groups.xml_sample 2010-08-16 06:25:19 UTC (rev 18648) @@ -0,0 +1,33 @@ +<rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5" id="sublist"> + <f:facet name="header"> + <rich:columnGroup> + <rich:column rowspan="2"> + <h:outputText value="State Flag"/> + </rich:column> + <rich:column colspan="3"> + <h:outputText value="State Info"/> + </rich:column> + <rich:column breakBefore="true"> + <h:outputText value="State Name"/> + </rich:column> + <rich:column> + <h:outputText value="State Capital"/> + </rich:column> + <rich:column> + <h:outputText value="Time Zone"/> + </rich:column> + </rich:columnGroup> + </f:facet> + <rich:column> + <h:graphicImage value="#{cap.stateFlag}"/> + </rich:column> + <rich:column> + <h:outputText value="#{cap.state}"/> + </rich:column> + <rich:column> + <h:outputText value="#{cap.name}"/> + </rich:column> + <rich:column> + <h:outputText value="#{cap.timeZone}"/> + </rich:column> +</rich:dataTable> Added: branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcolumns-Basic_columns_example.xml_sample =================================================================== --- branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcolumns-Basic_columns_example.xml_sample (rev 0) +++ branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcolumns-Basic_columns_example.xml_sample 2010-08-16 06:25:19 UTC (rev 18648) @@ -0,0 +1,10 @@ +<rich:dataTable value="#{dataTableScrollerBean.model}" var="model" width="750"> + <rich:columns value="#{dataTableScrollerBean.columns}" var="columns" index="ind" id="column#{ind}"> + <f:facet name="header"> + <h:outputText value="#{columns.header}" /> + </f:facet> + <h:outputText value="#{model[ind].model} " /> + <h:outputText value="#{model[ind].mileage} miles " /> + <h:outputText value="#{model[ind].price}$" /> + </rich:columns> +</rich:dataTable> Added: branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcolumns-Using_richcolumns_and_richcolumn_together.xml_sample =================================================================== --- branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcolumns-Using_richcolumns_and_richcolumn_together.xml_sample (rev 0) +++ branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richcolumns-Using_richcolumns_and_richcolumn_together.xml_sample 2010-08-16 06:25:19 UTC (rev 18648) @@ -0,0 +1,23 @@ +<rich:dataTable value="#{dataTableScrollerBean.model}" var="model" width="500px" rows="5"> + <f:facet name="header"> + <h:outputText value="Cars Available"></h:outputText> + </f:facet> + <rich:columns value="#{dataTableScrollerBean.columns}" var="columns" index="ind"> + <f:facet name="header"> + <h:outputText value="#{columns.header}" /> + </f:facet> + <h:outputText value="#{model[ind].model} " /> + </rich:columns> + <rich:column> + <f:facet name="header"> + <h:outputText value="Price" /> + </f:facet> + <h:outputText value="Price" /> + </rich:column> + <rich:columns value="#{dataTableScrollerBean.columns}" var="columns" index="ind"> + <f:facet name="header"> + <h:outputText value="#{columns.header}" /> + </f:facet> + <h:outputText value="#{model[ind].mileage}$" /> + </rich:columns> +</rich:dataTable> Added: branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richdataGrid-ajaxKeys_example.xml_sample =================================================================== --- branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richdataGrid-ajaxKeys_example.xml_sample (rev 0) +++ branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richdataGrid-ajaxKeys_example.xml_sample 2010-08-16 06:25:19 UTC (rev 18648) @@ -0,0 +1,5 @@ +<rich:dataGrid value="#{dataTableScrollerBean.allCars}" var="car" ajaxKeys="#{listBean.list}" binding="#{listBean.dataGrid}" id="grid" elements="4" columns="2"> + ... +</rich:dataGrid> +... +<a4j:commandButton action="#{listBean.action}" reRender="grid" value="Submit"/>