VDKBuilder Tutorial
STEP 2
Return to Index
In this chapter we learn to make more complex layouts using 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.