mirror of
https://github.com/vaadin/framework.git
synced 2024-08-05 08:17:31 +02:00
62 lines
1.9 KiB
Plaintext
62 lines
1.9 KiB
Plaintext
---
|
|
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
|
|
<<dummy/../../../framework/layout/layout-settings#layout.settings.size,"Layout
|
|
Size">> for more information about setting layout sizes.
|
|
|
|
|
|
|