Ultra Light Client Guide and Reference

ULC layout design tips

ULC layout is based on a few fundamental concepts. Combining layout types recursively enables not only sophisticated layouts but also automatic resize behavior. Many ways to solve a given layout problem exist, and it is not always obvious which approach is the most appropriate. The following paragraphs outline an overall strategy for designing and implementing a layout using ULC. In addition, we provide guidelines for cases with alternative solutions.

Use nested boxes. You cannot implement layouts by explicit positioning and resizing of widgets. Instead, design and build a tree of one- or two-dimensional boxes. We believe that box layout is easiest to use; therefore, layouts based on Box are much easier to understand and maintain across different desktop environments.

Plan and design the structure of your layout in advance. Even when using the Composition Editor, layout design is not just painting dialog controls on a drawing surface. For almost every layout, a resizing strategy has to be defined: Which elements should grow if the containing window is enlarged? What happens in a localized version of the layout when a supported language has different string length requirements? Another requirement is aesthetics: How do we keep controls nicely grouped and aligned and spaced not too far apart, even if everything resizes drastically?
Nested Boxes or a 2-Dimensional Box?

Start from top to bottom. Identify the top-level elements or groups of elements. Decide whether to use a horizontal, vertical or two-dimensional box layout. Sometimes, the best solution is not as simple as it might seem. For example, is the top-level layout of the previous illustration a Vertical Box with two rows, each containing a Horizontal Box (following, right), or is it a 2x2 Box (following, left)?
Possible structures for previous example

Sometimes an answer can be found by asking whether elements should be kept aligned across horizontal rows, for example, whether the label Dossier should line up with the find entry field. If yes, a 2x2 Box has to be used. If not (which appears to be more realistic in this case), it is better to nest independent horizontal boxes within one Vertical Box.

Avoid deep nesting. Always try to keep your layout structures simple. The most important way to achieve this goal is by avoiding too-deeply nested structures. Using two-dimensional boxes instead of nesting boxes simplifies the layout. This goal sometimes conflicts with making the layout visually appealing, because the two-dimensional box forces elements into a rigid grid, aligning elements that need not or should not align. Next, we describe how spanning makes the use of two-dimensional boxes much more flexible.

Use spanning. With spanning, you can merge adjacent cells to form larger cells. This is useful if you want to align components with different size requirements within an overall grid. Without spanning, the width or height of rows and columns is determined by the widest or tallest element. With spanning, exceptionally large elements can grow into neighboring cells without making their containing rows or columns too wide or tall.

One way to implement the following example is to nest a 1x3 Box inside a 3x2 Box. With spanning, it is possible to employ a 3x4 box and avoid nesting altogether.
Using spanning

Spanning is a very powerful mechanism. You can use a grid layout, which improves the overall aesthetics because elements are aligned and their spacing is more uniform. On the other hand, you are not forced to make everything the same size, because you can span elements across multiple grid cells. Spanning makes it easy to have elements with different sizes always use multiples of some base cell size, which is visually more appealing than having elements with various unrelated sizes.

Build the nested grid first; fill in the details later. Because constructing Box hierarchies is simpler than rearranging them, build and test the complete box layout before filling in and adjusting the settings of all the non-layout widgets (labels, buttons, and so on).


[ Top of Page | Previous Page | Next Page | Table of Contents | Index ]