---
title: UI, Window, and Panel Content
order: 2
layout: page
---

[[layout.root-layout]]
= UI, Window, and Panel Content

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


[source, java]
----
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 [classname]#VerticalLayout# has 100% width and undefined height
by default (this coincides with the defaults for [classname]#Panel# and
[classname]#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.


[source, java]
----
// 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-settings#layout.settings.size,"Layout
Size">> for more information about setting layout sizes.