带GWT的FlexTable的MouseOver

Question

Hello everyone I have a FlexTable that contains images (one for each cell). I wish I had an event that you move your mouse over the cell comes out a popup that should contain the title of the image. Someone can give me a hand?

I tried to insert this code does what he must do (at least for me) but the popup remains active when I remove the mouse pointer .where I wrong?

private FlexTable createHTML(ImageResult result,int row,final int i,int currentCol) {

 immagine[i]=new Image(result.getThumbnailUrl());
 resultsTableImm.setWidget(row, currentCol, immagine[i]);
 titleImm[i]=result.getTitleNoFormatting();
 contentImm[i]=result.getContentNoFormatting();
 urlImm[i]=result.getUnescapedUrl();

 immagine[i].addMouseOverHandler(new MouseOverHandler() {

       @Override
        public void onMouseOver(MouseOverEvent event) {

            PopupPanel p = new PopupPanel(true);
            Widget source = (Widget) event.getSource();
            int x = source.getAbsoluteLeft() + 10;
            int y = source.getAbsoluteTop() + 10;
            p.add(new HTML("<b>"+titleImm[i]+"</b><br>"+contentImm[i])); 
            p.setPopupPosition(x, y);
        p.show();
        }
    });

    return resultsTableImm;
            }

Thank you and have a nice day

JD

Answer 1

FlexTable hasn't onMouseOverHandler . It only has clickHandler . So you can't attach mouse over handler to the table(cell). One way is addMouseOverHandler to the image show them in the popuplike that

Image image= new Image();
image.addMouseOverHandler(new MouseOverHandler() {

        @Override
        public void onMouseOver(MouseOverEvent event) {
            PopupPanel p = new PopupPanel(true);
            Widget source = (Widget) event.getSource();
            int x = source.getAbsoluteLeft() + 10;
            int y = source.getAbsoluteTop() + 10;

            p.add(image); 
            p.setPopupPosition(x, y);
            p.show();
        }
    });

If you use gwt2.1 then I suggest you to use CellTable

Look at this example Cell Table

Answer 2

Boiling down Xorty's example to the essentials of the present question you may adapt the following extension of FlexTable:

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.FlexTable;

public class PTable extends FlexTable {

    public static final String ROW_STYLE_NAME  = "pm-PTable-row";

    PTable() {
        setStyleName("pm-PTable");
        sinkEvents(Event.ONMOUSEOVER |Event.ONMOUSEOUT); 
    }

    @Override
    public void onBrowserEvent(Event event) {
        super.onBrowserEvent(event);
        Element td = getEventTargetCell(event);
        if (td == null) return;
        Element tr = DOM.getParent(td);
        switch (DOM.eventGetType(event)) {
            case Event.ONMOUSEOVER: {
                tr.addClassName(ROW_STYLE_NAME + "-mouseover");
                break;
            }
            case Event.ONMOUSEOUT: {
                tr.removeClassName(ROW_STYLE_NAME + "-mouseover");
                break;
            }
        }
    }
}

Answer 3

You can make custom widget with registered onmouseover handler and place it to flex table (idea is not trying to add listener for cell, but have it on widget itself which resides in cell).

Or you can try something like this: http://www.java2s.com/Code/Java/GWT/TableMouseOverEvent.htm