MiG InfoCom Layout Quick Start Guide

MiG Layout Quick Start Guide v1.2.2

This is a quick start to MiG Layout. For further information look at www.migcomponents.com as it will be
updated with links to the new and relevant information.

To start using MiG Layout all you need to do is to download the miglayout.jar and include it in your project or
classpath. There are different versions for Swing and SWT, but they work exactly the same. There is also a
version for JSE 1.5 and one for 1.4 where the latter has varargs support in the API.

Adding Components to the Grid

Adding components to a Container is as simple as writing text and follows the same basic principle. If you
just add them they will end up on the same row. When you want to change to next row you specify the
constraint "wrap" and the next component will be on the next row. For example:

panel.add(comp1)

panel.add(comp2)

panel.add(comp3, "wrap") // Wrap to next row

panel.add(comp4)

comp1 comp2 comp3

comp4

The grid can also be set to auto wrap at a specific column index by specifying that in the layout constraint
when creating the layout manager. Next shows how to create the same grid without having to specify the
"wrap" when adding comp3. It means that the grid should auto wrap after column 3 and there will thus not be

a fourth column.

MigLayout layout = new MigLayout("wrap 3");

From v2.5 the next row's gap can be set directly after the wrap keyword. E.g:

panel.add(comp3, "wrap 15")

will make the row gap 15 pixels high. You can even make the gap "pushing" by specifying for instance "wrap
push".

Merging and Splitting Cells

It is equally easy to split or span cells. Here is how to create the next grid.

panel.add(comp1)

panel.add(comp2, "span 2") // The component will span two cells.

panel.add(comp3, "wrap") // Wrap to next row

panel.add(comp4, "span") // Span without "count" means span whole row.

comp1 comp2 comp3

comp4

Span optionally takes two indexes, x and y. This means that you can span cells like this:

© 2009 MiG InfoCom AB

panel.add(comp1);

panel.add(comp2, "span 2 2"); // The component will span 2x2 cells.

panel.add(comp3, "wrap"); // Wrap to next row

panel.add(comp4);

panel.add(comp5, "wrap"); // Note that it "jumps over" the occupied cells.

panel.add(comp6);

panel.add(comp7);

comp1

comp4

comp2

comp3

comp5

comp6 comp7

It is equally easy and intuitive to split cells.

panel.add(comp1);

panel.add(comp2, "split 2"); // Split the cell in two

panel.add(comp3); // Will be in same cell as previous

panel.add(comp4, "wrap"); // Wrap to next row

panel.add(comp5);

comp1 comp2 comp3 comp4

comp5

It is of course possible to both span and split cells at the same time. You can for instance span three cells
and split that three-cell-wide cell into two.

Using Absolute Cell Coordinates

If you don't want to use the "flow" way to put components into grid positions you can instead use absolute
coordinates. For instance:

panel.add(comp1, "cell 0 0"); // "cell column row"

panel.add(comp2, "cell 1 0");

panel.add(comp3, "cell 2 0");

panel.add(comp4, "cell 0 1");

Would produce the same grid as the first example at the top.

comp1 comp2 comp3

comp4

You can also use the absolute cell way to span and split cells. If a component is put in a cell that already has
a component the cell will be split and both cells will end up in the same cell, sharing its space. To make the
same grid as the second example above you do like this:

© 2009 MiG InfoCom AB

panel.add(comp1, "cell 0 0");

panel.add(comp2, "cell 1 0 2 1"); // "cell column row width height"

panel.add(comp3, "cell 3 0");

panel.add(comp4, "cell 0 1 4 1");

comp1 comp2 comp3

comp4

Specifying Gaps

Generally gaps are added where they make sense and this is performed on a platform by platform basis. For
instance Mac OS X will have bigger gaps than Windows or Linux in general. There are two kinds of gaps.
Grid row gaps and Component gaps. They default to proper values but you can change them however you
like.

Grid gaps

In the grid illustrations above they are the small spacing columns and rows between the real columns and
rows. Their size can be set in the column and rows constraints when creating the layout manager (or set on
the layout manager object afterwards). E.g.

MigLayout layout = new MigLayout(

"", // Layout Constraints

"[][]20[]", // Column constraints

"[]20[]"); // Row constraints

would create something like this:

comp1 comp2 comp3

comp4

where the bigger spacing row and column is 20 pixels. You can of course use any unit to specify the size but
the default default is pixels (you can change this though). For instance "20mm" will make it 20 millimeters
wide.

Note that from 2.5 you can specify the gap when using the "wrap" keyword. E.g. "wrap 15px"

The space between the square brackets [ (here..) ] is the place where you specify the row and component

constraints such as alignment and size. More on this later.

Component gaps

The only situation where there is a default component gap > 0 is between components in the same (thus
split) cell. You can however change this by specifying a gap size when adding the component. Gaps around
components is the distance to the closest edge, may it be the cell "wall" or another component in the same
cell. If we use the first example this is how it would be:

panel.add(comp1)

panel.add(comp2, "gapleft 30")

© 2009 MiG InfoCom AB