From cb42c868f091507fad4a0700412483cdcf545bb6 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Marko=20Gr=C3=B6nroos?= <magi@iki.fi>
Date: Wed, 7 Jan 2009 18:15:16 +0000
Subject: [PATCH] Added some layout examples to Sampler.

svn changeset:6438/svn branch:trunk
---
 .../toolkit/demo/sampler/FeatureSet.java      |  16 +++++-
 .../layouts/HorizontalLayoutBasic.java        |  44 +++++++++++++++
 .../layouts/HorizontalLayoutBasic.png         | Bin 0 -> 1899 bytes
 .../layouts/HorizontalLayoutBasicExample.java |  24 +++++++++
 .../features/layouts/LayoutSpacing.java       |  47 ++++++++++++++++
 .../features/layouts/LayoutSpacing.png        | Bin 0 -> 3653 bytes
 .../layouts/LayoutSpacingExample.java         |  38 +++++++++++++
 .../features/layouts/VerticalLayoutBasic.java |  50 ++++++++++++++++++
 .../features/layouts/VerticalLayoutBasic.png  | Bin 0 -> 4420 bytes
 .../layouts/VerticalLayoutBasicExample.java   |  25 +++++++++
 10 files changed, 243 insertions(+), 1 deletion(-)
 create mode 100644 src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasic.java
 create mode 100644 src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasic.png
 create mode 100644 src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasicExample.java
 create mode 100644 src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacing.java
 create mode 100644 src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacing.png
 create mode 100644 src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacingExample.java
 create mode 100644 src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasic.java
 create mode 100644 src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasic.png
 create mode 100644 src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasicExample.java

diff --git a/src/com/itmill/toolkit/demo/sampler/FeatureSet.java b/src/com/itmill/toolkit/demo/sampler/FeatureSet.java
index 5271ffba52..b24a23e648 100644
--- a/src/com/itmill/toolkit/demo/sampler/FeatureSet.java
+++ b/src/com/itmill/toolkit/demo/sampler/FeatureSet.java
@@ -12,6 +12,9 @@ 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.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.LayoutSpacing;
+import com.itmill.toolkit.demo.sampler.features.layouts.VerticalLayoutBasic;
 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;
@@ -67,6 +70,7 @@ public class FeatureSet extends Feature {
                     new Links(), //
                     new Notifications(), //
                     new Selects(), //
+                    new Layouts(), //
             });
         }
     }
@@ -124,13 +128,23 @@ public class FeatureSet extends Feature {
     public static class Selects extends FeatureSet {
         public Selects() {
             super("Selects", new Feature[] {
-            //
+                    //
                     new ListSelectSingle(), //  
                     new ListSelectMultiple(), //
                     new TwinColumnSelect(), //
                     new NativeSelection(), //
                     new ComboBoxPlain(), //
 
+            }); 
+        }   
+    }
+
+    public static class Layouts extends FeatureSet {
+        public Layouts() {
+            super("Layouts", new Feature[] {
+                    new VerticalLayoutBasic(), //
+                    new HorizontalLayoutBasic(), //
+                    new LayoutSpacing(), //
             });
         }
     }
diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasic.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasic.java
new file mode 100644
index 0000000000..1a8e7e7f2f
--- /dev/null
+++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasic.java
@@ -0,0 +1,44 @@
+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.HorizontalLayout;
+import com.itmill.toolkit.ui.VerticalLayout;
+
+public class HorizontalLayoutBasic extends Feature {
+
+    @Override
+    public String getName() {
+        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.";
+    }
+
+    @Override
+    public APIResource[] getRelatedAPI() {
+        return new APIResource[] {
+                new APIResource(HorizontalLayout.class) };
+    }
+
+    @Override
+    public Class[] getRelatedFeatures() {
+        return new Class[] { VerticalLayoutBasic.class, LayoutSpacing.class };
+    }
+
+    @Override
+    public NamedExternalResource[] getRelatedResources() {
+        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/HorizontalLayoutBasic.png b/src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasic.png
new file mode 100644
index 0000000000000000000000000000000000000000..c80c8c173ef3bbd8b39d1268cc1f00c712d389b7
GIT binary patch
literal 1899
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
OC}3t}VOW0M>B+yaotc~f

literal 0
HcmV?d00001

diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasicExample.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasicExample.java
new file mode 100644
index 0000000000..24a07187f7
--- /dev/null
+++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasicExample.java
@@ -0,0 +1,24 @@
+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.TextField;
+import com.itmill.toolkit.ui.VerticalLayout;
+import com.itmill.toolkit.ui.Button.ClickEvent;
+
+public class HorizontalLayoutBasicExample extends VerticalLayout {
+
+    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);
+    }
+}
diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacing.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacing.java
new file mode 100644
index 0000000000..ae66479a18
--- /dev/null
+++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacing.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 LayoutSpacing extends Feature {
+
+    @Override
+    public String getName() {
+        return "Layout Spacing";
+    }
+
+    @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.";
+    }
+
+    @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: Spacing",
+                        "/doc/manual/layout.settings.spacing.html"),
+                        };
+    }
+}
diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacing.png b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacing.png
new file mode 100644
index 0000000000000000000000000000000000000000..f96e15a9ca19bd47aab87d7c48e3c0e5eeb8e8b8
GIT binary patch
literal 3653
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
NSwTa-M)qUazX3Cf{8s<~

literal 0
HcmV?d00001

diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacingExample.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacingExample.java
new file mode 100644
index 0000000000..e69b5d39ca
--- /dev/null
+++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacingExample.java
@@ -0,0 +1,38 @@
+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.TextField;
+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();
+        
+        // Add a style to allow customization of the layout.
+        horizontal.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);
+
+        // CheckBox for toggling spacing on and off
+        final CheckBox spacing = new CheckBox("Click here to enable/disable spacing");
+        spacing.addListener(new Button.ClickListener() {
+            public void buttonClick(ClickEvent event) {
+                horizontal.setSpacing(((Boolean)spacing.getValue()).booleanValue());
+            }
+        });
+        spacing.setImmediate(true);
+        addComponent(spacing);
+        setSpacing(true);
+    }
+}
diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasic.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasic.java
new file mode 100644
index 0000000000..51b9b221f5
--- /dev/null
+++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasic.java
@@ -0,0 +1,50 @@
+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";
+    }
+
+    @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.";
+    }
+
+    @Override
+    public APIResource[] getRelatedAPI() {
+        return new APIResource[] {
+                new APIResource(VerticalLayout.class)};
+    }
+
+    @Override
+    public Class[] getRelatedFeatures() {
+        return new Class[] { HorizontalLayoutBasic.class, LayoutSpacing.class };
+    }
+
+    @Override
+    public NamedExternalResource[] getRelatedResources() {
+        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/VerticalLayoutBasic.png b/src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasic.png
new file mode 100644
index 0000000000000000000000000000000000000000..4e92767940a1e4b4359bba75871d1c2653795406
GIT binary patch
literal 4420
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
E02UUC+W-In

literal 0
HcmV?d00001

diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasicExample.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasicExample.java
new file mode 100644
index 0000000000..85d48455e3
--- /dev/null
+++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasicExample.java
@@ -0,0 +1,25 @@
+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);
+    }
+}
-- 
2.39.5