How do you add a row listener to a Flextable in GWT?

Question

How do you add a row listener to a specific row, or all rows in a table? I need to add a type of "onMouseOver" listener to the rows so that when you hover over them, it changes the background color of the row, much like getRowFormatter will allow you to do.

Solution 1

Supposing GWT 1.5.3:

CLICK EVENT HANDLING

If you are using FlexTable and you wanted a click event handler, you could use the FlexTable.addTableListener() and register your own TableListener. The TableListener object will need to implement the onCellClicked callback which would give you the row number.

OTHER EVENTS HANDLING (e.g. HOVER)

If you need to handle other type of events other than click (say, hover), GWT currently doesn't have a ready interface for that. You pretty much left on your own to implement them yourself. There's two ways of doing it that I can think of now:

1. The quick and dirty way, is probably by exploiting JSNI, which provides a means for you to inject Javascript into your GWT code. I didn't use much JSNI (apart from really hard workarounds which is not worth the effort writing it in pure GWT) in my code so I can't show you an example; but frankly I won't recommend this as it reduces maintainability and extensibility.

2. If you wanted a native, GWT interface, you can create a new class that inherits HTMLTable or FlexTable. At the constructor, call the sinkEvents function with your needed events. (e.g. for hover, you'll probably need sinkEvents(Event.ONMOUSEOVER)). Then you'll need the onBrowserEvent function that handles the mouseover.

   A quick template of how the code should look like:

   import com.google.gwt.user.client.DOM;
   import com.google.gwt.user.client.Event;
   import com.google.gwt.user.client.ui.FlexTable;
   public class FlexTableWithHoverHandler
       extends FlexTable
   {
       public FlexTableWithHoverHandler()
       {
           super();
           sinkEvents(Event.ONMOUSEOVER);
       }
       @Override
       public void onBrowserEvent(Event event)
       {
           switch(DOM.eventGetType(event))
           {
           case Event.ONMOUSEOVER:
               // Mouse over handling code here
               break;
           default:
               break;
           }
       }
   }
   

   The best of learning how to code this is by looking at the GWT source code itself (search for sinkEvent) and getting the feel on how to do it the GWT way.

Solution 2

// this is click 
final FlexTable myTable = new FlexTable();
myTable.addClickHandler(new ClickHandler() {
    public void onClick(ClickEvent event) {
        Cell cell = myTable.getCellForEvent(event);
        int receiverRowIndex = cell.getRowIndex(); // <- here!
    }
});

Solution 3

I found it much simple to add javascript directly to the TR element. My code assumes that a widgets DOM parent is a TD and the grandparent is the TR so you need to be sure you know your DOM.

Here's my code. Nice and simple, no JSNI or GWT DOM event management required.

TableRowElement rowElement = (TableRowElement) checkbox.getElement().getParentElement().getParentElement();

rowElement.setAttribute("onMouseOver", "this.className='" + importRecordsResources.css().normalActive() + "'");

rowElement.setAttribute("onMouseOut", "this.className='" + importRecordsResources.css().normal() + "'");

Comments

[Organiccat]

How would you find the row of the cell that is hovered over? I can find the cell, just not how to apply the row formatter to that row that contains the cell.

[Organiccat]

I've got it, forgot to reference the table, was trying to pull the parent table from the cell, oops :p

[Error 454]

change "usersTable" to "myTable" and you have a nice solution.

[checketts]

I highly recommend against setting attributes directly. GWT handlers are much cleaner to implement.