Vaadin Split Layout Listener - div width from client side

Question

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?

Something like this?

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

        }
    });

Answer 1

This is currently a documented missing feature in SplitLayout Java API.

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);

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.

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

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