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

3 files changed, 18 insertions, 34 deletions

diff --git a/documentation/application/application-architecture.asciidoc b/documentation/application/application-architecture.asciidoc
index 77c1756594..c00a378a11 100644
--- a/documentation/application/application-architecture.asciidoc
+++ b/documentation/application/application-architecture.asciidoc
@@ -14,7 +14,6 @@ way you like to think about it), from the [classname]#UI# class of the
 application. You normally set a layout component as the content of the UI and
 fill it with other components.
 
-
 [source, java]
 ----
 public class MyHierarchicalUI extends UI {
@@ -24,10 +23,10 @@ public class MyHierarchicalUI extends UI {
         VerticalLayout content = new VerticalLayout();
         content.setSizeFull(); // Use entire window
         setContent(content);   // Attach to the UI
-        
+
         // Add some component
         content.addComponent(new Label("Hello!"));
-        
+
         // Layout inside layout
         HorizontalLayout hor = new HorizontalLayout();
         hor.setSizeFull(); // Use all available space
@@ -64,8 +63,8 @@ UI
 The result is shown in <<figure.application.architecture.example>>.
 
 [[figure.application.architecture.example]]
-.Simple Hierarchical UI
-image::img/ui-architecture-hierarchical.png[]
+.Simple hierarchical UI
+image::img/ui-architecture-hierarchical.png[width=70%, scaledwidth=90%]
 
 Instead of building the layout in Java, you can also use a declarative design,
 as described later in
@@ -131,7 +130,7 @@ class MyView extends VerticalLayout {
         addComponent(entry);
         addComponent(display);
         addComponent(click);
-        
+
         // Configure it a bit
         setSizeFull();
         addStyleName("myview");
@@ -164,13 +163,13 @@ class MyView extends CustomComponent {
 
     public MyView() {
         Layout layout = new VerticalLayout();
-        
+
         layout.addComponent(entry);
         layout.addComponent(display);
         layout.addComponent(click);
-        
+
         setCompositionRoot(layout);
-        
+
         setSizeFull();
     }
 }
@@ -233,7 +232,7 @@ UI.getCurrent().setLocale(new Locale("en"));
 
 // Set the page title (window or tab caption)
 Page.getCurrent().setTitle("My Page");
-        
+
 // Set a session attribute
 VaadinSession.getCurrent().setAttribute("myattrib", "hello");
 
@@ -252,7 +251,3 @@ ifdef::web[]
 <<dummy/../../../framework/advanced/advanced-global#advanced.global.threadlocal,"ThreadLocal
 Pattern">>.
 endif::web[]
-
-
-
-
diff --git a/documentation/application/application-overview.asciidoc b/documentation/application/application-overview.asciidoc
index b70df520f9..f1a792a60e 100644
--- a/documentation/application/application-overview.asciidoc
+++ b/documentation/application/application-overview.asciidoc
@@ -19,7 +19,7 @@ by the application server or the application itself.
 
 [[figure.application.architecture]]
 .Server-Side Application Architecture
-image::img/application-architecture-hi.png[]
+image::img/application-architecture-hi.png[width=70%, scaledwidth=100%]
 
 <<figure.application.architecture>> illustrates the basic architecture of an
 application made with the Vaadin Framework, with all the major elements, which
@@ -151,8 +151,3 @@ component to an SQL query response. For a complete overview of data binding in
 Vaadin, please refer to
 <<dummy/../../../framework/datamodel/datamodel-overview.asciidoc#datamodel.overview,"Binding
 Components to Data">>.
-
-
-
-
-
diff --git a/documentation/application/application-resources.asciidoc b/documentation/application/application-resources.asciidoc
index b5f5db91f2..ee1a8a7eb9 100644
--- a/documentation/application/application-resources.asciidoc
+++ b/documentation/application/application-resources.asciidoc
@@ -46,8 +46,7 @@ The resource classes in Vaadin are grouped under two interfaces: a generic
 
 [[figure.resource.classdiagram]]
 .Resource Interface and Class Diagram
-image::img/resource_classdiagram-hi.png[]
-
+image::img/resource_classdiagram-hi.png[width=70%, scaledwidth=90%]
 
 [[application.resources.file]]
 == File Resources
@@ -70,7 +69,6 @@ folder, which is a special folder that is never accessible using an URL, unlike
 the other folders of a web application. This is a security solution - another
 would be to store the resource elsewhere in the file system.
 
-
 [source, java]
 ----
 // Find the application directory
@@ -83,7 +81,7 @@ FileResource resource = new FileResource(new File(basepath +
 
 // Show the image in the application
 Image image = new Image("Image from file", resource);
-        
+
 // Let the user view the file in browser or download it
 Link link = new Link("Link to the image file", resource);
 ----
@@ -95,7 +93,7 @@ regular Eclipse Vaadin project, is shown in
 
 [[figure.application.resources.file]]
 .File Resource
-image::img/resource-fileresource.png[]
+image::img/resource-fileresource.png[width=50%, scaledwidth=80%]
 
 
 [[application.resources.class]]
@@ -145,7 +143,7 @@ the folder structure for the theme resource file in an Eclipse project.
 
 [[figure.application.resources.theme]]
 .Theme Resources
-image::img/resource-themeimage.png[]
+image::img/resource-themeimage.png[width=40%, scaledwidth=70%]
 
 To use theme resources, you must set the theme for the UI. See
 <<dummy/../../../framework/themes/themes-overview.asciidoc#themes.overview,"Themes">>
@@ -173,7 +171,7 @@ public class MyImageSource
              implements StreamResource.StreamSource {
     ByteArrayOutputStream imagebuffer = null;
     int reloads = 0;
-    
+
     /* We need to implement this method that returns
      * the resource as a stream. */
     public InputStream getStream () {
@@ -195,7 +193,7 @@ public class MyImageSource
             /* Write the image to a buffer. */
             imagebuffer = new ByteArrayOutputStream();
             ImageIO.write(image, "png", imagebuffer);
-            
+
             /* Return a stream from the buffer. */
             return new ByteArrayInputStream(
                          imagebuffer.toByteArray());
@@ -218,13 +216,13 @@ Below we display the image with the [classname]#Image# component.
 ----
 // Create an instance of our stream source.
 StreamResource.StreamSource imagesource = new MyImageSource ();
-	
+
 // Create a resource that uses the stream source and give it a name.
 // The constructor will automatically register the resource in
 // the application.
 StreamResource resource =
         new StreamResource(imagesource, "myimage.png");
-	
+
 // Create an image component that gets its contents
 // from the resource.
 layout.addComponent(new Image("Image title", resource));
@@ -239,7 +237,3 @@ image::img/application_streamresource.png[]
 Another way to create dynamic content is a request handler, described in
 <<dummy/../../../framework/advanced/advanced-requesthandler#advanced.requesthandler,"Request
 Handlers">>.
-
-
-
-