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.

Now proceed:

Editing form will appear Tip: from now we call drop as the action to select a widget from tool palette and
click the mouse where you want that widget dropped.

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

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 expanded to occupy all available space into 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"

PM tree widget will show VBox3 added to Hbox1.
--step2
   |--Hbox1
      |--Vbox2
      |--Vbox3

both Vbox2 and Vbox3 share the available space into Hbox1.
We want save more space for Vbox3 than Vbox2, so:

now you can see selecting VBox2 and Vbox3 that marks show different sizes for
two boxes.
Tip: recall that you are setting box minimum size, not actual size.
  You will see that while you are adding buttons their size will be adjusted
in order to share all available space into Vbox2.

Now PM tree widget will show this situation
--step2
   |--Hbox1
      |--Vbox2
      | |-LabelButton0
      | |-LabelButton1
      | |-LabelButton2
      | |-LabelButton3
      |--Vbox3
 

Now PM tree widget will show this situation:
--step2
   |--Hbox1
      |--Vbox2
      | |-LabelButton0
      | |-LabelButton1
      | |-LabelButton2
      | |-LabelButton3
      |--Vbox3
 |-Scrolled0
     |-Pixmap0
 

A Open file dialog will appear, look around for a pixmap somehow bigger than
wour scrolled widget.
Tip:  where-you-untarred-builder/example/vdkbtext/vdkbuilder.xpm for instance You will see the pixmap file loaded and showed on Scrolled0

2. PACKING STRATEGY

May be you don't like the actual size of that 4 buttons, too big.
Their dimensions depend on gtk layout capability that can be
a bit confusing for a new user. But soon you surely
appreciate its power.

Tip: notice that each time you uncheck Expand and Filling and click on
Repack button each widget is resized to his minimum size. The widget
minimum size is the size necessary to accomodate the widget and his 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