VDKBuilder Tutorial
STEP 1
Return to Index
1. PREPARING AN EXAMPLE DIR
Prepare a dir vdkb-examples into you $HOME dir:
$ mkdir vdkb-examples
2. RUNNING BUILDER
Tip : Builder will automatically switches
into your home directory,
if you want a different start up dir, use
Tools -> Set Builder environment
under Tools menu, edit start
up dir field and click on Start Up Dir button.
Closing environment dialog choose to save
changes.
-
Run builder from an Xterm:
$ vdkb&
Tip: vdkb international language support
isn't yet completed, however
you can have it at some extent using
$ vdkb -it&
(italian version)
$ vdkb -de&
(german version)
3. CREATING A NEW PROJECT
-
Choose from File -> New... -> Project menu item
(or use
icon on toolbar)
A modal files saving dialog entitled "New project" will be showed.
The left panel lists all home dirs.
-
Select vdkb-examples in your home double clicking on it
-
edit the entry widget on bottom writing on it: step1.prj
-
click on "save" button
Now another modal window will show you the project name that you choosed:
you should read:
/your-home/vdkb-examples/step1.prj
-
select the icon labeled VDK
Tip: project types allowed:
- VDK normal vdk gui application
- console: a non gui application
that runs on a xterminal or in text mode.
- shared: a shared library
(not yet implemented)
- static: a static library
(not yet implemented)
Now the project manager will show the project files tree:
These are the first files builder has made for you.
-
your-home/vdkb-examples/step1.cc, contains main program skeleton
-
your-home/vdkb-examples/step1.h contains main program classes declaration
-
your-home/vdkb-examples/step1.frm contains gui interface instructions for
builder
Tip: even step1.frm if is a plain-text
files and is editable i do not suggest to patch it unless you
become familiar with Builder, the parser heavily
uses this file and is not error resistant.
4. FIRST RUN
-
Choose Project ->Make menu item
VDKBuilder Maker will appear and begins compilation:
-
Close VDKBuildermaker clicking on "Kill or Close" icon
-
Click on Run icon on the main toolbar
again VDKBuilder Maker will appear and runs the program.
An empty useless form entitled "step1 Main form" will appear
into screen.
-
Just click on form system menu "close" and application form will
disappear.
-
close VDKBuilder Maker clicking on "Kill or Close" icon
You have done first step: creating a trivial and unuseless gui application
without writing a single line of code.
5. ENTITLING AND RESIZING MAIN FORM
Now we will put a title on main form.
-
Select step1.frm om PM (project manager)
-
Click on Edit icon on PM toolbar (or double click selected step1.frm)
Now Form Edit window will appear together with WI (Widget Inspector)
Widget Inspector is an important feature, it permits you to edit widget
properties
and construct gui as well. It shows a widget tree, now the tree is
almost empty
since it contains just the form itself.
-
select first WI tree node labeled step1
WI title changes to show which widget is, in this case it shows:
Inspector: Step1::step1, this means that Step1 main form is under inspecting.
-
select the form title entry and edit "VDKBuilder Tutorial step 1"
-
click on button labeled Set form title
You will see that the main form title is changed now.
-
resize main form to make it narrow than now.
-
click again on Run icon on builder toolbar
now a modal dialog is presented warning you that your-home/vdkb-examples/step1.frm
is changed and need to be saved.
Again builder maker makes his job and a new main form is running into screen
with
a different title and a different size.
-
click on Kill or Close icon on builder maker, this will shut down
the application
-
click again on Kill or Close icon on builder maker.
6. BROWSING SOURCE FILES
-
Select on PM the node labeled: step1.cc and click Edit icon on PM
toolbar
(or double click on selected tree node)
now builder editor will pop up showing step1.cc file
-
select editor page and press F6
Now step1.cc is syntax-coloured
(you have same result right clicking and selecting Syntax Higlight
on pop-menu.)
You can see what builder wrote for you, a skeleton application.
Notice :
void Step1Form::Setup(void)
method.
This in turn calls GUISetup() that is the function that builder
takes care for you.
Each form has two source files associated: one is step1.cc the
other is step1_gui.cc.
The former is at your hand, builder will never touch it (unless few
exceptions).
the latter is reserved for builder, is unuseful write on it since will
be rewritten by
builder each time you make/run the app.
At this stage you can't see them all since is the first time you make
step1.prj
-
now select from toolbar the Save project icon:

Watching on collapsed PM files tree you will see that under
/your_home/vdkb-examples/step1.frm
node there are two other nodes:
/your_home/vdkb-examples/step1_gui.cc
/your_home/vdkb-examples/step1_gui.h
those are gui related files that are under builder responsibility.
-
double click on /your_home/vdkb-examples/step1_gui.cc
Editor will pop-up showing /your_home/vdkb-examples/step1_gui.cc
At this stage void Step1Form::GUISetup(void) is filled only with form
size and title
but soon you will see that function grow sas you add widgets to form.
So we learned that Step1Form::Setup(void) calls Step1Form::GUISetup(void).
If you want change something in interface setup do not patch GUISetup(),
write
in Setup() after GUISetup() as remark suggests.
7. SHOWING UNDO AND JUMP TO ERROR CAPABILITY
Now we simulate a code error in order to see how compiler outputs are
integrated into
builder.
-
Select step1.cc into editor and modify Setup() to read:
/*
main form setup
*/
void
Step1Form::Setup(void)
{
GUISetup(); // vdkb gui setup
// put your code below here
error here
}
Tip: notice that even if you do not intentionally
hilight the source this will be
coloured as soon as you begin to write something.
-
click on Run icon and answer Ok to saving step1.cc request.
Now you'll see on builder maker these errors:
/your_home/vdkb-examples/step1.cc: In method `void Step1Form::Setup()':
/your_home/vdkb-examples/step1.cc:42: `error' undeclared (first
use this function)
/your_home/vdkb-examples/step1.cc:42: (Each undeclared identifier
is reported only once
/your_home/vdkb-examples/step1.cc:42: for each function it appears
in.)
/your_home/vdkb-examples/step1.cc:42: parse error before `}'
make: *** [/your_home/vdkb-examples/step1.o] Error 1
obviously your compiler complains about that offending line of code.
-
close builder maker clicking on Kill or close icon
you will see that the editor bottom panel list is filled with those messages
-
select the second error line named:
/root/vdkb-examples/step1.cc:42: `error' undeclared (first use this
function)
-
double-click on it and you will see the editor jumps and select error line
(or
better the line after).
-
correct the error cutting the offending line
Tip: you can correct the error pressing F4
(undo).
9. FILLING WITH WIDGETS
Now you will add some widgets to the form.
First of all we have to put a container as first widget into form.
-
Select edit form window
-
Select a vert. box from builder tool palette (under Containers page)
-
Point and click on main form area
Tip: notice that cursor becames a cross-hair,
this means that you are into
dropping mode. We call drop the action to
select an widget from tool palette
and drop that widget into a form or container.
At any time you can cancel
drop mode using Reset icon on tool bar. Drop
mode will be automatically
cancelled after the drop operations is ended.
A vertical box named Vbox1 will be added to the main form and WI will show
you
that box under step1 node.
Tip: is necessary put a container as first
widget since other widgets can be added only
to a container.
-
Select a label from builder tool palette (under "Text" page)
-
click over Vbox1, you see that a label named "Label0" is added to Vbox1
and WI will show the situation:
Step1 form contains Vbox1 that contains Label0. You notice that Label0
will expand to occupy all available space, that's normal.
-
now select a LabelButton from builder tool palette (under Buttons labeled
page)
-
click over Label0 on main form.
you will see that a button named LabelButton0 is added to Vbox1 and WI
will show the change, now VBox1 contains LabelButton0 as well.
And you will notice that the powerful gtk layout capability makes two
widget share
equally the available space.
Agreed looks ugly, probably main form size is too big to accomodate
just those two widgets.
-
Try to resize (shrinking) main form to its miminum size, notice that you
can do
this until the two widgets reach their minimum size.
-
Click on run to see the effect
-
Close the step1 application and builder maker
10. EDITING WIDGET PROPERTIES
Note: during this step answers Ok if builder request to save changed
files.
-
Select on form editing window Label0 widget
-
notice that WI has changed to reflect the selected widget
-
edit Label0 Caption property as: Hello world !
-
hit return key.
You will see that Label0 caption is changed
-
select c_justify on combo box and click on "Set justify" button
You will see Label0 caption center justified.
-
select LabelButton0 and edit caption as: Quit
-
click on "Set Caption" button
You will see the LabelButton0 caption changed.
-
again click on "Run" icon to see the effect
-
close step1 application and builder maker
Now we can see the effect of our changes into source code.
-
select on PM /your_home/vdkb-examples/step1_gui.cc node and double
click on it
You notice that editor will pop-up showing /your_home/vdkb-examples/step1_gui.cc
source code. Notice that GUISetup() is now changed, both Label0 and
LabelButton0 have
been added with their properties.
Ok, we have quite written an "hello" app without writing a single line
of code.
11. CONNECTING SIGNALS
In this step we connect "click" signal on LabelButton0 with a response
method
(or callback in gtk+ language).
-
select LabelButton0 node on WI and switch on "Signals" labeled page.
Available signals are displayed as a table of buttons and entry.
Each button caption is the signal you want connect and the entry the
signal response method.
Response method names are by default constructed joining On+widget
name+signal but if you
want you can change it.
-
click on clicked_signal button
the below response table is filled with the signal connection arguments
-
select the table line "ON_SIGNAL(LabelButton0,clicked_signal,OnLabelButton0Click)
-
click on list column header labeled "Write or jump to response method"
You will see that editor will pop up showing the response function definiton
into step1.cc:
Tip: this is the only case that builder will
touch your step1.cc, adding a response function.
Builder will never cancel this function, is
your job to do this if necessary.
// signal response method
bool
Step1Form::OnLabelButton0Click(VDKObject*
sender)
{
return true;
}
// signal response method
bool
Step1Form::OnLabelButton0Click(VDKObject*
sender)
{
Close();
return true;
}
-
again click on Run icon to see the effect
You will notice that clicking on label button labeled "Quit" will terminate
step1 application.
More detailed examples will come with TUTORIAL.step2
(I apologyze for my bad english, but that's the life, nobody
is perfect !)