The MagPi - February 2020

Let’s add a VBox to put some widgets in. The
widget palette has a section labelled ‘Containers’, in
which the first two entries are an HBox and a VBox

• click the VBox, and then move the cursor into the
  blank window and click within it. A dialog will pop
  up asking how many items you want in the VBox –
  set it to 2, and click ‘Create’ (Figure 3, overleaf).
  You’ve now got a blank window with a line across
  the middle, showing the VBox. We’re going to
  add a label to the top, and a button to the bottom.
  Find these in the ‘Control and Display’ section of
  the palette – first click on each in the palette, and
  then click in the relevant section of the VBox in the
  design area to add them (Figure 4).
  If you look at the top of the right-hand column,
  you’ll see the hierarchy of widgets being displayed


• a GtkWindow, containing a GtkVBox, containing
  a GtkLabel and a GtkButton. If you click on one of
  the widgets in the hierarchy, the options displayed
  in the tabbed area at the bottom of the right-hand
  column will be those for that widget.
  Click on the GtkLabel, and scroll through the
  options on the ‘General’ tab; you’ll find a section
  labelled ‘Edit label appearance’, including the
  entry ‘Label’ – use this to set the text in the label to
  whatever you want (Figure 5).
  Click on the GtkButton, and find the Label section
  for it – it’s under ‘Label with optional image’ –
  change the label for the button to ‘Quit’.
  It’s worth investigating the options on all the tabs
  at the bottom of the right-hand column – there are

too many to go into here, but of particular interest

are those on the ‘Packing’ tab; these allow you to

set the expand, fill, and padding options which were

available when adding widgets to boxes from code

• if you play with them, you can get a good feeling
  for how much control you have over layout of the
  window, particularly when combining multiple
  boxes inside each other, as Glade allows you to do.

The other thing that it is important to note about

the right-hand column is that Glade assigns every

widget a name – it can be seen in the hierarchy list

at the top, and as the top entry on the ‘General’

tab. Glade assigns names as the name of the widget

type followed by a number, but you can change

these if you want. But there is one vital rule – every

widget in a layout file must have a unique name. If

two widgets have the same name, the layout file is

invalid and will not load correctly.

Your button and label widgets should have the

names ‘button1’ and ‘label1’, and your window

should be ‘window1’ – remember these, as they

are important when linking the code to the layout

file. For now, save your layout as mylayout.glade

by choosing the ‘Save As’ option in the ‘File’ menu.

Figure 2 An

empty window

If two widgets have the same name,

the layout file is invalid and will not

load correctly

Figure 2

TUTORIAL

Glade layout editor with C and GTK magpi.cc 55