VDKBuilder Tutorial
STEP 2
Return to Index

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

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: The editing form will appear 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
 

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.

(you can see the pointer is a cross hair now) a pop-menu will show you: "Drops a <VDKBox> into 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:

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. 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. Now the PM tree widget should look like this:
--step2
   |--Hbox1
      |--Vbox2
      | |-LabelButton0
      | |-LabelButton1
      | |-LabelButton2
      | |-LabelButton3
      |--Vbox3
  Now the PM tree widget should look like this:
--step2
   |--Hbox1
      |--Vbox2
      | |-LabelButton0
      | |-LabelButton1
      | |-LabelButton2
      | |-LabelButton3
      |--Vbox3
 |-Scrolled0
     |-Pixmap0
  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 You will see the pixmap file load and then shown on Scrolled0 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.

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