如何在CellTable（GWT 2.4）中为ImageResourceCell创建PanelPopup？

Our application displays a CellTable which has an ImageResourceCell column:

我们的应用程序显示一个CellTable,它有一个ImageResourceCell列:

    Column<Alert, ImageResource> noteColumn = new Column<Alert, ImageResource>(new ImageResourceCell()) {
        @Override
        public ImageResource getValue(Alert alert) {
            if (alert.getNote() != null && alert.getNote().length() > 0) {
                return images.note();
            } else {
                return images.emptyNote();
            }
        }
      };
    dataTable.addColumn(noteColumn, "");

We would like to modify this column so that a PopupPanel is displayed when the user moves his mouse over the image. The content of the PopupPanel should be specific for each row in the column. What is the best way to achieve this?

我们想要修改此列,以便在用户将鼠标移到图像上时显示PopupPanel。 PopupPanel的内容应该特定于列中的每一行。实现这一目标的最佳方法是什么?

My initial attempt (based on an answer to a somewhat-similar question) looks like this, however the problem here is that I am not able to get the "note" from each Alert for the PopupPanel:

我最初的尝试(基于对某个类似问题的答案)看起来像这样,但问题是我无法从PopupPanel的每个警报中获得“注释”:

private class MyImageResourceCell extends ImageResourceCell {
    @Override
    public Set<String> getConsumedEvents() {
        Set<String> consumedEvents = new HashSet<String>();
        consumedEvents.add("mouseover");
        consumedEvents.add("mouseout");
        return consumedEvents;
    }

    @Override
    public void onBrowserEvent(Context context,
                               Element parent,
                               ImageResource value,
                               NativeEvent event,
                               ValueUpdater<ImageResource> imageResourceValueUpdater) {
        switch (DOM.eventGetType((Event) event)) {
            case Event.ONMOUSEOVER:
                // show panel
                break;
            case Event.ONMOUSEOUT:
                // hide panel
                break;
            default:
                break;
        }
    }
}

private void createAndAddNoteColumn() {
    Column<Alert, ImageResource> noteColumn = new Column<Alert, ImageResource>(new MyImageCell()) {
        @Override
        public ImageResource getValue(Alert alert) {
            if (alert.getNote() != null && alert.getNote().length() > 0) {
                return images.note();
            } else {
                return images.emptyNote();
            }
        }
    };
    dataTable.addColumn(noteColumn, "");
}

1 个解决方案

#1

Instead of creating the PopupPanel as part of the table column, I left the column as a normal ImageResource column, and then added a cellPreviewHandler to capture the mouseover event for the column in question:

我没有将PopupPanel创建为表列的一部分,而是将列保留为普通的ImageResource列,然后添加了一个cellPreviewHandler来捕获相关列的mouseover事件:

    final DecoratedPopupPanel simplePopup = new DecoratedPopupPanel(true);
    dataTable.addCellPreviewHandler(new CellPreviewEvent.Handler<Alert>() {
        @Override
        public void onCellPreview(CellPreviewEvent<Alert> alertCellPreviewEvent) {
            if ("mouseover".equals(alertCellPreviewEvent.getNativeEvent().getType())
                    && alertCellPreviewEvent.getColumn() == 5
                    && alertCellPreviewEvent.getValue().getNote() != null) {
                // using hard-coded column number isn't the most elegant solution, but it's ok for now.
                int left = alertCellPreviewEvent.getNativeEvent().getClientX();
                int top = alertCellPreviewEvent.getNativeEvent().getClientY();
                simplePopup.setWidget(new HTML(alertCellPreviewEvent.getValue().getNote()));
                simplePopup.setPopupPosition(left, top);
                simplePopup.show();
            } else {
                simplePopup.hide();
            }
        }
    });