Question

我们的应用程序显示一个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, "");

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

我的初始尝试（基于a somewhat-similar question的答案）看起来像这样，但问题是我无法从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, "");
}

Answer 1

我没有将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();
            }
        }
    });

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

1 个答案: