You can set the alignment of the component inside a specific layout cell with the setComponentAlignment() method. The method takes as its parameters the component contained in the cell to be formatted, and the horizontal and vertical alignment.

Figure 5.5. Cell Alignment Modes

-- This section is unfinished --

The OrderedLayout and GridLayout layouts offer a setSpacing() method for enabling space between items in the layout. Enabling the spacing adds a spacing style for all cells except the first.

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

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

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

Enabling the spacing adds spacing style names to all the cells except the first one (on left or top), thereby allowing setting of amount of spacing between the cells. Spacing can be horizontal or vertical, depending on the direction of the OrderedLayout, or both for GridLayout. The name of the spacing style is the base name of the component style name plus "-hspacing" or "-vspacing" for horizontal and vertical spacing, respectively, as shown in the following table:

Below we specify the exact amount of spacing for the code example given above, for the elements with the "spacingexample" style name:

/* Set horizontal cell spacing in specific layout with "spacingexample" style. */
.i-orderedlayout-spacingexample .i-orderedlayout-hspacing {
    padding-left: 30px;
}

/* Set vertical cell spacing in specific layout with "spacingexample" style. */
.i-orderedlayout-spacingexample .i-orderedlayout-vspacing {
    margin-top: 30px;
}

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

Figure 5.6. Layout Spacings

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:

layout1.addStyleName("marginexample1");

.i-orderedlayout-marginexample1 { padding-left:   200px; }
.i-orderedlayout-marginexample1 { padding-right:  100px; }
.i-orderedlayout-marginexample1 { padding-top:    50px;  }
.i-orderedlayout-marginexample1 { padding-bottom: 25px;  }

In addition, you can enable a special margin element around the layout 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
        OrderedLayout layout2 = new OrderedLayout(OrderedLayout.ORIENTATION_HORIZONTAL);
        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");
        
        // 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:

.i-orderedlayout-marginexample .i-orderedlayout-margin-left   {padding-left:   200px;}
.i-orderedlayout-marginexample .i-orderedlayout-margin-right  {padding-right:  100px;}
.i-orderedlayout-marginexample .i-orderedlayout-margin-top    {padding-top:    50px; }
.i-orderedlayout-marginexample .i-orderedlayout-margin-bottom {padding-bottom: 25px; }

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

Figure 5.7. Layout Margins

.i-orderedlayout-margin-left   {padding-left:   ___px;}
.i-orderedlayout-margin-right  {padding-right:  ___px;}
.i-orderedlayout-margin-top    {padding-top:    ___px;}
.i-orderedlayout-margin-bottom {padding-bottom: ___px;}