VDKBuilder Tutorial
STEP 2
Return to Index

In this chapter we learn to make more complex layouts using VDKBuilder

- Run vdkbuilder

- Make a new project in your-home/vdkb-examples/ named step2.prj
as you learned in step1.

1. MAKING NESTED LAYOUTS
Suppose we want make a layout like this:

Main Window |

button | a scrolled
button | pixmap
button |
button |

as you can see we need:

> an external horizontal box (say Hbox1) that contains two vertical boxes:
> (say Vbox2 and Vbox3). Vbox2 contains 4 buttons and Vbox3 contain
> a scrolled widget that contains a pixmap.

Making this nested layout is easy with builder:

- select and expand step2 node in the Project Manager (PM)
- double click on the node labeled your-home/vdkb-examples/step2.frm

The editing form will appear

- drop a horizontal box onto the main form

Tip: remember, to drop a widget means to select the widget from the pallette and
then click on the area where you want it placed.

The PM tree widget will show Hbox1 added to step2 form.
--step2
|--Hbox1

- drop a vert box into HBox1

The PM tree widget will show VBox2 added to Hbox1.
--step2
|--Hbox1
|--Vbox2

Now we want add to HBox1 another vertical box but as you can see HBox1 is
not selectable since it's completely covered by Vbox2. That's normal since
Vbox2 has filled all of the available space in HBox1.
We use Widget Inspector (WI) to add nested containers.

- select the Hbox1 node in the WI tree list
- select a vertical box from the tools palette

(you can see the pointer is a cross hair now)

- right click on the selected node in WI (Hbox1)

a pop-menu will show you: "Drops a <VDKBox> into Hbox1"

- select that menu and you will see it adds another box to Hbox1.

The PM tree widget will show VBox3 has been attached to Hbox1.
--step2
|--Hbox1
|--Vbox2
|--Vbox3

both Vbox2 and Vbox3 share the available space in Hbox1.
We want to have Vbox3 take up more space than Vbox2, so:

- select Vbox3 in the edit form
- right click and a pop-menu will appear
- select "set min size" menu
- adjust horizontal size to around 300 pixel
- close size dialog form

now you can see selecting VBox2 and Vbox3 with marks that show the different sizes for
two boxes.
Tip: recall that you are setting the minimum size for the box, not actual size.

- resize form until it is its minimum size; the form will shrink until both Vbox3
and Vbox2 reach their minimum size. (Vbox2 minimum size even if
not explicitely set was computed with form size - Vbox3 size)
- select Vbox2 and drop 4 buttons on it

You will see that while you are adding buttons their size will be adjusted
in order to share all of the available space in Vbox2.

- Resize the form to accomodate all of the buttons captions if necessary

Now the PM tree widget should look like this:
--step2
|--Hbox1
|--Vbox2
| |-LabelButton0
| |-LabelButton1
| |-LabelButton2
| |-LabelButton3
|--Vbox3

- drop a scrolled widget into Vbox3
- drop a pixmap into the scrolled widget
Tip: recall that a scrolled widget is transparent so to select it you have to
click on the scrollbars; otherwise you will select Vbox3 instead of Scrolled0.

Now the PM tree widget should look like this:
--step2
|--Hbox1
|--Vbox2
| |-LabelButton0
| |-LabelButton1
| |-LabelButton2
| |-LabelButton3
|--Vbox3
|-Scrolled0
|-Pixmap0

- select Pixmap0 in the WI and click on the "Set glyph" button

An Open file dialog will appear, look around for a pixmap that is bigger than
our scrolled widget.
Tip: where-you-untarred-builder/example/vdkbtext/vdkbuilder.xpm for instance

- double click on selected pixmap

You will see the pixmap file load and then shown on Scrolled0

- As usual click on Run icon to see the effect.

2. PACKING STRATEGY

May be you don't like the actual size of the 4 buttons. Too big?
Their dimensions depend on gtk's layout capability which can be
a bit confusing for a new user, but after only a little bit of work you
can see it's real power.

- select the button LabelButton0 and watch the WI
- uncheck both Expand and Filling checkbuttons
- set Padding to 1.0
- click on Repack button
- repeat the above actions for the other buttons

Tip: notice that each time you uncheck Expand and Filling and click on
Repack button each widget is resized to its minimum size. A widget's
minimum size is the size necessary to accomodate the widget and its content,
in this case the button caption. For containers the minimum size is the size
necessary to accomodate all contained objects at their minimum size.
Minimum size isn't the actual size since it depends on packing strategy,
normally all widgets share the available space but this behaviour can be
customized using packing flags and padding values.

here a picture of the final result.

EXERCISES

- try to set main form title to "VDKBuilder Tutorial step 2"
- set the caption of labelButton0 to "Quit" and connect the
click signal to quit the application.