Sampler Layouts -section changes. Not complete yet.

svn changeset:6837/svn branch:trunk

17 files changed, 285 insertions, 177 deletions

diff --git a/WebContent/ITMILL/themes/sampler/layouts/gridexample.css b/WebContent/ITMILL/themes/sampler/layouts/gridexample.css
new file mode 100644
index 0000000000..5bb9df9ffd
--- /dev/null
+++ b/WebContent/ITMILL/themes/sampler/layouts/gridexample.css
@@ -0,0 +1,13 @@
+.i-gridlayout-gridexample .i-gridlayout-spacing-on {
+	/* adjust spacing size */
+	padding: 1px;
+}
+
+/* visualize the grid cells */
+.i-gridlayout-gridexample div {
+	background-color: #fff;
+}
+
+.i-gridlayout-gridexample div div div {
+	background-color: #eee;
+}
\ No newline at end of file
diff --git a/WebContent/ITMILL/themes/sampler/layouts/marginexample.css b/WebContent/ITMILL/themes/sampler/layouts/marginexample.css
new file mode 100644
index 0000000000..bcf13b5732
--- /dev/null
+++ b/WebContent/ITMILL/themes/sampler/layouts/marginexample.css
@@ -0,0 +1,9 @@
+.i-verticallayout-marginexample .i-verticallayout-margin-right {
+	/* increase the right margin */
+	padding-right: 100px;
+}
+
+.i-verticallayout-marginexample {
+	/* background for the layout, for clarity */
+	background-color: #ccc;
+}
\ No newline at end of file
diff --git a/WebContent/ITMILL/themes/sampler/layouts/spacingexample.css b/WebContent/ITMILL/themes/sampler/layouts/spacingexample.css
new file mode 100644
index 0000000000..8447c89f44
--- /dev/null
+++ b/WebContent/ITMILL/themes/sampler/layouts/spacingexample.css
@@ -0,0 +1,4 @@
+.i-gridlayout-spacingexample {
+	/* background for the layout, for clarity */
+	background-color: #ccc;
+}
\ No newline at end of file
diff --git a/WebContent/ITMILL/themes/sampler/layouts/styles.css b/WebContent/ITMILL/themes/sampler/layouts/styles.css
deleted file mode 100644
index b56cdb9d1e..0000000000
--- a/WebContent/ITMILL/themes/sampler/layouts/styles.css
+++ /dev/null
@@ -1,23 +0,0 @@
-/****************************************************************************
- * sampler/layouts/styles.css
- *
- * Styles for the layout examples in Sampler.
- *
- ****************************************************************************/
-
-/****************************************************************************
- * Layout alignment example
- ****************************************************************************/
-
-.i-gridlayout-example-alignment {
-	background: blue;
-}
-
-.i-gridlayout-example-alignment .i-gridlayout-margin {
-    padding: 3px;
-}
-
-div.i-gridlayout-example-alignment > div.i-gridlayout-margin > div > div {
-	padding: 3px;
-    background: yellow;
-}
diff --git a/WebContent/ITMILL/themes/sampler/styles.css b/WebContent/ITMILL/themes/sampler/styles.css
index f49de71bda..bcd1cfab44 100644
--- a/WebContent/ITMILL/themes/sampler/styles.css
+++ b/WebContent/ITMILL/themes/sampler/styles.css
@@ -6,6 +6,10 @@
 
 @import url(prominentprimaryaction/styles.css);
 
-@import url(layouts/styles.css);
+@import url(layouts/marginexample.css);
 
-@import url(table/styles.css);
+@import url(layouts/spacingexample.css);
+
+@import url(layouts/gridexample.css);
+
+@import url(table/styles.css);
\ No newline at end of file
diff --git a/src/com/itmill/toolkit/demo/sampler/FeatureSet.java b/src/com/itmill/toolkit/demo/sampler/FeatureSet.java
index f344e94acb..bce8ea55c8 100644
--- a/src/com/itmill/toolkit/demo/sampler/FeatureSet.java
+++ b/src/com/itmill/toolkit/demo/sampler/FeatureSet.java
@@ -28,6 +28,7 @@ import com.itmill.toolkit.demo.sampler.features.layouts.ExpandingComponent;
 import com.itmill.toolkit.demo.sampler.features.layouts.GridLayoutBasic;
 import com.itmill.toolkit.demo.sampler.features.layouts.HorizontalLayoutBasic;
 import com.itmill.toolkit.demo.sampler.features.layouts.LayoutAlignment;
+import com.itmill.toolkit.demo.sampler.features.layouts.LayoutMargin;
 import com.itmill.toolkit.demo.sampler.features.layouts.LayoutSpacing;
 import com.itmill.toolkit.demo.sampler.features.layouts.SplitPanelBasic;
 import com.itmill.toolkit.demo.sampler.features.layouts.VerticalLayoutBasic;
@@ -225,10 +226,12 @@ public class FeatureSet extends Feature {
         public Layouts() {
             super("Layouts", new Feature[] {
             //
+                    new LayoutMargin(), //
+                    new LayoutSpacing(), //
                     new VerticalLayoutBasic(), //
                     new HorizontalLayoutBasic(), //
                     new GridLayoutBasic(), //
-                    new LayoutSpacing(), //
+
                     new LayoutAlignment(), //
                     new ExpandingComponent(), //
                     new SplitPanelBasic(), //
diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/GridLayoutBasic.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/GridLayoutBasic.java
index 72a79b1c42..6010e26c67 100644
--- a/src/com/itmill/toolkit/demo/sampler/features/layouts/GridLayoutBasic.java
+++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/GridLayoutBasic.java
@@ -9,14 +9,14 @@ public class GridLayoutBasic extends Feature {
 

     @Override

     public String getName() {

-        return "Grid Layout";

+        return "Grid layout";

     }

 

     @Override

     public String getDescription() {

-        return "GridLayout allow you to create a grid of components."

+        return "The GridLayout allows you to create a grid of components."

                 + " The grid may have an arbitrary number of cells in each direction"

-                + " and you can easily set components to fill multiple cells.";

+                + " and you can easily set components to fill multiple cells.<br/>It supports all basic features, plus some advanced stuff - including spacing, margin, alignment, and expand ratios.";

     }

 

     @Override

@@ -27,11 +27,14 @@ public class GridLayoutBasic extends Feature {
     @Override

     public Class[] getRelatedFeatures() {

         return new Class[] { HorizontalLayoutBasic.class,

-                VerticalLayoutBasic.class, LayoutSpacing.class };

+                VerticalLayoutBasic.class, LayoutSpacing.class,

+                LayoutMargin.class };

     }

 

     @Override

     public NamedExternalResource[] getRelatedResources() {

-        return null;

+        return new NamedExternalResource[] { new NamedExternalResource(

+                "CSS for the layout", getThemeBase()

+                        + "layouts/gridexample.css") };

     }

 }

diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/GridLayoutBasicExample.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/GridLayoutBasicExample.java
index 7650b8fe07..b13f967005 100644
--- a/src/com/itmill/toolkit/demo/sampler/features/layouts/GridLayoutBasicExample.java
+++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/GridLayoutBasicExample.java
@@ -11,9 +11,10 @@ public class GridLayoutBasicExample extends VerticalLayout {
     public GridLayoutBasicExample() {

         // Create a grid layout

         final GridLayout grid = new GridLayout(3, 3);

+        grid.setSpacing(true);

 

         // The style allows us to visualize the cell borders in this example.

-        grid.addStyleName("example-alignment");

+        grid.addStyleName("gridexample");

 

         grid.setWidth(400, Sizeable.UNITS_PIXELS);

         grid.setHeight(400, Sizeable.UNITS_PIXELS);

diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasic.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasic.java
index 450e28e06d..4e3e88c8b2 100644
--- a/src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasic.java
+++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasic.java
@@ -4,45 +4,34 @@ import com.itmill.toolkit.demo.sampler.APIResource;
 import com.itmill.toolkit.demo.sampler.Feature;
 import com.itmill.toolkit.demo.sampler.NamedExternalResource;
 import com.itmill.toolkit.ui.HorizontalLayout;
-import com.itmill.toolkit.ui.VerticalLayout;
 
 public class HorizontalLayoutBasic extends Feature {
 
     @Override
     public String getName() {
-        return "Horizontal Layout";
+        return "Horizontal layout";
     }
 
     @Override
     public String getDescription() {
-        return "Horizontal and vertical layouts are the foremost " +
-        		"basic layouts of all applications. You can add spacing " +
-        		"between the elements, set the alignment of the components " +
-        		"inside the cells of the layouts, and set one or more " +
-        		"components as expanding so that they fill the available space " +
-        		"according to the specified expand ratio.";
+        return "The HorizontalLayout arranges components horizontally.<br/>It supports all basic features, plus some advanced stuff - including spacing, margin, alignment, and expand ratios.";
     }
 
     @Override
     public APIResource[] getRelatedAPI() {
-        return new APIResource[] {
-                new APIResource(HorizontalLayout.class) };
+        return new APIResource[] { new APIResource(HorizontalLayout.class) };
     }
 
     @Override
     public Class[] getRelatedFeatures() {
-        return new Class[] {
-                VerticalLayoutBasic.class,
-                LayoutSpacing.class,
-                LayoutAlignment.class,
-                };
+        return new Class[] { VerticalLayoutBasic.class, LayoutSpacing.class,
+                LayoutAlignment.class, };
     }
 
     @Override
     public NamedExternalResource[] getRelatedResources() {
-        return new NamedExternalResource[] {
-                new NamedExternalResource("Reference Manual: HorizontalLayout",
-                        "/doc/manual/layout.components.orderedlayout.html"),
-                        };
+        return new NamedExternalResource[] { new NamedExternalResource(
+                "Reference Manual: HorizontalLayout",
+                "/doc/manual/layout.components.orderedlayout.html"), };
     }
 }
diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasicExample.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasicExample.java
index 24a07187f7..01186d2010 100644
--- a/src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasicExample.java
+++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasicExample.java
@@ -1,24 +1,48 @@
 package com.itmill.toolkit.demo.sampler.features.layouts;
 
-import com.itmill.toolkit.ui.Button;
-import com.itmill.toolkit.ui.CheckBox;
 import com.itmill.toolkit.ui.HorizontalLayout;
+import com.itmill.toolkit.ui.Label;
 import com.itmill.toolkit.ui.TextField;
-import com.itmill.toolkit.ui.VerticalLayout;
-import com.itmill.toolkit.ui.Button.ClickEvent;
 
-public class HorizontalLayoutBasicExample extends VerticalLayout {
+public class HorizontalLayoutBasicExample extends HorizontalLayout {
 
     public HorizontalLayoutBasicExample() {
-        // Create a horizontal layout.
-        final HorizontalLayout horizontal = new HorizontalLayout();
-        
-        // Populate the layout with components.
-        horizontal.addComponent(new TextField("Name"));
-        horizontal.addComponent(new TextField("Street address"));
-        horizontal.addComponent(new TextField("Postal code"));
-        
-        // Add the layout to the containing layout.
-        addComponent(horizontal);
+        // this is a HorizontalLayout
+
+        // First TextField
+        TextField tf = new TextField();
+        tf.setWidth("70px");
+        addComponent(tf);
+
+        // A dash
+        Label dash = new Label("-");
+        addComponent(dash);
+        setComponentAlignment(dash, "middle");
+
+        // Second TextField
+        tf = new TextField();
+        tf.setWidth("70px");
+        addComponent(tf);
+
+        // Another dash
+        dash = new Label("-");
+        addComponent(dash);
+        setComponentAlignment(dash, "middle");
+
+        // Third TextField
+        tf = new TextField();
+        tf.setWidth("70px");
+        addComponent(tf);
+
+        // Yet another dash
+        dash = new Label("-");
+        addComponent(dash);
+        setComponentAlignment(dash, "middle");
+
+        // Forth and last TextField
+        tf = new TextField();
+        tf.setWidth("70px");
+        addComponent(tf);
+
     }
 }
diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignmentExample.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignmentExample.java
index b45d2ad608..8f49f254e4 100644
--- a/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignmentExample.java
+++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignmentExample.java
@@ -1,16 +1,9 @@
 package com.itmill.toolkit.demo.sampler.features.layouts;
 
-import java.util.Date;
-
-import com.itmill.toolkit.terminal.Sizeable;
 import com.itmill.toolkit.terminal.gwt.client.ui.AlignmentInfo.Bits;
-import com.itmill.toolkit.ui.AbstractComponent;
 import com.itmill.toolkit.ui.Alignment;
 import com.itmill.toolkit.ui.Button;
-import com.itmill.toolkit.ui.CheckBox;
 import com.itmill.toolkit.ui.GridLayout;
-import com.itmill.toolkit.ui.PopupDateField;
-import com.itmill.toolkit.ui.TextField;
 import com.itmill.toolkit.ui.VerticalLayout;
 
 public class LayoutAlignmentExample extends VerticalLayout {
@@ -18,65 +11,72 @@ public class LayoutAlignmentExample extends VerticalLayout {
     @SuppressWarnings("deprecation")
     public LayoutAlignmentExample() {
         // Create a grid layout
-        final GridLayout grid = new GridLayout(3, 3);
+        final GridLayout grid = new GridLayout(1, 9);
+        grid.setSpacing(true);
 
         // The style allows us to visualize the cell borders in this example.
-        grid.addStyleName("example-alignment");
+        grid.addStyleName("gridexample");
+
+        grid.setWidth("300px");
+        grid.setHeight("500px");
 
-        grid.setWidth(400, Sizeable.UNITS_PIXELS);
-        grid.setHeight(400, Sizeable.UNITS_PIXELS);
-        
-        ///////////////////////////////////////////////////////////
         // Put a component in each cell with respective alignment.
-        // (We use different ways to set the alignment.)
+        // We'll use different ways to set the alignment: constants, bitmasks,
+        // and string-shorthand.
 
         // Here we use the shorthand constants to set the alignment:
-        //   Alignment.TOP_LEFT,    Alignment.TOP_CENTER,    Alignment.TOP_RIGHT
-        //   Alignment.MIDDLE_LEFT, Alignment.MIDDLE_CENTER, Alignment.MIDDLE_RIGHT
-        //   Alignment.BOTTOM_LEFT, Alignment.BOTTOM_CENTER, Alignment.BOTTOM_RIGHT
+        // Alignment.TOP_LEFT, Alignment.TOP_CENTER, Alignment.TOP_RIGHT
+        // Alignment.MIDDLE_LEFT, Alignment.MIDDLE_CENTER,
+        // Alignment.MIDDLE_RIGHT
+        // Alignment.BOTTOM_LEFT, Alignment.BOTTOM_CENTER,
+        // Alignment.BOTTOM_RIGHT
 
         Button topleft = new Button("Top Left");
-        grid.addComponent(topleft, 0, 0);
+        grid.addComponent(topleft);
         grid.setComponentAlignment(topleft, Alignment.TOP_LEFT);
-        
+
         Button topcenter = new Button("Top Center");
-        grid.addComponent(topcenter, 1, 0);
+        grid.addComponent(topcenter);
         grid.setComponentAlignment(topcenter, Alignment.TOP_CENTER);
 
         Button topright = new Button("Top Right");
-        grid.addComponent(topright, 2, 0);
+        grid.addComponent(topright);
         grid.setComponentAlignment(topright, Alignment.TOP_RIGHT);
-        
+
         // Here we use bit additions to set the alignment:
-        //   Bits.ALIGNMENT_LEFT, Bits.ALIGNMENT_RIGHT
-        //   Bits.ALIGNMENT_TOP, Bits.ALIGNMENT_BOTTOM
-        //   Bits.ALIGNMENT_VERTICAL_CENTER, Bits.ALIGNMENT_HORIZONTAL_CENTER
-        
+        // Bits.ALIGNMENT_LEFT, Bits.ALIGNMENT_RIGHT
+        // Bits.ALIGNMENT_TOP, Bits.ALIGNMENT_BOTTOM
+        // Bits.ALIGNMENT_VERTICAL_CENTER, Bits.ALIGNMENT_HORIZONTAL_CENTER
+
         Button middleleft = new Button("Middle Left");
-        grid.addComponent(middleleft, 0, 1);
-        grid.setComponentAlignment(middleleft, new Alignment(Bits.ALIGNMENT_VERTICAL_CENTER | Bits.ALIGNMENT_LEFT));
-        
+        grid.addComponent(middleleft);
+        grid.setComponentAlignment(middleleft, new Alignment(
+                Bits.ALIGNMENT_VERTICAL_CENTER | Bits.ALIGNMENT_LEFT));
+
         Button middlecenter = new Button("Middle Center");
-        grid.addComponent(middlecenter, 1, 1);
-        grid.setComponentAlignment(middlecenter, new Alignment(Bits.ALIGNMENT_VERTICAL_CENTER | Bits.ALIGNMENT_HORIZONTAL_CENTER));
+        grid.addComponent(middlecenter);
+        grid.setComponentAlignment(middlecenter, new Alignment(
+                Bits.ALIGNMENT_VERTICAL_CENTER
+                        | Bits.ALIGNMENT_HORIZONTAL_CENTER));
 
         Button middleright = new Button("Middle Right");
-        grid.addComponent(middleright, 2, 1);
-        grid.setComponentAlignment(middleright, new Alignment(Bits.ALIGNMENT_VERTICAL_CENTER | Bits.ALIGNMENT_RIGHT));
+        grid.addComponent(middleright);
+        grid.setComponentAlignment(middleright, new Alignment(
+                Bits.ALIGNMENT_VERTICAL_CENTER | Bits.ALIGNMENT_RIGHT));
+
+        // Here we'll use the convenient string-shorthand:
 
-        // Here we again use constants:
-        
         Button bottomleft = new Button("Bottom Left");
-        grid.addComponent(bottomleft, 0, 2);
-        grid.setComponentAlignment(bottomleft, Alignment.BOTTOM_LEFT);
-        
+        grid.addComponent(bottomleft);
+        grid.setComponentAlignment(bottomleft, "bottom left");
+
         Button bottomcenter = new Button("Bottom Center");
-        grid.addComponent(bottomcenter, 1, 2);
-        grid.setComponentAlignment(bottomcenter, Alignment.BOTTOM_CENTER);
+        grid.addComponent(bottomcenter);
+        grid.setComponentAlignment(bottomcenter, "bottom center");
 
         Button bottomright = new Button("Bottom Right");
-        grid.addComponent(bottomright, 2, 2);
-        grid.setComponentAlignment(bottomright, Alignment.BOTTOM_RIGHT);
+        grid.addComponent(bottomright);
+        grid.setComponentAlignment(bottomright, "bottom right");
 
         // Add the layout to the containing layout.
         addComponent(grid);
diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutMargin.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutMargin.java
new file mode 100644
index 0000000000..526046b292
--- /dev/null
+++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutMargin.java
@@ -0,0 +1,47 @@
+package com.itmill.toolkit.demo.sampler.features.layouts;
+
+import com.itmill.toolkit.demo.sampler.APIResource;
+import com.itmill.toolkit.demo.sampler.Feature;
+import com.itmill.toolkit.demo.sampler.NamedExternalResource;
+import com.itmill.toolkit.ui.GridLayout;
+import com.itmill.toolkit.ui.HorizontalLayout;
+import com.itmill.toolkit.ui.VerticalLayout;
+
+public class LayoutMargin extends Feature {
+
+    @Override
+    public String getName() {
+        return "Layout margin";
+    }
+
+    @Override
+    public String getDescription() {
+        return "Layouts can have margins on any of the sides. The actual size"
+                + " of the margin is determined by the theme, and can be"
+                + " customized using CSS - in this example, the right margin"
+                + " size is increased.<br/>Note that <i>margin</i>"
+                + " is the space around the layout as a whole, and"
+                + " <i>spacing</i> is the space between the component within"
+                + " the layout.";
+    }
+
+    @Override
+    public APIResource[] getRelatedAPI() {
+        return new APIResource[] { new APIResource(VerticalLayout.class),
+                new APIResource(HorizontalLayout.class),
+                new APIResource(GridLayout.class), };
+    }
+
+    @Override
+    public Class[] getRelatedFeatures() {
+        return new Class[] { LayoutSpacing.class, HorizontalLayoutBasic.class,
+                VerticalLayoutBasic.class, GridLayoutBasic.class };
+    }
+
+    @Override
+    public NamedExternalResource[] getRelatedResources() {
+        return new NamedExternalResource[] { new NamedExternalResource(
+                "CSS for the layout", getThemeBase()
+                        + "layouts/marginexample.css") };
+    }
+}
diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutMarginExample.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutMarginExample.java
new file mode 100644
index 0000000000..2f4d8936b5
--- /dev/null
+++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutMarginExample.java
@@ -0,0 +1,58 @@
+package com.itmill.toolkit.demo.sampler.features.layouts;
+
+import com.itmill.toolkit.ui.Button;
+import com.itmill.toolkit.ui.GridLayout;
+import com.itmill.toolkit.ui.Label;
+import com.itmill.toolkit.ui.VerticalLayout;
+import com.itmill.toolkit.ui.Button.ClickEvent;
+
+public class LayoutMarginExample extends GridLayout implements
+        Button.ClickListener {
+
+    VerticalLayout marginLayout;
+    Button topMargin;
+    Button rightMargin;
+    Button bottomMargin;
+    Button leftMargin;
+
+    public LayoutMarginExample() {
+        super(3, 3);
+
+        space();
+        topMargin = new Button("Top margin", this);
+        topMargin.setSwitchMode(true);
+        addComponent(topMargin);
+        setComponentAlignment(topMargin, "center");
+
+        space();
+        leftMargin = new Button("Left margin", this);
+        leftMargin.setSwitchMode(true);
+        addComponent(leftMargin);
+        setComponentAlignment(leftMargin, "middle");
+
+        marginLayout = new VerticalLayout();
+        marginLayout.setStyleName("marginexample");
+        marginLayout.setSizeUndefined();
+        addComponent(marginLayout);
+        marginLayout.addComponent(new Label("Margins all around?"));
+
+        rightMargin = new Button("Right margin", this);
+        rightMargin.setSwitchMode(true);
+        addComponent(rightMargin);
+        setComponentAlignment(rightMargin, "middle");
+
+        space();
+        bottomMargin = new Button("Bottom margin", this);
+        bottomMargin.setSwitchMode(true);
+        addComponent(bottomMargin);
+        setComponentAlignment(bottomMargin, "center");
+
+    }
+
+    public void buttonClick(ClickEvent event) {
+        marginLayout.setMargin(topMargin.booleanValue(), rightMargin
+                .booleanValue(), bottomMargin.booleanValue(), leftMargin
+                .booleanValue());
+
+    }
+}
diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacing.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacing.java
index ae66479a18..2d1d7ce39a 100644
--- a/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacing.java
+++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacing.java
@@ -16,32 +16,30 @@ public class LayoutSpacing extends Feature {
 
     @Override
     public String getDescription() {
-        return "Layouts do not have spacing between the cells by default. " +
-        		"The setSpacing() method turns spacing on. You can " +
-        		"customize the amount of spacing in a theme.";
+        return "Spacing between components can be enabled or disabled."
+                + " The actual size of the spacing is determined by the theme,"
+                + " and can be customized with CSS.<br/>Note that <i>spacing</i>"
+                + " is the space between components within the layout, and"
+                + " <i>margin</i> is the space around the layout as a whole.";
     }
 
     @Override
     public APIResource[] getRelatedAPI() {
-        return new APIResource[] {
-                new APIResource(VerticalLayout.class),
+        return new APIResource[] { new APIResource(VerticalLayout.class),
                 new APIResource(HorizontalLayout.class),
-                new APIResource(GridLayout.class),
-                };
+                new APIResource(GridLayout.class) };
     }
 
     @Override
     public Class[] getRelatedFeatures() {
-        return new Class[] {
-                HorizontalLayoutBasic.class,
-                VerticalLayoutBasic.class };
+        return new Class[] { LayoutMargin.class, HorizontalLayoutBasic.class,
+                VerticalLayoutBasic.class, GridLayoutBasic.class };
     }
 
     @Override
     public NamedExternalResource[] getRelatedResources() {
-        return new NamedExternalResource[] {
-                new NamedExternalResource("Reference Manual: Spacing",
-                        "/doc/manual/layout.settings.spacing.html"),
-                        };
+        return new NamedExternalResource[] { new NamedExternalResource(
+                "Reference Manual: Spacing",
+                "/doc/manual/layout.settings.spacing.html"), };
     }
 }
diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacingExample.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacingExample.java
index d070029842..b2d1126e3b 100644
--- a/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacingExample.java
+++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacingExample.java
@@ -2,37 +2,37 @@ package com.itmill.toolkit.demo.sampler.features.layouts;
 
 import com.itmill.toolkit.ui.Button;
 import com.itmill.toolkit.ui.CheckBox;
-import com.itmill.toolkit.ui.HorizontalLayout;
+import com.itmill.toolkit.ui.GridLayout;
 import com.itmill.toolkit.ui.VerticalLayout;
 import com.itmill.toolkit.ui.Button.ClickEvent;
 
 public class LayoutSpacingExample extends VerticalLayout {
 
     public LayoutSpacingExample() {
-        // Create a horizontal layout.
-        final HorizontalLayout horizontal = new HorizontalLayout();
+        // Create a grid layout.
+        final GridLayout grid = new GridLayout(3, 3);
+
+        // Add the layout to the containing layout.
+        addComponent(grid);
 
         // Add a style to allow customization of the layout.
-        horizontal.addStyleName("spacingexample");
+        grid.addStyleName("spacingexample");
 
         // Populate the layout with components.
-        horizontal.addComponent(new Button("Component 1"));
-        horizontal.addComponent(new Button("Component 2"));
-        horizontal.addComponent(new Button("Component 3"));
-
-        // Add the layout to the containing layout.
-        addComponent(horizontal);
+        for (int i = 0; i < 9; i++) {
+            grid.addComponent(new Button("Component " + (i + 1)));
+        }
 
         // CheckBox for toggling spacing on and off
-        final CheckBox spacing = new CheckBox(
-                "Click here to enable/disable spacing");
+        final CheckBox spacing = new CheckBox("Spacing enabled");
+        spacing.setImmediate(true);
         spacing.addListener(new Button.ClickListener() {
             public void buttonClick(ClickEvent event) {
-                horizontal.setSpacing(spacing.booleanValue());
+                grid.setSpacing(spacing.booleanValue());
             }
         });
-        spacing.setImmediate(true);
         addComponent(spacing);
-        setSpacing(true);
+
+        setSpacing(true); // enable spacing for the example itself
     }
 }
diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasic.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasic.java
index cdbcc2175e..4035eeae78 100644
--- a/src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasic.java
+++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasic.java
@@ -2,53 +2,38 @@ package com.itmill.toolkit.demo.sampler.features.layouts;
 
 import com.itmill.toolkit.demo.sampler.APIResource;
 import com.itmill.toolkit.demo.sampler.Feature;
-import com.itmill.toolkit.demo.sampler.FeatureSet;
 import com.itmill.toolkit.demo.sampler.NamedExternalResource;
-import com.itmill.toolkit.demo.sampler.features.blueprints.ProminentPrimaryAction;
-import com.itmill.toolkit.demo.sampler.features.buttons.ButtonPush;
-import com.itmill.toolkit.demo.sampler.features.buttons.ButtonSwitch;
-import com.itmill.toolkit.demo.sampler.features.link.LinkCurrentWindow;
-import com.itmill.toolkit.demo.sampler.features.link.LinkNoDecorations;
-import com.itmill.toolkit.demo.sampler.features.link.LinkSizedWindow;
 import com.itmill.toolkit.ui.VerticalLayout;
 
 public class VerticalLayoutBasic extends Feature {
 
     @Override
     public String getName() {
-        return "Vertical Layout";
+        return "Vertical layout";
     }
 
     @Override
     public String getDescription() {
-        return "Vertical and horizontal layouts are the foremost " +
-        		"basic layout of all applications. You can add spacing " +
-        		"between the elements, set the alignment of the components " +
-        		"inside the cells of the layouts, and set one or more " +
-        		"components as expanding so that they fill the available space " +
-        		"according to the specified expand ratio.";
+        return "The VerticalLayout arranges components vertically. "
+                + " It is 100% wide by default, which is nice in many cases,"
+                + " but something to be aware of if trouble arises.<br/>It supports all basic features, plus some advanced stuff - including spacing, margin, alignment, and expand ratios.";
     }
 
     @Override
     public APIResource[] getRelatedAPI() {
-        return new APIResource[] {
-                new APIResource(VerticalLayout.class)};
+        return new APIResource[] { new APIResource(VerticalLayout.class) };
     }
 
     @Override
     public Class[] getRelatedFeatures() {
-        return new Class[] {
-                HorizontalLayoutBasic.class,
-                LayoutSpacing.class,
-                LayoutAlignment.class,
-                };
+        return new Class[] { HorizontalLayoutBasic.class, LayoutSpacing.class,
+                LayoutAlignment.class, };
     }
 
     @Override
     public NamedExternalResource[] getRelatedResources() {
-        return new NamedExternalResource[] {
-                new NamedExternalResource("Reference Manual: VerticalLayout",
-                        "/doc/manual/layout.components.orderedlayout.html"),
-                        };
+        return new NamedExternalResource[] { new NamedExternalResource(
+                "Reference Manual: VerticalLayout",
+                "/doc/manual/layout.components.orderedlayout.html"), };
     }
 }
diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasicExample.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasicExample.java
index 85d48455e3..c7afc7e3b6 100644
--- a/src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasicExample.java
+++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasicExample.java
@@ -1,25 +1,18 @@
 package com.itmill.toolkit.demo.sampler.features.layouts;
 
-import java.util.Date;
-
-import com.itmill.toolkit.ui.CheckBox;
-import com.itmill.toolkit.ui.PopupDateField;
 import com.itmill.toolkit.ui.TextField;
 import com.itmill.toolkit.ui.VerticalLayout;
 
 public class VerticalLayoutBasicExample extends VerticalLayout {
 
-    @SuppressWarnings("deprecation")
     public VerticalLayoutBasicExample() {
-        // Create a vertical layout.
-        final VerticalLayout vertical = new VerticalLayout();
-        
-        // Populate the layout with components.
-        vertical.addComponent(new TextField("Name"));
-        vertical.addComponent(new PopupDateField("Registration date", new Date()));
-        vertical.addComponent(new CheckBox("Registration confirmed"));
-        
-        // Add the layout to the containing layout.
-        addComponent(vertical);
+        // this is a VerticalLayout
+        // let's add some components
+        for (int i = 0; i < 5; i++) {
+            TextField tf = new TextField("Row " + (i + 1));
+            tf.setWidth("300px");
+            // Add the component to the VerticalLayout
+            addComponent(tf);
+        }
     }
 }