| <html><head> |
| <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> |
| <title>1.4. Simple Table Example</title><link rel="stylesheet" href="css/stylesheet.css" type="text/css"><meta name="generator" content="DocBook XSL Stylesheets V1.75.0"><link rel="home" href="index.html" title="Apache Click"><link rel="up" href="ch01.html" title="Chapter 1. Introduction to Apache Click"><link rel="prev" href="ch01s03.html" title="1.3. Control Listener Type 2 Example"><link rel="next" href="ch01s05.html" title="1.5. Advanced Table Example"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">1.4. Simple Table Example</th></tr><tr><td width="20%" align="left"><a accesskey="p" href="ch01s03.html">Prev</a> </td><th width="60%" align="center">Chapter 1. Introduction to Apache Click</th><td width="20%" align="right"> <a accesskey="n" href="ch01s05.html">Next</a></td></tr></table><hr></div><div class="sect1" title="1.4. Simple Table Example"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="simple-table"></a>1.4. Simple Table Example</h2></div></div></div><p>One of the most useful Click controls is the |
| <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/control/Table.html" target="_blank">Table</a> |
| control. |
| </p><p>An example usage of the Table control in a customers Page is provided |
| below: |
| </p><pre class="programlisting"><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">class</span> SimpleTablePage <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">extends</span> Page { |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pun">@Bindable</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">protected</span> Table table = <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> Table(); |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Constructor ------------------------------------------------------------</span> |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> SimpleTablePage() { |
| table.setClass(Table.CLASS_ITS); |
| |
| table.addColumn(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> Column(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"id"</span>)); |
| table.addColumn(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> Column(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"name"</span>)); |
| table.addColumn(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> Column(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"email"</span>)); |
| table.addColumn(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> Column(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"investments"</span>)); |
| } |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Event Handlers ---------------------------------------------------------</span> |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">/** |
| * @see Page#onRender() |
| */</span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="pun">@Override</span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">public</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">void</span> onRender() { |
| List list = getCustomerService().getCustomersSortedByName(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="lit">10</span>); |
| table.setRowList(list); |
| } |
| }</pre><p>In this Page code example a Table control is declared, we set the |
| table's HTML class, and then define a number of table |
| <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/control/Column.html" target="_blank">Column</a> |
| objects. In the column definitions we specify the name of the column in the |
| constructor, which is used for the table column header and also to specify |
| the row object property to render. |
| </p><p>The last thing we need to do is populate the table with data. To do |
| this we override the Page onRender() method and set the table row list |
| before it is rendered. |
| </p><p>In our Page template we simply reference the <code class="varname">$table</code> |
| object which is rendered when its <code class="methodname">toString()</code> method |
| is called. |
| </p><pre class="programlisting"><span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><html></span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><head></span> |
| <code class="varname">$headElements</code> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></head></span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"><body></span> |
| |
| <code class="varname">$table</code> |
| |
| <code class="varname">$jsElements</code> |
| |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></body></span> |
| <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag"></html></span></pre><p>Note from the example above that we specify the <code class="varname">$headElements</code> |
| reference so that the table can include any HEAD elements, which includes Css |
| imports and styles, in the header. Also note we specify the |
| <code class="varname">$jsElements</code> reference which include any JavaScript imports |
| and scripts at the bottom. At runtime Click automatically makes the variables |
| <code class="varname">$headElements</code> and <code class="varname">$jsElements</code> available |
| to the template. |
| </p><p>At runtime the Table would be rendered in the page as:</p><div class="figure"><a name="simple-table-image"></a><div class="figure-contents"><div class="mediaobject"><img src="images/introduction/simple-table.png" alt="Simple Table"></div></div><p xmlns:fo="http://www.w3.org/1999/XSL/Format" class="title"><i>Figure 1.2. Simple Table</i></p></div><br class="figure-break"></div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"><a accesskey="p" href="ch01s03.html">Prev</a> </td><td width="20%" align="center"><a accesskey="u" href="ch01.html">Up</a></td><td width="40%" align="right"> <a accesskey="n" href="ch01s05.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top">1.3. Control Listener Type 2 Example </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> 1.5. Advanced Table Example</td></tr></table></div></body></html> |
