Popular Mechanics: Working With Spacers

We promised you earlier that we would fix the position of the Extra Cheese check box by centering it. One way do to that is by using so-called spacers.

You can think of a spacer as a spring that has the power to move a block (a widget) but not to deform it. So, if you have a row layout containing two widgets, and you put a spacer in between them, the widgets will be pushed to the left and right sides as far as possible, but they will still keep their original size. If the user makes the dialog wider, the spring will take up the additional space, and if he or she makes it smaller, the spring will shrink accordingly.

Perhaps you can already guess how we can use spacers to center the Extra Cheese check box. [1] We just put a spacer at both sides of the check box, and since the two spacers (springs) have equal strength, they will always keep the check box in the middle of the form.

To start from the previous, completely laid out form, you first have to break the outermost layout. Then make the Extra Cheese check box a bit smaller and move it a bit to the right so that there is space to the left of it.

Now select Lay Out/Add Spacer from the menu bar or click on the spacer icon (see Figure 4-11), and insert two spacers left and right of the check box. When you try to insert a spacer, a tiny popup menu will open and ask you whether the spacer should be horizontal or vertical. Since we are talking about horizontal orientation here, select horizontal both times. Your form should now look roughly like the one in Figure 4-12.

Next make a row out of the two spacers and the check box by selecting all three of them and assigning a horizontal layout. The result (see Figure 4-13) will probably not be what you expected, but this problem will automatically go away in a minute.

Now re-create the outer layout that you had to break in order to be able to add the spacers: Assemble the three rows into a vertical layout that you create on the form itself. Change into test mode and see how the Extra Cheese check box always stays in the center (see Figure 4-14).

Of course, there are many more things you can do with spacers. Look, for example, at the size button group. Perhaps you think that it looks ugly and that the three radio buttons should be evenly spaced across the button group. If you want this, just put spacers between the radio buttons. If you add another two spacers above the first and below the last radio button, the remaining space will be evenly distributed above, between, and below the radio buttons. Or you could decide that you want them close together but in the lower part of the button group. In this case, just use one spacer and put it on top of the radio buttons. As you can see, spacers give you a lot of possibilities.

There are more things you can do with layouts. We haven't really talked about grid layouts yet or about the various properties that the layout managers themselves have. You'll learn more about this in the section All About Layout Management in Chapter 5.