How to scale a Vaadin Application to the size of the Browser Window

Hi all,

i’m trying to start a new Application in Vaadin, But i can not get the MainWindow to resize its contents
to fit in the Browser Window. Is there really no way to tell Vaadin “scale to the height of my Browser Window?”


package de.esf.myeasyorder.vaadin;

import com.vaadin.ui.Alignment;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;
import com.vaadin.ui.Component;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;

public class MainWindow extends Window {
    /**
	 * 
	 */
	private static final long serialVersionUID = -7150409908400809960L;
        
	private VerticalLayout mainLayout;
        private TabSheet stackWidget = new TabSheet();

    public MainWindow( String caption ) {
        super(caption);
        buildMainLayout();

        // TODO add user code here
    }

    private VerticalLayout buildMainLayout() {
        // common part: create layout
        mainLayout = new VerticalLayout();
         
        setContent(mainLayout);
        setSizeFull();
        mainLayout.setHeight("100%");
        mainLayout.setWidth("100%");
        
        mainLayout.addComponent(new Label("MUHLA"));
        mainLayout.addComponent(buildNavBar());
        mainLayout.addComponent(buildMainPanel());
        


        return mainLayout;
    }
    
    private HorizontalLayout buildNavBar(){
        HorizontalLayout nav = new HorizontalLayout();
        nav.setHeight("40px");
        nav.setWidth("100%");
        nav.setSpacing(true);
        nav.setMargin(false, true, false, false);
        
        Button btnProducts = new Button("Products", new Button.ClickListener() {
            @Override
            public void buttonClick(ClickEvent event) {
                stackWidget.setSelectedTab(stackWidget.getTab(0).getComponent());
            }
        });
        nav.addComponent(btnProducts);
        nav.setComponentAlignment(btnProducts, Alignment.MIDDLE_LEFT);
        
        Button btnIncoming = new Button("Transactions", new Button.ClickListener() {
            @Override
            public void buttonClick(ClickEvent event) {
                stackWidget.setSelectedTab(stackWidget.getTab(1).getComponent());
            }
        });
        nav.addComponent(btnIncoming);
        nav.setComponentAlignment(btnIncoming, Alignment.MIDDLE_LEFT);
        
        Button btnSettings = new Button("Settings", new Button.ClickListener() {
            @Override
            public void buttonClick(ClickEvent event) {
                stackWidget.setSelectedTab(stackWidget.getTab(2).getComponent());
            }
        });
        nav.addComponent(btnSettings);
        nav.setComponentAlignment(btnSettings, Alignment.MIDDLE_LEFT);
        
        return nav;
    }
    
    private Component buildMainPanel (){
        Panel p = new Panel();
        
        p.addComponent(stackWidget);
        stackWidget.hideTabs(true);        
        
        stackWidget.addTab(new Label("Muhla 1"));
        stackWidget.addTab(new Label("Muhla 2"));
        stackWidget.addTab(new Label("Muhla 3"));
        stackWidget.setSizeFull();
        
        p.setSizeFull();
        return p;
    }

}


What am I missing?

regards Benjamin

Could you explain what you are seeing and what you would like to be seeing?, because you can easily set the application size to the browser window, and actually have numerous ways to do it, all with their specific advantages and disadvantages.

  1. You can have a page behave like iGoogle, where panels change widths on zoomin in/zooming out, and fit their widths to browser window.
  2. You can have a page that has a set width, and everytime you zoomin/zoomout a scrollbar appears, but the relative widths between components stay constant.
  3. You can have the space get filled as items are added, with the layout expanding dynamically.
  4. You can have the space get stretched out, with thecomponents trying to occupy 100% of the space.

I’ll run your code in a few minutes and try to give you some direct pointers later.

Ok I checked your code, and your window contents scale to the browser window height i.e. the smaller the window the closer the object get to each other.

Did you mean that you want your layout to behave like a typical browser window, with the topMenu always appearing on top, with a discrete height? and then the content always taking the middle, and then footer always on the bottom?

You can do something like this:



 private VerticalLayout buildMainLayout() {
        // common part: create layout
        mainLayout = new VerticalLayout();

        setContent(mainLayout);

        mainLayout.setHeight("100%");
        mainLayout.setWidth("100%");



        HorizontalLayout topMenu = buildNavBar();

        Panel pageContent = new Panel("ADD PAGE CONTENT HERE!");
        pageContent.setHeight("100%");

        Panel footerContent = new Panel("ADD FOOTER CONTENTS HERE");

        mainLayout.addComponent(topMenu);
        mainLayout.setExpandRatio(topMenu, 0);
        mainLayout.addComponent(pageContent);
        mainLayout.setExpandRatio(pageContent, 1);        
        mainLayout.addComponent(footerContent);


        return mainLayout;
    }


You can create Layouts for the panels and then use setContent(). Also, if you do not want the footer to always be visible on the bottom of the window, add it to the page content and not main layout.

Hello,

thanks for your time.
I found my error, it didn’t work because Vaadin could not find the theme.

But this answer already answered my next Question, header and footer ;).

Again thx for your help.