Mouseover/mouseout event on GRID/FLEX TABLE

[ping2ravi]

Hi All,
I have a small requirment of highlighting a row of grid when mouseover
it and make it normal when it goes out.
I am not able to implement this. Can anyone help please. all
suggestions will be welcome
I dont want to use GWT-EXT or some other kind of project, as this
project is for Google APP Engine where file limit is just 1000 and
such projects increase the file count a lot.

Thanks in advance.
Ravi

[Hiedi]

This is basically how I did it:

1) Create a RowListener interface
2) Create a RowListenerCollection
3) Create an implementation of RowListener
4) Add your rowListener to the table you care about -- the table
should know what its styles are and have a contract for hovering and
resetting its own styles that the rowListener can call -- that way you
can use the same listeners every where but the styles are controlled
by your dataTable.
5) Lastly -- your table needs to implement onBrowserEvent and figure
out what row its supposed to be acting on.


import java.util.EventListener;

public interface RowListener extends EventListener {

void onMouseLeave(int row);

void onMouseEnter(int row);

void onMouseOver(int row);

}


import java.util.ArrayList;

public class RowListenerCollection extends ArrayList<RowListener> {

private static final long serialVersionUID = 1L;


public void fireMouseEnterEvent(int row) {
for (RowListener listener : this) {
listener.onMouseEnter(row);
}
}

public void fireMouseOverEvent(int row) {
for (RowListener listener : this) {
listener.onMouseOver(row);
}
}

public void fireMouseLeaveEvent(int row) {
for (RowListener listener : this) {
listener.onMouseLeave(row);
}
}

}

import com.google.gwt.user.client.ui.SourcesTableEvents;
import com.google.gwt.user.client.ui.TableListener;

public class RowHighlighter implements TableListener, RowListener {

private DataTable table = null;

public RowHighlighter(DataTable table) {

this.table = table;
}

public void onCellClicked(SourcesTableEvents sender, int row, int
cell) {

if (sender == table) {
table.selectRow(row);
}
}

public void onMouseEnter(int row) {

if (table.getLastSelectedRow() != row) {
table.hoverRow(row);
}

}

public void onMouseLeave(int row) {
if (table.getLastSelectedRow() != row) {
table.resetRowStyle(row);
}

}

public void onMouseOver(int row) {
// TODO Auto-generated method stub

}

}


mport com.google.gwt.user.client.ui.Widget;

public interface DataTable {

public abstract void highlightRow(int row);

public abstract void hoverRow(int row);

public abstract void resetRowStyle(int row);

public abstract void resetTableStyle();

public abstract int getLastSelectedRow();

public abstract void setLastSelectedRow(int row);

public abstract int getRowCount();

public abstract int getCellCount(int row);

public abstract Widget getWidget(int row, int col);

public abstract void selectRow(int row);

}

--------------------

public void onBrowserEvent(Event event) {

// Find out which row.
Element td = getEventTargetCell(event);
if (td == null) {
return;
}
Element tr = DOM.getParent
((com.google.gwt.user.client.Element) td);
Element body = DOM.getParent(tr);
int row = DOM.getChildIndex(body, tr);

switch (DOM.eventGetType(event)) {

case Event.ONMOUSEOVER:
// Only fire the mouseEnter event if it's coming from
outside this
// widget.
Element from = DOM.eventGetFromElement(event);
if (from == null || !DOM.isOrHasChild(tr, from)) {
rowListeners.fireMouseEnterEvent(row);
}
break;
case Event.ONMOUSEOUT:
// Only fire the mouseLeave event if it's actually leaving
this
// widget.
Element to = DOM.eventGetToElement(event);
if (to == null || !DOM.isOrHasChild(tr, to)) {
rowListeners.fireMouseLeaveEvent(row);
}
break;

default: {
// Do nothing
}

super.onBrowserEvent(event);
}
}

[Kelo]

Heidi,

Your code was based on old event's model, you should write this one
on 1.6.4. Check this out http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/0b3158d9e7e2d21a#