From: Marc Englund Date: Fri, 13 Feb 2009 14:45:55 +0000 (+0000) Subject: Sampler Layouts -section changes. Not complete yet. X-Git-Tag: 6.7.0.beta1~3156 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=65ef36ddd98f142a7fc3c0a12b42cc52eb084dda;p=vaadin-framework.git Sampler Layouts -section changes. Not complete yet. svn changeset:6837/svn branch:trunk --- diff --git a/WebContent/ITMILL/themes/sampler/layouts/gridexample.css b/WebContent/ITMILL/themes/sampler/layouts/gridexample.css new file mode 100644 index 0000000000..5bb9df9ffd --- /dev/null +++ b/WebContent/ITMILL/themes/sampler/layouts/gridexample.css @@ -0,0 +1,13 @@ +.i-gridlayout-gridexample .i-gridlayout-spacing-on { + /* adjust spacing size */ + padding: 1px; +} + +/* visualize the grid cells */ +.i-gridlayout-gridexample div { + background-color: #fff; +} + +.i-gridlayout-gridexample div div div { + background-color: #eee; +} \ No newline at end of file diff --git a/WebContent/ITMILL/themes/sampler/layouts/marginexample.css b/WebContent/ITMILL/themes/sampler/layouts/marginexample.css new file mode 100644 index 0000000000..bcf13b5732 --- /dev/null +++ b/WebContent/ITMILL/themes/sampler/layouts/marginexample.css @@ -0,0 +1,9 @@ +.i-verticallayout-marginexample .i-verticallayout-margin-right { + /* increase the right margin */ + padding-right: 100px; +} + +.i-verticallayout-marginexample { + /* background for the layout, for clarity */ + background-color: #ccc; +} \ No newline at end of file diff --git a/WebContent/ITMILL/themes/sampler/layouts/spacingexample.css b/WebContent/ITMILL/themes/sampler/layouts/spacingexample.css new file mode 100644 index 0000000000..8447c89f44 --- /dev/null +++ b/WebContent/ITMILL/themes/sampler/layouts/spacingexample.css @@ -0,0 +1,4 @@ +.i-gridlayout-spacingexample { + /* background for the layout, for clarity */ + background-color: #ccc; +} \ No newline at end of file diff --git a/WebContent/ITMILL/themes/sampler/layouts/styles.css b/WebContent/ITMILL/themes/sampler/layouts/styles.css deleted file mode 100644 index b56cdb9d1e..0000000000 --- a/WebContent/ITMILL/themes/sampler/layouts/styles.css +++ /dev/null @@ -1,23 +0,0 @@ -/**************************************************************************** - * 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 f49de71bda..bcd1cfab44 100644 --- a/WebContent/ITMILL/themes/sampler/styles.css +++ b/WebContent/ITMILL/themes/sampler/styles.css @@ -6,6 +6,10 @@ @import url(prominentprimaryaction/styles.css); -@import url(layouts/styles.css); +@import url(layouts/marginexample.css); -@import url(table/styles.css); +@import url(layouts/spacingexample.css); + +@import url(layouts/gridexample.css); + +@import url(table/styles.css); \ No newline at end of file diff --git a/src/com/itmill/toolkit/demo/sampler/FeatureSet.java b/src/com/itmill/toolkit/demo/sampler/FeatureSet.java index f344e94acb..bce8ea55c8 100644 --- a/src/com/itmill/toolkit/demo/sampler/FeatureSet.java +++ b/src/com/itmill/toolkit/demo/sampler/FeatureSet.java @@ -28,6 +28,7 @@ import com.itmill.toolkit.demo.sampler.features.layouts.ExpandingComponent; import com.itmill.toolkit.demo.sampler.features.layouts.GridLayoutBasic; 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.LayoutMargin; import com.itmill.toolkit.demo.sampler.features.layouts.LayoutSpacing; import com.itmill.toolkit.demo.sampler.features.layouts.SplitPanelBasic; import com.itmill.toolkit.demo.sampler.features.layouts.VerticalLayoutBasic; @@ -225,10 +226,12 @@ public class FeatureSet extends Feature { public Layouts() { super("Layouts", new Feature[] { // + new LayoutMargin(), // + new LayoutSpacing(), // new VerticalLayoutBasic(), // new HorizontalLayoutBasic(), // new GridLayoutBasic(), // - new LayoutSpacing(), // + new LayoutAlignment(), // new ExpandingComponent(), // new SplitPanelBasic(), // diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/GridLayoutBasic.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/GridLayoutBasic.java index 72a79b1c42..6010e26c67 100644 --- a/src/com/itmill/toolkit/demo/sampler/features/layouts/GridLayoutBasic.java +++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/GridLayoutBasic.java @@ -9,14 +9,14 @@ public class GridLayoutBasic extends Feature { @Override public String getName() { - return "Grid Layout"; + return "Grid layout"; } @Override public String getDescription() { - return "GridLayout allow you to create a grid of components." + return "The GridLayout allows you to create a grid of components." + " The grid may have an arbitrary number of cells in each direction" - + " and you can easily set components to fill multiple cells."; + + " and you can easily set components to fill multiple cells.
It supports all basic features, plus some advanced stuff - including spacing, margin, alignment, and expand ratios."; } @Override @@ -27,11 +27,14 @@ public class GridLayoutBasic extends Feature { @Override public Class[] getRelatedFeatures() { return new Class[] { HorizontalLayoutBasic.class, - VerticalLayoutBasic.class, LayoutSpacing.class }; + VerticalLayoutBasic.class, LayoutSpacing.class, + LayoutMargin.class }; } @Override public NamedExternalResource[] getRelatedResources() { - return null; + return new NamedExternalResource[] { new NamedExternalResource( + "CSS for the layout", getThemeBase() + + "layouts/gridexample.css") }; } } diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/GridLayoutBasicExample.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/GridLayoutBasicExample.java index 7650b8fe07..b13f967005 100644 --- a/src/com/itmill/toolkit/demo/sampler/features/layouts/GridLayoutBasicExample.java +++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/GridLayoutBasicExample.java @@ -11,9 +11,10 @@ public class GridLayoutBasicExample extends VerticalLayout { public GridLayoutBasicExample() { // Create a grid layout final GridLayout grid = new GridLayout(3, 3); + grid.setSpacing(true); // The style allows us to visualize the cell borders in this example. - grid.addStyleName("example-alignment"); + grid.addStyleName("gridexample"); grid.setWidth(400, Sizeable.UNITS_PIXELS); grid.setHeight(400, Sizeable.UNITS_PIXELS); 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 450e28e06d..4e3e88c8b2 100644 --- a/src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasic.java +++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasic.java @@ -4,45 +4,34 @@ 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"; + 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."; + return "The HorizontalLayout arranges components horizontally.
It supports all basic features, plus some advanced stuff - including spacing, margin, alignment, and expand ratios."; } @Override public APIResource[] getRelatedAPI() { - return new APIResource[] { - new APIResource(HorizontalLayout.class) }; + return new APIResource[] { new APIResource(HorizontalLayout.class) }; } @Override public Class[] getRelatedFeatures() { - return new Class[] { - VerticalLayoutBasic.class, - LayoutSpacing.class, - LayoutAlignment.class, - }; + return new Class[] { VerticalLayoutBasic.class, LayoutSpacing.class, + LayoutAlignment.class, }; } @Override public NamedExternalResource[] getRelatedResources() { - return new NamedExternalResource[] { - new NamedExternalResource("Reference Manual: HorizontalLayout", - "/doc/manual/layout.components.orderedlayout.html"), - }; + 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/HorizontalLayoutBasicExample.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasicExample.java index 24a07187f7..01186d2010 100644 --- a/src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasicExample.java +++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasicExample.java @@ -1,24 +1,48 @@ 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.Label; 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 class HorizontalLayoutBasicExample extends HorizontalLayout { 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); + // this is a HorizontalLayout + + // First TextField + TextField tf = new TextField(); + tf.setWidth("70px"); + addComponent(tf); + + // A dash + Label dash = new Label("-"); + addComponent(dash); + setComponentAlignment(dash, "middle"); + + // Second TextField + tf = new TextField(); + tf.setWidth("70px"); + addComponent(tf); + + // Another dash + dash = new Label("-"); + addComponent(dash); + setComponentAlignment(dash, "middle"); + + // Third TextField + tf = new TextField(); + tf.setWidth("70px"); + addComponent(tf); + + // Yet another dash + dash = new Label("-"); + addComponent(dash); + setComponentAlignment(dash, "middle"); + + // Forth and last TextField + tf = new TextField(); + tf.setWidth("70px"); + addComponent(tf); + } } diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignmentExample.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignmentExample.java index b45d2ad608..8f49f254e4 100644 --- a/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignmentExample.java +++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignmentExample.java @@ -1,16 +1,9 @@ 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 { @@ -18,65 +11,72 @@ public class LayoutAlignmentExample extends VerticalLayout { @SuppressWarnings("deprecation") public LayoutAlignmentExample() { // Create a grid layout - final GridLayout grid = new GridLayout(3, 3); + final GridLayout grid = new GridLayout(1, 9); + grid.setSpacing(true); // The style allows us to visualize the cell borders in this example. - grid.addStyleName("example-alignment"); + grid.addStyleName("gridexample"); + + grid.setWidth("300px"); + grid.setHeight("500px"); - 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.) + // We'll use different ways to set the alignment: constants, bitmasks, + // and string-shorthand. // 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 + // 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.addComponent(topleft); grid.setComponentAlignment(topleft, Alignment.TOP_LEFT); - + Button topcenter = new Button("Top Center"); - grid.addComponent(topcenter, 1, 0); + grid.addComponent(topcenter); grid.setComponentAlignment(topcenter, Alignment.TOP_CENTER); Button topright = new Button("Top Right"); - grid.addComponent(topright, 2, 0); + grid.addComponent(topright); 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 - + // 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)); - + grid.addComponent(middleleft); + 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)); + grid.addComponent(middlecenter); + 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)); + grid.addComponent(middleright); + grid.setComponentAlignment(middleright, new Alignment( + Bits.ALIGNMENT_VERTICAL_CENTER | Bits.ALIGNMENT_RIGHT)); + + // Here we'll use the convenient string-shorthand: - // Here we again use constants: - Button bottomleft = new Button("Bottom Left"); - grid.addComponent(bottomleft, 0, 2); - grid.setComponentAlignment(bottomleft, Alignment.BOTTOM_LEFT); - + grid.addComponent(bottomleft); + grid.setComponentAlignment(bottomleft, "bottom left"); + Button bottomcenter = new Button("Bottom Center"); - grid.addComponent(bottomcenter, 1, 2); - grid.setComponentAlignment(bottomcenter, Alignment.BOTTOM_CENTER); + grid.addComponent(bottomcenter); + grid.setComponentAlignment(bottomcenter, "bottom center"); Button bottomright = new Button("Bottom Right"); - grid.addComponent(bottomright, 2, 2); - grid.setComponentAlignment(bottomright, Alignment.BOTTOM_RIGHT); + grid.addComponent(bottomright); + grid.setComponentAlignment(bottomright, "bottom right"); // Add the layout to the containing layout. addComponent(grid); diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutMargin.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutMargin.java new file mode 100644 index 0000000000..526046b292 --- /dev/null +++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutMargin.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 LayoutMargin extends Feature { + + @Override + public String getName() { + return "Layout margin"; + } + + @Override + public String getDescription() { + return "Layouts can have margins on any of the sides. The actual size" + + " of the margin is determined by the theme, and can be" + + " customized using CSS - in this example, the right margin" + + " size is increased.
Note that margin" + + " is the space around the layout as a whole, and" + + " spacing is the space between the component within" + + " the layout."; + } + + @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[] { LayoutSpacing.class, HorizontalLayoutBasic.class, + VerticalLayoutBasic.class, GridLayoutBasic.class }; + } + + @Override + public NamedExternalResource[] getRelatedResources() { + return new NamedExternalResource[] { new NamedExternalResource( + "CSS for the layout", getThemeBase() + + "layouts/marginexample.css") }; + } +} diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutMarginExample.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutMarginExample.java new file mode 100644 index 0000000000..2f4d8936b5 --- /dev/null +++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutMarginExample.java @@ -0,0 +1,58 @@ +package com.itmill.toolkit.demo.sampler.features.layouts; + +import com.itmill.toolkit.ui.Button; +import com.itmill.toolkit.ui.GridLayout; +import com.itmill.toolkit.ui.Label; +import com.itmill.toolkit.ui.VerticalLayout; +import com.itmill.toolkit.ui.Button.ClickEvent; + +public class LayoutMarginExample extends GridLayout implements + Button.ClickListener { + + VerticalLayout marginLayout; + Button topMargin; + Button rightMargin; + Button bottomMargin; + Button leftMargin; + + public LayoutMarginExample() { + super(3, 3); + + space(); + topMargin = new Button("Top margin", this); + topMargin.setSwitchMode(true); + addComponent(topMargin); + setComponentAlignment(topMargin, "center"); + + space(); + leftMargin = new Button("Left margin", this); + leftMargin.setSwitchMode(true); + addComponent(leftMargin); + setComponentAlignment(leftMargin, "middle"); + + marginLayout = new VerticalLayout(); + marginLayout.setStyleName("marginexample"); + marginLayout.setSizeUndefined(); + addComponent(marginLayout); + marginLayout.addComponent(new Label("Margins all around?")); + + rightMargin = new Button("Right margin", this); + rightMargin.setSwitchMode(true); + addComponent(rightMargin); + setComponentAlignment(rightMargin, "middle"); + + space(); + bottomMargin = new Button("Bottom margin", this); + bottomMargin.setSwitchMode(true); + addComponent(bottomMargin); + setComponentAlignment(bottomMargin, "center"); + + } + + public void buttonClick(ClickEvent event) { + marginLayout.setMargin(topMargin.booleanValue(), rightMargin + .booleanValue(), bottomMargin.booleanValue(), leftMargin + .booleanValue()); + + } +} diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacing.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacing.java index ae66479a18..2d1d7ce39a 100644 --- a/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacing.java +++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacing.java @@ -16,32 +16,30 @@ public class LayoutSpacing extends Feature { @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."; + return "Spacing between components can be enabled or disabled." + + " The actual size of the spacing is determined by the theme," + + " and can be customized with CSS.
Note that spacing" + + " is the space between components within the layout, and" + + " margin is the space around the layout as a whole."; } @Override public APIResource[] getRelatedAPI() { - return new APIResource[] { - new APIResource(VerticalLayout.class), + return new APIResource[] { new APIResource(VerticalLayout.class), new APIResource(HorizontalLayout.class), - new APIResource(GridLayout.class), - }; + new APIResource(GridLayout.class) }; } @Override public Class[] getRelatedFeatures() { - return new Class[] { - HorizontalLayoutBasic.class, - VerticalLayoutBasic.class }; + return new Class[] { LayoutMargin.class, HorizontalLayoutBasic.class, + VerticalLayoutBasic.class, GridLayoutBasic.class }; } @Override public NamedExternalResource[] getRelatedResources() { - return new NamedExternalResource[] { - new NamedExternalResource("Reference Manual: Spacing", - "/doc/manual/layout.settings.spacing.html"), - }; + 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/LayoutSpacingExample.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacingExample.java index d070029842..b2d1126e3b 100644 --- a/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacingExample.java +++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutSpacingExample.java @@ -2,37 +2,37 @@ 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.GridLayout; 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(); + // Create a grid layout. + final GridLayout grid = new GridLayout(3, 3); + + // Add the layout to the containing layout. + addComponent(grid); // Add a style to allow customization of the layout. - horizontal.addStyleName("spacingexample"); + grid.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); + for (int i = 0; i < 9; i++) { + grid.addComponent(new Button("Component " + (i + 1))); + } // CheckBox for toggling spacing on and off - final CheckBox spacing = new CheckBox( - "Click here to enable/disable spacing"); + final CheckBox spacing = new CheckBox("Spacing enabled"); + spacing.setImmediate(true); spacing.addListener(new Button.ClickListener() { public void buttonClick(ClickEvent event) { - horizontal.setSpacing(spacing.booleanValue()); + grid.setSpacing(spacing.booleanValue()); } }); - spacing.setImmediate(true); addComponent(spacing); - setSpacing(true); + + setSpacing(true); // enable spacing for the example itself } } 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 cdbcc2175e..4035eeae78 100644 --- a/src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasic.java +++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasic.java @@ -2,53 +2,38 @@ 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"; + 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."; + return "The VerticalLayout arranges components vertically. " + + " It is 100% wide by default, which is nice in many cases," + + " but something to be aware of if trouble arises.
It supports all basic features, plus some advanced stuff - including spacing, margin, alignment, and expand ratios."; } @Override public APIResource[] getRelatedAPI() { - return new APIResource[] { - new APIResource(VerticalLayout.class)}; + return new APIResource[] { new APIResource(VerticalLayout.class) }; } @Override public Class[] getRelatedFeatures() { - return new Class[] { - HorizontalLayoutBasic.class, - LayoutSpacing.class, - LayoutAlignment.class, - }; + return new Class[] { HorizontalLayoutBasic.class, LayoutSpacing.class, + LayoutAlignment.class, }; } @Override public NamedExternalResource[] getRelatedResources() { - return new NamedExternalResource[] { - new NamedExternalResource("Reference Manual: VerticalLayout", - "/doc/manual/layout.components.orderedlayout.html"), - }; + 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/VerticalLayoutBasicExample.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasicExample.java index 85d48455e3..c7afc7e3b6 100644 --- a/src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasicExample.java +++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasicExample.java @@ -1,25 +1,18 @@ 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); + // this is a VerticalLayout + // let's add some components + for (int i = 0; i < 5; i++) { + TextField tf = new TextField("Row " + (i + 1)); + tf.setWidth("300px"); + // Add the component to the VerticalLayout + addComponent(tf); + } } }