added sampler links to layout components in documentaition

Change-Id: I736bfeb7e3d8bf10e08a6058768ea73ff83553bb

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

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

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

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

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

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

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

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

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

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