Rescaled images in layout chapter. Various small formatting fixes. Updated history and other matters in introduction.

Change-Id: I0d5e76f7fb07f967dd04941a23e79dfb30049731

documentation/application/application-environment.asciidoc

@@ -190,11 +190,11 @@ class MyUI extends UI {
 
 You can also define it in the [filename]#web.xml# descriptor for the servlet:
 
-[source, xml, subs="normal"]
+[subs="normal"]
 ----
 <init-param>
   <param-name>widgetset</param-name>
-  <param-value>com.example.myproject.MyWidgetSet</param-value>
+  <param-value>[replaceable]##com.example.myproject.MyWidgetSet##</param-value>
 </init-param>
 ----
 

documentation/application/application-resources.asciidoc

@@ -237,7 +237,7 @@ The resulting image is shown in <<figure.application.resource.stream>>.
 
 [[figure.application.resource.stream]]
 .A stream resource
-image::img/application_streamresource.png[width=25%, scaledwidth=35%]
+image::img/application_streamresource.png[width=25%, scaledwidth=25%]
 
 Another way to create dynamic content is a request handler, described in
 <<dummy/../../../framework/advanced/advanced-requesthandler#advanced.requesthandler,"Request

documentation/components/components-button.asciidoc

@@ -58,9 +58,9 @@ A button has an overall [literal]#++v-button++# style. The caption has
 [literal]#++v-button-caption++# style. There is also an intermediate wrap
 element, which may help in styling in some cases.
 
-The button component has many style variants in the Valo theme, as illustrated in <<figure.component.button.basic>>.
+The button component has many style variants in the Valo theme, as illustrated in <<figure.component.button.valostyles>>.
 The styles are defined in the [classname]#ValoTheme# class.
 
-[[figure.component.button.basic]]
+[[figure.component.button.valostyles]]
 .Button in different styles of the Valo theme
 image::img/button-valo-styles.png[width=70%, scaledwidth=100%]

documentation/components/components-features.asciidoc

@@ -406,7 +406,7 @@ select.onValueChange(locale -> {
     date.setLocale(locale);
     localeCode.setValue("Locale code: " +
                         locale.getLanguage() + "_" +
-                        locale.getCountry());  
+                        locale.getCountry());
 });
 ----
 See the http://demo.vaadin.com/book-examples-vaadin7/book#component.features.locale.selection[on-line example, window="_blank"].
@@ -497,8 +497,6 @@ components appear in italic.
 }
 ----
 
-
-
 [[components.features.stylename]]
 == Style Name
 
@@ -512,7 +510,6 @@ can also add and remove individual style names with [methodname]#addStylename()#
 and [methodname]#removeStyleName()#. A style name must be a valid CSS style
 name.
 
-
 [source, java]
 ----
 Label label = new Label("This text has a lot of style");
@@ -614,9 +611,10 @@ component in absolute or relative units, or for leaving the size undefined.
 The size of a component can be set with [methodname]#setWidth()# and
 [methodname]#setHeight()# methods. The methods take the size as a floating-point
 value. You need to give the unit of the measure as the second parameter for the
-above methods. The available units are listed in
-<<components.features.sizeable.units.table>> below.
-
+above methods.
+ifdef::web[]
+The available units are listed in <<components.features.sizeable.units.table>>.
+endif::web[]
 
 [source, java]
 ----
@@ -649,6 +647,7 @@ can set the height, width, or both as undefined with the methods [methodname]#se
 Always keep in mind that _a layout with undefined size may not contain components with defined relative size_, such as "full size", except in some special cases.
 See <<dummy/../../../framework/layout/layout-settings#layout.settings.size,"Layout Size">> for details.
 
+ifdef::web[]
 The <<components.features.sizeable.units.table>> table lists the available units and their codes defined in the [interfacename]#Sizeable# interface.
 
 [[components.features.sizeable.units.table]]
@@ -666,6 +665,7 @@ The <<components.features.sizeable.units.table>> table lists the available units
 |[parameter]#Unit.INCH#|in|A physical length unit, _inches_ on the surface of a display device. However, the actual size depends on the display, its metrics in the operating system, and the browser.
 |[parameter]#Unit.PERCENTAGE#|%|A relative percentage of the available size. For example, for the top-level layout [parameter]#100%# would be the full width or height of the browser window. The percentage value must be between 0 and 100.
 |===============
+endif::web[]
 
 If a component inside [classname]#HorizontalLayout# or [classname]#VerticalLayout# has full size in the namesake direction of the layout, the component will expand to take all available space not needed by the other components.
 See <<dummy/../../../framework/layout/layout-settings#layout.settings.size,"Layout Size">> for details.

documentation/components/components-grid.asciidoc

@@ -132,7 +132,6 @@ from the grid.
 
 For example:
 
-
 [source, java]
 ----
 grid.addSelectionListener(selectionEvent -> {
@@ -289,8 +288,9 @@ columns in their natural order.
 
 [source, java]
 ----
-grid.setColumnOrder(firstnameColumn, lastnameColumn, bornColumn,
-                    birthplaceColumn, diedColumn);
+grid.setColumnOrder(firstnameColumn, lastnameColumn,
+                    bornColumn, birthplaceColumn,
+                    diedColumn);
 ----
 
 Note that the method can not be used to hide columns. You can hide columns with
@@ -374,14 +374,11 @@ lambdas:
 [source, java]
 ----
 // Add generated full name column
-Column<String> fullNameColumn grid.addColumn(person -> {
-    return person.getFirstName() + " " + person.getLastName();
-});
+Column<String> fullNameColumn = grid.addColumn(person ->
+    person.getFirstName() + " " + person.getLastName());
 fullNameColumn.setHeaderCaption("Full name");
-
 ----
 
-
 [[components.grid.renderer]]
 == Column Renderers
 
@@ -682,8 +679,6 @@ You can set a component in a header or footer cell with
 described in <<components.grid.filtering>>, which also gives an example of the
 use.
 
-
-
 [[components.grid.filtering]]
 == Filtering
 
@@ -699,7 +694,6 @@ image::img/grid-filtering.png[width=50%, scaledwidth=80%]
 The filtering illustrated in <<figure.components.grid.filtering>> can be created
 as follows:
 
-
 [source, java]
 ----
 // Have a list of persons
@@ -726,8 +720,7 @@ for (Column<?> col: grid.getColumns()) {
 
       // Filter the list of items
       List<String> filteredList =
-        Lists.newArrayList(personList.filter(
-            persons,
+        Lists.newArrayList(personList.filter(persons,
             Predicates.containsPattern(event.getValue())));
 
         // Apply filtered data
@@ -737,11 +730,8 @@ for (Column<?> col: grid.getColumns()) {
     cell.setComponent(filterField);
 
 }
-
-
 ----
 
-
 [[components.grid.sorting]]
 == Sorting
 
@@ -907,7 +897,6 @@ public class Person implements Serializable {
 We can now use a [classname]#BeanBinder# in the [classname]#Grid# as
 follows:
 
-
 [source, java]
 ----
 Grid<Person> grid = new Grid(examplePersonList());

documentation/components/components-nativeselect.asciidoc

@@ -20,7 +20,8 @@ the native selection input of web browsers, using the HTML
 [source, java]
 ----
 // Create the selection component
-NativeSelect<String> select = new NativeSelect<>("Native Selection");
+NativeSelect<String> select =
+    new NativeSelect<>("Native Selection");
 
 // Add some items
 select.setItems("Mercury", "Venus", ...);
@@ -31,7 +32,7 @@ The [methodname]#setColumns()# allows setting the width of the list as
 
 [[figure.components.nativeselect.basic]]
 .The [classname]#NativeSelect# Component
-image::img/nativeselect-basic.png[width=20%, scaledwidth=40%]
+image::img/nativeselect-basic.png[width=20%, scaledwidth=35%]
 
 Common selection component features are described in
 <<dummy/../../../framework/components/components-selection#components.selection,"Selection Components">>.

documentation/components/components-optiongroup.asciidoc

@@ -29,11 +29,13 @@ enabled with [methodname]#setMultiSelect()#.
 [source, java]
 ----
 // A single-select radio button group
-OptionGroup<String> single = new OptionGroup<>("Single Selection");
+OptionGroup<String> single =
+    new OptionGroup<>("Single Selection");
 single.setItems("Single", "Sola", "Yksi");
 
 // A multi-select check box group
-OptionGroup<String> multi = new OptionGroup<>("Multiple Selection");
+OptionGroup<String> multi =
+    new OptionGroup<>("Multiple Selection");
 multi.setMultiSelect(true);
 multi.setItems("Many", "Muchos", "Monta");
 ----

documentation/components/components-progressbar.asciidoc

@@ -35,17 +35,13 @@ described in
 
 [source, java]
 ----
-final ProgressBar bar = new ProgressBar(0.0f);
+ProgressBar bar = new ProgressBar(0.0f);
 layout.addComponent(bar);
 
-layout.addComponent(new Button("Increase",
-    new ClickListener() {
-    @Override
-    public void buttonClick(ClickEvent event) {
-        float current = bar.getValue();
-        if (current < 1.0f)
-            bar.setValue(current + 0.10f);
-    }
+layout.addComponent(new Button("Increase", click -> {
+    float current = bar.getValue();
+    if (current < 1.0f)
+        bar.setValue(current + 0.10f);
 }));
 ----
 
@@ -56,7 +52,6 @@ In the indeterminate mode, a non-progressive indicator is displayed
 continuously. The indeterminate indicator is a circular wheel in the built-in
 themes. The progress value has no meaning in the indeterminate mode.
 
-
 [source, java]
 ----
 ProgressBar bar = new ProgressBar();

documentation/components/components-selection.asciidoc

@@ -69,7 +69,6 @@ caption, but can be any object type. We could as well have given Planet instance
 for the items and use captions generated based on them
 [methodname]#setItemCaptionProvider()# method.
 
-
 [source, java]
 ----
 // List of Planet objects
@@ -101,7 +100,6 @@ retrieved with [methodname]#toString()# method from the item. This is useful
 for simple objects like String or Integers, but also for objects that have
 human readable output for [methodname]#toString()# .
 
-+
 [source, java]
 ----
 ComboBox<Planet> select = new ComboBox<>("Inner Planets");
@@ -193,7 +191,8 @@ planets.add(new Planet(3, "Earth"));
 planets.add(new Planet(4, "Mars"));
 
 // Create a selection component
-ComboBox<Planet> select = new ComboBox<>("Planets");
+ComboBox<Planet> select =
+    new ComboBox<>("Planets");
 
 // Set the caption provider to read the
 // caption directly from the 'name'

documentation/components/components-twincolselect.asciidoc

@@ -35,7 +35,8 @@ column captions with [methodname]#setLeftColumnCaption()# and
 
 [source, java]
 ----
-TwinColSelect<String> select = new TwinColSelect<>("Select Targets");
+TwinColSelect<String> select =
+    new TwinColSelect<>("Select Targets");
 
 // Put some items in the select
 select.setItems("Mercury", "Venus", "Earth", "Mars",
@@ -49,7 +50,8 @@ select.setSelection("Venus", "Earth", "Mars");
 
 // Handle value changes
 select.onSelect(selectedItems ->
-    layout.addComponent(new Label("Selected: " + selectedItems)));
+    layout.addComponent(
+        new Label("Selected: " + selectedItems)));
 ----
 See the http://demo.vaadin.com/book-examples-vaadin7/book#component.select.twincolselect.captions[on-line example, window="_blank"].
 

documentation/datamodel/datamodel-itembinding.asciidoc

@@ -77,7 +77,7 @@ still have to add them to the correct position in your layout.
 ----
 // Have some layout
 FormLayout form = new FormLayout();
-        
+
 // Now create a binder that can also create the fields
 // using the default field factory
 FieldGroup binder = new FieldGroup(item);
@@ -112,24 +112,24 @@ item.addItemProperty("age", new ObjectProperty<Integer>(42));
 class MyForm extends FormLayout {
     // Member that will bind to the "name" property
     TextField name = new TextField("Name");
-    
-    // Member that will bind to the "age" property 
+
+    // Member that will bind to the "age" property
     @PropertyId("age")
     TextField ageField = new TextField("Age");
-    
+
     public MyForm() {
         // Customize the layout a bit
         setSpacing(true);
-        
+
         // Add the fields
         addComponent(name);
         addComponent(ageField);
     }
 }
-        
+
 // Create one
 MyForm form = new MyForm();
-        
+
 // Now create a binder that can also creates the fields
 // using the default field factory
 FieldGroup binder = new FieldGroup(item);
@@ -156,16 +156,16 @@ earlier:
 class MyForm extends CustomComponent {
     // Member that will bind to the "name" property
     TextField name = new TextField("Name");
-    
-    // Member that will bind to the "age" property 
+
+    // Member that will bind to the "age" property
     @PropertyId("age")
     TextField ageField = new TextField("Age");
-    
+
     public MyForm(Item item) {
         FormLayout layout = new FormLayout();
         layout.addComponent(name);
         layout.addComponent(ageField);
-        
+
         // Now use a binder to bind the members
         FieldGroup binder = new FieldGroup(item);
         binder.bindMemberFields(this);
@@ -173,7 +173,7 @@ class MyForm extends CustomComponent {
         setCompositionRoot(layout);
     }
 }
-        
+
 // And the form can be used as a component
 layout.addComponent(new MyForm(item));
 ----
@@ -184,6 +184,7 @@ See the http://demo.vaadin.com/book-examples-vaadin7/book#datamodel.itembinding.
 [[datamodel.itembinding.buffering]]
 == Buffering Forms
 
+ifdef::vaadin7[]
 Just like for individual fields, as described in
 <<dummy/../../../framework/components/components-fields#components.fields.buffering,"Field
 Buffering">>, a [classname]#FieldGroup# can handle buffering the form content so
@@ -194,7 +195,7 @@ Edits can be discarded, so that the field values are reloaded from the data
 source, by calling [methodname]#discard()#. Buffering is enabled by default, but
 can be disabled by calling [methodname]#setBuffered(false)# for the
 [classname]#FieldGroup#.
-
+endif::vaadin7[]
 
 ----
 // Have an item of some sort
@@ -213,7 +214,7 @@ form.addComponent(binder.buildAndBind("Age",  "age"));
 
 // Enable buffering (actually enabled by default)
 binder.setBuffered(true);
-        
+
 // A button to commit the buffer
 form.addComponent(new Button("OK", new ClickListener() {
     @Override
@@ -260,11 +261,13 @@ every field if a bean validation implementation is included in the classpath.
 == Bean Validation
 
 Vaadin allows using the Java Bean Validation API 1.0 (JSR-303) for validating
+ifdef::vaadin7[]
 input from fields bound to bean properties before the values are committed to
 the bean. The validation is done based on annotations on the bean properties,
 which are used for creating the actual validators automatically. See
 <<dummy/../../../framework/components/components-fields#components.fields.validation,"Field
 Validation">> for general information about validation.
+endif::vaadin7[]
 
 Using bean validation requires an implementation of the Bean Validation API,
 such as Hibernate Validator ( [filename]#hibernate-validator-4.2.0.Final.jar# or
@@ -290,11 +293,11 @@ public class Person implements Serializable {
     @NotNull
     @javax.validation.constraints.Size(min=2, max=10)
     String name;
-    
+
     @Min(1)
     @Max(130)
     int age;
-    
+
     // ... setters and getters ...
 }
 ----
@@ -317,14 +320,14 @@ In the following example, we validate a single unbuffered field:
 ----
 Person bean = new Person("Mung bean", 100);
 BeanItem<Person> item = new BeanItem<Person> (bean);
-    
+
 // Create an editor bound to a bean field
 TextField firstName = new TextField("First Name",
         item.getItemProperty("name"));
-    
+
 // Add the bean validator
 firstName.addValidator(new BeanValidator(Person.class, "name"));
-    
+
 firstName.setImmediate(true);
 layout.addComponent(firstName);
 ----
@@ -339,7 +342,7 @@ Bean validators are automatically created when using a
 ----
 // Have a bean
 Person bean = new Person("Mung bean", 100);
-        
+
 // Form for editing the bean
 final BeanFieldGroup<Person> binder =
         new BeanFieldGroup<Person>(Person.class);
@@ -370,8 +373,3 @@ language specified with the locale setting for the form. The default language is
 English, but for example Hibernate Validator contains translations of the
 messages for a number of languages. If other languages are needed, you need to
 provide a translation of the properties file.
-
-
-
-
-

documentation/datamodel/datamodel-properties.asciidoc

@@ -23,10 +23,10 @@ interface to allow accessing the field value.
 [source, java]
 ----
 final TextField tf = new TextField("Name");
-        
+
 // Set the value
 tf.setValue("The text field value");
-        
+
 // When the field value is edited by the user
 tf.addValueChangeListener(
     new Property.ValueChangeListener() {
@@ -88,10 +88,10 @@ interface with [methodname]#setPropertyDataSource()#.
 // Have a data model
 ObjectProperty property =
     new ObjectProperty("Hello", String.class);
-        
+
 // Have a component that implements Viewer
 Label viewer = new Label();
-        
+
 // Bind it to the data
 viewer.setPropertyDataSource(property);
 ----
@@ -104,10 +104,10 @@ component that allows editing a particular property type to a property.
 // Have a data model
 ObjectProperty property =
     new ObjectProperty("Hello", String.class);
-        
+
 // Have a component that implements Viewer
 TextField editor = new TextField("Edit Greeting");
-        
+
 // Bind it to the data
 editor.setPropertyDataSource(property);
 ----
@@ -129,12 +129,13 @@ viewer.setPropertyDataSource(editor);
 editor.setImmediate(true);
 ----
 
+ifdef::vaadin7[]
 If a field has validators, as described in
 <<dummy/../../../framework/components/components-fields#components.fields.validation,"Field
 Validation">>, the validators are executed before writing the value to the
 property data source, or by calling the [methodname]#validate()# or
 [methodname]#commit()# for the field.
-
+endif::vaadin7[]
 
 [[datamodel.properties.objectproperty]]
 == [classname]#ObjectProperty# Implementation
@@ -146,14 +147,14 @@ The [classname]#ObjectProperty# class is a simple implementation of the
 ----
 // Have a component that implements Viewer interface
 final TextField tf = new TextField("Name");
-        
+
 // Have a data model with some data
 String myObject = "Hello";
-        
+
 // Wrap it in an ObjectProperty
 ObjectProperty property =
     new ObjectProperty(myObject, String.class);
-        
+
 // Bind the property to the component
 tf.setPropertyDataSource(property);
 ----
@@ -181,8 +182,8 @@ converter for a field. The method is defined in [classname]#AbstractField#.
 ----
 // Have an integer property
 final ObjectProperty<Integer> property =
-        new ObjectProperty<Integer>(42); 
-        
+        new ObjectProperty<Integer>(42);
+
 // Create a TextField, which edits Strings
 final TextField tf = new TextField("Name");
 
@@ -321,7 +322,7 @@ interface:
 class MyProperty implements Property {
     Integer data     = 0;
     boolean readOnly = false;
-    
+
     // Return the data type of the model
     public Class<?> getType() {
         return Integer.class;
@@ -330,7 +331,7 @@ class MyProperty implements Property {
     public Object getValue() {
         return data;
     }
-    
+
     // Override the default implementation in Object
     @Override
     public String toString() {
@@ -349,11 +350,11 @@ class MyProperty implements Property {
             throws ReadOnlyException, ConversionException {
         if (readOnly)
             throw new ReadOnlyException();
-            
+
         // Already the same type as the internal representation
         if (newValue instanceof Integer)
             data = (Integer) newValue;
-        
+
         // Conversion from a string is required
         else if (newValue instanceof String)
             try {
@@ -368,11 +369,11 @@ class MyProperty implements Property {
         // Reverse decode the hexadecimal value
     }
 }
-        
+
 // Instantiate the property and set its data
 MyProperty property = new MyProperty();
 property.setValue(42);
-        
+
 // Bind it to a component
 final TextField tf = new TextField("Name", property);
 ----

documentation/installing/installing-netbeans.asciidoc

@@ -89,7 +89,7 @@ You can install the plug-in from the NetBeans Plugin Portal Update Center as fol
 . Select "Tools > Plugins" from the NetBeans main menu.
 
 . Select the [guilabel]#Available Plugins# tab.
-.. Type "Vaadin" in the [guilabel]#Search# box and press kbd:Enter[].
+.. Type "Vaadin" in the [guilabel]#Search# box and press kbd:[Enter].
 .. Select the [guilabel]#Install# check box for the [guilabel]#Vaadin Plugin for NetBeans#.
 ifdef::web[]
 +
@@ -105,7 +105,7 @@ Click [guibutton]#Install#.
 . The Vaadin Plugin is not signed, so you need to verify the certificate.
 Click [guibutton]#Continue#.
 
-. In the final step, select [guilabel]#Restart IDE now" and click [guibutton]#Finish#.
+. In the final step, select [guilabel]#Restart IDE now# and click [guibutton]#Finish#.
 
 You can now proceed to create a Vaadin project, as described in <<DUMMY/../../../framework/getting-started/getting-started-netbeans#getting-started.netbeans, "Creating a Project with the NetBeans IDE">>.
 

documentation/installing/original-drawings/installation-intellij.svg

@@ -26,9 +26,9 @@
      borderopacity="1.0"
      inkscape:pageopacity="1"
      inkscape:pageshadow="2"
-     inkscape:zoom="2.8"
-     inkscape:cx="153.1089"
-     inkscape:cy="76.118195"
+     inkscape:zoom="3.959798"
+     inkscape:cx="116.03523"
+     inkscape:cy="96.122162"
      inkscape:document-units="mm"
      inkscape:current-layer="layer1"
      inkscape:window-width="1920"
@@ -65,7 +65,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -143,42 +143,12 @@
            id="flowPara4249">Edition</flowPara><flowPara
            id="flowPara4245" /><flowPara
            id="flowPara4247" /></flowRoot>    </g>
-    <g
-       id="g4392-4"
-       transform="translate(60.236234,180.70866)">
-      <rect
-         y="818.50391"
-         x="56.692913"
-         height="21.259813"
-         width="49.606297"
-         id="rect4347-8"
-         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
-      <flowRoot
-         transform="translate(2.6821639,0.70806943)"
-         id="flowRoot4367-1"
-         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:125%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         xml:space="preserve"><flowRegion
-           id="flowRegion4369-1"><use
-             height="100%"
-             width="100%"
-             id="use4371-0"
-             xlink:href="#rect4347-8"
-             y="0"
-             x="0" /></flowRegion><flowPara
-           id="flowPara4373-7">Install the</flowPara><flowPara
-           id="flowPara4375-8">Vaadin Plugin</flowPara></flowRoot>    </g>
     <flowRoot
        transform="translate(-80.859256,144.73179)"
        id="flowRoot4367-1-7"
        style="font-style:normal;font-variant:normal;font-weight:200;font-stretch:normal;font-size:7.5px;line-height:100%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Ultra-Light';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#5b686b;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
        xml:space="preserve"><flowRegion
-         id="flowRegion4369-1-5"><use
-           height="100%"
-           width="100%"
-           id="use4371-0-1"
-           xlink:href="#rect4347-8"
-           y="0"
-           x="0" /></flowRegion><flowPara
+         id="flowRegion4369-1-5" /><flowPara
          id="flowPara4375-8-3">START</flowPara><flowPara
          id="flowPara4462">HERE</flowPara></flowRoot>    <circle
        r="10.629871"
@@ -204,15 +174,9 @@
        id="path3003-6-5"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cc" />
-    <path
-       style="fill:none;stroke:#00b4f0;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 141.73228,985.03934 0,14.17323"
-       id="path3003-6-5-3"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="cc" />
     <g
        id="g4392-4-9"
-       transform="translate(60.236217,209.05512)">
+       transform="translate(60.236221,180.70867)">
       <rect
          y="818.50391"
          x="56.692913"
@@ -235,7 +199,7 @@
            id="flowPara4375-8-0">Install Vaadin Designer</flowPara></flowRoot>    </g>
     <path
        style="fill:none;stroke:#00b4f0;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:0.70866144, 0.70866144;stroke-dashoffset:0;stroke-opacity:1"
-       d="m 141.7323,1020.4724 -2e-5,7.0866"
+       d="m 141.73228,985.03935 0,14.1732"
        id="path3003-6-5-3-5"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cc" />
@@ -284,30 +248,6 @@
            id="flowPara4249-2">Edition</flowPara><flowPara
            id="flowPara4245-2" /><flowPara
            id="flowPara4247-9" /></flowRoot>    </g>
-    <g
-       id="g4392-4-0"
-       transform="translate(60.236219,102.75591)">
-      <rect
-         y="818.50391"
-         x="56.692913"
-         height="21.259813"
-         width="49.606297"
-         id="rect4347-8-6"
-         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
-      <flowRoot
-         transform="translate(2.6821639,0.70806943)"
-         id="flowRoot4367-1-2"
-         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:125%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         xml:space="preserve"><flowRegion
-           id="flowRegion4369-1-4"><use
-             height="100%"
-             width="100%"
-             id="use4371-0-9"
-             xlink:href="#rect4347-8-6"
-             y="0"
-             x="0" /></flowRegion><flowPara
-           id="flowPara4373-7-8">Install the</flowPara><flowPara
-           id="flowPara4375-8-34">Vaadin Plugin</flowPara></flowRoot>    </g>
     <g
        id="g4392-4-4-5"
        transform="translate(116.92913,102.75592)">
@@ -337,12 +277,6 @@
        id="path3003-6-5-8"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cc" />
-    <path
-       style="fill:none;stroke:#00b4f0;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 141.73228,942.51965 0,14.17323"
-       id="path3003-6-5-3-55"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="cc" />
     <path
        style="fill:none;stroke:#00b4f0;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
        d="m 191.33858,942.51965 0,14.17323"
@@ -351,7 +285,7 @@
        sodipodi:nodetypes="cc" />
     <g
        id="g4392-4-9-3"
-       transform="translate(60.236217,74.409445)">
+       transform="translate(60.236221,102.75593)">
       <rect
          y="818.50391"
          x="56.692913"
@@ -374,7 +308,7 @@
            id="flowPara4375-8-0-4">Install Vaadin Designer</flowPara></flowRoot>    </g>
     <path
        style="fill:none;stroke:#00b4f0;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:0.70866144, 0.70866144;stroke-dashoffset:0;stroke-opacity:1"
-       d="m 141.73228,914.17319 0,7.08662"
+       d="m 141.73228,942.51968 0,14.17321"
        id="path3003-6-5-3-5-1"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cc" />

documentation/introduction/intro-background.asciidoc

@@ -19,22 +19,27 @@ international pharmaceutical company. IT Mill made the application already in
 the year 2001 and it is still in use. Since then, the company has produced
 dozens of large business applications with the library and it has proven its
 ability to solve hard problems easily.
+Millstone 3 was released as open source in 2002.
 
-The next generation of the library, IT Mill Toolkit Release 4, was released in
-2006. It introduced an entirely new AJAX-based presentation engine. This allowed
-the development of AJAX applications without the need to worry about
-communications between the client and the server.
+Progress has often required hard decisions to avoid carrying unnecessary legacy burden far into the future.
+Nevertheless, our aim has always been to keep migrations easy.
 
 [[intro.background.toolkit-5]]
-== Release 5 Into the Open
+== Release 4 with Single-Page Rendering
 
-((("IT Mill
-Toolkit")))
+The next generation of the library, IT Mill Toolkit 4, was released in 2006.
+It introduced an entirely new AJAX-based presentation engine.
+This allowed the development of AJAX applications without the need to worry about communications between the client and the server.
+
+[[intro.background.toolkit-5]]
+== Release 5 Powered by GWT
+
+((("IT Mill Toolkit")))
 ((("AJAX")))
 IT Mill Toolkit 5, released initially at the end of 2007, took a significant
 step further into AJAX. The client-side rendering of the user interface was
-completely rewritten using GWT, the Google Web Toolkit. ((("Google Web
-Toolkit")))
+completely rewritten using GWT, the Google Web Toolkit.
+((("Google Web Toolkit")))
 
 IT Mill Toolkit 5 introduced many significant improvements both in the
 server-side API and in the functionality. Rewriting the Client-Side Engine with
@@ -50,13 +55,12 @@ The Release 5 was published under the Apache License 2, an unrestrictive open
 source license, to create faster expansion of the user base and to make the
 formation of a developer community possible.
 
-
 [[intro.background.vaadin6]]
 == Birth of Vaadin Release 6
 
-IT Mill Toolkit was renamed as __Vaadin Framework__, or Vaadin in short, in
-spring 2009. Later IT Mill, the company, was also renamed as Vaadin Ltd. Vaadin
-means an adult female semi-domesticated mountain reindeer in Finnish.
+IT Mill Toolkit was renamed as _Vaadin Framework_, or Vaadin in short, in
+spring 2009. Later IT Mill, the company, was also renamed as Vaadin Ltd.
+Vaadin means an adult female semi-domesticated mountain reindeer in Finnish.
 
 With Vaadin 6, the number of developers using the framework exploded. Together
 with the release, the Vaadin Plugin for Eclipse was released, helping the
@@ -68,20 +72,16 @@ tremendous growth in the ecosystem around Vaadin. The size of the user
 community, at least if measured by forum activity, has already gone past the
 competing server-side frameworks and even GWT.
 
-
 [[intro.background.vaadin7]]
 == The Major Revision with Vaadin 7
 
 Vaadin 7 was a major revision that changed the Vaadin API much more than Vaadin
-6 did. It is certainly more web-oriented than Vaadin 6 was. We are doing
-everything we can to help Vaadin rise high in the web universe. Some of this
-work is easy and almost routine - fixing bugs and implementing features. But
-going higher also requires standing firmer. That was one of the aims of Vaadin 7
-- redesigning the product so that the new architecture enables Vaadin to reach
-over many long-standing challenges. Many of the changes required breaking API
-compatibility with Vaadin 6, especially in the client-side, but they are made
-with a strong desire to avoid carrying unnecessary legacy burden far into the
-future.
+6 did.
+It became more web-oriented than Vaadin 6 was.
+We are doing everything we can to help Vaadin rise high in the web universe.
+Some of this work is easy and almost routine - fixing bugs and implementing features.
+But going higher also requires standing firmer.
+That was one of the aims of Vaadin 7 - redesigning the product so that the new architecture enables Vaadin to reach over many long-standing challenges.
 
 Inclusion of the Google Web Toolkit in Vaadin 7 was a significant development,
 as it meant that Vaadin now provides support for GWT as well. When Google opened
@@ -89,6 +89,13 @@ the GWT development in summer 2012, Vaadin (the company) joined the new GWT
 steering committee. As a member of the committee, Vaadin can work towards the
 success of GWT as a foundation of the Java web development community.
 
+[[intro.background.vaadin8]]
+== Vaadin 8 Introduces New Data Binding API
 
-
-
+The biggest change in Vaadin 8 is the complete modernization of the data binding API.
+Binding components to data sources is one of the core features of the Vaadin Framework, as it eliminates the need to explicitly shuffle data between Vaadin components and data objects, typically beans.
+The old data model was designed in time before Java features such as generics.
+While the data model was improved over the years, it was fundamentally outdated and complex to use.
+The new data binding API works much more fluently in Java 8, especially with Java 8 features such as lambda expressions.
+Consequently, to be able to fully use the new features of Java 8, we have raised the requirements from Java 6 to 8.
+The change should make Vaadin up to date with the most current Java technologies used by developers.

documentation/introduction/intro-eclipse.asciidoc

@@ -5,28 +5,31 @@ layout: page
 ---
 
 [[intro.eclipse]]
-= Support for the Eclipse IDE
+= Support for IDEs
 
 While Vaadin is not bound to any specific IDE, and you can in fact easily use it
-without any IDE altogether, we provide special support for the Eclipse IDE,
-which has become the most used environment for Java development.
+without any IDE altogether, we provide special support for the Eclipse IDE, IntelliJ IDEA, and the NetBeans IDE, which have become the most used environment for Java development.
 
-*_Vaadin Plug-in for Eclipse_* helps you in:
+An official Vaadin plug-in is available for the Eclipse and NetBeans IDEs.
+It helps in:
 
 * creating new Vaadin projects,
 
 * creating custom themes,
 
-* creating custom client-side widgets, and
+* creating custom client-side widgets,
+
+* downloading add-ons from the Vaadin directory, and
 
 * easily upgrading to a newer version of the Vaadin library.
 
-Using the Vaadin plug-in for Eclipse is the recommended way of installing Vaadin for development.
-Downloading the installation package that contains the JARs or defining Vaadin as a Maven dependency is also possible.
+Availability of the features depends on the IDE.
+The ultimate edition of IntelliJ IDEA comes with built-in support for Vaadin.
 
-*_Vaadin Designer_* is a commercial Eclipse plug-in that enables visual editing of Vaadin UIs and composites.
-See <<dummy/../../../designer/designer-overview#designer.overview, "Vaadin Designer">> for its complete reference.
+*_Vaadin Designer_* is a commercial plug-in available for the Eclipse IDE and IntelliJ IDEA.
+It enables visual editing of declarative designs that you can use in your applications.
+See <<dummy/../../../designer/designer-overview#designer.overview, "Vaadin Designer">> for more information.
 
-Installation of the Eclipse IDE and the plug-in is covered in <<dummy/../../../framework/installing/installing-eclipse#installing.eclipse,"Installing the Eclipse IDE">>.
-The creation of a new Vaadin project using the plug-in is covered in <<dummy/../../../framework/getting-started/getting-started-first-project#getting-started.first-project.creation,"Creating a Project in the Eclipse IDE">>.
-See <<dummy/../../../framework/themes/themes-eclipse#themes.eclipse,"Creating a Theme in Eclipse">> and <<dummy/../../../framework/gwt/gwt-eclipse#gwt.eclipse,"Starting It Simple With Eclipse">> for instructions on using the different features of the plug-in.
+Using the Vaadin plug-in is the recommended way of installing Vaadin for development.
+Installing the IDEs and the plug-ins is covered in <<dummy/../../../framework/installing/installing-overview#installing, "Installing Development Tools">>.
+The creation of a new Vaadin project with each IDE is covered in <<dummy/../../../framework/getting-started/getting-started-first-project#getting-started.overview, "Creating a Vaadin Project">>.

documentation/introduction/intro-walkthrough.asciidoc

@@ -31,12 +31,7 @@ public class HelloWorld extends UI {
 
         // Have a clickable button
         content.addComponent(new Button("Push Me!",
-            new ClickListener() {
-                @Override
-                public void buttonClick(ClickEvent e) {
-                    Notification.show("Pushed!");
-                }
-            }));
+            click -> Notification.show("Pushed!")));
     }
 }
 ----
@@ -59,18 +54,8 @@ user interface component, which displays simple text, and sets the text to
 
 The example also shows how to create a button and handle button click events.
 Event handling is described in
-<<dummy/../../../framework/architecture/architecture-events#architecture.events,"Events
-and Listeners">> and on the practical side in
-<<dummy/../../../framework/application/application-events#application.events,"Handling
-Events with Listeners">>. In addition to listeners, in Java 8 you can handle
-events with lambda expressions, which simplifies the handler code significantly.
-
-
-[source, java]
-----
-content.addComponent(new Button("Push Me!",
-    event -> Notification.show("Pushed!")));
-----
+<<dummy/../../../framework/architecture/architecture-events#architecture.events,"Events and Listeners">> and on the practical side in <<dummy/../../../framework/application/application-events#application.events,"Handling Events with Listeners">>.
+In Java 8, you can implement listeners with lambda expressions, which simplifies the handler code significantly.
 
 The result of the Hello World application, when opened in a browser, is shown in
 <<figure.intro.walkthrough>>.

documentation/layout/layout-absolutelayout.asciidoc

@@ -32,7 +32,7 @@ text field 50 pixels from both the left and the top edge:
 AbsoluteLayout layout = new AbsoluteLayout();
 layout.setWidth("400px");
 layout.setHeight("250px");
-        
+
 // A component with coordinates for its top-left corner
 TextField text = new TextField("Somewhere someplace");
 layout.addComponent(text, "left: 50px; top: 50px;");
@@ -71,7 +71,7 @@ The result of the above code examples is shown in
 
 [[figure.layout.absolutelayout.bottomright]]
 .Components Positioned Relative to Various Edges
-image::img/absolutelayout-bottomright.png[]
+image::img/absolutelayout-bottomright.png[width=60%, scaledwidth=80%]
 
 Drag and drop is very useful for moving the components contained in an
 [classname]#AbsoluteLayout#. Check out the example in
@@ -101,7 +101,7 @@ The result is shown in <<figure.layout.absolutelayout.area>>
 
 [[figure.layout.absolutelayout.area]]
 .Component Filling an Area Specified by Coordinates
-image::img/absolutelayout-area.png[]
+image::img/absolutelayout-area.png[width=50%, scaledwidth=80%]
 
 
 [[layout.absolutelayout.proportional]]
@@ -125,7 +125,7 @@ The result is shown in <<figure.layout.absolutelayout.proportional>>
 
 [[figure.layout.absolutelayout.proportional]]
 .Specifying an Area by Proportional Coordinates
-image::img/absolutelayout-proportional.png[]
+image::img/absolutelayout-proportional.png[width=50%, scaledwidth=70%]
 
 
 [[layout.absolutelayout.css]]
@@ -143,7 +143,3 @@ root style. Each component in the layout is contained within an element that has
 the [literal]#++v-absolutelayout-wrapper++#. The component captions are outside
 the wrapper elements, in a separate element with the usual
 [literal]#++v-caption++# style.
-
-
-
-

documentation/layout/layout-accordion.asciidoc

@@ -60,7 +60,7 @@ default theme.
 
 [[figure.accordion.example1]]
 .An Accordion
-image::img/accordion-example1.png[]
+image::img/accordion-example1.png[width=40%, scaledwidth=55%]
 
 == CSS Style Rules
 
@@ -84,7 +84,3 @@ content area element.
 
 The selected item (tab) has also the [literal]#++v-accordion-open++# style. The
 content area is not shown for the closed items.
-
-
-
-

documentation/layout/layout-csslayout.asciidoc

@@ -49,7 +49,7 @@ nearly always needed.
 
 [[figure.layout.csslayout.basic]]
 .Basic Use of [classname]#CssLayout#
-image::img/csslayout-basic.png[]
+image::img/csslayout-basic.png[width=60%, scaledwidth=100%]
 
 The [literal]#++display++# attribute of [classname]#CssLayout# is
 [literal]#++inline-block++# by default, so the components are laid out
@@ -109,7 +109,7 @@ file:
 
 [[figure.layout.csslayout.getcss]]
 .Use of [methodname]#getCss()# and line wrap
-image::img/csslayout-getcss.png[]
+image::img/csslayout-getcss.png[width=60%, scaledwidth=100%]
 
 
 [[layout.csslayout.compatibility]]
@@ -164,7 +164,7 @@ The example would now be rendered as shown in
 
 [[figure.layout.csslayout.styling]]
 .Styling [classname]#CssLayout#
-image::img/csslayout-styling.png[]
+image::img/csslayout-styling.png[width=50%, scaledwidth=70%]
 
 Captions and icons that are managed by the layout are contained in an element
 with [literal]#++v-caption++# style. These caption elements are contained flat

documentation/layout/layout-customlayout.asciidoc

@@ -67,7 +67,7 @@ CustomLayout content = new CustomLayout("layoutname");
 content.setSizeUndefined();
 loginPanel.setContent(content);
 loginPanel.setSizeUndefined();
-        
+
 // No captions for fields is they are provided in the template
 content.addComponent(new TextField(), "username");
 content.addComponent(new TextField(), "password");
@@ -78,7 +78,7 @@ The resulting layout is shown below in <<figure.layout.customlayout>>.
 
 [[figure.layout.customlayout]]
 .Example of a Custom Layout Component
-image::img/customlayout-example1.png[]
+image::img/customlayout-example1.png[width=40%, scaledwidth=70%]
 
 You can use [methodname]#addComponent()# also to replace an existing component
 in the location given in the second parameter.
@@ -100,6 +100,3 @@ or
 ----
 new CustomLayout(new FileInputStream(file));
 ----
-
-
-

documentation/layout/layout-formlayout.asciidoc

@@ -45,7 +45,7 @@ when you hover the mouse pointer over the error indicator.
 
 [[figure.layout.formlayout]]
 .A [classname]#FormLayout# Layout for Forms
-image::img/formlayout-example1.png[]
+image::img/formlayout-example1.png[width=50%, scaledwidth=70%]
 
 [[layout.formlayout.css]]
 == CSS Style Rules

documentation/layout/layout-gridlayout.asciidoc

@@ -34,7 +34,8 @@ grid.addStyleName("example-gridlayout");
 // Fill out the first row using the cursor.
 grid.addComponent(new Button("R/C 1"));
 for (int i = 0; i < 3; i++) {
-    grid.addComponent(new Button("Col " + (grid.getCursorX() + 1)));
+    grid.addComponent(new Button("Col " +
+        (grid.getCursorX() + 1)));
 }
 
 // Fill out the first column using coordinates.
@@ -45,7 +46,8 @@ for (int i = 1; i < 4; i++) {
 // Add some components of various shapes.
 grid.addComponent(new Button("3x1 button"), 1, 1, 3, 1);
 grid.addComponent(new Label("1x2 cell"), 1, 2, 1, 3);
-InlineDateField date = new InlineDateField("A 2x2 date field");
+InlineDateField date =
+    new InlineDateField("A 2x2 date field");
 date.setResolution(DateField.RESOLUTION_DAY);
 grid.addComponent(date, 2, 2, 3, 3);
 ----

documentation/layout/layout-orderedlayout.asciidoc

@@ -238,7 +238,8 @@ Button expandButton = new Button("Expanding component");
 // Use 100% of the expansion cell's width.
 expandButton.setWidth("100%");
 
-// The component must be added to layout before setting the ratio.
+// The component must be added to layout
+// before setting the ratio
 layout.addComponent(expandButton);
 
 // Set the component's cell to expand.

documentation/layout/layout-panel.asciidoc

@@ -31,7 +31,7 @@ Panel panel = new Panel("Astronomer Panel");
 panel.addStyleName("mypanelexample");
 panel.setSizeUndefined(); // Shrink to fit content
 layout.addComponent(panel);
-        
+
 // Create the content
 FormLayout content = new FormLayout();
 content.addStyleName("mypanelcontent");
@@ -46,7 +46,7 @@ The resulting layout is shown in <<figure.layout.panel>>.
 
 [[figure.layout.panel]]
 .A [classname]#Panel#
-image::img/panel.png[]
+image::img/panel.png[width=50%, scaledwidth=70%]
 
 [[layout.panel.scrolling]]
 == Scrolling the Panel Content
@@ -71,7 +71,7 @@ In the following example, we have a 300 pixels wide and very high
 // Display an image stored in theme
 Image image = new Image(null,
     new ThemeResource("img/Ripley_Scroll-300px.jpg"));
-        
+
 // To enable scrollbars, the size of the panel content
 // must not be relative to the panel size
 image.setSizeUndefined(); // Actually the default
@@ -92,7 +92,7 @@ border and vertical scrollbar.
 
 [[figure.layout.panel.scrolling]]
 .Panel with Scroll Bars
-image::img/panel-scrolling.png[]
+image::img/panel-scrolling.png[width=50%, scaledwidth=70%]
 
 ((("[interfacename]#Scrollable#", id="term.layout.panel.scrolling.scrollable", range="startofrange")))
 
@@ -137,6 +137,3 @@ add the style to a panel. Other themes may also provide the light and other
 styles for [classname]#Panel# as well.
 
 endif::web[]
-
-
-

documentation/layout/layout-splitpanel.asciidoc

@@ -59,7 +59,7 @@ which can have scroll bars in both directions.
 
 [[figure.splitpanel.basic]]
 .[classname]#HorizontalSplitPanel# and [classname]#VerticalSplitPanel#
-image::img/splitpanel-example1.png[]
+image::img/splitpanel-example1.png[width=60%, scaledwidth=80%]
 
 You can set the split position with [methodname]#setSplitPosition()#. It accepts
 any units defined in the [classname]#Sizeable# interface, with percentual size
@@ -100,7 +100,7 @@ illustrated in <<figure.component.splitpanel.splitposition>>.
 
 [[figure.component.splitpanel.splitposition]]
 .A Layout With Nested SplitPanels
-image::img/splitpanel-splitposition.png[]
+image::img/splitpanel-splitposition.png[width=50%, scaledwidth=70%]
 
 Notice that the size of a split panel must not be undefined in the split
 direction.
@@ -134,5 +134,3 @@ depending on whether its position is locked or not.
 
 (((range="endofrange", startref="term.layout.splitpanel.horizontal")))
 (((range="endofrange", startref="term.layout.splitpanel.vertical")))
-
-

documentation/layout/layout-sub-window.asciidoc

@@ -19,7 +19,7 @@ and restoring sub-windows, as well as scrolling the window content.
 
 [[figure.layout.sub-window.basic]]
 .A Sub-Window
-image::img/subwindow-basic.png[]
+image::img/subwindow-basic.png[width=50%, scaledwidth=70%]
 
 Sub-windows are typically used for __Dialog Windows__ and __Multiple Document
 Interface__ applications. Sub-windows are by default not modal; you can set them
@@ -42,20 +42,20 @@ public static class SubWindowUI extends UI {
     protected void init(VaadinRequest request) {
         // Some other UI content
         setContent(new Label("Here's my UI"));
-        
+
         // Create a sub-window and set the content
         Window subWindow = new Window("Sub-window");
         VerticalLayout subContent = new VerticalLayout();
         subContent.setMargin(true);
         subWindow.setContent(subContent);
-        
+
         // Put some components in it
         subContent.addComponent(new Label("Meatball sub"));
         subContent.addComponent(new Button("Awlright"));
-        
+
         // Center it in the browser window
         subWindow.center();
-        
+
         // Open it in the UI
         addWindow(subWindow);
     }
@@ -99,7 +99,7 @@ class MySub extends Window {
         content.addComponent(new Label("Just say it's OK!"));
         content.setMargin(true);
         setContent(content);
-        
+
         // Disable the close button
         setClosable(false);
 
@@ -125,7 +125,7 @@ final Button open = new Button("Open Sub-Window");
 open.addClickListener(new ClickListener() {
     public void buttonClick(ClickEvent event) {
         MySub sub = new MySub();
-        
+
         // Add it to the root component
         UI.getCurrent().addWindow(sub);
     }
@@ -197,7 +197,7 @@ You can make a sub-window modal with [methodname]#setModal(true)#.
 
 [[figure.layout.sub-window.modal]]
 .Modal Sub-Window
-image::img/subwindow-modal.png[]
+image::img/subwindow-modal.png[width=70%, scaledwidth=100%]
 
 Depending on the theme, the parent window may be grayed when the modal window is
 open.
@@ -211,9 +211,3 @@ circumvented with client-side attack code. You should not trust in the modality
 of child windows in security-critical situations such as login windows.
 
 ====
-
-
-
-
-
-

documentation/layout/layout-tabsheet.asciidoc

@@ -20,7 +20,7 @@ navigation buttons will appear.
 
 [[figure.tabsheet.example1]]
 .A Simple TabSheet Layout
-image::img/tabsheet-example1.png[]
+image::img/tabsheet-example1.png[width=50%, scaledwidth=70%]
 
 [[layout.tabsheet.adding]]
 == Adding Tabs
@@ -95,11 +95,10 @@ there is only one tab.
 ifdef::web[]
 [[figure.tabsheet.example2]]
 .A TabSheet with Hidden and Disabled Tabs
-image::img/tabsheet-example2.png[]
+image::img/tabsheet-example2.png[width=50%, scaledwidth=70%]
 endif::web[]
 
 
-
 [[layout.tabsheet.events]]
 == Tab Change Events
 
@@ -135,20 +134,20 @@ tabsheet.addSelectedTabChangeListener(
     public void selectedTabChange(SelectedTabChangeEvent event) {
         // Find the tabsheet
         TabSheet tabsheet = event.getTabSheet();
-        
+
         // Find the tab (here we know it's a layout)
         Layout tab = (Layout) tabsheet.getSelectedTab();
 
         // Get the tab caption from the tab object
         String caption = tabsheet.getTab(tab).getCaption();
-        
+
         // Fill the tab content
         tab.removeAllComponents();
         tab.addComponent(new Image(null,
             new ThemeResource("img/planets/"+caption+".jpg")));
     }
 });
-        
+
 // Have some tabs
 String[] tabs = {"Mercury", "Venus", "Earth", "Mars"};
 for (String caption: tabs)
@@ -174,7 +173,7 @@ tabsheet.getTab(tabComponent).setClosable(true);
 
 [[figure.layout.tabsheet.closing]]
 .TabSheet with Closable Tabs
-image::img/tabsheet-tabclose.png[]
+image::img/tabsheet-tabclose.png[width=50%, scaledwidth=70%]
 
 [[layout.tabsheet.closing.handling]]
 === Handling Tab Close Events
@@ -194,7 +193,7 @@ tabsheet.setCloseHandler(new CloseHandler() {
                            Component tabContent) {
         Tab tab = tabsheet.getTab(tabContent);
         Notification.show("Closing " + tab.getCaption());
-        
+
         // We need to close it explicitly in the handler
         tabsheet.removeTab(tab);
     }
@@ -250,6 +249,3 @@ The content area where the tab contents are shown can be styled with
 [literal]#++v-tabsheet-deco++#.
 
 endif::web[]
-
-
-

documentation/themes/themes-valo.asciidoc

@@ -245,11 +245,10 @@ $v-error-indicator-color(default:[literal]#++#ed473b++#):: Color of the componen
 <<dummy/../../../framework/application/application-errors#application.errors.error-indicator,"Error
 Indicator and Message">>.
 
-$v-required-field-indicator-color(default:[literal]#++$v-error-indicator-color++#):: Color of the required indicator in field components, as described in
-<<dummy/../../../framework/components/components-fields#components.fields.field,"Field
-Interface">>.
-
-
+$v-required-field-indicator-color(default:[literal]#++$v-error-indicator-color++#):: Color of the required indicator in field components.
+ifdef::vaadin7[]
+Field components are described in <<dummy/../../../framework/components/components-fields#components.fields.field,"Field Interface">>.
+endif::vaadin7[]
 
 Color specifications for $v-border, $v-bevel, and $v-shadow may use, in addition
 to CSS colors, the following keywords:
@@ -434,7 +433,3 @@ $v-included-components: remove($v-included-components, calendar);
 Note that in this case, you need to give the statement __after__ the
 [literal]#++@import++# statement for the Valo theme, because it overrides a
 variable by using its value that is defined in the theme.
-
-
-
-