From: Marko Grönroos Date: Fri, 9 Jan 2009 12:17:08 +0000 (+0000) Subject: Sampler: Added layout alignment example. For #2432. X-Git-Tag: 6.7.0.beta1~3375 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=190d079bc1cf1f147db7646ff466e6d1dcc40ac1;p=vaadin-framework.git Sampler: Added layout alignment example. For #2432. svn changeset:6476/svn branch:trunk --- diff --git a/WebContent/ITMILL/themes/sampler/layouts/styles.css b/WebContent/ITMILL/themes/sampler/layouts/styles.css new file mode 100644 index 0000000000..b56cdb9d1e --- /dev/null +++ b/WebContent/ITMILL/themes/sampler/layouts/styles.css @@ -0,0 +1,23 @@ +/**************************************************************************** + * 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 ec764f8763..cd8b0f5c69 100644 --- a/WebContent/ITMILL/themes/sampler/styles.css +++ b/WebContent/ITMILL/themes/sampler/styles.css @@ -6,3 +6,4 @@ @import url(prominentprimaryaction/styles.css); +@import url(layouts/styles.css); diff --git a/src/com/itmill/toolkit/demo/sampler/FeatureSet.java b/src/com/itmill/toolkit/demo/sampler/FeatureSet.java index 116558c94c..8f666e987a 100644 --- a/src/com/itmill/toolkit/demo/sampler/FeatureSet.java +++ b/src/com/itmill/toolkit/demo/sampler/FeatureSet.java @@ -13,6 +13,7 @@ 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.LayoutAlignment; 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; @@ -151,6 +152,7 @@ public class FeatureSet extends Feature { new VerticalLayoutBasic(), // new HorizontalLayoutBasic(), // new LayoutSpacing(), // + new LayoutAlignment(), // }); } } 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 1a8e7e7f2f..450e28e06d 100644 --- a/src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasic.java +++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/HorizontalLayoutBasic.java @@ -31,7 +31,11 @@ public class HorizontalLayoutBasic extends Feature { @Override public Class[] getRelatedFeatures() { - return new Class[] { VerticalLayoutBasic.class, LayoutSpacing.class }; + return new Class[] { + VerticalLayoutBasic.class, + LayoutSpacing.class, + LayoutAlignment.class, + }; } @Override diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignment.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignment.java new file mode 100644 index 0000000000..749fbb7cb7 --- /dev/null +++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignment.java @@ -0,0 +1,56 @@ +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.GridLayout; +import com.itmill.toolkit.ui.HorizontalLayout; +import com.itmill.toolkit.ui.VerticalLayout; + +public class LayoutAlignment extends Feature { + + @Override + public String getName() { + return "Layout Alignment"; + } + + @Override + public String getDescription() { + return "GridLayout, VerticalLayout, and HorizontalLayout, " + + "which are tabular layouts consisting of cells, " + + "support alignment of components within the layout cells. " + + "The alignment of a component within its respective cell " + + "is set with setComponentAlignment()."; + } + + @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: Layout Alignment", + "/doc/manual/layout.features.alignment.html"), + }; + } +} diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignment.png b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignment.png new file mode 100644 index 0000000000..9269aad001 Binary files /dev/null and b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignment.png differ diff --git a/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignmentExample.java b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignmentExample.java new file mode 100644 index 0000000000..be5fa6aef8 --- /dev/null +++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/LayoutAlignmentExample.java @@ -0,0 +1,88 @@ +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 { + + @SuppressWarnings("deprecation") + public LayoutAlignmentExample() { + // Create a grid layout + final GridLayout grid = new GridLayout(3, 3); + + // The style allows us to visualize the cell borders in this example. + grid.addStyleName("example-alignment"); + + 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.) + + // 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 + + Button topleft = new Button("Top Left"); + grid.addComponent(topleft, 0, 0); + grid.setComponentAlignment(topleft, Alignment.TOP_LEFT); + + Button topcenter = new Button("Top Center"); + grid.addComponent(topcenter, 1, 0); + grid.setComponentAlignment(topcenter, Alignment.TOP_CENTER); + + Button topright = new Button("Top Right"); + grid.addComponent(topright, 2, 0); + 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 + + Button middleleft = new Button("Middle Left"); + grid.addComponent(middleleft, 0, 1); + 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)); + + Button middleright = new Button("Middle Right"); + grid.addComponent(middleright, 2, 1); + grid.setComponentAlignment(middleright, new Alignment(Bits.ALIGNMENT_VERTICAL_CENTER + Bits.ALIGNMENT_RIGHT)); + + // Here we again use constants: + + Button bottomleft = new Button("Bottom Left"); + grid.addComponent(bottomleft, 0, 2); + grid.setComponentAlignment(bottomleft, Alignment.BOTTOM_LEFT); + + Button bottomcenter = new Button("Bottom Center"); + grid.addComponent(bottomcenter, 1, 2); + grid.setComponentAlignment(bottomcenter, Alignment.BOTTOM_CENTER); + + Button bottomright = new Button("Bottom Right"); + grid.addComponent(bottomright, 2, 2); + grid.setComponentAlignment(bottomright, Alignment.BOTTOM_RIGHT); + + // Add the layout to the containing layout. + addComponent(grid); + + // Align the grid itself within its container layout. + setComponentAlignment(grid, Alignment.MIDDLE_CENTER); + + } +} 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 51b9b221f5..cdbcc2175e 100644 --- a/src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasic.java +++ b/src/com/itmill/toolkit/demo/sampler/features/layouts/VerticalLayoutBasic.java @@ -37,7 +37,11 @@ public class VerticalLayoutBasic extends Feature { @Override public Class[] getRelatedFeatures() { - return new Class[] { HorizontalLayoutBasic.class, LayoutSpacing.class }; + return new Class[] { + HorizontalLayoutBasic.class, + LayoutSpacing.class, + LayoutAlignment.class, + }; } @Override