Scaled images for print edition and fixed errors up to the beginning of layouts chapter (#19835). Also major revision of Tree, CustomField, and layouts overview.

Change-Id: I19f5e9511b83f953ce4707f324d81c2821ebb69d

1 files changed, 26 insertions, 22 deletions

diff --git a/documentation/layout/layout-overview.asciidoc b/documentation/layout/layout-overview.asciidoc
index 6481db6229..7a57e2a518 100644
--- a/documentation/layout/layout-overview.asciidoc
+++ b/documentation/layout/layout-overview.asciidoc
@@ -9,15 +9,23 @@ layout: page
 
 The user interface components in Vaadin can roughly be divided in two groups:
 components that the user can interact with and layout components for placing the
-other components to specific places in the user interface. The layout components
-are identical in their purpose to layout managers in regular desktop frameworks
-for Java and you can use plain Java to accomplish sophisticated component
-layouting.
+other components to specific places in the user interface.
+The layout components are identical in their purpose to layout managers in regular desktop frameworks for Java.
+You can use plain Java to accomplish sophisticated component layouts.
+
+[[figure.layout.intro.simple]]
+.Layout example
+image::img/layout-intro-example-1.png[width=75%, scaledwidth=100%]
 
 You start by creating a content layout for the UI and then add other layout
 components hierarchically, and finally the interaction components as the leaves
 of the component tree.
 
+[[figure.layout.intro.schematic]]
+.Layout schematic
+image::img/layout-schematic-hi.png[width=100%, scaledwidth=100%]
+
+Let us look at building a bit simplified version of the layout in <<figure.layout.intro.simple>>:
 
 [source, java]
 ----
@@ -25,20 +33,22 @@ of the component tree.
 VerticalLayout content = new VerticalLayout();
 setContent(content);
 
-// Add the topmost component.
-content.addComponent(new Label("The Ultimate Cat Finder"));
+HorizontalLayout titleBar = new HorizontalLayout();
+titleBar.setWidth("100%");
+root.addComponent(titleBar);
 
-// Add a horizontal layout for the bottom part.
-HorizontalLayout bottom = new HorizontalLayout();
-content.addComponent(bottom);
+Label title = new Label("The Ultimate Cat Finder");
+titleBar.addComponent(title);
+titleBar.setExpandRatio(title, 1.0f); // Expand
 
-bottom.addComponent(new Tree("Major Planets and Their Moons"));
-bottom.addComponent(new Panel());
-...
-----
+Label titleComment = new Label("for Vaadin");
+titleComment.setSizeUndefined(); // Take minimum space
+titleBar.addComponent(titleComment);
 
-Or in the declarative format:
+... build rest of the layout ...
+----
 
+Or in the declarative format (roughly):
 
 [source, html]
 ----
@@ -46,8 +56,9 @@ Or in the declarative format:
   <vaadin-label>The Ultimate Cat Finder</vaadin-label>
 
   <vaadin-horizontal-layout>
-    <vaadin-tree caption="Major Planets and Their Moons"/>
+    <vaadin-tree caption="Possible Places"/>
     <vaadin-panel/>
+    ...
   </vaadin-horizontal-layout>
 </vaadin-vertical-layout>
 ----
@@ -65,10 +76,3 @@ described in
 
 You can see a finished version of the above example in
 <<figure.layout.intro.simple>>.
-
-[[figure.layout.intro.simple]]
-.Layout Example
-image::img/layout-intro-example-1.png[]
-
-
-