[Contents] [Index] [Next] [Previous]

Grouping Components


The following subsections describe how you should group components by using the group components described in Choosing Components:

Separators are a good tool for visually separating groups of components. You should use Separators in your application any place where the border between two groups of components is not obvious by some other means, such as for a significant change in component types, framing, or a division by space.

Grouping Similar Components

Components similar in appearance and function group together naturally. You should organize similar components together. Similar PushButtons, as in a Menu, and a Panel of CheckButtons, as in a list of options, are good examples of where grouping is important. Without grouping, related actions are difficult to find. One of the most important cases is a Panel of RadioButtons. Without grouping, when you turned on one RadioButton, you might not see the previous button turn off. You can also associate a title with a group of components to better associate the group and its purpose.

Arranging Components for Fixed Layout

Components that are grouped using a Composition group component can be positioned as they best fit, both physically and visually. This is often the case in the MainWindow client area, and is also useful when the layout of the components is important to the application.

When you lay out components in this manner, remember that your application can be resized by the user. This can be compensated for in a number of ways. If the area has a fixed size and is not appropriate to scroll, like a control panel, you can either clip the area or turn off resizing. If the area has a fixed size and is appropriate to scroll, you should include ScrollBars for scrolling the viewable area.

Arranging Components for Resizing Layout

Composition component groups can also be positioned so that the position and size of each component is relative to the Composition component group or other components in the group. This style of layout permits the components to change size proportionally to any change in the size of the Composition component.

Sometimes a window is resized too small to be useful. Your application can either simply ignore this, clip the region once all the components are at their minimum size, remove less useful components to make room for more shrinking, or replace all the components with a message that indicates that the minimum size is reached, stating that the user needs to enlarge the window to continue working in it.

Arranging Components for Aligned Layout

Panels can arrange components aligned horizontally, vertically, or in two dimensions. Buttons are usually aligned in Panels horizontally along the bottom of the client area, either in a MainWindow or in a DialogBox. ToggleButtons should be arranged in vertical Panels so the graphics align and look neat. A common use of Panels is in building Menus or RadioBoxes; that is, a set of RadioButtons. Two-dimensional Panels are commonly used in graphics programs to present drawing styles and in spreadsheets to contain cells.

Your application should use Panels to provide the best organization for large groups of similar components. Panels should be placed in a Composition component group to allow for proper user resizing either by using ScrollBars or by resizing the elements of the Panel.

Arranging Components in PanedWindows

PanedWindows provide a way for the user to simply adjust the size of components relative to one another. You should use PanedWindows to separate user tasks in an application with limited space. This allows the user to ignore elements of the application that are unused.

PanedWindows can also be used to present two simultaneous views of the same data. For example, a text editor can use multiple Panes, with a separate Text component in each Pane to allow the user to write in one section of a document while looking at another. The user can then resize the Panes to show more or less of either block of text.

PanedWindows can be composed of either vertical (one on top of the other) or horizontal (side by side) sets of Panes, Separators, and Sashes. Users can resize Panes by dragging the boundary between them. Making one Pane bigger makes the other Pane smaller, while the overall size of the window remains the same.