From 9c6831bab067ccdb47c3063f2e77d3c0e7fe3440 Mon Sep 17 00:00:00 2001
From: Pekka Hyvönen <pekka@vaadin.com>
Date: Mon, 2 Jan 2017 13:40:48 +0200
Subject: Update documentation, BoV chapters 1 - 5.3 (#8085)

* Update documentation chapters 1 - 5.3

Images and diagrams have not been updated,
but unnecessary images have been removed.

* Sync application declarative and architecture sections source code.

Screenshot image is updated to match the source code.

* Old datamodel image is removed.

* Ivy install image is removed.

* Remove unnecessary linking / reference
---
 .../application/application-declarative.asciidoc   | 38 +++++++---------------
 1 file changed, 12 insertions(+), 26 deletions(-)

(limited to 'documentation/application/application-declarative.asciidoc')

diff --git a/documentation/application/application-declarative.asciidoc b/documentation/application/application-declarative.asciidoc
index dd6523ca86..9bffa4b371 100644
--- a/documentation/application/application-declarative.asciidoc
+++ b/documentation/application/application-declarative.asciidoc
@@ -25,7 +25,6 @@ vertical.addComponent(new TextField("Street address"));
 vertical.addComponent(new TextField("Postal code"));
 layout.addComponent(vertical);
 ----
-See the http://demo.vaadin.com/book-examples-vaadin7/book#layout.orderedlayout.basic[on-line example, window="_blank"].
 
 You could define it declaractively with the following equivalent design:
 
@@ -37,9 +36,6 @@ You could define it declaractively with the following equivalent design:
   <vaadin-text-field caption="Postal code"/>
 </vaadin-vertical-layout>
 ----
-ifdef::web[]
-See the http://demo.vaadin.com/book-examples-vaadin7/book#layout.orderedlayout.basic[on-line example, window="_blank"].
-endif::web[]
 
 Declarative designs can be crafted by hand, but are most conveniently created
 with the Vaadin Designer.
@@ -72,12 +68,8 @@ to variables in the Java code, as well as optional attributes.
       <vaadin-label><b>Hello!</b> -
                     How are you?</vaadin-label>
 
-      <vaadin-horizontal-layout size-full :expand>
-       <vaadin-tree _id="mytree" caption="My Tree"
-                    width-auto height-full/>
-       <vaadin-table _id="mytable" caption="My Table"
-                     size-full :expand/>
-      </vaadin-horizontal-layout>
+      <vaadin-grid _id="mygrid" caption="My Grid"
+                    size-full :expand/>
     </vaadin-vertical-layout>
   </body>
 </html>
@@ -248,17 +240,13 @@ component [parameter]#c# is equivalent to calling [methodname]#setExpandRatio(c,
   &lt;!-- Expands to take up all remaining vertical space --&gt;
   &lt;vaadin-horizontal-layout size-full **:expand**&gt;
     &lt;!-- Automatic width - shrinks horizontally --&gt;
-    &lt;vaadin-tree width-auto height-full/&gt;
+    &lt;vaadin-radio-button-group width-auto height-full/&gt;
 
     &lt;!-- Expands horizontally to take remaining space --&gt;
-    &lt;vaadin-table size-full **:expand**/&gt;
+    &lt;vaadin-grid size-full **:expand**/&gt;
   &lt;/vaadin-horizontal-layout&gt;
 &lt;/vaadin-vertical-layout&gt;
 ----
-Again, compare the above declaration to the Java code given in
-<<dummy/../../../framework/application/application-architecture#application.architecture,"Building
-the UI">>.
-
 
 
 [[application.declarative.identifiers]]
@@ -281,7 +269,7 @@ design. This is the recommended way to identifying components.
 
 [source, html]
 ----
-<vaadin-tree _id="mytree" caption="My Tree"/>
+<vaadin-grid _id="mygrid" caption="My Grid"/>
 ----
 
 
@@ -310,26 +298,24 @@ For example, the following class could be used to bind the design given earlier.
 ----
 @DesignRoot
 public class MyViewDesign extends VerticalLayout {
-    Tree mytree;
-    Table mytable;
+    RadioButtonGroup<String> myRadioButtonGroup;
+    Grid<String> myGrid;
 
     public MyViewDesign() {
         Design.read("MyDeclarativeUI.html", this);
 
         // Show some (example) data
-        mytree.setContainerDataSource(
-            TreeExample.createTreeContent());
-        mytable.setContainerDataSource(
-            TableExample.generateContent());
+        myCheckBoxGroup.setItems("Venus", "Earth", "Mars");
+        myGrid.setItems(
+            GridExample.generateContent());
 
         // Some interaction
-        mytree.addItemClickListener(event -> // Java 8
+        myCheckBoxGroup.addValueChangeListener(event ->
             Notification.show("Selected " +
-                event.getItemId()));
+                event.getValue());
     }
 }
 ----
-See the http://demo.vaadin.com/book-examples-vaadin7/book#application.declarative.designroot[on-line example, window="_blank"].
 
 The design root class must match or extend the root element class of the design.
 For example, earlier we had [literal]#++<vaadin-vertical-layout>++# element in the
-- 
cgit v1.2.3