How to get size of browser in init method

Hi all,

I need to get the size of the browser, inside the init method (because if width>2*height, i use an HorizontalLayout instead of a VerticalLayout)
In the following example, i get it only after clicking on the button !
I need to get it at the beginning, without clicking on a button.

[size=2]

[/size][size=2]
public class TestbrowsergetwidthApplication extends Application implements HttpServletRequestListener {

    @Override
    public void init() {
        Window mainWindow = new Window("Testheight Application");
        setMainWindow(mainWindow);
       
        System.out.println("Init - Width: "+[color=#b81e1e]
getMainWindow().getWidth()
[/color]+"px - Height: "+[color=#b81e1e]
getMainWindow().getBrowserWindowHeight()
[/color]+"px"+
				"\n mainWindow.getWidth()"+[color=#b81e1e]
mainWindow.getWidth()
[/color]+", mainWindow.getHeight()"+[color=#b81e1e]
mainWindow.getHeight()
[/color]);
       
        
        mainWindow.addComponent(new Button("Get Size", new Button.ClickListener() {
            public void buttonClick(ClickEvent event) {
                System.out.println("Get Size button - Width: "+getMainWindow().getBrowserWindowWidth()+"px - Height: "+getMainWindow().getBrowserWindowHeight()+"px");  // OK
                System.out.println("Get Size button - Width: "+getMainWindow().getWidth()+"px - Height: "+getMainWindow().getBrowserWindowHeight()+"px");               // OK
                //getWindow().getWidth() for WindowOpener.java
            }
        }));
        
    }

    public void onRequestStart(HttpServletRequest request, HttpServletResponse response) {
        if (getContext() == null) return;
        WebBrowser browser = ((com.vaadin.terminal.gwt.server.WebApplicationContext)getContext()).getBrowser();
        
        System.out.println("onRequestStart - Width:"+[color=#16c610]
getMainWindow().getBrowserWindowWidth()
[/color]+"px - Height: "+[color=#16c610]
getMainWindow().getBrowserWindowHeight()
[/color]+"px");
        System.out.println("onRequestStart - Width: "+[color=#16c610]
getMainWindow().getWidth()
[/color]+"px - Height: "+[color=#16c610]
getMainWindow().getHeight()
[/color]+"px");			// OK
    }

    public void onRequestEnd(HttpServletRequest request, HttpServletResponse response) {
        // TODO Auto-generated method stub
       
    }
}
[/size]


STEP 1 :
I launch the vaadin application :
Init - Width: -1.0px - Height:
-1px
, mainWindow.getWidth() :
-1.0
, mainWindow.getHeight() :
-1.0

onRequestStart - Width:
-1px
- Height:
-1px

onRequestStart - Width:
-1.0px
- Height:
-1.0px

onRequestStart - Width:
-1px
- Height:
-1px

onRequestStart - Width:
-1.0px
- Height:
-1.0px

=> i did not get the height and width of the browser


STEP 2 :
I click on the button :
Get Size button - Width:
996px
- Height:
503px

// i get the size, but i want to get it when i launch the appli

Get Size button - Width:
996.0px
- Height:
503px

onRequestStart - Width:996px - Height: 503px
onRequestStart - Width: 996.0px - Height: 503.0px
onRequestStart - Width:996px - Height: 503px
onRequestStart - Width: 996.0px - Height: 503.0px
=> i get the width and height (but i have to get it when i launch the application)

Try implementing ApplicationContext.TransactionListener instead.

Hi Thomas,

Here is the new code, but the transactionStart method is never used, maybe i must add XML code into web.xml ?

[size=1]
public class TestbrowsergetwidthApplication extends Application [color=#182bd7]
implements 
[/color] [color=#182bd7]
ApplicationContext.TransactionListener
[/color], HttpServletRequestListener {

    @Override
    public void init() {
        Window mainWindow = new Window("Testheight Application");
        setMainWindow(mainWindow);
       
        System.out.println("Init - Width: "+getMainWindow().getWidth()+"px - Height: "+getMainWindow().getBrowserWindowHeight()+"px"+
				"\n mainWindow.getWidth()"+mainWindow.getWidth()+", mainWindow.getHeight()"+mainWindow.getHeight());
       
        
        mainWindow.addComponent(new Button("Get Size", new Button.ClickListener() {
            public void buttonClick(ClickEvent event) {
                System.out.println("Get Size button - Width: "+getMainWindow().getBrowserWindowWidth()+"px - Height: "+getMainWindow().getBrowserWindowHeight()+"px");  // OK
                System.out.println("Get Size button - Width: "+getMainWindow().getWidth()+"px - Height: "+getMainWindow().getBrowserWindowHeight()+"px");               // OK
                //getWindow().getWidth() for WindowOpener.java
            }
        }));
    }

    public void onRequestStart(HttpServletRequest request, HttpServletResponse response) {
        if (getContext() == null) return;
        WebBrowser browser = ((com.vaadin.terminal.gwt.server.WebApplicationContext)getContext()).getBrowser();
        
        System.out.println("onRequestStart - Width:"+getMainWindow().getBrowserWindowWidth()+"px - Height: "+getMainWindow().getBrowserWindowHeight()+"px");
        System.out.println("onRequestStart - Width: "+getMainWindow().getWidth()+"px - Height: "+getMainWindow().getHeight()+"px");			// OK
    }

    public void onRequestEnd(HttpServletRequest request, HttpServletResponse response) {}

	[color=#182bd7]
public void transactionStart(Application application, Object transactionData) {
		System.out.println("transactionStart, getWidth:"+application.getMainWindow().getWidth());
		System.out.println("transactionStart, getHeight:"+application.getMainWindow().getHeight());
		
	}

	public void transactionEnd(Application application, Object transactionData) {}
[/color]
}
[/size]

call getContext().addTransactionListener(this) in the init method.

I added “getContext().addTransactionListener(this);” at the end of the init() method.
The transactionStart method is now executed (thank you)
But the result is :

getWidth : -1.0
getHeight : -1.0

For the moment, the only way i found to get the width and height of the remot browser, is adding a button into the init() method, but the user needs to click on the button so that i can get the width and height !

[size=2]
mainWindow.addComponent(new Button("Get Size", new Button.ClickListener() {
            public void buttonClick(ClickEvent event) {
                System.out.println("Get Size button - Width: "+getMainWindow().getBrowserWindowWidth()+"px - Height: "+getMainWindow().getBrowserWindowHeight()+"px");  // OK
                System.out.println("Get Size button - Width: "+getMainWindow().getWidth()+"px - Height: "+getMainWindow().getBrowserWindowHeight()+"px");               // OK
            }
[/size]
        }));

Maybe is there another way to force the execution of code on client side in order to get these informations ?

The fundamental problem is that Application init() is executed before Vaadin code on the browser is - only the partly hand-written “bootstrap” JavaScript is run on the browser before it. Also, the server cannot initiate communication with the client (web application without server push add-ons), so the request containing this information has to be initiated by the client (browser).

In Vaadin 7, there are big changes in the parts related to the bootstrap phase, initial communication and application loading that enable getting some such information to the server reasonably early - some of it at the cost of an “extra” round-trip to the server.

With Vaadin 6, I can’t recall all the details but you probably need to postpone the handling of browser size until a response from the widgetset (GWT module) that is running on the browser after the bootstrap and application init(). One option would be to create a minimal (invisible) client side widget that just polls the server once, add it to the initial layout and replace it with the actual layout based on what your application needs. You could also use a ProgressIndicator or the Refresher add-on with polling for that to avoid custom widget development. Or you could possibly use window.executeJavaScript(“…”) with a suitable JavaScript snippet that triggers a round-trip to the server.

If I remember correctly, the TouchKit add-on (commercial) does get the browser size reasonably early somehow. It uses a custom servlet, but I cannot recall if it inserts custom JavaScript for this or employs something like one of the above mentioned approaches.

Ok, i understand
So a simple solution for Vaadin 6 is, for example, to build a welcome page for getting the width and height of the remote browser.
Then i have to study Vaadin 7

Thank you Henri :slight_smile:

How is now solution using Vaadin 7 ?

still got -1 using vaadin 7

sorry bump old thread.

In Vaadin 7 you can get the WebBrowser size using:

WebBrowser browser = getUI().getPage().getWebBrowser();
System.out.println("width is "+browser.getBrowserWidth()+" height is "+browser.getBrowserHeight())

Warning: Code might be slightly different as i don’t have Vaadin Environment ready right now. Maybe the methods are called a bit different and maybe you need a cast to WebBrowser in the first line.

Hope it helps,
M.R.

PS: I just found this: https://vaadin.com/forum#!/thread/208232