Vaadin Grid 鼠标中键单击答案

【问题标题】：Vaadin Grid middle mouse clickVaadin Grid 鼠标中键单击
【发布时间】：2018-06-17 00:23:44
【问题描述】：

我正在尝试在我的 vaadin 网格中模拟正常的浏览器行为，其中包括单击鼠标中键以在新选项卡中打开：

addItemClickListener(e -> {
            boolean newTab = e.getMouseEventDetails().getButton() == MouseEventDetails.MouseButton.MIDDLE || e.getMouseEventDetails().isCtrlKey();
            //open in window or new tab
        });

但是，vaadin 没有注册鼠标中键。我怎样才能让它工作？

【问题讨论】：

标签： vaadin vaadin8 vaadin-grid

【解决方案1】：

该功能已包含在 vaadin-grid（进入 Vaadin 10）中，并且在 Vaadin 8 中不起作用。

对于 Vaadin 8，您可以使用一些客户端扩展来拦截事件，或者使用 ComponentRenderer 为每个组件添加 Panel（这可行，但并不理想 because it degrades performance）：

grid.addColumn(item->{
    Panel p = new Panel(item.getName());
    p.setStyleName(ValoTheme.PANEL_BORDERLESS);
    p.addClickListener(ev->{
        System.out.println(ev.getButtonName());             
    });
    return p;
}).setRenderer(new ComponentRenderer());

另一方面，客户端扩展允许监听 javascript 事件（例如 MouseEvent）并触发服务器事件作为响应。创建扩展是一个相当复杂的主题（因为它使用了通常对开发人员隐藏的 API 的一部分），但它允许直接访问渲染的 DOM，否则这是不可能的。

文档中的以下资源可以为您提供一个起点： Creating a component extension（它描述了一个仅包含 Java 代码的简单扩展）和 Integrating JavaScript Components and Extension（它解释了如何将原生 JavaScript 代码添加到您的扩展中）。

【讨论】：

Vaadin 10 还不稳定，所以我想继续使用 8。使用 ComponentRenderer 会使网格加载速度非常慢。如何在客户端扩展中捕获中间点击？
我尝试扩展一点客户端扩展，这是一个广泛的话题。
我已经在下面发布了我的解决方案，但由于这个答案更通用并且可能对其他人更有帮助，我将接受它。
既然 vaadin 10 已经发布，vaadin 10 中的解决方案会是什么样子？

【解决方案2】：

在我的具体情况下我是如何解决问题的：

服务器端：

public class MyGrid<T> extends Grid<T> {
    public MyGrid(String caption, DataProvider<T, ?> dataProvider) {
        super(caption, dataProvider);
        MiddleClickExtension.extend(this);
    }

    public static class MiddleClickExtension<T> extends AbstractGridExtension<T> {
        private MiddleClickExtension(MyGrid<T> grid) {
            super.extend(grid);
            registerRpc((rowKey, columnInternalId, details) -> grid.fireEvent(
                    new ItemClick<>(grid, grid.getColumnByInternalId(columnInternalId), grid.getDataCommunicator().getKeyMapper().get(rowKey), details)),
                    MiddleClickGridExtensionConnector.Rpc.class);
        }

        public static void extend(MyGrid<?> grid) {
            new MiddleClickExtension<>(grid);
        }

        @Override
        public void generateData(Object item, JsonObject jsonObject) {
        }

        @Override
        public void destroyData(Object item) {
        }

        @Override
        public void destroyAllData() {
        }

        @Override
        public void refreshData(Object item) {
        }
    }
}

客户端：

@Connect(MyGrid.MiddleClickExtension.class)
public class MiddleClickGridExtensionConnector extends AbstractExtensionConnector {
    @Override
    protected void extend(ServerConnector target) {
        getParent().getWidget().addDomHandler(event -> {
            if (event.getNativeButton() == NativeEvent.BUTTON_MIDDLE) {
                event.preventDefault();
                CellReference<JsonObject> cell = getParent().getWidget().getEventCell();
                getRpcProxy(Rpc.class).middleClick(cell.getRow().getString(DataCommunicatorConstants.KEY), getParent().getColumnId(cell.getColumn()),
                        MouseEventDetailsBuilder.buildMouseEventDetails(event.getNativeEvent(), event.getRelativeElement()));
            }
        }, MouseDownEvent.getType());
    }

    @Override
    public GridConnector getParent() {
        return (GridConnector) super.getParent();
    }

    public interface Rpc extends ServerRpc {
        void middleClick(String rowKey, String columnInternalId, MouseEventDetails details);
    }
}

【讨论】：