Get browser size value

Flow
1

Hi,

What is the easiest way to get the current browser size?
I just found the way to do it in Vaadin 8 but no any information about how this operation is done in Vaadin 14.

Any idea?

Thanks

2

One way could be,

UI.getCurrent().getPage().retrieveExtendedClientDetails(details -> {
            System.out.println("Width " + details.getWindowInnerWidth());
            System.out.println("Height " + details.getWindowInnerHeight());
        });
3

I tried and It works but when you are creating the dialog the values that returns is 0 or null (It depends of the implementation). I tried to get the information executing a JS directly but I got the same problem, when the UI gets the object with the info that is null.
I understand at the moment I’m creating the dialog the UI isn’t ready or has not been created, could be?

Regards

4

I tried and It works but when you are creating the dialog the values that returns is 0 or null <

Are you trying to get the browser size or the size of a Dialog component? In any case, it would be helpful if you could share a small code example of how you are trying to get the size values.

5

Thanks Tarek for your help.

I think the problem is a lack of misunderstanding of my part about how this process really works.
This is the Code, how you can see I’m doing something very simple.

That is what console shows:
Inside getBrowserDimension height: 0.0 Width: 0.0
Values in constructor Height: 0.0 Width:0.0
Inside retriever: Height: 814 Width: 1440
Inside retriever dimension Object: Height: 814 Width: 1440

@Route
public class PhotoView extends VerticalLayout{
	
	
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	public PhotoView() {
		getStyle().set("padding", "0px");
		Dimension currentDimension = getBrowserDimension();
		System.out.println("Values in constructor Height: " + currentDimension.getHeight() + " Width:" + currentDimension.getWidth());
		Image image = FileTools.getImage();
		//
		add(image);
	}


	private Dimension getBrowserDimension() {
		Dimension dimension = new Dimension();
		UI.getCurrent().getPage().retrieveExtendedClientDetails(evt -> {
			int height = evt.getWindowInnerHeight();
			int width = evt.getWindowInnerWidth();
			System.out.println("Inside retriever: Height: " + height + " Width: " + width);
			dimension.height = height;
			dimension.width = width;
			System.out.println("Inside retriever dimension Object: Height: " + dimension.height + " Width: " + dimension.width);
		});
		System.out.println("Inside getBrowserDimension height: " + dimension.getHeight() + " Width: " + dimension.getWidth());
		return dimension;
	}
	


}
6

This output is expected as far as I understand. As the retrieveExtendedClientDetails() doc states, this method

Obtain extended client side details, such as time screen and time zone information, via callback. If already obtained, the callback is called directly. Otherwise, a client-side roundtrip will be carried out.

This means that the callback to which the details of the browser are provided is executed after the PhotoView class completes its initialization. If you wish to do something with the retrieved browser details, then this code should either be invoked from retrieveExtendedClientDetails() or it should depend on some other variables that are themselves set from within retrieveExtendedClientDetails().

7

Hi Tarek,

Thanks for your answer, If I understood well a way could be send the image as a parameter, i tried but it still not working, I start to think that maybe there is no way to reach this behavior. :-/

@Route
public class PhotoView extends VerticalLayout implements AfterNavigationObserver{
	
	private Image image;
	private static final long serialVersionUID = 1L;

	public PhotoView() {
		getStyle().set("padding", "0px");
	}

	@Override
	public void afterNavigation(AfterNavigationEvent event) {
		addImage();
	}
	
	private void addImage() {
		this.image = FileTools.getImage();
		setImageSize(image);
		System.out.println("addImage" + image.getWidth() + " " + image.getHeight());
		add(image);
	}
	
	private void setImageSize(Image image) {
		UI.getCurrent().getPage().retrieveExtendedClientDetails(evt -> {
			image.setHeight(String.valueOf(evt.getWindowInnerHeight()));
			image.setWidth(String.valueOf(evt.getWindowInnerWidth()));
			System.out.println("Inside setImageSize " + image.getWidth() + " " + image.getHeight());
		});
	}
	
}

Any other idea?

8

I think the snippet you just shared looks fine, except that you need to specify the [CSS unit ]
(https://www.w3schools.com/cssref/css_units.asp)with which you set the height and width of the image.

For example, you can append “px” like so,

private void setImageSize(Image image) {
		UI.getCurrent().getPage().retrieveExtendedClientDetails(evt -> {
			image.setHeight(String.valueOf(evt.getWindowInnerHeight()) + "px");
			image.setWidth(String.valueOf(evt.getWindowInnerWidth()) + "px");
			System.out.println("Inside setImageSize " + image.getWidth() + " " + image.getHeight());
		});
	}