Merge branch 'documentation'

Change-Id: I6ef85a35077e6278831b968595c068898cee2770

1 files changed, 61 insertions, 0 deletions

diff --git a/documentation/layout/layout-root-layout.asciidoc b/documentation/layout/layout-root-layout.asciidoc
new file mode 100644
index 0000000000..86bab9d587
--- /dev/null
+++ b/documentation/layout/layout-root-layout.asciidoc
@@ -0,0 +1,61 @@
+---
+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.
+
+
+