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 {

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

    // ------------------------------------- Constructor
     
    public CustomersPage() {
        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);
    }
}

In this Page code example a Table control is declared and a number of Column objects are added. A deleteLink ActionLink control is 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:

Advanced Table

Figure 1.3. Advanced Table


In this example if a user click on the Delete link, the onDeleteClick() method will be called on the Page deleting the customer record.