UI, Window, and Panel Content

The UI, Window, and Panel all have a single content component, which you need to set with setContent(). The content is usually a layout component, although any component is allowed.

Panel panel = new Panel("This is a Panel");
VerticalLayout panelContent = new VerticalLayout();
panelContent.addComponent(new Label("Hello!"));
panel.setContent(panelContent);

// Set the panel as the content of the UI
setContent(panel);

The size of the content is the default size of the particular layout component, for example, a VerticalLayout has 100% width and undefined height by default (this coincides with the defaults for Panel and Label). If such a layout with undefined height grows higher than the browser window, it will flow out of the view and scrollbars will appear. In many applications, you want to use the full area of the browser view. Setting the components contained inside the content layout to full size is not enough, and would actually lead to an invalid state if the height of the content layout is undefined.

// First set the root content for the UI
VerticalLayout content = new VerticalLayout();
setContent(content);

// Set the content size to full width and height
content.setSizeFull();

// Add a title area on top of the screen. This takes
// just the vertical space it needs.
content.addComponent(new Label("My Application"));

// Add a menu-view area that takes rest of vertical space
HorizontalLayout menuview = new HorizontalLayout();
menuview.setSizeFull();
content.addComponent(menuview);

See "Layout Size" for more information about setting layout sizes.