Making Smalltalk Easier

This is a follow-up to an older post warning against using the automatic "relative" layout tool, which virtually guarantees ridiculously-looking UIs when a window is resized.

The right way to tackle the problem is to use VisualWorks layout frames by properly setting fractions and offsets of each widget. "Properly" is the key here. The interface for doing that, with its eight input fields showing mystic values can indeed look forbidding. However, layout frames is a mechanism that can be very powerful once mastered.

The basic idea is very simple. The position of each of the four borders of a widget within the parent canvas is computed using two parameters: a fraction and an offset. One of the dimensions of the parent canvas (width for left and right widget borders, height for top and bottom) is multiplied by the fraction, and the offset is added to the result. The result is the position of the widget border.

	position = parentSize * fraction + offset

For example, if the fraction is 0 and the offset is 10, parent size has no effect on the result and the border is always positioned 10 pixels off the left or top edge of the parent canvas. If the fraction is 1 and the offset is -10, the result is always 10 pixels less than the parent size, and the border is positioned 10 pixels off the right or bottom edge of the parent.

In practice, this translates to combinations and variations of only three basic patterns:

1. A fixed size widget that doesn't move when the window is resized. Use 0 for all fraction values. Use positive offset values that place the widget where it needs to be.

2. A fixed size widget that moves when the window is resized. so that it is always the same distance from the window bottom right corner. Use 1 for all fraction values. Offset values are all negative, specifying distances from the bottom right corner.

3. A widget that resizes with the window, with fixed size margins around it. Use 0 for left and top fractions and 1 for bottom and right. Use positive values equal to the left and top margin widths as left and top offsets. Use negative values which are negations of right and bottom margin widths as right and bottom offsets.

Once you familiarize yourself with how and why these layouts work, you will be able to create any other. For example, to position an input field so that it is always 10 pixels off the top left corner of the window, has a fixed height, and resizes with the window to stay 5 pixels away from the horizontal center point, use the following settings:

Top fraction: 0, top offset: 10, bottom fraction: 0 bottom offset: 35. This is just like in the first pattern, producing a widget 25 pixels tall that stays pinned to the top of the window, with a 10 pixels margin.

Left fraction: 0, left offset: 10, right fraction: 0.5, right offset: -5. This is almost like in the third pattern, except the right fraction is 0.5 rather than 1, pinning the right border to the center of the window rather than to the right edge.