<html><head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   <title>1.5.&nbsp;Advanced 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&nbsp;1.&nbsp;Introduction to Apache Click"><link rel="prev" href="ch01s04.html" title="1.4.&nbsp;Simple Table Example"><link rel="next" href="ch01s06.html" title="1.6.&nbsp;Simple Form 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.5.&nbsp;Advanced Table Example</th></tr><tr><td width="20%" align="left"><a accesskey="p" href="ch01s04.html">Prev</a>&nbsp;</td><th width="60%" align="center">Chapter&nbsp;1.&nbsp;Introduction to Apache Click</th><td width="20%" align="right">&nbsp;<a accesskey="n" href="ch01s06.html">Next</a></td></tr></table><hr></div><div class="sect1" title="1.5.&nbsp;Advanced Table Example"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="advanced-table"></a>1.5.&nbsp;Advanced Table Example</h2></div></div></div><p>The Table control also provides support for:</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem"><p>automatic rendering</p></li><li class="listitem"><p>column formatting and custom rendering</p></li><li class="listitem"><p>automatic pagination</p></li><li class="listitem"><p>link control support</p></li></ul></div><p>A more advanced Table example 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> CustomerPage <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="pun">@Bindable</span> <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">protected</span> PageLink editLink = <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> PageLink(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"Edit"</span>, EditCustomer.<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">class</span>);
    <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> ActionLink deleteLink = <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> ActionLink(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"Delete"</span>, <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">this</span>, <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"onDeleteClick"</span>);

    <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> CustomersPage() {
        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// Setting Page to stateful to preserve Table sort and paging state while</span>
        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="com">// editing customers</span>
        setStateful(true); <a class="co" name="co-stateful-table" href="ch01s05.html#ca-stateful-table"><img src="images/callouts/1.gif" alt="1" border="0"></a>

        table.setClass(Table.CLASS_ITS);
        table.setPageSize(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="lit">10</span>);
        table.setShowBanner(true);
        table.setSortable(true);

        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>));
        
        Column column = <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>);
        column.setAutolink(true);
        column.setTitleProperty(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"name"</span>);
        table.addColumn(column);
        
        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>));
        
        editLink.setImageSrc(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"/images/table-edit.png"</span>);
        editLink.setTitle(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"Edit customer details"</span>);
        editLink.setParameter(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"referrer"</span>, <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"/introduction/advanced-table.htm"</span>);
        
        deleteLink.setImageSrc(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"/images/table-delete.png"</span>);
        deleteLink.setTitle(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"Delete customer record"</span>);
        deleteLink.setAttribute(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"onclick"</span>,
            <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"return window.confirm('Are you sure you want to delete this record?');"</span>);

        column = <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">"Action"</span>);
        column.setTextAlign(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"center"</span>);
        AbstractLink[] links = <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> AbstractLink[] { editLink, deleteLink };
        column.setDecorator(<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">new</span> LinkDecorator(table, links, <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="str">"id"</span>));
        column.setSortable(false);
        table.addColumn(column);
    }
    
    <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">/**
     * Handle the delete row click event.
     */</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">boolean</span> onDeleteClick() {
        Integer id = deleteLink.getValueInteger();
        getCustomerService().deleteCustomer(id);
        <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="kwd">return</span> true;
    }
    
    <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().getCustomersByName();
        table.setRowList(list);
    }
}</pre><div class="calloutlist"><table border="0" summary="Callout list"><tr xmlns:fo="http://www.w3.org/1999/XSL/Format"><td valign="top" align="left"><a name="ca-stateful-table"></a><a href="#co-stateful-table"><img src="images/callouts/1.gif" alt="1" border="0"></a> </td><td valign="top" align="left"><p>Setting Page to stateful instructs Click to store the Page in the
        <a class="external" href="http://java.sun.com/products/servlet/2.3/javadoc/javax/servlet/http/HttpSession.html" target="_blank">HttpSession</a>.
        This ensures the Table's sort and paging state is preserved while editing
        customers. See the <a class="link" href="ch02s08.html" title="2.8.&nbsp;Stateful Pages">Stateful Page</a>
        section for more details.
        </p></td></tr></table></div><p>In this Page code example a Table control is declared and a number of
    <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 are added. An editLink
    <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/control/PageLink.html" target="_blank">PageLink</a>
    control is used as decorator for the "Action" column. This control navigates
    to the <code class="classname">EditCustomer</code> page. A deleteLink
    <a xmlns:fo="http://www.w3.org/1999/XSL/Format" class="external" href="../../click-api/org/apache/click/control/ActionLink.html" target="_blank">ActionLink</a>
    control is also used as a decorator for the "Action" column. This control will
    invoke the Page <code class="methodname">onDeleteClick()</code> method when it is
    clicked. Finally we have the Page <code class="methodname">onRender()</code> method
    which is used to populate the Table control with rows 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">&lt;html&gt;</span>
  <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;head&gt;</span>
    <code class="varname">$headElements</code>
  <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/head&gt;</span>
  <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;body&gt;</span>

    <code class="varname">$table</code>

    <code class="varname">$jsElements</code>

  <span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/body&gt;</span>
<span xmlns:fo="http://www.w3.org/1999/XSL/Format" class="tag">&lt;/html&gt;</span></pre><p>At runtime the Table would be rendered in the page as:</p><div class="figure"><a name="advanced-table-image"></a><div class="figure-contents"><div class="mediaobject"><img src="images/introduction/advanced-table.png" alt="Advanced Table"></div></div><p xmlns:fo="http://www.w3.org/1999/XSL/Format" class="title"><i>Figure&nbsp;1.3.&nbsp;Advanced Table</i></p></div><br class="figure-break"><p>In this example, clicking on the Edit link will navigate the user to
    the <code class="classname">EditCustomer</code> page where the selected customer
    can be edited. When the user click on the Delete link, the
    <code class="methodname">onDeleteClick()</code> method will be called on the Page
    deleting the customer record.
    </p></div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"><a accesskey="p" href="ch01s04.html">Prev</a>&nbsp;</td><td width="20%" align="center"><a accesskey="u" href="ch01.html">Up</a></td><td width="40%" align="right">&nbsp;<a accesskey="n" href="ch01s06.html">Next</a></td></tr><tr><td width="40%" align="left" valign="top">1.4.&nbsp;Simple Table Example&nbsp;</td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top">&nbsp;1.6.&nbsp;Simple Form Example</td></tr></table></div></body></html>