Sampler: continuing layouts -section remake.

svn changeset:6861/svn branch:trunk

3 files changed, 73 insertions, 119 deletions

diff --git a/src/com/itmill/toolkit/demo/sampler/FeatureSet.java b/src/com/itmill/toolkit/demo/sampler/FeatureSet.java
index bce8ea55c8..c9745a82b5 100644
--- 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 4c0330dbb5..315cf421a8 100644
--- 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 {
 

     @Override

     public String getDescription() {

-        return "With the setExpandRatio() -method you can set varying expand"

-                + " ratios for the components inside a Layout.<br>Click the button to"

-                + " open an example in a new window.";

+        return "You can <i>expand</i> components to make them"

+                + " occupy the space left over by other components.<br/>"

+                + " If more than one component is expanded, the <i>ratio</i>"

+                + " determines how the leftover space is shared between the"

+                + " expanded components.<br/>Mousover each component for a"

+                + " description (tooltip).<br/> Also try resizing the window.";

     }

 

     @Override

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 b8858dea9d..84772cc16b 100644
--- 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;

 

-import java.net.URL;

-

-import com.itmill.toolkit.demo.sampler.ExampleUtil;

-import com.itmill.toolkit.terminal.ExternalResource;

-import com.itmill.toolkit.ui.AbstractSelect;

 import com.itmill.toolkit.ui.Button;

 import com.itmill.toolkit.ui.HorizontalLayout;

-import com.itmill.toolkit.ui.Label;

-import com.itmill.toolkit.ui.Panel;

-import com.itmill.toolkit.ui.TabSheet;

-import com.itmill.toolkit.ui.Tree;

 import com.itmill.toolkit.ui.VerticalLayout;

-import com.itmill.toolkit.ui.Window;

-import com.itmill.toolkit.ui.Button.ClickEvent;

 

 public class ExpandingComponentExample extends VerticalLayout {

 

-    private URL nativeWindowURL = null;

-    private Button b1;

-

     public ExpandingComponentExample() {

         setSpacing(true);

 

-        b1 = new Button("Open a new window with expanding components", this,

-                "openButtonClick");

-        addComponent(b1);

-

-    }

-

-    public void openButtonClick(ClickEvent event) {

-        if (nativeWindowURL == null) {

-            getApplication().addWindow(createWindow());

+        { // Basic scenario: single expanded component

+            HorizontalLayout layout = new HorizontalLayout();

+            layout.setWidth("100%"); // make the layout grow with the window

+            // size

+            addComponent(layout);

+

+            Button naturalButton = new Button("Natural");

+            naturalButton

+                    .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>");

+            layout.addComponent(naturalButton);

+

+            Button expandedButton = new Button("Expanded");

+            expandedButton.setWidth("100%");

+            expandedButton

+                    .setDescription("This button is set to 100% and expanded, and will thus occupy the space left over by the other components.");

+            layout.addComponent(expandedButton);

+            layout.setExpandRatio(expandedButton, 1.0f);

+

+            Button sizedButton = new Button("Explicit");

+            sizedButton.setWidth("150px");

+            sizedButton

+                    .setDescription("This button is explicitly set to be 150 pixels wide.");

+            layout.addComponent(sizedButton);

         }

-        getApplication().getMainWindow().open(

-                new ExternalResource(nativeWindowURL), "_blank");

-    }

-

-    /*

-     * Create new window which contains the layout obtained from

-     * createDemoLayout()

-     */

-    private Window createWindow() {

-        // Create a new window for the expanding components

-        final Window w = new Window("Expanding Components Demo");

-        getApplication().addWindow(w);

-        w.setLayout(createDemoLayout());

-        nativeWindowURL = w.getURL();

-        return w;

-    }

 

-    /*

-     * Creates the actual Layout with expanding components

-     */

-    private HorizontalLayout createDemoLayout() {

-        // Create a new layout

-        HorizontalLayout expandDemoLayout = new HorizontalLayout();

-        // Enable spacing and margins in the layout

-        expandDemoLayout.setSpacing(true);

-        expandDemoLayout.setMargin(true);

-        expandDemoLayout.setSizeFull();

-

-        // Create an example tree component, set to full size

-        Tree t = new Tree("Hardware Inventory", ExampleUtil

-                .getHardwareContainer());

-        t.setItemCaptionPropertyId(ExampleUtil.hw_PROPERTY_NAME);

-        t.setItemCaptionMode(AbstractSelect.ITEM_CAPTION_MODE_PROPERTY);

-        t.setSizeFull();

-

-        // Place the Tree component inside a panel to enable scrolling if

-        // necessary

-        Panel p = new Panel();

-        p.setSizeFull();

-        p.setStyleName(Panel.STYLE_LIGHT);

-        p.addComponent(t);

-        p.getLayout().setSizeUndefined();

-

-        // Add the panel component to the layout

-        expandDemoLayout.addComponent(p);

-

-        // Set an expand ratio for the Panel containing the Tree

-        expandDemoLayout.setExpandRatio(p, 1.0f);

-

-        // Create an example tabsheet component with some content

-        final TabSheet ts = new TabSheet();

-        final Label l1 = new Label(

-                "This window shows an example of a Layout with expanding"

-                        + " components. The expand ratios of the Tree and TabSheet"

-                        + " are set at 1.0 : 4.0, which means that the tree component"

-                        + " will occupy 1/5 of the horizontal space and the TabSheet"

-                        + " component will occupy 4/5.");

-        final Label l2 = new Label(

-                "Try resizing the window (horizontally) and you will"

-                        + " see how the expand ratios work out.");

-        final Label l3 = new Label(

-                "When the window gets too small for the components,"

-                        + " scrollbars will be added to enable viewing the whole content.");

-        ts.addTab(l1);

-        ts.setTabCaption(l1, "Expanding layout demo");

-        ts.addTab(l2);

-        ts.setTabCaption(l2, "Resizing");

-        ts.addTab(l3);

-        ts.setTabCaption(l3, "Scrolling");

-        ts.setSizeFull();

-

-        // Add the component to the layout

-        // No need to put the TabSheet inside a Panel, since TabSheet handles

-        // scrolling automatically

-        expandDemoLayout.addComponent(ts);

-

-        // Set an expand ratio for the TabSheet

-        expandDemoLayout.setExpandRatio(ts, 4.0f);

+        { // Ratio example

+            HorizontalLayout layout = new HorizontalLayout();

+            layout.setWidth("100%"); // make the layout grow with the window

+            // size

+            addComponent(layout);

+

+            Button naturalButton = new Button("Natural");

+            naturalButton

+                    .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>");

+            layout.addComponent(naturalButton);

+

+            Button expandedButton1 = new Button("Ratio 1.0");

+            expandedButton1.setWidth("100%");

+            expandedButton1

+                    .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.");

+            layout.addComponent(expandedButton1);

+            layout.setExpandRatio(expandedButton1, 1.0f);

+

+            Button expandedButton2 = new Button("Ratio 2.0");

+            expandedButton2.setWidth("100%");

+            expandedButton2

+                    .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.");

+            layout.addComponent(expandedButton2);

+            layout.setExpandRatio(expandedButton2, 2.0f);

+        }

 

-        return expandDemoLayout;

     }

 }
\ No newline at end of file