Better API for detecting browser width and subsequent size change

[tmattsso]

Since Grid cols can only be added and removed by Java code and not just CSS, creating responsive designs with Grid is very cumbersome. For instance, to detect the browser width, and to follow if the user flipped their phone to vertical or horizontal, I need to do this now:

        UI.getCurrent().getPage().addBrowserWindowResizeListener(
                e -> reconfigureColumns(e.getWidth()));

    private void reconfigureColumns(Integer knownWidth) {
        if (knownWidth != null) {
            setColumnVisibility(knownWidth);
        } else {
            // empty cache and fetch new width
            UI.getCurrent().getInternals().setExtendedClientDetails(null);
            UI.getCurrent().getPage().retrieveExtendedClientDetails(e -> {
                setColumnVisibility(e.getBodyClientWidth());
            });
        }
    }

Especially the latter calls to UI internals, which I need for initial rendering, are very hidden.

[joheriks]

We may want to make Page::retrieveExtendedClientDetails non-caching (main reason for caching has been to avoid multiple roundtrips for non-changing properties like window.name, but this internal code could instead check the UI internals field to determine whether a client-side call is necessary).

[jcgueriaud1]

Hi, You can use this add-on to hide or show a grid column based on the size. https://vaadin.com/directory/component/mediaquery It only sends a request to the server when the condition is changing. So the communication between the server and client is limited and you don't need a cache.