Author: cluts Date: 2008-03-17 10:45:46 -0400 (Mon, 17 Mar 2008) New Revision: 6859 Added: trunk/docs/userguide/en/src/main/resources/images/columnFilt1.png trunk/docs/userguide/en/src/main/resources/images/columnsort1.png trunk/docs/userguide/en/src/main/resources/images/columnsort2.png Modified: trunk/docs/userguide/en/src/main/docbook/included/column.desc.xml trunk/docs/userguide/en/src/main/docbook/included/column.xml trunk/docs/userguide/en/src/main/docbook/included/columns.desc.xml trunk/docs/userguide/en/src/main/docbook/included/dataTable.desc.xml Log: RF-1740 - Added new key feature for dataTable,columns and column components. Sorting:added new section in <rich:column> chapter and added information, examples code and screens. Filtering: added new section in <rich:column> chapter and added information, example code and screen. Modified: trunk/docs/userguide/en/src/main/docbook/included/column.desc.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/column.desc.xml 2008-03-17 14:45:17 UTC (rev 6858) +++ trunk/docs/userguide/en/src/main/docbook/included/column.desc.xml 2008-03-17 14:45:46 UTC (rev 6859) @@ -23,6 +23,7 @@ <listitem>Completely skinned table rows and child elements</listitem> <listitem>Possibility to combine columns with the help of <emphasis ><property>&quot;colspan&quot;</property></emphasis></listitem> <listitem>Possibility to combine rows with the help of <emphasis ><property>&quot;rowspan&quot;</property></emphasis> and <emphasis ><property>&quot;breakBefore&quot;</property></emphasis></listitem> + <listitem>Possibility to sort and to filter of columns</listitem> </itemizedlist> </section> </section> \ No newline at end of file Modified: trunk/docs/userguide/en/src/main/docbook/included/column.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/column.xml 2008-03-17 14:45:17 UTC (rev 6858) +++ trunk/docs/userguide/en/src/main/docbook/included/column.xml 2008-03-17 14:45:46 UTC (rev 6859) @@ -181,12 +181,197 @@ component, it becomes possible to group easily the rows with special HTML attribute.</para> <para>The columns also could be grouped in a particular way with the help of the <emphasis role="bold"><property>&lt;h:columnGroup&gt;</property></emphasis> component that is described in <link linkend="columnGroup">the following chapter</link>.</para> - </section> +</section> + + <section> + <title id="sortAndFilter">Sorting and Filtering</title> + <section> + <title>Sorting</title> + <para>In order to sort the columns you should use <emphasis><property>&quot;sortBy&quot;</property></emphasis> attribute which defines a bean property which is used for sorting of a column.</para> + <para>By default, the first column sorted in ascending. Below you can see code example:</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<h:form> + <rich:dataTable value="#{capitalsBean.capitals}" var="cap" width="300px"> + <f:facet name="header"> + <h:outputText value="Sorting Example"/> + </f:facet> + <rich:column sortBy="#{cap.state}"> + <f:facet name="header"> + <h:outputText value="State Name"></h:outputText> + </f:facet> + <h:outputText value="#{cap.state}"></h:outputText> + </rich:column> + <rich:column sortBy="#{cap.name}"> + <f:facet name="header"> + <h:outputText value="State Capital"></h:outputText> + </f:facet> + <h:outputText value="#{cap.name}"/> + </rich:column> + </rich:dataTable> +</h:form> +... +]]></programlisting> + <para>This is result:</para> + <figure> + <title>Example sorting first column in ascending</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/columnsort1.png"/> + </imageobject> + </mediaobject> + </figure> + <para>In order to sort the data in descending order, you should double-click on the header of column, which you want to sort.</para> + <para><emphasis><property>&quot;sortOrder&quot;</property></emphasis> attribute may be possible in three states: + <itemizedlist> + <listitem> + <emphasis><property>&quot;none&quot;</property></emphasis> + </listitem> + <listitem> + <emphasis><property>&quot;ascending&quot;</property></emphasis> + </listitem> + <listitem> + <emphasis><property>&quot;descending&quot;</property></emphasis>. + </listitem> + </itemizedlist> + </para> + <para>By default, data in the columns is not sorted.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<h:panelGrid columns="2" columnClasses="top"> + <rich:dataTable value="#{dataTableScrollerBean.allCars}" var="category" rows="5" id="table"> + <rich:column id="make" sortBy="#{category.make}" sortOrder="#{sortingBean.makeDirection}"> + <f:facet name="header"><h:outputText styleClass="headerText" value="Make" /> + <h:outputText value="#{category.make}" /> + </rich:column> + <rich:column id="model" sortBy="#{category.model}" sortOrder="#{sortingBean.modelDirection}"> + <f:facet name="header"> + <h:outputText styleClass="headerText" value="Model" /> + </f:facet> + <h:outputText value="#{category.model}" /> + </rich:column> + <rich:column id="price" sortBy="#{category.price}" sortOrder="#{sortingBean.priceDirection}"> + <f:facet name="header"> + <h:outputText styleClass="headerText" value="Price" /> + </f:facet> + <h:outputText value="#{category.price}" /> + </rich:column> + <rich:column id="mileage" sortBy="#{category.mileage}" sortOrder="#{sortingBean.mileageDirection}"> + <f:facet name="header"> + <h:outputText styleClass="headerText" value="Mileage" /> + </f:facet> + <h:outputText value="#{category.mileage}" /> + </rich:column> + <rich:column width="200px" id="vin"> + <f:facet name="header"> + <h:outputText styleClass="headerText" value="VIN" /> + </f:facet> + <h:outputText value="#{category.vin}" /> + </rich:column> + <rich:column id="stock"> + <f:facet name="header"> + <h:outputText styleClass="headerText" value="Stock" /> + </f:facet> + <h:outputText value="#{category.stock}" /> + </rich:column> +</rich:dataTable> +...]]></programlisting> + <para>Below you can see result:</para> + <figure> + <title>Sorting using the example of the <emphasis><property>&quot;sortOrder&quot;</property></emphasis> attribute</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/columnsort2.png"/> + </imageobject> + </mediaobject> + </figure> + <para><emphasis><property>&quot;selfSorted&quot;</property></emphasis> attribute will manage if it's header will be clickable, icons rendered and sorting will be fired after click on the header. + So, developer will be able to define the <emphasis><property>sortBy</property></emphasis> property and conditionally use internal sorting.</para> + <para>The default attribute is set to <emphasis><property>&quot;true&quot;</property></emphasis>.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<h:form> + <rich:dataTable value="#{capitalsBean.capitals}" var="cap" width="300px" columnClasses="center"> + <f:facet name="header"> + <h:outputText value="Sorting Example"/> + </f:facet> + <rich:column> + <f:facet name="header"> + <h:outputText value="State Flag"></h:outputText> + </f:facet> + <h:graphicImage value="#{cap.stateFlag}"/> + </rich:column> + <rich:column sortBy="#{cap.state}" selfSorted="false"> + <f:facet name="header"> + <h:outputText value="State Name"></h:outputText> + </f:facet> + <h:outputText value="#{cap.state}"></h:outputText> + </rich:column> + <rich:column sortBy="#{cap.name}"> + <f:facet name="header"> + <h:outputText value="State Capital"></h:outputText> + </f:facet> + <h:outputText value="#{cap.name}"/> + </rich:column> + </rich:dataTable> +</h:form> +... +]]></programlisting> + <para>As a result, the second column will be unavailable for sorting.</para> + <para>Sorting can&apos;t be used together with pagination.</para> + </section> + <section> + <title>Filtering</title> + <para>In order to filter the column value, in accordance with the entered value, it is necessary to use a <emphasis><property>&quot;filterBy&quot;</property></emphasis> attribute.</para> + <para>Below you can see example code and the result of its use:</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<h:form> + <rich:dataTable value="#{capitalsBean.capitals}" var="cap" width="500px"> + <f:facet name="header"> + <h:outputText value="Filtering Example"/> + </f:facet> + <rich:column> + <f:facet name="header"> + <h:graphicImage value="/images/ico_DataTable.gif"></h:graphicImage> + </f:facet> + <h:graphicImage value="#{cap.stateFlag}"/> + </rich:column> + <rich:column filterBy="#{cap.state}" filterDefaultLabel="click to filter"> + <h:outputText value="#{cap.state}"></h:outputText> + </rich:column> + <rich:column filterBy="#{cap.name}" filterDefaultLabel="click to filter"> + <h:outputText value="#{cap.name}"/> + </rich:column> + </rich:dataTable> +</h:form> +... +]]></programlisting> + <figure> + <title>Filtering using the example of the <emphasis><property>&quot;filterBy&quot;</property></emphasis> attribute</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/columnFilt1.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + + </section> + <section> <title>Look-and-Feel Customization</title> <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> + <property>style class redefinition method</property>. </emphasis> Default style classes are mapped on <emphasis> <property>skin parameters.</property> </emphasis></para> Modified: trunk/docs/userguide/en/src/main/docbook/included/columns.desc.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/columns.desc.xml 2008-03-17 14:45:17 UTC (rev 6858) +++ trunk/docs/userguide/en/src/main/docbook/included/columns.desc.xml 2008-03-17 14:45:46 UTC (rev 6859) @@ -28,6 +28,7 @@ <listitem>Dynamic tables creation</listitem> <listitem>Possibility to combine columns with the help of <emphasis ><property>&quot;colspan&quot;</property></emphasis> and <emphasis ><property>&quot;breakBefore&quot;</property></emphasis></listitem> <listitem>Possibility to combine rows with the help of <emphasis ><property>&quot;rowspan&quot;</property></emphasis> </listitem> + <listitem>Possibility to sort and to filter of columns</listitem> </itemizedlist> </section> </section> Modified: trunk/docs/userguide/en/src/main/docbook/included/dataTable.desc.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/dataTable.desc.xml 2008-03-17 14:45:17 UTC (rev 6858) +++ trunk/docs/userguide/en/src/main/docbook/included/dataTable.desc.xml 2008-03-17 14:45:46 UTC (rev 6859) @@ -26,6 +26,7 @@ <property>&quot;colGroup&quot;</property> and <property>&quot;subTable&quot;</property></listitem> <listitem>Possibility to update a limited set of strings with AJAX</listitem> + <listitem>Possibility to sort and to filter of columns</listitem> </itemizedlist> </section> </section> Added: trunk/docs/userguide/en/src/main/resources/images/columnFilt1.png =================================================================== (Binary files differ) Property changes on: trunk/docs/userguide/en/src/main/resources/images/columnFilt1.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: trunk/docs/userguide/en/src/main/resources/images/columnsort1.png =================================================================== (Binary files differ) Property changes on: trunk/docs/userguide/en/src/main/resources/images/columnsort1.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream Added: trunk/docs/userguide/en/src/main/resources/images/columnsort2.png =================================================================== (Binary files differ) Property changes on: trunk/docs/userguide/en/src/main/resources/images/columnsort2.png ___________________________________________________________________ Name: svn:mime-type + application/octet-stream