--- /dev/null
+.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
--- /dev/null
+.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
--- /dev/null
+.i-gridlayout-spacingexample {
+ /* background for the layout, for clarity */
+ background-color: #ccc;
+}
\ No newline at end of file
+++ /dev/null
-/****************************************************************************
- * 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;
-}
@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
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;
public Layouts() {
super("Layouts", new Feature[] {
//
+ new LayoutMargin(), //
+ new LayoutSpacing(), //
new VerticalLayoutBasic(), //
new HorizontalLayoutBasic(), //
new GridLayoutBasic(), //
- new LayoutSpacing(), //
+
new LayoutAlignment(), //
new ExpandingComponent(), //
new SplitPanelBasic(), //
\r
@Override\r
public String getName() {\r
- return "Grid Layout";\r
+ return "Grid layout";\r
}\r
\r
@Override\r
public String getDescription() {\r
- return "GridLayout allow you to create a grid of components."\r
+ return "The GridLayout allows you to create a grid of components."\r
+ " The grid may have an arbitrary number of cells in each direction"\r
- + " and you can easily set components to fill multiple cells.";\r
+ + " and you can easily set components to fill multiple cells.<br/>It supports all basic features, plus some advanced stuff - including spacing, margin, alignment, and expand ratios.";\r
}\r
\r
@Override\r
@Override\r
public Class[] getRelatedFeatures() {\r
return new Class[] { HorizontalLayoutBasic.class,\r
- VerticalLayoutBasic.class, LayoutSpacing.class };\r
+ VerticalLayoutBasic.class, LayoutSpacing.class,\r
+ LayoutMargin.class };\r
}\r
\r
@Override\r
public NamedExternalResource[] getRelatedResources() {\r
- return null;\r
+ return new NamedExternalResource[] { new NamedExternalResource(\r
+ "CSS for the layout", getThemeBase()\r
+ + "layouts/gridexample.css") };\r
}\r
}\r
public GridLayoutBasicExample() {\r
// Create a grid layout\r
final GridLayout grid = new GridLayout(3, 3);\r
+ grid.setSpacing(true);\r
\r
// The style allows us to visualize the cell borders in this example.\r
- grid.addStyleName("example-alignment");\r
+ grid.addStyleName("gridexample");\r
\r
grid.setWidth(400, Sizeable.UNITS_PIXELS);\r
grid.setHeight(400, Sizeable.UNITS_PIXELS);\r
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.<br/>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"), };
}
}
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);
+
}
}
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);
+ 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);
--- /dev/null
+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.<br/>Note that <i>margin</i>"
+ + " is the space around the layout as a whole, and"
+ + " <i>spacing</i> 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") };
+ }
+}
--- /dev/null
+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());
+
+ }
+}
@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.<br/>Note that <i>spacing</i>"
+ + " is the space between components within the layout, and"
+ + " <i>margin</i> 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"), };
}
}
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
}
}
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.<br/>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"), };
}
}
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);
+ }
}
}