You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@beehive.apache.org by ek...@apache.org on 2005/08/17 01:34:39 UTC
svn commit: r233078 - in
/beehive/trunk/docs/forrest/release/src/documentation:
content/xdocs/pageflow/ resources/images/netui/datagrid/
Author: ekoneil
Date: Tue Aug 16 16:34:33 2005
New Revision: 233078
URL: http://svn.apache.org/viewcvs?rev=233078&view=rev
Log:
More data grid documentation.
BB: self
DRT: build.release pass
Added:
beehive/trunk/docs/forrest/release/src/documentation/resources/images/netui/datagrid/datagridSimpleWithDefaultPager.png (with props)
beehive/trunk/docs/forrest/release/src/documentation/resources/images/netui/datagrid/datagridSimpleWithFPNLPager.png (with props)
beehive/trunk/docs/forrest/release/src/documentation/resources/images/netui/datagrid/datagridSimpleWithImplicitObjectPager.png (with props)
Modified:
beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/pageflow/pageflow_datagrid.xml
Modified: beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/pageflow/pageflow_datagrid.xml
URL: http://svn.apache.org/viewcvs/beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/pageflow/pageflow_datagrid.xml?rev=233078&r1=233077&r2=233078&view=diff
==============================================================================
--- beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/pageflow/pageflow_datagrid.xml (original)
+++ beehive/trunk/docs/forrest/release/src/documentation/content/xdocs/pageflow/pageflow_datagrid.xml Tue Aug 16 16:34:33 2005
@@ -240,14 +240,159 @@
</netui-data:dataGrid>
</source>
<p>
-then the data grid will render with the same alternating row colors as above. To completely disable rendering
-CSS styles, the <code><netui-data:dataGrid></code>'s attribute called
+then the data grid will render with the same alternating row colors as above. Rendering of style class
+names can be completely disabled by setting the <code><netui-data:dataGrid></code>'s <code>styleClassPolicy</code>
+attribute to the value <code>none</code>. For example:
</p>
+<source>
+ <netui-data:dataGrid dataSource="pageScope.pets" name="pets" styleClassPolicy="empty">
+ <netui-data:rows>
+ <netui-data:spanCell value="${container.item.name}"/>
+ <netui-data:spanCell value="${container.item.description}"/>
+ <netui-data:spanCell value="${container.item.price}"/>
+ </netui-data:rows>
+ </netui-data:dataGrid>
+</source>
+ <p>
+will render a plain HTML table with no HTML <code>class</code> or <code>style</code> attributes.
+ </p>
+ <p>
+The data grid renders several default style names onto various HTML table regions. These values include:
+</p>
+<table>
+<tr><th>Data grid region</th><th>Style name</th></tr>
+<tr><td>Table</td><td><code>datagrid</code></td></tr>
+<tr><td>Table Caption</td><td><code>datagrid-caption</code></td></tr>
+<tr><td>Header Rows</td><td><code>datagrid-header</code></td></tr>
+<tr><td>Header Table Cells (<code>th</code>s)</td><td><code>datagrid</code></td></tr>
+<tr><td>Even Data Rows</td><td><code>datagrid-even</code></td></tr>
+<tr><td>Odd Data Rows</td><td><code>datagrid-odd</code></td></tr>
+<tr><td>Data Table Cells (<code>td</code>s)</td><td><code>datagrid</code></td></tr>
+<tr><td>Footer Row</td><td><code>datagrid-footer</code></td></tr>
+<tr><td>Header Row Group</td><td><code>datagrid</code></td></tr>
+<tr><td>Data Row Group</td><td><code>datagrid</code></td></tr>
+<tr><td>Footer Row Group</td><td><code>datagrid</code></td></tr>
+<tr><td>Sortable Header Cell Class</td><td><code>datagrid-sortable</code></td></tr>
+<tr><td>Sorted Header Cell Class</td><td><code>datagrid-sorted</code></td></tr>
+<tr><td>Sorted Data Cell Class</td><td><code>datagrid-sorted</code></td></tr>
+<tr>
+ <td colspan="2">
+ Notes:<br/>
+ <ul>
+ <li>Row numbering is zero based, so the first data row is even, the second odd, and so on.</li>
+ <li>When using a <code>styleClassPrefix</code> on the <code>dataGrid</code> tag, the <code>datagrid</code>
+ part of the style name can be replaced with the value of the <code>styleClassPrefix</code>.</li>
+ </ul>
+ </td>
+</tr>
+</table>
</section>
</section>
-<section id="datagrid-javascript">
- <title>Using Javascript with the Data Grid</title>
- <p><strong>TODO</strong></p>
+<section id="datagrid-pager">
+ <title>Customizing the Data Grid's Pager</title>
+ <p>
+In order to effectively display a large data set, the data grid provides a paging mechansim that
+lets the grid display a subset of the data set on each "page". The default pager shows links for
+navigating to the previous and next pagers. For example, if the <code>pageScope.pets</code> data
+set contains more than ten items, the following data grid:
+ </p>
+<source>
+ <netui-data:dataGrid dataSource="pageScope.pets" name="pets">
+ <netui-data:configurePager pageSize="2"/>
+ <netui-data:rows>
+ <netui-data:spanCell value="${container.item.petId}"/>
+ <netui-data:spanCell value="${container.item.name}"/>
+ <netui-data:spanCell value="${container.item.description}"/>
+ <netui-data:spanCell value="${container.item.price}"/>
+ </netui-data:rows>
+ </netui-data:dataGrid>
+</source>
+ <p>
+generates a pager that contains the current and total page count along with links that navigate to the
+previous and next pages:
+<br/>
+ <img alt="Data Grid with Default Pager" src="images/netui/datagrid/datagridSimpleWithDefaultPager.png"/>
+<br/>
+If the data set is smaller than ten items, the default pager will simply show a pager with the message
+<code>Page 1 of 1</code>. To change the default page size, use the <code><netui-data:configurePager></code>
+tag to set the page size explicitly. For example:
+ </p>
+<source>
+ <netui-data:configurePager pageSize="2"/>
+</source>
+ <p>
+The appearance of a data grid's can also be configured. Included with the data grid are pagers of two
+formats:
+ </p>
+ <table>
+ <tr><th>Pager Name</th><th>Pager Format</th></tr>
+ <tr><td><code>prevNext</code></td><td>previous / next</td></tr>
+ <tr><td><code>firstPrevNextLast</code></td><td>first / previous next / last</td></tr>
+ </table>
+ <p>
+where the Pager Name can be used to configure the <code>configurePager</code>'s <code>pagerFormat</code> attribute.
+The <code>firstPrevNextLast</code> pager can be configured by using the <code>configurePager</code> tag as:
+ </p>
+<source>
+ <netui-data:dataGrid dataSource="pageScope.pets" name="pets">
+ <netui-data:configurePager pagerFormat="firstPrevNextLast"/>
+ <netui-data:rows>
+ <netui-data:spanCell value="${container.item.petId}"/>
+ <netui-data:spanCell value="${container.item.name}"/>
+ <netui-data:spanCell value="${container.item.description}"/>
+ <netui-data:spanCell value="${container.item.price}"/>
+ </netui-data:rows>
+ </netui-data:dataGrid>
+</source>
+ <p>
+which will render a pager as:
+ <br/>
+ <img alt="Data Grid with FPNL Pager" src="images/netui/datagrid/datagridSimpleWithFPNLPager.png"/>
+ <br/>
+ </p>
+ <section id="datagrid-pager-custom">
+ <title>Defining Custom Pagers</title>
+ <p>
+In addition to the pre-defined pager formats, the data grid exposes a set of implicit JavaBean objects into
+the JSP's PageContext that can be used when rendering a custom pager. These implicit objects provide access
+to the number of pages, the size of the page, the total size of the data set, and other properties that can be
+displayed or used to otherwise build a pager. For example, to define a custom label for a pager, the following
+example uses the <code>dataGrid</code> implicit object that is available in the PageContext. This JavaBean
+exposes a set of state that can be referenced via the JSP 2.0 EL to access additional information about the
+data grid itself. The <code>dataGrid</code> object provides access to the grid's pager state and could be used
+as:
+ </p>
+<source>
+ <netui-data:dataGrid dataSource="pageScope.pets" name="pets">
+ <netui-data:configurePager pageSize="2" pagerFormat="firstPrevNextLast" disableDefaultPager="true"/>
+ <netui-data:caption>
+ <b>Displaying item ${dataGrid.state.pagerModel.row+1} to ${dataGrid.state.pagerModel.lastRowForPage+1}
+ of ${dataGrid.state.pagerModel.dataSetSize} matching items.</b>
+ <br/>
+ <netui-data:renderPager/>
+ <br/>
+ </netui-data:caption>
+ <netui-data:header>
+ <netui-data:headerCell value="Pet Id"/>
+ <netui-data:headerCell value="Name"/>
+ <netui-data:headerCell value="Description"/>
+ <netui-data:headerCell value="Price"/>
+ </netui-data:header>
+ <netui-data:rows>
+ <netui-data:spanCell value="${container.item.petId}"/>
+ <netui-data:spanCell value="${container.item.name}"/>
+ <netui-data:spanCell value="${container.item.description}"/>
+ <netui-data:spanCell value="${container.item.price}"/>
+ </netui-data:rows>
+ </netui-data:dataGrid>
+</source>
+ <p>
+to render a data grid:
+ <br/>
+ <img alt="Data Grid with Implicit Object Pager" src="images/netui/datagrid/datagridSimpleWithImplicitObjectPager.png"/>
+ <br/>
+ </p>
+ </section>
</section>
</body>
</document>
Added: beehive/trunk/docs/forrest/release/src/documentation/resources/images/netui/datagrid/datagridSimpleWithDefaultPager.png
URL: http://svn.apache.org/viewcvs/beehive/trunk/docs/forrest/release/src/documentation/resources/images/netui/datagrid/datagridSimpleWithDefaultPager.png?rev=233078&view=auto
==============================================================================
Binary file - no diff available.
Propchange: beehive/trunk/docs/forrest/release/src/documentation/resources/images/netui/datagrid/datagridSimpleWithDefaultPager.png
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream
Added: beehive/trunk/docs/forrest/release/src/documentation/resources/images/netui/datagrid/datagridSimpleWithFPNLPager.png
URL: http://svn.apache.org/viewcvs/beehive/trunk/docs/forrest/release/src/documentation/resources/images/netui/datagrid/datagridSimpleWithFPNLPager.png?rev=233078&view=auto
==============================================================================
Binary file - no diff available.
Propchange: beehive/trunk/docs/forrest/release/src/documentation/resources/images/netui/datagrid/datagridSimpleWithFPNLPager.png
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream
Added: beehive/trunk/docs/forrest/release/src/documentation/resources/images/netui/datagrid/datagridSimpleWithImplicitObjectPager.png
URL: http://svn.apache.org/viewcvs/beehive/trunk/docs/forrest/release/src/documentation/resources/images/netui/datagrid/datagridSimpleWithImplicitObjectPager.png?rev=233078&view=auto
==============================================================================
Binary file - no diff available.
Propchange: beehive/trunk/docs/forrest/release/src/documentation/resources/images/netui/datagrid/datagridSimpleWithImplicitObjectPager.png
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream