Managing Layout

grid.setComponentAlignment(middleright,

new Alignment(Bits.ALIGNMENT_VERTICAL_CENTER | Bits.ALIGNMENT_RIGHT));

Obviously, you may combine only one vertical bitmask with one horizontal bitmask, though you may leave either one out. The following table lists the available alignment bitmask constants:

Table 6.2. Alignment Bitmasks

Horizontal Bits.ALIGNMENT_LEFT

Bits.ALIGNMENT_HORIZONTAL_CENTER

Bits.ALIGNMENT_RIGHT

Vertical Bits.ALIGNMENT_TOP

Bits.ALIGNMENT_VERTICAL_CENTER

Bits.ALIGNMENT_BOTTOM

You can determine the current alignment of a component with getComponentAlignment(), which returns an Alignment object. The class provides a number of getter methods for decoding the alignment, which you can also get as a bitmask value.

Size of Aligned Components

You can only align a component that is smaller than its containing cell in the direction of alignment. If a component has 100% width, as many components have by default, horizontal alignment does not have any effect. For example, Label is 100% wide by default and can not therefore be horizontally aligned as such. The problem can be hard to notice, as the text inside a Label is leftaligned.

You usually need to set either a fixed size, undefined size, or less than a 100% relative size for the component to be aligned - a size that is smaller than the containing layout has.

For example, assuming that a Label has short content that is less wide than the containing VerticalLayout, you could center it as follows:

VerticalLayout layout = new VerticalLayout(); // 100% default width Label label = new Label("Hello"); // 100% default width label.setSizeUndefined();

layout.addComponent(label); layout.setComponentAlignment(label, Alignment.MIDDLE_CENTER);

If you set the size as undefined and the component itself contains components, make sure that the contained components also have either undefined or fixed size. For example, if you set the size of a Form as undefined, its containing layout FormLayout has 100% default width, which you also need to set as undefined. But then, any components inside the FormLayout must have either undefined or fixed size.

6.13.3. Layout Cell Spacing

The VerticalLayout, HorizontalLayout, and GridLayout layouts offer a setSpacing() method for enabling space between the cells in the layout. Enabling the spacing adds a spacing style for all cells except the first so that, by setting the left or top padding, you can specify the amount of spacing.

To enable spacing, simply call setSpacing(true) for the layout as follows:

Layout Cell Spacing

205

Managing Layout

HorizontalLayout layout2 = new HorizontalLayout(); layout2.addStyleName("spacingexample"); layout2.setSpacing(true); layout2.addComponent(new Button("Component 1")); layout2.addComponent(new Button("Component 2")); layout2.addComponent(new Button("Component 3"));

VerticalLayout layout4 = new VerticalLayout(); layout4.addStyleName("spacingexample"); layout4.setSpacing(true); layout4.addComponent(new Button("Component 1")); layout4.addComponent(new Button("Component 2")); layout4.addComponent(new Button("Component 3"));

In practise, the setSpacing() method toggles between the "v-COMPONENTCLASSNAME-spacing-on" and "-off" CSS class names in the cell elements. Elements having those class names can be used to define the spacing metrics in a theme.

The layouts have a spacing style name to define spacing also when spacing is off. This allows you to define a small default spacing between components by default and a larger one when the spacing is actually enabled.

Spacing can be horizontal (for HorizontalLayout), vertical (for VerticalLayout), or both (for GridLayout). The name of the spacing style for horizontal and vertical spacing is the base name of the component style name plus the "-spacing-on" suffix, as shown in the following table:

Table 6.3. Spacing Style Names

VerticalLayout	v-verticallayout-spacing-on
HorizontalLayout	v-horizontallayout-spacing-on
GridLayout	v-gridlayout-spacing-on

In the CSS example below, we specify the exact amount of spacing for the code example given above, for the layouts with the custom "spacingexample" style:

/* Set the amount of horizontal cell spacing in a

* specific element with the "-spacingexample" style. */

.v-horizontallayout-spacingexample .v-horizontallayout-spacing-on { padding-left: 30px;

}

/* Set the amount of vertical cell spacing in a

* specific element with the "-spacingexample" style. */

.v-verticallayout-spacingexample .v-verticallayout-spacing-on { padding-top: 30px;

}

/* Set the amount of both vertical and horizontal cell spacing * in a specific element with the "-spacingexample" style. */

.v-gridlayout-spacingexample .v-gridlayout-spacing-on { padding-top: 30px;

padding-left: 50px;

}

The resulting layouts will look as shown in Figure 6.24, “Layout Spacings”, which also shows the layouts with no spacing.

206	Layout Cell Spacing

Managing Layout

Figure 6.24. Layout Spacings

Note

Spacing is unrelated to "cell spacing" in HTML tables.While many layout components are implemented with HTML tables in the browser, this implementation is not guaranteed to stay the same and at least Vertical-/HorizontalLayout could be implemented with <div> elements as well. In fact, as GWT compiles widgets separately for different browsers, the implementation could even vary between browsers.

Also note that HTML elements with spacing classnames don't necessarily exist in a component after rendering, because the Client-Side Engine of Vaadin processes them.

6.13.4. Layout Margins

By default, layout components do not have any margin around them. You can add margin with CSS directly to the layout component. Below we set margins for a specific layout component (here a horizontallayout):

layout1.addStyleName("marginexample1");

.v-horizontallayout-marginexample1

.v-horizontallayout-margin { padding-left: 200px; padding-right: 100px;

padding-top: 50px; padding-bottom: 25px;

}

Similar settings exist for other layouts such as verticallayout.

The layout size calculations require the margins to be defined as CSS padding rather than as CSS margin.

As an alternative to the pure CSS method, you can set up a margin around the layout that can be enabled with setMargin(true). The margin element has some default margin widths, but you can adjust the widths in CSS if you need to.

Let us consider the following example, where we enable the margin on all sides of the layout:

// Create a layout

HorizontalLayout layout2 = new HorizontalLayout(); containinglayout.addComponent(

new Label("Layout with margin on all sides:")); containinglayout.addComponent(layout2);

// Set style name for the layout to allow styling it layout2.addStyleName("marginexample");

Layout Margins

207

Managing Layout

//Have margin on all sides around the layout layout2.setMargin(true);

//Put something inside the layout layout2.addComponent(new Label("Cell 1")); layout2.addComponent(new Label("Cell 2")); layout2.addComponent(new Label("Cell 3"));

You can enable the margins only for specific sides. The margins are specified for the setMargin() method in clockwise order for top, right, bottom, and left margin. The following would enable the top and left margins:

layout2.setMargin(true, false, false, true);

You can specify the actual margin widths in the CSS if you are not satisfied with the default widths (in this example for a HorizontalLayout):

.v-horizontallayout-marginexample .v-horizontallayout-margin-left	{padding-left:
200px;}
.v-horizontallayout-marginexample .v-horizontallayout-margin-right	{padding-right:
100px;}
.v-horizontallayout-marginexample .v-horizontallayout-margin-top	{padding-top:
50px; }

.v-horizontallayout-marginexample .v-horizontallayout-margin-bottom {padding-bottom: 25px; }

The resulting margins are shown in Figure 6.25, “Layout Margins” below. The two ways produce identical margins.

Figure 6.25. Layout Margins

CSS Style Rules

The CSS style names for the margin widths for setMargin() consist of the specific layout name plus -margin-left and so on. The CSS style names for CSS-only margins consist of the specific layout name plus -margin. Below, the style rules are given for VerticalLayout:

/* Alternative 1: CSS only style */

.v-verticallayout-margin { padding-left: ___px; padding-right: ___px; padding-top: ___px; padding-bottom: ___px;

}

208	Layout Margins