1.5. Advanced Table Example

1.5. Advanced Table Example
Prev	Chapter 1. Introduction to Apache Click	Next

The Table control also provides support for:

automatic rendering
column formatting and custom rendering
automatic pagination
link control support

A more advanced Table example is provided below:

public class CustomerPage extends Page {

    @Bindable protected Table table = new Table();
    @Bindable protected PageLink editLink = new PageLink("Edit", EditCustomer.class);
    @Bindable protected ActionLink deleteLink = new ActionLink("Delete", this, "onDeleteClick");

    // ------------------------------------- Constructor

    public CustomersPage() {
        // Setting Page to stateful to preserve Table sort and paging state while
        // editing customers
        setStateful(true); 

        table.setClass(Table.CLASS_ITS);
        table.setPageSize(10);
        table.setShowBanner(true);
        table.setSortable(true);

        table.addColumn(new Column("id"));

        table.addColumn(new Column("name"));
        
        Column column = new Column("email");
        column.setAutolink(true);
        column.setTitleProperty("name");
        table.addColumn(column);
        
        table.addColumn(new Column("investments"));
        
        editLink.setImageSrc("/images/table-edit.png");
        editLink.setTitle("Edit customer details");
        editLink.setParameter("referrer", "/introduction/advanced-table.htm");
        
        deleteLink.setImageSrc("/images/table-delete.png");
        deleteLink.setTitle("Delete customer record");
        deleteLink.setAttribute("onclick",
            "return window.confirm('Are you sure you want to delete this record?');");

        column = new Column("Action");
        column.setTextAlign("center");
        AbstractLink[] links = new AbstractLink[] { editLink, deleteLink };
        column.setDecorator(new LinkDecorator(table, links, "id"));
        column.setSortable(false);
        table.addColumn(column);
    }
    
    // ---------------------------------- Event Handlers
         
    /**
     * Handle the delete row click event.
     */    
    public boolean onDeleteClick() {
        Integer id = deleteLink.getValueInteger();
        getCustomerService().deleteCustomer(id);
        return true;
    }
    
    /**
     * @see Page#onRender()
     */
    @Override
    public void onRender() {
        List list = getCustomerService().getCustomersByName();
        table.setRowList(list);
    }
}

Setting Page to stateful instructs Click to store the Page in the HttpSession. This ensures the Table's sort and paging state is preserved while editing customers. See the Stateful Page section for more details.

In this Page code example a Table control is declared and a number of Column objects are added. An editLink PageLink control is used as decorator for the "Action" column. This control navigates to the EditCustomer page. A deleteLink ActionLink control is also used as a decorator for the "Action" column. This control will invoke the Page onDeleteClick() method when it is clicked. Finally we have the Page onRender() method which is used to populate the Table control with rows before it is rendered.

In our Page template we simply reference the $table object which is rendered when its toString() method is called.

<html>
  <head>
    $headElements
  </head>
  <body>

    $table

    $jsElements

  </body>
</html>

At runtime the Table would be rendered in the page as:

Figure 1.3. Advanced Table

In this example, clicking on the Edit link will navigate the user to the EditCustomer page where the selected customer can be edited. When the user click on the Delete link, the onDeleteClick() method will be called on the Page deleting the customer record.

Prev	Up	Next
1.4. Simple Table Example	Home	1.6. Simple Form Example