12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 |
- ---
- 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.
-
-
|