CHAPTER 3 Layout

Boxes

Boxes are used to arrange components by tiling along one axis and aligning along the other. Lets being our study of boxes by placing three buttons inside a vbox (a vertical box) obtained from Fresco's layout kit.

Glyph_var vbox = layout_kit->vbox();
vbox->append(button1);
vbox->append(button2);
vbox->append(button3);

In order to view our box on the screen, we place a margin around it (to keep the buttons away from the edge of the window) and call FrescoLib::run().

Glyph_var margin = layouts->margin(vbox, 15.0);
FrescoLib::run(nil, margin);

The size of the margin is 15.0 "printer points". Printer points are resolution-independent coordinates equal to 1/72 of an inch. The FrescoLib::run() call creates a "main viewer" for the vbox and places the main viewer inside a window object. Figure 3-1 shows the running application (where the user has pressed button2) and a diagram depicting the glyph structure of this program.

Let's take a look at a more sophisticated component that we can build by placing boxes inside boxes. We'll start by getting three objects from Fresco's widget kit: a panner and two scrollbars.

// (Some details omitted)
Glyph_var panner = widget_kit->panner(xadj, yadj);
Glyph_var hscrollbar = widget_kit->scroll_bar(X_axis, xadj);
Glyph_var vscrollbar = widget_kit->scroll_bar(Y_axis, yadj);

These components are shown individually in figure 3-2 and then as the result of arranging them using boxes. Panners are generally used to scroll large objects, such as pictures, inside some frame. For this example, we simply attach the panner to the scrollbars so that (1) manipulating the panner's "handle" will change the scrollbars and (2) manipulating the scrollbars will move the handle.

Remember the importance of this example is not the interaction but rather the way the components are arranged using boxes. Figure 3-3 shows the layout using a vbox and hbox (a horizontal box) and as well as the glyph diagram. The layout code is shown here.

Glyph_var vbox = layout_kit->vbox();
vbox->append(panner);
vbox->append(hscrollbar);
Glyph_ptr hbox = layout_kit->hbox();
hbox->append(vbox);
hbox->append(vscrollbar);

We'll come back to this example a bit later. First let's explore tiling and alignment in more detail.

Generated with CERN WebMaker