Question

大家好我有一个包含图像的FlexTable（每个单元格一个）。我希望我有一个事件，你将鼠标移到单元格上，出现一个应该包含图像标题的弹出窗口。有人可以帮我一把吗？

我尝试插入此代码执行他必须做的事情（至少对我而言）但是当我移除鼠标指针时弹出窗口仍然处于活动状态。我错了吗？

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;
            }

谢谢你，祝你有愉快的一天

JD

Answer 1

FlexTable没有onMouseOverHandler。它只有clickHandler。因此，您无法将鼠标悬停在处理程序上（单元格）。一种方法是将addMouseOverHandler添加到图像中，以弹出方式显示它们

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();
        }
    });

如果您使用gwt2.1，我建议您使用CellTable

请看这个例子Cell Table

Answer 2

您可以使用已注册的onmouseover处理程序创建自定义窗口小部件并将其放置到flex表（想法不是尝试为单元格添加侦听器，而是将其置于驻留在单元格中的窗口小部件上）。

或者您可以尝试这样的事情： http://www.java2s.com/Code/Java/GWT/TableMouseOverEvent.htm

Answer 3

将Xorty的示例归结为当前问题的基本要素，您可以调整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;
            }
        }
    }
}

具有GWT的FlexTable的MouseOver

3 个答案: