带有 GWT 的 FlexTable 的 MouseOver答案

【问题标题】：MouseOver of FlexTable with GWT带有 GWT 的 FlexTable 的 MouseOver
【发布时间】：2011-01-15 11:09:32
【问题描述】：

大家好我有一个包含图像的 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;
            }

谢谢你，祝你有美好的一天

京东

【问题讨论】：

如何将图像添加到 FlexTable？一些代码会很好。
我正在使用 Google 搜索 API 类插入图像（如果我找到插入表格的图像的结果）。目前我有一张桌子，上面有从谷歌服务器下载的所有图片（它是 4x8）。我希望当我将鼠标移到图像上时会打开一个弹出窗口，告诉我后者的标题和网址（有点像 GoogleImage）。

标签： java gwt widget mouseevent mouseover

【解决方案1】：

FlexTable 没有onMouseOverHandler。它只有clickHandler。因此，您不能将鼠标悬停处理程序附加到表格（单元格）。一种方法是将MouseOverHandler 添加到图像中，像这样在弹出窗口中显示它们

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

【讨论】：

好的，完美。现在我必须弄清楚如何在 CellTable 中转换我的 FlexTables ..
ouch..objects CellTable 没有方法 setHTML() ...我需要它来插入图像 ...
查看此示例gwt.google.com/samples/Showcase/Showcase.html#!CwCellSampler 和每一行的图像
是的，但是我必须从一个 url 中获取一个图像，该图像是从一个 ImageResult 类型的对象中获取的……对于 Flextable 对象，我可以使用方法 .setHTML(row,col," )
如果我将图像插入到 Image 类型的数组中，并将它们放在 FlexTable 中（我对其进行了测试，我可以这样做）。我必须如何处理第 I 个图像上的事件 MO？再次感谢..

【解决方案2】：

您可以使用已注册的 onmouseover 处理程序制作自定义小部件并将其放置到弹性表中（想法不是尝试为单元格添加侦听器，而是将其放在位于单元格中的小部件本身上）。

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

【讨论】：

【解决方案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;
            }
        }
    }
}

【讨论】：