TableListener

---

Version 1.0 onwards

---

Tells You When A Table's Cell Has Been Clicked

---

---

Sources

---

• FlexTable
• Grid
• HTMLTable

---

Notes

---

The TableListener is a very simple thing. It fires an event if a table cell is clicked (i.e. a cell in a Grid, Flexgrid, or something you made yourself by extending the HTMLTable abstract class)

The only reservation I have is that you only get the click event and not the mousedown/mouseup events, so as you can see in the demo, if you click slowly you can't give the feedback to the user that you might (I do) want to. You have to add listeners to all the added widgets for this.

---

Code

---

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.ui.Grid;
import com.google.gwt.user.client.ui.HasAlignment;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.SourcesTableEvents;
import com.google.gwt.user.client.ui.TableListener;
import com.roughian.rxf.client.ui.AbstractRemotePage;
import com.roughian.rxf.client.ui.RootPanelUncached;

public class Listeners__TableListener
    extends AbstractRemotePage implements TableListener
{
    public void buildPage()
    {
        // Set up a grid

        Grid grid = new Grid(3, 3);
        grid.setSize("200px", "200px");
        grid.addStyleName("table-center");
        grid.addTableListener(this);
        grid.setCellSpacing(3);
        DOM.setStyleAttribute(grid.getElement(),
             "borderCollapse", "separate");

        // Load the grid and style the cells

        for (int c = 0; c < 3; c++)
        {
            for (int r = 0; r < 3; r++)
            {
                grid.setWidget(r, c, new Label(r + ", " + c));

                grid.getCellFormatter().setHorizontalAlignment(
                    r, c, HasAlignment.ALIGN_CENTER);

                DOM.setStyleAttribute(grid.getCellFormatter()
                    .getElement(r, c), "border", "1px solid #000");

                DOM.setStyleAttribute(grid.getCellFormatter()
                    .getElement(r, c), "padding", "3px");

                DOM.setStyleAttribute(grid.getCellFormatter()
                    .getElement(r, c), "cursor", "default");
            }
        }
        RootPanel.get("demo").add(grid);
    }
    public void onCellClicked(final SourcesTableEvents sender,
         final int row, final int cell)
    {
        // Clicked, so change the border to thick red

        DOM.setStyleAttribute(((Grid) sender).getCellFormatter()
            .getElement(row, cell), "border", "3px solid #f00");

        DOM.setStyleAttribute(((Grid) sender).getCellFormatter()
            .getElement(row, cell), "padding", "1px");

        // Add a timer to change the border back again

        new Timer()
        {

            public void run()
            {
                DOM.setStyleAttribute(((Grid) sender).getCellFormatter()
                    .getElement(row, cell), "border","1px solid #000");

                DOM.setStyleAttribute(((Grid) sender).getCellFormatter()
                    .getElement(row, cell), "padding", "3px");
            }
        }.schedule(500);
    }
}