Managing Layout

The default layout of Window and Panel is VerticalLayout with undefined height. If you insert enough components in such a layout, it will grow outside the bottom of the view area and scrollbars will appear in the browser. If you want your application to use all the browser view, nothing more or less, you should use setFullSize() for the root layout.

// Create the main window.

Window main = new Window("Main Window"); setMainWindow(main);

// Use full size. main.getLayout().setSizeFull();

Expanding Components

If you set a HorizontalLayout to a defined size horizontally or a VerticalLayout vertically, and there is space left over from the contained components, the extra space is distributed equally between the component cells. The components are aligned within these cells, according to their alignment setting, top left by default, as in the example below.

Often, you don't want such empty space, but want one or more components to take all the leftover space. You need to set such a component to 100% size and use setExpandRatio(). If there is just one such expanding component in the layout, the ratio parameter is irrelevant.

If you set multiple components as expanding, the expand ratio dictates how large proportion of the available space (overall or excess depending on whether the components are sized as a percentage or not) each component takes. In the example below, the buttons have 1:2:3 ratio for the expansion.

GridLayout has corresponding method for both of its directions, setRowExpandRatio() and setColumnExpandRatio().

Expansion is dealt in detail in the documentation of the layout components that support it. See Section 6.3, “VerticalLayout and HorizontalLayout” and Section 6.4, “GridLayout” for details on components with relative sizes.

6.13.2. Layout Cell Alignment

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 6.23, “Cell Alignments” illustrates the alignment of components within a GridLayout.

Layout Cell Alignment

203

Managing Layout

Figure 6.23. Cell Alignments

The easiest way to set alignments is to use the constants defined in the Alignment class. Let us look how the buttons in the top row of the above GridLayout are aligned with constants:

// Create a grid layout

final GridLayout grid = new GridLayout(3, 3);

grid.setWidth(400, Sizeable.UNITS_PIXELS); grid.setHeight(200, Sizeable.UNITS_PIXELS);

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);

...

The following table lists all the Alignment constants by their respective locations:

Table 6.1. Alignment Constants

TOP_LEFT	TOP_CENTER	TOP_RIGHT
MIDDLE_LEFT	MIDDLE_CENTER	MIDDLE_RIGHT
BOTTOM_LEFT	BOTTOM_CENTER	BOTTOM_RIGHT

Another way to specify the alignments is to create an Alignment object and specify the horizontal and vertical alignment with separate constants. You can specify either of the directions, in which case the other alignment direction is not modified, or both with a bitmask operation between the two directions.

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);

204	Layout Cell Alignment