VDKBuilder Tutorial
STEP 2
Return to Index
In this chapter we learn to make more complex layouts using VDKBuilder
-
Make a new project into your-home/vdkb-examples/ named step2.prj
as you learned on previous 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.
Now proceed:
-
select and expand step2 node into Project Manager (PM)
-
double click on node your-home/vdkb-examples/step2.frm
Editing form will appear
-
drop a horizontal box into main form
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
-
drop a vert box into 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.
-
select Hbox1 node into WI
-
select a vertical box from the tools palette
(you can see the pointer is a cross hair now)
-
right click on WI selected node (Hbox1)
a pop-menu will show you: "Drops a <VDKBox> into Hbox1"
-
select that menu and you will see another box added to 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:
-
select into edit form Vbox3
-
right click and a pop-menu will appear
-
select "set min size" menu
-
adjust horizontal size around 300 pixel
-
close size dialog form
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.
-
resize form until his minimum size, form will shrink until both Vbox1
and Vbox2 reach their minimum size. (Vbox2 minimum size even if
not explicitely set was computed with form size - Vbox3 size)
-
select Vbox1 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 available space into Vbox2.
-
Resize form to accomodate all buttons captions if necessary
Now PM tree widget will show this situation
--step2
|--Hbox1
|--Vbox2
| |-LabelButton0
| |-LabelButton1
| |-LabelButton2
| |-LabelButton3
|--Vbox3
-
drop a scrolled widget into Vbox3
-
drop a pixmap into scrolled widget
Tip: recall that scrolled widget is transparent
so to select it you have to
click on scrollbars otherwise you select Vbox3
instead Scrolled0.
Now PM tree widget will show this situation:
--step2
|--Hbox1
|--Vbox2
| |-LabelButton0
| |-LabelButton1
| |-LabelButton2
| |-LabelButton3
|--Vbox3
|-Scrolled0
|-Pixmap0
-
select Pixmap0 and into WI click on "Set glyph" button
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
-
double click on selected pixmap
You will see the pixmap file loaded and showed 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 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.
-
select on edit form the button LabelButton0 and watch to WI
-
uncheck both Expand and Filling checkbuttons
-
set Padding to 1.0
-
click on Repack button
-
repeat above actions also for others buttons
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
-
try to set main form title to "VDKBuilder Tutorial step 2"
-
set the caption of labelButton0 to "Quit" and connect
clicked signal to quit the application.