Contact us
Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Calling javascript synchronously by Enver Haase, 2 weeks ago
Recent Posts
Vaadin Forum3. Vaadin 6, 7, 8

Detecting orientation?

Nicklas Karlsson
6 years ago Sep 29, 2016 5:56pm

We have the requirement of having separate layouts for landscape and portrait orientation. Does Vaadin have any support for this or do we have to use a separate button for this

Marcus Hellberg
6 years ago Sep 29, 2016 10:08pm

You could use Page.getCurrent().getWebBrowser() and check the height/width and change layouts accordingly. If you need to change stuff on the fly, register a window resize listener and redo the check there. 

 

+1
Nick Rapellas
6 years ago Sep 30, 2016 1:49pm

Same approach. I've used the ticketing sample project as a base, which has the "browserresizeevent" and used is as below at the view I wanted to modify:

@Subscribe
     public void browserResized(final BrowserResizeEvent event) {
        if (Page.getCurrent().getBrowserWindowWidth() > Page.getCurrent().getBrowserWindowHeight()){
            landscapeMode = true;
        }else{
            landscapeMode = false;
        }
        formatLayoutEnvironment();
    }
    
    
    private void formatLayoutEnvironment(){
        
        if(landscapeMode){
            //Replace the component of the portrait to landscape
            //table.setPageLength(10);
            mainVerticalLayout.removeComponent(portraitIncident);
            mainVerticalLayout.addComponent(landscapeIncident);
        }else{
            //table.setPageLength(5);
            mainVerticalLayout.removeComponent(landscapeIncident);
            mainVerticalLayout.addComponent(portraitIncident);
        }
    }