Class ResizeObserver

java.lang.Object

org.vaadin.firitin.util.ResizeObserver

public class ResizeObserver
extends Object

A helper to detect and observe size changes of components. Provides a Java API around the ResizeObserver JS API. Allows you for example to easily configure Grid columns for different devices or swap component implementations based on the screen size/orientation.

When you start to observe a component size, the initial size is reported immediately. So unlike with the Page#addBrowserWindowResizeListener, you don't need to wait for the first resize event or to combine it with the Page#retrieveExtendedClientDetails to get the initial size.

There is one ResizeObserver instance per UI, but your listeners are attached to a specific component. As the current version of Vaadin does not support extending UI, but this API is designed to be UI specific, fetch a ResizeObserver instance with of(UI) or get() (this uses UI.getCurrent() ).

There are two ways to listen to size changes:

• Using the addResizeListener(Component, ComponentEventListener) method, which is a Vaadin core style API, the listener gets ResizeObserver.SizeChangeEvent. and the return value is a Registration you can use to stop listening.
• Using the observe(Component, SizeChangeListener) method, your listener simply receives the ResizeObserver.Dimensions of the listened component.

Nested Class Summary

Nested Classes

Modifier and Type	Class	Description
static final record	ResizeObserver.Dimensions	A record that describes the size and position of a component.
static interface	ResizeObserver.MultiSizeChangeListener	A listener for observing multiple components at once.
static class	ResizeObserver.SizeChangeEvent	Event fired when the size of a component changes.
static interface	ResizeObserver.SizeChangeListener	A simple listener notified when the size of a component changes.

Method Summary

Modifier and Type	Method	Description
com.vaadin.flow.shared.Registration	addResizeListener(com.vaadin.flow.component.Component component, com.vaadin.flow.component.ComponentEventListener<ResizeObserver.SizeChangeEvent> listener)	Adds a listener to be notified when the size of the given component changes.
static ResizeObserver	get()
ResizeObserver	observe(com.vaadin.flow.component.Component component, ResizeObserver.SizeChangeListener listener)	Observe the size of a component.
com.vaadin.flow.shared.Registration	observe(ResizeObserver.MultiSizeChangeListener listener, com.vaadin.flow.component.Component... components)	Observe the size of multiple components at once.
static ResizeObserver	of(com.vaadin.flow.component.UI ui)
ResizeObserver	unobserve(com.vaadin.flow.component.Component component, ResizeObserver.SizeChangeListener listener)	Stop observing the size of a component.
ResizeObserver	withDebounceTimeout(int timeout)	Set a debounce timeout for the resize events.

Methods inherited from class Object

clone, equals, finalize, getClass, hashCode, notify, notifyAll, toString, wait, wait, wait

Method Details

of

public static ResizeObserver of(com.vaadin.flow.component.UI ui)

Parameters:

ui - the UI whose ResizeObserver you want to use

Returns:

the ResizeObserver for the given UI

get

public static ResizeObserver get()

Returns:

the ResizeObserver for the current UI

addResizeListener

public com.vaadin.flow.shared.Registration addResizeListener(com.vaadin.flow.component.Component component,
 com.vaadin.flow.component.ComponentEventListener<ResizeObserver.SizeChangeEvent> listener)

Adds a listener to be notified when the size of the given component changes. Also the initial size is reported immediately.

Parameters:

component - the component to observe

listener - the listener to be notified

Returns:

a registration that can be used to stop listening

observe

public ResizeObserver observe(com.vaadin.flow.component.Component component,
 ResizeObserver.SizeChangeListener listener)

Observe the size of a component. The listener will be notified when the size of the component changes.

Parameters:

component - the component to observe

listener - the listener to be notified

Returns:

this for chaining

observe

public com.vaadin.flow.shared.Registration observe(ResizeObserver.MultiSizeChangeListener listener,
 com.vaadin.flow.component.Component... components)

Observe the size of multiple components at once. When any of the observed components changes size, the listener receives fresh dimensions for ALL observed components. This is useful when you need to coordinate based on multiple component positions, like drawing a line between two buttons.

Parameters:

listener - the listener to be notified with a map of all component dimensions

components - the components to observe

Returns:

a Registration that can be used to stop observing

unobserve

public ResizeObserver unobserve(com.vaadin.flow.component.Component component,
 ResizeObserver.SizeChangeListener listener)

Stop observing the size of a component.

Parameters:

component - the component to stop observing

listener - the listener to remove

Returns:

this for chaining

withDebounceTimeout

public ResizeObserver withDebounceTimeout(int timeout)

Set a debounce timeout for the resize events. This can be useful if you want to avoid doing heavy operations on every resize event. The default is 100ms

Parameters:

timeout - the timeout in milliseconds

Returns:

this for chaining