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/16 21:08:52 UTC
svn commit: r233035 - in
/beehive/trunk/docs/forrest/release/src/documentation:
content/xdocs/pageflow/pageflow_datagrid.xml
resources/images/netui/datagrid/datagridSimpleWithCSS.png
resources/images/netui/datagrid/datagridSimpleWithStyle.png
Author: ekoneil
Date: Tue Aug 16 12:08:46 2005
New Revision: 233035
URL: http://svn.apache.org/viewcvs?rev=233035&view=rev
Log:
Data grid documentation. Additional content on style support.
BB: self
DRT: build.release pass
Added:
beehive/trunk/docs/forrest/release/src/documentation/resources/images/netui/datagrid/datagridSimpleWithCSS.png (with props)
beehive/trunk/docs/forrest/release/src/documentation/resources/images/netui/datagrid/datagridSimpleWithStyle.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=233035&r1=233034&r2=233035&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 12:08:46 2005
@@ -38,42 +38,6 @@
<img src="images/netui/datagrid/datagridSimple.png" alt="Simple data grid"/>
<br/>
</p>
-<!--
-<source>
-<table class="datagrid">
- <tr class="datagrid-even">
- <td class="datagrid"><span>dog1</span></td>
- <td class="datagrid"><span>Golden Retriever</span></td>
- <td class="datagrid"><span>Dog</span></td>
- <td class="datagrid"><span>99.99</span></td>
- </tr>
- <tr class="datagrid-odd">
- <td class="datagrid"><span>dog2</span></td>
- <td class="datagrid"><span>Cocker spaniel</span></td>
- <td class="datagrid"><span>Cocker spaniel</span></td>
- <td class="datagrid"><span>89.99</span></td>
- </tr>
- <tr class="datagrid-even">
- <td class="datagrid"><span>dog3</span></td>
- <td class="datagrid"><span>Labrador Retriever</span></td>
- <td class="datagrid"><span>Black Labrador dog</span></td>
- <td class="datagrid"><span>79.99</span></td>
- </tr>
- <tr class="datagrid-odd">
- <td class="datagrid"><span>fish1</span></td>
- <td class="datagrid"><span>Koi</span></td>
- <td class="datagrid"><span>Fish</span></td>
- <td class="datagrid"><span>199.99</span></td>
- </tr>
- <tr class="datagrid-even">
- <td class="datagrid"><span>fish2</span></td>
- <td class="datagrid"><span>Barracuda</span></td>
- <td class="datagrid"><span>Fish</span></td>
- <td class="datagrid"><span>199.99</span></td>
- </tr>
-</table>
-</source>
--->
<p>
The values for the cells are specified with a JSP 2.0 expression and can reference any implicit object. In this case, an
expression like <code>${container.item.petId}</code> references an implicit object called <code>container</code> that the
@@ -192,11 +156,93 @@
</p>
<section id="datagrid-style">
<title>Style Attributes</title>
- <p><strong>TODO</strong></p>
+ <p>
+The <code>style</code> attribute can be used to apply a specific style to a specifc data grid
+region. For example, the font in a column can be changed to red and bold by using the style
+<code>color:red;font-weight:bold;</code> style <code></code> on the <code>spanCell</code> as:
+ </p>
+<source>
+ <netui-data:dataGrid dataSource="pageScope.pets" name="pets">
+ <netui-data:rows>
+ <netui-data:spanCell value="${container.item.name}" style="color:red;font-weight:bold;"/>
+ <netui-data:spanCell value="${container.item.description}"/>
+ <netui-data:spanCell value="${container.item.price}"/>
+ </netui-data:rows>
+ </netui-data:dataGrid>
+</source>
+<p>
+renders a data grid that looks like:
+<br/>
+<br/>
+ <img alt="Data Grid with Style" src="images/netui/datagrid/datagridSimpleWithStyle.png"/>
+</p>
</section>
<section id="datagrid-css">
<title>CSS Attributes</title>
- <p><strong>TODO</strong></p>
+ <p>
+CSS files can also be used to apply styles to the data grid by matching names style class attribute names
+rendered on data grid HTML markup with names in a correctly linked <code>.css</code> file. For example,
+alternating row styles can be applied to a data grid with a <code>datagrid.css</code> file containing:
+</p>
+<source>
+.datagrid-even {
+background-color: #f0f0f0;
+}
+
+.datagrid-odd {
+background-color: #ffffc0;
+}
+</source>
+<p>
+and a data grid:
+</p>
+<source>
+ <link rel="stylesheet" href="datagrid.css">
+ <netui-data:dataGrid dataSource="pageScope.pets" name="pets">
+ <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>
+renders a data grid that looks like:
+<br/>
+<br/>
+ <img alt="Data Grid with CSS" src="images/netui/datagrid/datagridSimpleWithCSS.png"/>
+<br/>
+Notice that the <code><netui-data:dataGrid></code> tag does not have any special attributes that
+enable style class rendering; the default style names are always rendered. The default style
+prefix of <code>datagrid</code> can be changed by setting the <code>dataGrid</code>'s <code>styleClassPrefix</code>
+attribute. For example, if the above CSS is changed to:
+</p>
+<source>
+.foo-even {
+background-color: #f0f0f0;
+}
+
+.foo-odd {
+background-color: #ffffc0;
+}
+</source>
+ <p>
+and the data grid changed to:
+ </p>
+<source>
+ <link rel="stylesheet" href="datagrid.css">
+ <netui-data:dataGrid dataSource="pageScope.pets" name="pets" styleClassPrefix="foo">
+ <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>
+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
+ </p>
</section>
</section>
<section id="datagrid-javascript">
Added: beehive/trunk/docs/forrest/release/src/documentation/resources/images/netui/datagrid/datagridSimpleWithCSS.png
URL: http://svn.apache.org/viewcvs/beehive/trunk/docs/forrest/release/src/documentation/resources/images/netui/datagrid/datagridSimpleWithCSS.png?rev=233035&view=auto
==============================================================================
Binary file - no diff available.
Propchange: beehive/trunk/docs/forrest/release/src/documentation/resources/images/netui/datagrid/datagridSimpleWithCSS.png
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream
Added: beehive/trunk/docs/forrest/release/src/documentation/resources/images/netui/datagrid/datagridSimpleWithStyle.png
URL: http://svn.apache.org/viewcvs/beehive/trunk/docs/forrest/release/src/documentation/resources/images/netui/datagrid/datagridSimpleWithStyle.png?rev=233035&view=auto
==============================================================================
Binary file - no diff available.
Propchange: beehive/trunk/docs/forrest/release/src/documentation/resources/images/netui/datagrid/datagridSimpleWithStyle.png
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream