Version 14 retrieveExtendedClientDetails clarification

Flow
1

I am trying to understand the difference between the different screen details in my example below. If I run this to get the pixel size of the screen,

        UI.getCurrent().getPage().retrieveExtendedClientDetails((extendedClientDetails) -> {
            Integer windowHeight = extendedClientDetails.getWindowInnerHeight();
            Integer windowWidth = extendedClientDetails.getWindowInnerWidth();
            System.out.println("Window=" + windowWidth + "x" + windowHeight);
            Integer screenHeight = extendedClientDetails.getBodyClientHeight();
            Integer screenWidth = extendedClientDetails.getBodyClientWidth();
            System.out.println("Screen=" + screenWidth + "x" + screenHeight);
            Integer monitorHeight = extendedClientDetails.getScreenHeight();
            Integer monitorWidth = extendedClientDetails.getScreenWidth();
            System.out.println("Monitor=" + monitorWidth + "x" + monitorHeight);

I am getting this as a sample output
Window=1860x1179
Screen=1860x1179
Monitor=2400x1500

Monitor is seems to be somewhat related to the monitor resolution (I have a two screens running at 1920x1200) but the Window and screen output is always the same. I expected these values to change if I resize the browser window but they don’t seem to unless I close a session and reopen it. I’m using Firefox V70.0.1 to test this.

I am trying to get the actual display size of the browser. Why does the output not change with browser window resizing?

Thanks,

Andrew

2

Window and screen output is always the same

Yes, if the Browser is in full size.

I expected these values to change if I resize the browser window

For this you should use BrowserWindowResizeListener, you can find example here

https://github.com/TatuLund/devday-demo-flow/blob/master/src/main/java/com/vaadin/devday/demo/views/SplitLayoutView.java#L59

3

The BrowserWindowResizeListener does not solve that problem.

The ExtendedClientDetails are cached internally and so if you start at width 1920, then resize the browser window to 400, then navigate to another page and then return, the ExtendedClientDetails will still report 1920. So you will create your view at 1920 instead of 400.

The only way to retrieve the correct values is to empty the internal cache before retrieving them:

UI.getCurrent().getInternals().setExtendedClientDetails(null);

There are discussions to fix this problem:
https://github.com/vaadin/flow/issues/6861

4

Hi,

I also reply to the to the ticket but if you need to call a Java function based on a client width you can use:
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.

Note: I’m the author of the add-on.