1.5. Advanced Table Example

The Table control also provides support for:

A more advanced Table example is provided below:

public class CustomerPage extends Page {

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

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

    public CustomersPage() {
        // Add controls
        addControl(table);
        addControl(editLink);
        addControl(deleteLink);

        // Setup table
        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);

        // Table rowList will be populated through a DataProvider which loads
        // data on demand.
        table.setDataProvider(new DataProvider() {

            public List getData() {
                return getCustomerService().getCustomers();
            }
        });

        // Below we setup the table to preserve it's state (sorting and paging)
        // while editing customers

        table.getControlLink().setActionListener(new ActionListener() {

            public boolean onAction(Control source) {
                // Save Table sort and paging state between requests.
                // NOTE: we set the listener on the table's Link control which is invoked
                // when the Link is clicked, such as when paging or sorting.
                // This ensures the table state is only saved when the state changes, and
                // cuts down on unnecessary session replication in a cluster environment.
                table.saveState(getContext()); 1
                return true;
            }
        });

        // Restore the table sort and paging state from the session between requests
        table.restoreState(getContext()); 2
    }
    
    // Event Handlers ---------------------------------------------------------
         
    /**
     * Handle the delete row click event.
     */    
    public boolean onDeleteClick() {
        Integer id = deleteLink.getValueInteger();
        getCustomerService().deleteCustomer(id);
        return true;
    }
}
1

Table is a Stateful control and provides methods for saving and restoring it's state. Here we save the Table state in the HttpSession which ensures sort and paging state is preserved while editing customers.

2

Restore the Table state that was previously saved in the HttpSession.

In this Page code example a Table control is declared and a number of Column objects are added. We set the Table's DataProvider instance which provides data on demand to the table. Data retrieved from the dataProvider will be used to populate the Table rowList before it is rendered. 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.

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:

Advanced Table

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.