Sampler: Added layout alignment example. For #2432.

svn changeset:6476/svn branch:trunk

8 files changed, 180 insertions, 2 deletions

diff --git a/WebContent/ITMILL/themes/sampler/layouts/styles.css b/WebContent/ITMILL/themes/sampler/layouts/styles.css
new file mode 100644
index 0000000000..b56cdb9d1e
--- /dev/null
+++ b/WebContent/ITMILL/themes/sampler/layouts/styles.css
@@ -0,0 +1,23 @@
+/****************************************************************************
+ * 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 ec764f8763..cd8b0f5c69 100644
--- a/WebContent/ITMILL/themes/sampler/styles.css
+++ b/WebContent/ITMILL/themes/sampler/styles.css
@@ -6,3 +6,4 @@
 
 @import url(prominentprimaryaction/styles.css);
 
+@import url(layouts/styles.css);
diff --git a/src/com/itmill/toolkit/demo/sampler/FeatureSet.java b/src/com/itmill/toolkit/demo/sampler/FeatureSet.java
index 116558c94c..8f666e987a 100644
--- a/src/com/itmill/toolkit/demo/sampler/FeatureSet.java
+++ b/src/com/itmill/toolkit/demo/sampler/FeatureSet.java
@@ -13,6 +13,7 @@ import com.itmill.toolkit.demo.sampler.features.buttons.ButtonSwitch;
 import com.itmill.toolkit.demo.sampler.features.commons.Icons;
 import com.itmill.toolkit.demo.sampler.features.commons.Tooltips;
 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.LayoutSpacing;
 import com.itmill.toolkit.demo.sampler.features.layouts.VerticalLayoutBasic;
 import com.itmill.toolkit.demo.sampler.features.link.LinkCurrentWindow;
@@ -151,6 +152,7 @@ public class FeatureSet extends Feature {
                     new VerticalLayoutBasic(), //
                     new HorizontalLayoutBasic(), //
                     new LayoutSpacing(), //
+                    new LayoutAlignment(), //
             });
         }
     }
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 1a8e7e7f2f..450e28e06d 100644
--- a/src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasic.java
+++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasic.java
@@ -31,7 +31,11 @@ public class HorizontalLayoutBasic extends Feature {
 
     @Override
     public Class[] getRelatedFeatures() {
-        return new Class[] { VerticalLayoutBasic.class, LayoutSpacing.class };
+        return new Class[] {
+                VerticalLayoutBasic.class,
+                LayoutSpacing.class,
+                LayoutAlignment.class,
+                };
     }
 
     @Override
diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignment.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignment.java
new file mode 100644
index 0000000000..749fbb7cb7
--- /dev/null
+++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignment.java
@@ -0,0 +1,56 @@
+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.GridLayout;
+import com.itmill.toolkit.ui.HorizontalLayout;
+import com.itmill.toolkit.ui.VerticalLayout;
+
+public class LayoutAlignment extends Feature {
+
+    @Override
+    public String getName() {
+        return "Layout Alignment";
+    }
+
+    @Override
+    public String getDescription() {
+        return "GridLayout, VerticalLayout, and HorizontalLayout, " +
+        		"which are tabular layouts consisting of cells, " +
+        		"support alignment of components within the layout cells. " +
+        		"The alignment of a component within its respective cell " +
+        		"is set with setComponentAlignment().";
+    }
+
+    @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[] {
+                HorizontalLayoutBasic.class,
+                VerticalLayoutBasic.class };
+    }
+
+    @Override
+    public NamedExternalResource[] getRelatedResources() {
+        return new NamedExternalResource[] {
+                new NamedExternalResource("Reference Manual: Layout Alignment",
+                        "/doc/manual/layout.features.alignment.html"),
+                        };
+    }
+}
diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignment.png b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignment.png
new file mode 100644
index 0000000000..9269aad001
--- /dev/null
+++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignment.png
diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignmentExample.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignmentExample.java
new file mode 100644
index 0000000000..be5fa6aef8
--- /dev/null
+++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignmentExample.java
@@ -0,0 +1,88 @@
+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 {
+
+    @SuppressWarnings("deprecation")
+    public LayoutAlignmentExample() {
+        // Create a grid layout
+        final GridLayout grid = new GridLayout(3, 3);
+
+        // The style allows us to visualize the cell borders in this example.
+        grid.addStyleName("example-alignment");
+
+        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.)
+
+        // 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
+
+        Button topleft = new Button("Top Left");
+        grid.addComponent(topleft, 0, 0);
+        grid.setComponentAlignment(topleft, Alignment.TOP_LEFT);
+        
+        Button topcenter = new Button("Top Center");
+        grid.addComponent(topcenter, 1, 0);
+        grid.setComponentAlignment(topcenter, Alignment.TOP_CENTER);
+
+        Button topright = new Button("Top Right");
+        grid.addComponent(topright, 2, 0);
+        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
+        
+        Button middleleft = new Button("Middle Left");
+        grid.addComponent(middleleft, 0, 1);
+        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));
+
+        Button middleright = new Button("Middle Right");
+        grid.addComponent(middleright, 2, 1);
+        grid.setComponentAlignment(middleright, new Alignment(Bits.ALIGNMENT_VERTICAL_CENTER + Bits.ALIGNMENT_RIGHT));
+
+        // Here we again use constants:
+        
+        Button bottomleft = new Button("Bottom Left");
+        grid.addComponent(bottomleft, 0, 2);
+        grid.setComponentAlignment(bottomleft, Alignment.BOTTOM_LEFT);
+        
+        Button bottomcenter = new Button("Bottom Center");
+        grid.addComponent(bottomcenter, 1, 2);
+        grid.setComponentAlignment(bottomcenter, Alignment.BOTTOM_CENTER);
+
+        Button bottomright = new Button("Bottom Right");
+        grid.addComponent(bottomright, 2, 2);
+        grid.setComponentAlignment(bottomright, Alignment.BOTTOM_RIGHT);
+
+        // Add the layout to the containing layout.
+        addComponent(grid);
+
+        // Align the grid itself within its container layout.
+        setComponentAlignment(grid, Alignment.MIDDLE_CENTER);
+
+    }
+}
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 51b9b221f5..cdbcc2175e 100644
--- a/src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasic.java
+++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasic.java
@@ -37,7 +37,11 @@ public class VerticalLayoutBasic extends Feature {
 
     @Override
     public Class[] getRelatedFeatures() {
-        return new Class[] { HorizontalLayoutBasic.class, LayoutSpacing.class };
+        return new Class[] {
+                HorizontalLayoutBasic.class,
+                LayoutSpacing.class,
+                LayoutAlignment.class,
+                };
     }
 
     @Override