Sampler: continuing layouts -section remake.

svn changeset:6861/svn branch:trunk

diff --git a/src/com/itmill/toolkit/demo/sampler/FeatureSet.java b/src/com/itmill/toolkit/demo/sampler/FeatureSet.java
index bce8ea55c878f160cb516d7f42ccd28f4fb93366..c9745a82b587971e2509adc63b88a5a9bb9979c4 100644 (file)
--- a/src/com/itmill/toolkit/demo/sampler/FeatureSet.java
+++ b/src/com/itmill/toolkit/demo/sampler/FeatureSet.java
@@ -224,21 +224,25 @@ public class FeatureSet extends Feature {
 
     public static class Layouts extends FeatureSet {
         public Layouts() {
-            super("Layouts", new Feature[] {
-            //
-                    new LayoutMargin(), //
-                    new LayoutSpacing(), //
-                    new VerticalLayoutBasic(), //
-                    new HorizontalLayoutBasic(), //
-                    new GridLayoutBasic(), //
-
-                    new LayoutAlignment(), //
-                    new ExpandingComponent(), //
-                    new SplitPanelBasic(), //
-                    new WebLayout(), //
-                    new ApplicationLayout(), //
-                    new CustomLayouts(), //
-            });
+            super(
+                    "Layouts",
+                    "Layouts",
+                    "Making a usable, good looking, dynamic layout can be tricky, but with the right tools almost anything is possible.<br/>",
+                    new Feature[] {
+                    //
+                            new LayoutMargin(), //
+                            new LayoutSpacing(), //
+                            new VerticalLayoutBasic(), //
+                            new HorizontalLayoutBasic(), //
+                            new GridLayoutBasic(), //
+
+                            new LayoutAlignment(), //
+                            new ExpandingComponent(), //
+                            new SplitPanelBasic(), //
+                            new WebLayout(), //
+                            new ApplicationLayout(), //
+                            new CustomLayouts(), //
+                    });
         }
     }
 

diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/ExpandingComponent.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/ExpandingComponent.java
index 4c0330dbb524cba6b1494c484769138750558d26..315cf421a8a5f66acd3b700966bf7ca73b28864e 100644 (file)
--- a/src/com/itmill/toolkit/demo/sampler/features/layouts/ExpandingComponent.java
+++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/ExpandingComponent.java
@@ -14,9 +14,12 @@ public class ExpandingComponent extends Feature {
 \r
     @Override\r
     public String getDescription() {\r
-        return "With the setExpandRatio() -method you can set varying expand"\r
-                + " ratios for the components inside a Layout.<br>Click the button to"\r
-                + " open an example in a new window.";\r
+        return "You can <i>expand</i> components to make them"\r
+                + " occupy the space left over by other components.<br/>"\r
+                + " If more than one component is expanded, the <i>ratio</i>"\r
+                + " determines how the leftover space is shared between the"\r
+                + " expanded components.<br/>Mousover each component for a"\r
+                + " description (tooltip).<br/> Also try resizing the window.";\r
     }\r
 \r
     @Override\r

diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/ExpandingComponentExample.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/ExpandingComponentExample.java
index b8858dea9df5f450bb2fba2a19a2f0fbfa705e8f..84772cc16b36a729b5dbb9fdd9df06969f1ce560 100644 (file)
--- a/src/com/itmill/toolkit/demo/sampler/features/layouts/ExpandingComponentExample.java
+++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/ExpandingComponentExample.java
@@ -1,117 +1,64 @@
 package com.itmill.toolkit.demo.sampler.features.layouts;\r
 \r
-import java.net.URL;\r
-\r
-import com.itmill.toolkit.demo.sampler.ExampleUtil;\r
-import com.itmill.toolkit.terminal.ExternalResource;\r
-import com.itmill.toolkit.ui.AbstractSelect;\r
 import com.itmill.toolkit.ui.Button;\r
 import com.itmill.toolkit.ui.HorizontalLayout;\r
-import com.itmill.toolkit.ui.Label;\r
-import com.itmill.toolkit.ui.Panel;\r
-import com.itmill.toolkit.ui.TabSheet;\r
-import com.itmill.toolkit.ui.Tree;\r
 import com.itmill.toolkit.ui.VerticalLayout;\r
-import com.itmill.toolkit.ui.Window;\r
-import com.itmill.toolkit.ui.Button.ClickEvent;\r
 \r
 public class ExpandingComponentExample extends VerticalLayout {\r
 \r
-    private URL nativeWindowURL = null;\r
-    private Button b1;\r
-\r
     public ExpandingComponentExample() {\r
         setSpacing(true);\r
 \r
-        b1 = new Button("Open a new window with expanding components", this,\r
-                "openButtonClick");\r
-        addComponent(b1);\r
-\r
-    }\r
-\r
-    public void openButtonClick(ClickEvent event) {\r
-        if (nativeWindowURL == null) {\r
-            getApplication().addWindow(createWindow());\r
+        { // Basic scenario: single expanded component\r
+            HorizontalLayout layout = new HorizontalLayout();\r
+            layout.setWidth("100%"); // make the layout grow with the window\r
+            // size\r
+            addComponent(layout);\r
+\r
+            Button naturalButton = new Button("Natural");\r
+            naturalButton\r
+                    .setDescription("This button does not have an explicit size - instead, it's size depends on it's content - a.k.a <i>natural size.</i>");\r
+            layout.addComponent(naturalButton);\r
+\r
+            Button expandedButton = new Button("Expanded");\r
+            expandedButton.setWidth("100%");\r
+            expandedButton\r
+                    .setDescription("This button is set to 100% and expanded, and will thus occupy the space left over by the other components.");\r
+            layout.addComponent(expandedButton);\r
+            layout.setExpandRatio(expandedButton, 1.0f);\r
+\r
+            Button sizedButton = new Button("Explicit");\r
+            sizedButton.setWidth("150px");\r
+            sizedButton\r
+                    .setDescription("This button is explicitly set to be 150 pixels wide.");\r
+            layout.addComponent(sizedButton);\r
         }\r
-        getApplication().getMainWindow().open(\r
-                new ExternalResource(nativeWindowURL), "_blank");\r
-    }\r
-\r
-    /*\r
-     * Create new window which contains the layout obtained from\r
-     * createDemoLayout()\r
-     */\r
-    private Window createWindow() {\r
-        // Create a new window for the expanding components\r
-        final Window w = new Window("Expanding Components Demo");\r
-        getApplication().addWindow(w);\r
-        w.setLayout(createDemoLayout());\r
-        nativeWindowURL = w.getURL();\r
-        return w;\r
-    }\r
 \r
-    /*\r
-     * Creates the actual Layout with expanding components\r
-     */\r
-    private HorizontalLayout createDemoLayout() {\r
-        // Create a new layout\r
-        HorizontalLayout expandDemoLayout = new HorizontalLayout();\r
-        // Enable spacing and margins in the layout\r
-        expandDemoLayout.setSpacing(true);\r
-        expandDemoLayout.setMargin(true);\r
-        expandDemoLayout.setSizeFull();\r
-\r
-        // Create an example tree component, set to full size\r
-        Tree t = new Tree("Hardware Inventory", ExampleUtil\r
-                .getHardwareContainer());\r
-        t.setItemCaptionPropertyId(ExampleUtil.hw_PROPERTY_NAME);\r
-        t.setItemCaptionMode(AbstractSelect.ITEM_CAPTION_MODE_PROPERTY);\r
-        t.setSizeFull();\r
-\r
-        // Place the Tree component inside a panel to enable scrolling if\r
-        // necessary\r
-        Panel p = new Panel();\r
-        p.setSizeFull();\r
-        p.setStyleName(Panel.STYLE_LIGHT);\r
-        p.addComponent(t);\r
-        p.getLayout().setSizeUndefined();\r
-\r
-        // Add the panel component to the layout\r
-        expandDemoLayout.addComponent(p);\r
-\r
-        // Set an expand ratio for the Panel containing the Tree\r
-        expandDemoLayout.setExpandRatio(p, 1.0f);\r
-\r
-        // Create an example tabsheet component with some content\r
-        final TabSheet ts = new TabSheet();\r
-        final Label l1 = new Label(\r
-                "This window shows an example of a Layout with expanding"\r
-                        + " components. The expand ratios of the Tree and TabSheet"\r
-                        + " are set at 1.0 : 4.0, which means that the tree component"\r
-                        + " will occupy 1/5 of the horizontal space and the TabSheet"\r
-                        + " component will occupy 4/5.");\r
-        final Label l2 = new Label(\r
-                "Try resizing the window (horizontally) and you will"\r
-                        + " see how the expand ratios work out.");\r
-        final Label l3 = new Label(\r
-                "When the window gets too small for the components,"\r
-                        + " scrollbars will be added to enable viewing the whole content.");\r
-        ts.addTab(l1);\r
-        ts.setTabCaption(l1, "Expanding layout demo");\r
-        ts.addTab(l2);\r
-        ts.setTabCaption(l2, "Resizing");\r
-        ts.addTab(l3);\r
-        ts.setTabCaption(l3, "Scrolling");\r
-        ts.setSizeFull();\r
-\r
-        // Add the component to the layout\r
-        // No need to put the TabSheet inside a Panel, since TabSheet handles\r
-        // scrolling automatically\r
-        expandDemoLayout.addComponent(ts);\r
-\r
-        // Set an expand ratio for the TabSheet\r
-        expandDemoLayout.setExpandRatio(ts, 4.0f);\r
+        { // Ratio example\r
+            HorizontalLayout layout = new HorizontalLayout();\r
+            layout.setWidth("100%"); // make the layout grow with the window\r
+            // size\r
+            addComponent(layout);\r
+\r
+            Button naturalButton = new Button("Natural");\r
+            naturalButton\r
+                    .setDescription("This button does not have an explicit size - instead, it's size depends on it's content - a.k.a <i>natural size.</i>");\r
+            layout.addComponent(naturalButton);\r
+\r
+            Button expandedButton1 = new Button("Ratio 1.0");\r
+            expandedButton1.setWidth("100%");\r
+            expandedButton1\r
+                    .setDescription("This button is set to 100% and expanded with a ratio of 1.0, and will in this example occupy 1:2 of the leftover space.");\r
+            layout.addComponent(expandedButton1);\r
+            layout.setExpandRatio(expandedButton1, 1.0f);\r
+\r
+            Button expandedButton2 = new Button("Ratio 2.0");\r
+            expandedButton2.setWidth("100%");\r
+            expandedButton2\r
+                    .setDescription("This button is set to 100% and expanded with a ratio of 2.0, and will in this example occupy 2:1 of the leftover space.");\r
+            layout.addComponent(expandedButton2);\r
+            layout.setExpandRatio(expandedButton2, 2.0f);\r
+        }\r
 \r
-        return expandDemoLayout;\r
     }\r
 }
\ No newline at end of file