From 93767cf76b2fb14c65b758066c67fc8b48cc2eeb Mon Sep 17 00:00:00 2001
From: Marko Gronroos <magi@vaadin.com>
Date: Fri, 20 May 2016 14:44:42 +0300
Subject: 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
---
 documentation/components/components-grid.asciidoc | 75 ++++++++++-------------
 1 file changed, 33 insertions(+), 42 deletions(-)

(limited to 'documentation/components/components-grid.asciidoc')

diff --git a/documentation/components/components-grid.asciidoc b/documentation/components/components-grid.asciidoc
index 6cd064c4b7..9b465a71b0 100644
--- a/documentation/components/components-grid.asciidoc
+++ b/documentation/components/components-grid.asciidoc
@@ -30,8 +30,8 @@ easily. The grid data can be sorted by clicking on a column header;
 shift-clicking a column header enables secondary sorting criteria.
 
 [[figure.components.grid.features]]
-.A [classname]#Grid# Component
-image::img/grid-features.png[]
+.A [classname]#Grid#
+image::img/grid-features.png[width=70%, scaledwidth=100%]
 
 The data area can be scrolled both vertically and horizontally. The leftmost
 columns can be frozen, so that they are never scrolled out of the view. The data
@@ -263,7 +263,7 @@ Space bar is the default key for toggling the selection, but it can be customize
 
 [[figure.components.grid.selection.multi]]
 .Multiple Selection in  [classname]#Grid#
-image::img/grid-selection-multi.png[]
+image::img/grid-selection-multi.png[width=50%, scaledwidth=75%]
 
 The selection is managed through the [classname]#MultiSelectionMode# class. The
 currently selected rows can be set with [methodname]#setSelected()# by a
@@ -296,7 +296,7 @@ Button delSelected = new Button("Delete Selected", e -> {
     // Delete all selected data items
     for (Object itemId: selection.getSelectedRows())
         grid.getContainerDataSource().removeItem(itemId);
-    
+
     // Otherwise out of sync with container
     grid.getSelectionModel().reset();
 
@@ -498,7 +498,6 @@ Note that, while [classname]#GeneratedPropertyContainer# implements
 sorting on the generated properties requires special handling. In such cases,
 generated properties or the entire container might not actually be sortable.
 
-
 [[components.grid.renderer]]
 == Column Renderers
 
@@ -506,12 +505,11 @@ A __renderer__ is a feature that draws the client-side representation of a data
 value. This allows having images, HTML, and buttons in grid cells.
 
 [[figure.components.grid.renderer]]
-.Column Renderers: Image, Date, HTML, and Button
-image::img/grid-renderers.png[]
-
-Renderers implement the [interfacename]#Renderer# interface. You set the column
-renderer in the [classname]#Grid.Column# object as follows:
+.Column renderers: image, date, HTML, and button
+image::img/grid-renderers.png[width=75%, scaledwidth=100%]
 
+Renderers implement the [interfacename]#Renderer# interface.
+You set the column renderer in the [classname]#Grid.Column# object as follows:
 
 [source, java]
 ----
@@ -531,16 +529,14 @@ client-side to be rendered with the renderer.
 The following renderers are available, as defined in the server-side
 [package]#com.vaadin.ui.renderers# package:
 
-[classname]#ButtonRenderer#:: Renders the data value as the caption of a button. A
-[interfacename]#RendererClickListener# can be given to handle the button clicks.
+[classname]#ButtonRenderer#:: Renders the data value as the caption of a button. A [interfacename]#RendererClickListener# can be given to handle the button clicks.
 
 ifdef::web[]
++
 Typically, a button renderer is used to display buttons for operating on a data
 item, such as edit, view, delete, etc. It is not meaningful to store the button
 captions in the data source, rather you want to generate them, and they are
 usually all identical.
-
-
 +
 [source, java]
 ----
@@ -579,15 +575,15 @@ grid.getColumn("delete")
         .removeItem(e.getItemId())));
 ----
 endif::web[]
-[classname]#ImageRenderer#:: Renders the cell as an image. The column type must be a
-[interfacename]#Resource#, as described in
-<<dummy/../../../framework/application/application-resources#application.resources,"Images
-and Other Resources">>; only [classname]#ThemeResource# and
+
+[classname]#ImageRenderer#:: Renders the cell as an image.
+The column type must be a [interfacename]#Resource#, as described in
+<<dummy/../../../framework/application/application-resources#application.resources,"Images and Other Resources">>; only [classname]#ThemeResource# and
 [classname]#ExternalResource# are currently supported for images in
 [classname]#Grid#.
 
 ifdef::web[]
-
++
 [source, java]
 ----
 grid.addColumn("picture", Resource.class)
@@ -605,7 +601,6 @@ Instead of creating the resource objects explicitly, as was done above, you
 could generate them dynamically from file name strings using a
 [interfacename]#Converter# for the column.
 
-
 +
 [source, java]
 ----
@@ -678,13 +673,14 @@ endif::web[]
 }
 ----
 endif::web[]
+
 [classname]#DateRenderer#:: Formats a column with a [classname]#Date# type using string formatter. The
 format string is same as for [methodname]#String.format()# in Java API. The date
 is passed in the parameter index 1, which can be omitted if there is only one
-format specifier, such as " [literal]#++%tF++#".
+format specifier, such as "[literal]#++%tF++#".
 
 ifdef::web[]
-
++
 [source, java]
 ----
 Grid.Column bornColumn = grid.getColumn("born");
@@ -698,13 +694,13 @@ Optionally, a locale can be given. Otherwise, the default locale (in the
 component tree) is used.
 
 endif::web[]
+
 [classname]#HTMLRenderer#:: Renders the cell as HTML. This allows formatting cell content, as well as using
 HTML features such as hyperlinks.
 
 ifdef::web[]
++
 First, set the renderer in the [classname]#Grid.Column# object:
-
-
 +
 [source, java]
 ----
@@ -716,7 +712,6 @@ ifdef::web[]
 Then, in the grid data, give the cell content:
 endif::web[]
 
-
 +
 [source, java]
 ----
@@ -727,8 +722,8 @@ grid.addRow("Nicolaus Copernicus", 1543,
 +
 You could also use a [interfacename]#PropertyFormatter# or a generated column to
 generate the HTML for the links.
-
 endif::web[]
+
 [classname]#NumberRenderer#:: Formats column values with a numeric type extending [classname]#Number#:
 [classname]#Integer#, [classname]#Double#, etc. The format can be specified
 either by the subclasses of [classname]#java.text.NumberFormat#, namely
@@ -736,9 +731,8 @@ either by the subclasses of [classname]#java.text.NumberFormat#, namely
 [methodname]#String.format()#.
 
 ifdef::web[]
++
 For example:
-
-
 +
 [source, java]
 ----
@@ -770,9 +764,8 @@ endif::web[]
 must be between 0.0 and 1.0.
 
 ifdef::web[]
++
 For example:
-
-
 +
 [source, java]
 ----
@@ -973,7 +966,7 @@ the container must be of type that implements
 
 [[figure.components.grid.filtering]]
 .Filtering Grid
-image::img/grid-filtering.png[]
+image::img/grid-filtering.png[width=50%, scaledwidth=80%]
 
 The filtering illustrated in <<figure.components.grid.filtering>> can be created
 as follows:
@@ -997,16 +990,16 @@ HeaderRow filterRow = grid.appendHeaderRow();
 for (Object pid: grid.getContainerDataSource()
                      .getContainerPropertyIds()) {
     HeaderCell cell = filterRow.getCell(pid);
-    
+
     // Have an input field to use for filter
     TextField filterField = new TextField();
     filterField.setColumns(8);
-    
+
     // Update filter When the filter input is changed
     filterField.addTextChangeListener(change -> {
         // Can't modify filters so need to replace
         container.removeContainerFilters(pid);
-        
+
         // (Re)create the filter if necessary
         if (! change.getText().isEmpty())
             container.addContainerFilter(
@@ -1028,7 +1021,7 @@ secondary or more sort criteria.
 
 [[figure.components.grid.sorting]]
 .Sorting Grid on Multiple Columns
-image::img/grid-sorting.png[]
+image::img/grid-sorting.png[width=50%, scaledwidth=75%]
 
 Defining sort criteria programmatically can be done with the various
 alternatives of the [methodname]#sort()# method. You can sort on a specific
@@ -1052,7 +1045,7 @@ direction can be given with an optional parameter.
 
 [source, java]
 ----
-// Sort first by city and then by name 
+// Sort first by city and then by name
 grid.sort(Sort.by("city", SortDirection.ASCENDING)
               .then("name", SortDirection.DESCENDING));
 ----
@@ -1098,7 +1091,7 @@ A row under editing is illustrated in <<figure.components.grid.editing>>.
 
 [[figure.components.grid.editing]]
 .Editing a Grid Row
-image::img/grid-editor-basic.png[]
+image::img/grid-editor-basic.png[width=50%, scaledwidth=75%]
 
 [[components.grid.editing.unbuffered]]
 === Unbuffered Mode
@@ -1196,9 +1189,9 @@ public class Person implements Serializable {
     @NotNull
     @Size(min=2, max=10)
     private String name;
-    
+
     @Min(1)
-    @Max(130)       
+    @Max(130)
     private int age;
     ...]
 ----
@@ -1241,7 +1234,7 @@ first error in the editor.
 
 [[figure.components.grid.errors]]
 .Editing a Grid Row
-image::img/grid-editor-errors.png[]
+image::img/grid-editor-errors.png[width=50%, scaledwidth=75%]
 
 You can modify the error handling by implementing a custom
 [interfacename]#EditorErrorHandler# or by extending the
@@ -1403,5 +1396,3 @@ element, as well as the buttons.
 
 
 ((()))
-
-
-- 
cgit v1.2.3

