FlexTable MouseOver ??

[Martin Borthiry]

Greetings!
Is there any way to process onmouseover event on, for instance,
FlexTable's Cells or Rows? I want to highlight rows as mouse is over

Thanks

--
Martin Borthiry
Saludos y Suerte!

[Tassos Bassoukos]

Martin Borthiry wrote:
> Greetings!
> Is there any way to process onmouseover event on, for instance,
> FlexTable's Cells or Rows? I want to highlight rows as mouse is over
>
> Thanks

If you need this just for the highlight, simply use CSS to specify
:hover appearance.

[Ian Petersen]

Unfortunately, most versions of IE only support :hover on <A> elements, IIRC.

--
Tired of pop-ups, security holes, and spyware?
Try Firefox: http://www.getfirefox.com

[Martin Borthiry]

Ian Petersen ha escrito:

> Unfortunately, most versions of IE only support :hover on <A> elements, IIRC.
>

So, what can i do to hightlinght the row on any browser ?

[Ian Bambury]

I think you are going to have to do each cell's widget individually e.g.

 

  final FlexTable f = new FlexTable();
  for(int y = 0 ;y<3;y++)
  {
   for(int x = 0 ;x<3;x++)
   {
    final HTML h = new HTML("Hello");
    final int z = y;
    h.addMouseListener (new MouseListener(){

     public void onMouseDown(Widget sender, int x, int y)
     {
     }

     public void onMouseEnter(Widget sender)
     {
      f.getRowFormatter().setStyleName(z, "mo");
     }

     public void onMouseLeave(Widget sender)
     {
      f.getRowFormatter().removeStyleName(z, "mo");
     }

     public void onMouseMove(Widget sender, int x, int y)
     {
     }

     public void onMouseUp(Widget sender, int x, int y)
     {
     }});
    f.setWidget(y, x, h);
   }
   add(f);

[ddoxey]

Martin, I have had some success with another approach:

//--------------- begin snippet

public class MyTable extends FlexTable {

public MyTable() {
super();
// indicate which events you intend to notice
sinkEvents(Event.ONMOUSEDOWN | Event.ONMOUSEUP | Event.ONMOUSEOVER |
Event.ONMOUSEOUT);
}

public void onBrowserEvent(Event event) {
Element td = getEventTargetCell(event);
if (td == null) return;
Element tr = DOM.getParent(td);
switch (DOM.eventGetType(event)) {
case Event.ONMOUSEDOWN: {
DOM.setStyleAttribute(tr, "backgroundColor", "#ffce00");
onRowClick(tr);
break;
}
case Event.ONMOUSEUP: {
DOM.setStyleAttribute(tr, "backgroundColor", "#ffffff");
break;
}
case Event.ONMOUSEOVER: {
DOM.setStyleAttribute(tr, "backgroundColor", "#ffce00");
onRowRollover(tr);
break;
}
case Event.ONMOUSEOUT: {
DOM.setStyleAttribute(tr, "backgroundColor",
"#ffffff");
break;
}
}
}
}

//--------------- end snippet

I hope that is helpful.

[Martin Borthiry]

Thank you very much!

I gona try it ;)

[Jostein]

Hi,

I have implemented this code in my application and it works fine, but my first row is header row and should not be changed by the events (ONMOUSEDOWN , ONMOUSEUP ...) How can I prevent that? 

Thanks for any help!!