VDKBuilder Tutorial
STEP 3
Return to Index

In this chapter we learn how use fixed and auto-layout capability togheter

Here the final result:

1. ABOUT FIXED WIDGET
The fixed widget (icon is showed on the main toolbar under containers),
is a container widget that does not implement automatic layout feauture.
Widgets contained into a fixed do not expand and can be resized/moved
programmatically by the user.
Fixed widget moving/Resizing operations
These operations can be done both with the mouse and the keyboard

Keyboard

- arrows keys up,down,left,right: move the selected widget in the arrow
key direction (fine tuning)
- shift+arrow keys, move snapping to the grid
- ctrl+arrow keys, resize the selected widget in the arrow key
direction (fine tuning)
- ctrl+shift+arrow keys, resize snapping to the grid

Mouse

- left button mouse click: selects the widget and drags it for a fine tuning
- shift+left button mouse click: selects the widget and drags it snapping to grid
in both cases mouse pointer have the "move" shape
- left button mouse click on the right bottom corner: selects the widget and drags resizing
it for a fine tuning
- shift + left button mouse click on the right bottom corner: selects the widget and drags resizing
it snapping to grid

Warning:
Unfortunately moving/resizing with the mouse does not work perfectly , with a "gummy"
behaviour and in some case do not move at all. In these cases i suggest to move/resize
using keyboard that is assured to work near perfectly.

2. NOW LET'S BEGIN

- Make a new project into your-home/vdkb-examples/ named step3.prj
as you learned on previous step1.
- Select step3 MainForm window and drop a Menubar

- Select Menubar0, click right mouse button and choose "Add menu item" from pop menu
a new MenuItem0 item will be added to Menubar0
- Select MenuItem0 and into WI and edit Caption field writing "_Quit", press Enter.
Tip: The underscore prefixed to "Q" makes a keyboard accelerator: alt+q
- Select again MenuItem0 , click right mouse button and choose "Set min size " from pop menu
Adjust horizontal size to 50
- Drop a fixed into step3 main Form, you will see the fixed widget showing a grid with a default spacing of 8.

Tip: grid can be removed and/or customized using WI

- Drop a Custom List (with 2 columns) into the fixed.

- Move/resize the custom list to occupy the rightmost part of the window

- Click on custom list Title#0

- Edit on WI the Column Title field to write "Name" and press Enter

- Click on custom list Title#1

- Edit on WI the Column Title field to write "Address" and press Enter

- Drop a frame into fixed widget. move/resize it to occupy the leftmost part of the window.

- Select frame and edit on WI the field Label to write "Actions", press Enter.

- Drop 2 LabelButtons into the frame

- Drop a CustomButton into the frame

- Drop again a LabelButton into the frame.

- Using WI select buttons and edit Caption fields accordlyng to the picture above:
Add, Remove, Edit, Sort
- Select the CustomButton and use WI SetGlyph button to choose some pixmap around
Tip: if you go into vdkbuilder dir you can find: vdkbuilder/pixmaps/simpson1.xpm.
- Click on "Set xpm to project dir" button, this causes the xpm files to be copied into
your project dir.
- Select frame and adjust the size using both mouse or keyboard to make all contained
buttons a bit narrow.
Tip: resizing a container causes all contained widgets to be resized as well. Recall
only direct childs of a fixed can be resized with mouse/keyboard, in this case resizing
on button basis does not work.
- Press run icon on main toolbar and wait for the program running,
you should be able to see the above picture.
- Close application and VDKBuilder Maker

3. CONNECTING TO QUIT APPLICATION

- Select MenuItem0 on WI and switch on Signal page

- Click on ActivateSignal button

- Click on signal map the item that shows: ON_SIGNAL(MenuItemo0,activate_signal,OnMenuItem0Activate)

- Click list column button entitled "Write or jump to response method"
(or double click on list item)

You will see the editor popup showing your signal response defintion into source code.

- Edit the response method to read:
// signal response method
bool
Step3Form::OnMenuItem0Activate(VDKObject* sender)
{
Close();
return true;
}

- Choose from main menu the item Project->Make and wait for program compilation
- Close VDKBuilder maker

- Click on run Icon, no you can close the application also using keyboard
accelerator "alt+q"