From: Marc Englund Date: Mon, 16 Feb 2009 15:09:40 +0000 (+0000) Subject: Sampler: continuing layouts -section remake. X-Git-Tag: 6.7.0.beta1~3142 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=a88152ef489cf5af6a7d442abc8e5a3e079a91df;p=vaadin-framework.git 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 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.
", + 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.
Click the button to" - + " open an example in a new window."; + return "You can expand components to make them" + + " occupy the space left over by other components.
" + + " If more than one component is expanded, the ratio" + + " determines how the leftover space is shared between the" + + " expanded components.
Mousover each component for a" + + " description (tooltip).
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 natural size."); + 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 natural size."); + 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