Filling the screen with a layout

I’m brand new to Vaadin, so this may be something very simple - at least I hope it is…

I am creating a page with 3 panels, a header, a workspace area and a footer. The header and footer are a fixed height (96 px). I want the remainder of the page to be filled by the workspace panel. I can set the size of the workspace to 300px, or 600px, but that leaves space between the panels. How do I get the middle panel to take up whatever space is left on the screen?

A related question, but probably not something I want to implement here - what if I want to specify the workspace area size to be very large - say 2000px? I would like to have a scroll bar on just the workspace panel - is that an easy thing to do? Can someone point me at some sample code for that? Clearly that can be done, since I’m typing this in an embedded window with a scroll bar :slight_smile:

Here is the code I’m currently using - any tips on the correct way to implement this would be appreciated…

thanks,

nbc

===============
public class Dispatcher extends VerticalLayout {
private static final long serialVersionUID = 1L;
private NCAdminApplication app = null;
private Button b_Quit;
private Label lHeader = null;
private Label lWorkspace = null;

private Panel pHeader = null;
private Panel pWorkspace = null;
private Panel pFooter = null;

private VerticalLayout vlHeader = null;
private VerticalLayout vlWorkspace = null;
private VerticalLayout vlFooter = null;

public Dispatch_Raw(NCAdminApplication myApp) {
	app = myApp;
	setSizeFull();

            buildHeader();
            buildWorkspace();
            buildFooter();

            addComponent(pHeader);
            addComponent(pWorkspace);
            addComponent(pFooter);
}

    private void buildHeader(){
        pHeader = new Panel();
        pHeader.setWidth("100%");
        pHeader.setHeight("96px");

        lHeader = new Label();
        lHeader.setValue("NCAdmin");

        vlHeader = new VerticalLayout();
        vlHeader.setSizeFull();

        vlHeader.addComponent(lHeader);
        vlHeader.setComponentAlignment(lHeader, new Alignment(48));

        pHeader.setContent(vlHeader);
    }

    private void buildWorkspace(){
        pWorkspace = new Panel();
        pWorkspace.setWidth("100%");
        pWorkspace.setHeight("600px");

        lWorkspace = new Label();
        lWorkspace.setValue("Workspace area here");

        vlWorkspace = new VerticalLayout();
        vlWorkspace.setSizeFull();

        vlWorkspace.addComponent(lWorkspace);
        vlWorkspace.setComponentAlignment(lWorkspace, new Alignment(48));

        pWorkspace.setContent(vlWorkspace);
    }

    private void buildFooter(){
        pFooter = new Panel();
        pFooter.setWidth("100%");
        pFooter.setHeight("96px");
        pFooter.setSizeFull();

        b_Quit = new Button();
        b_Quit.setWidth("-1px");
        b_Quit.setHeight("-1px");
        b_Quit.setCaption("Button");
        b_Quit.setImmediate(false);
        b_Quit.addListener(new Button.ClickListener(){
                private static final long serialVersionUID = 1L;

                public void buttonClick(ClickEvent event){
                        app.getViewManager().switchScreen(LoginScreen.class.getName(), new LoginScreen(app));
                }
        });

        vlFooter = new VerticalLayout();
        vlFooter.setWidth("100%");
        vlFooter.setHeight("100%");

        vlFooter.addComponent(b_Quit);

        pFooter.setContent(vlFooter);
    }

}

Just set the expand ratio for your components.
Header and footer get a ratio of zero and your mid section a ratio of one.

That was easy :slight_smile: Thanks very much…

nbc