added sampler links to layout components in documentaition

Change-Id: I736bfeb7e3d8bf10e08a6058768ea73ff83553bb

11 files changed, 50 insertions, 2 deletions

diff --git a/documentation/layout/img/live-demo.png b/documentation/layout/img/live-demo.png
new file mode 100644
index 0000000000..e956b5f539
--- /dev/null
+++ b/documentation/layout/img/live-demo.png
diff --git a/documentation/layout/layout-absolutelayout.asciidoc b/documentation/layout/layout-absolutelayout.asciidoc
index 8576cfb09b..4bf49fa001 100644
--- a/documentation/layout/layout-absolutelayout.asciidoc
+++ b/documentation/layout/layout-absolutelayout.asciidoc
@@ -7,6 +7,11 @@ layout: page
 [[layout.absolutelayout]]
 = [classname]#AbsoluteLayout#
 
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/layout/absolute-layout"]
+endif::web[]
+
 [classname]#AbsoluteLayout# allows placing components in arbitrary positions in
 the layout area. The positions are specified in the [methodname]#addComponent()#
 method with horizontal and vertical coordinates relative to an edge of the
diff --git a/documentation/layout/layout-accordion.asciidoc b/documentation/layout/layout-accordion.asciidoc
index 37bbe9e529..3523a68ab6 100644
--- a/documentation/layout/layout-accordion.asciidoc
+++ b/documentation/layout/layout-accordion.asciidoc
@@ -7,6 +7,11 @@ layout: page
 [[layout.accordion]]
 = [classname]#Accordion#
 
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/structure/accordion"]
+endif::web[]
+
 [classname]#Accordion# is a multicomponent container similar to
 [classname]#TabSheet#, except that the "tabs" are arranged vertically. Clicking
 on a tab opens its contained component in the space between the tab and the next
diff --git a/documentation/layout/layout-csslayout.asciidoc b/documentation/layout/layout-csslayout.asciidoc
index 0b60f78245..5600978e06 100644
--- a/documentation/layout/layout-csslayout.asciidoc
+++ b/documentation/layout/layout-csslayout.asciidoc
@@ -7,6 +7,11 @@ layout: page
 [[layout.csslayout]]
 = [classname]#CssLayout#
 
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/layout/css-layout"]
+endif::web[]
+
 [classname]#CssLayout# allows strong control over styling of the components
 contained inside the layout. The components are contained in a simple DOM
 structure consisting of [literal]#++<div>++# elements. By default, the contained
diff --git a/documentation/layout/layout-customlayout.asciidoc b/documentation/layout/layout-customlayout.asciidoc
index e5acff75d1..cbf430b921 100644
--- a/documentation/layout/layout-customlayout.asciidoc
+++ b/documentation/layout/layout-customlayout.asciidoc
@@ -7,6 +7,11 @@ layout: page
 [[layout.customlayout]]
 = Custom Layouts
 
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/layout/custom-layout"]
+endif::web[]
+
 While it is possible to create almost any typical layout with the standard
 layout components, it is sometimes best to separate the layout completely from
 code. With the [classname]#CustomLayout# component, you can write your layout as
diff --git a/documentation/layout/layout-formlayout.asciidoc b/documentation/layout/layout-formlayout.asciidoc
index b22750f2c8..b43329e456 100644
--- a/documentation/layout/layout-formlayout.asciidoc
+++ b/documentation/layout/layout-formlayout.asciidoc
@@ -7,6 +7,11 @@ layout: page
 [[layout.formlayout]]
 = [classname]#FormLayout#
 
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/layout/form-layout"]
+endif::web[]
+
 [classname]#FormLayout# lays the components and their captions out in two
 columns, with optional indicators for required fields and errors that can be
 shown for each field. The field captions can have an icon in addition to the
diff --git a/documentation/layout/layout-gridlayout.asciidoc b/documentation/layout/layout-gridlayout.asciidoc
index 17666d0e8e..4ffabfb318 100644
--- a/documentation/layout/layout-gridlayout.asciidoc
+++ b/documentation/layout/layout-gridlayout.asciidoc
@@ -7,6 +7,11 @@ layout: page
 [[layout.gridlayout]]
 = [classname]#GridLayout#
 
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/layout/grid-layout"]
+endif::web[]
+
 [classname]#GridLayout# container lays components out on a grid, defined by the
 number of columns and rows. The columns and rows of the grid serve as
 coordinates that are used for laying out components on the grid. Each component
diff --git a/documentation/layout/layout-panel.asciidoc b/documentation/layout/layout-panel.asciidoc
index 8d7f3d6f06..5fcac7f384 100644
--- a/documentation/layout/layout-panel.asciidoc
+++ b/documentation/layout/layout-panel.asciidoc
@@ -7,6 +7,11 @@ layout: page
 [[layout.panel]]
 = [classname]#Panel#
 
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/structure/panel"]
+endif::web[]
+
 [classname]#Panel# is a single-component container with a frame around the
 content. It has an optional caption and an icon which are handled by the panel
 itself, not its containing layout. The panel itself does not manage the caption
diff --git a/documentation/layout/layout-splitpanel.asciidoc b/documentation/layout/layout-splitpanel.asciidoc
index 34768d9b70..73b953945f 100644
--- a/documentation/layout/layout-splitpanel.asciidoc
+++ b/documentation/layout/layout-splitpanel.asciidoc
@@ -7,12 +7,15 @@ layout: page
 [[layout.splitpanel]]
 = [classname]#HorizontalSplitPanel# and [classname]#VerticalSplitPanel#
 
-((("[classname]#HorizontalSplitPanel#", id="term.layout.splitpanel.horizontal", range="startofrange")))
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/structure/"]
+endif::web[]
 
+((("[classname]#HorizontalSplitPanel#", id="term.layout.splitpanel.horizontal", range="startofrange")))
 
 ((("[classname]#VerticalSplitPanel#", id="term.layout.splitpanel.vertical", range="startofrange")))
 
-
 [classname]#HorizontalSplitPanel# and [classname]#VerticalSplitPanel# are a
 two-component containers that divide the available space into two areas to
 accomodate the two components. [classname]#HorizontalSplitPanel# makes the split
diff --git a/documentation/layout/layout-sub-window.asciidoc b/documentation/layout/layout-sub-window.asciidoc
index fdff68541e..972cb00ae9 100644
--- a/documentation/layout/layout-sub-window.asciidoc
+++ b/documentation/layout/layout-sub-window.asciidoc
@@ -7,6 +7,11 @@ layout: page
 [[layout.sub-window]]
 = Sub-Windows
 
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/structure/window"]
+endif::web[]
+
 __Sub-windows__ are floating panels within a native browser window. Unlike
 native browser windows, sub-windows are managed by the client-side runtime of
 Vaadin using HTML features. Vaadin allows opening, closing, resizing, maximizing
diff --git a/documentation/layout/layout-tabsheet.asciidoc b/documentation/layout/layout-tabsheet.asciidoc
index 6fa324c4e7..38e6207f36 100644
--- a/documentation/layout/layout-tabsheet.asciidoc
+++ b/documentation/layout/layout-tabsheet.asciidoc
@@ -7,6 +7,11 @@ layout: page
 [[layout.tabsheet]]
 = [classname]#TabSheet#
 
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/structure/tab-sheet"]
+endif::web[]
+
 The [classname]#TabSheet# is a multicomponent container that allows switching
 between the components with "tabs". The tabs are organized as a tab bar at the
 top of the tab sheet. Clicking on a tab opens its contained component in the