Vaadin 拆分布局侦听器 - 来自客户端的 div 宽度 [英] Vaadin Split Layout Listener - div width from client side

问题描述

在用户停止通过拖放调整 Vaadin 拆分布局的大小后，是否可以获得当前(在客户端)div 宽度?

Is it possible to get current (on client side) div width after the user has stopped resizing the Vaadin Split Layout with drag and drop?

类似的东西?

splitLayout.addSplitterDragendListener(new ComponentEventListener<GeneratedVaadinSplitLayout.SplitterDragendEvent<SplitLayout>>() {
        @Override
        public void onComponentEvent(GeneratedVaadinSplitLayout.SplitterDragendEvent<SplitLayout> splitLayoutSplitterDragendEvent) {
            
            Notification.show(div.getWidth()); //it's return width which was defined on compilation

        }
    });

推荐答案

这是目前 SplitLayout Java API 中记录的缺失功能.

在 Vaadin 中有底层 Element API，它有一个通用的客户端事件侦听器.可以利用它来监听dragend事件并获取主副面板的大小.

In Vaadin there bottom layer Element API, which has a generic client side event listener. It is possible to utilize that to listen the dragend event and get the size of the primary and secondary panel.

getElement().addEventListener("splitter-dragend", e -> {
  this.primarySizePixel = e.getEventData().getNumber(PRIMARY_SIZE);
  this.secondarySizePixel = e.getEventData().getNumber(SECONDARY_SIZE);

  double totalSize = this.primarySizePixel + this.secondarySizePixel;
  this.splitterPosition = Math.round((this.primarySizePixel / totalSize) * 100.0);
})
    .addEventData(PRIMARY_SIZE)
    .addEventData(SECONDARY_SIZE);

这里 PRIMARY_SIZE 是 "element._primaryChild.offsetHeight" 或 "element._primaryChild.offsetWidth" 取决于方向，和 SECONDARY_SIZE element._secondaryChild.offsetHeight" 或 element._secondaryChild.offsetWidth".

Here PRIMARY_SIZE is either "element._primaryChild.offsetHeight" or "element._primaryChild.offsetWidth" depending on the orientation, and SECONDARY_SIZE "element._secondaryChild.offsetHeight" or "element._secondaryChild.offsetWidth" respectively.

在 Vaadin 的 问题跟踪器.

There is complete class extending SplitLayout with this solution documented in Vaadin's issue tracker.

顺便说一句.通过使用 Lambdas 而不是匿名类，将事件侦听器与 Vaadin Java API 结合使用会更加简洁.

Btw. using event listeners with Vaadin Java API is much more concise by using Lambdas instead of anonymous classes.

这篇关于Vaadin 拆分布局侦听器 - 来自客户端的 div 宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！