The MagPi - February 2020

so you need to use the correct one. The version to

create GTK 3 applications is called ‘glade’. And,

just to be perverse, the version you need to create

GTK 2 applications is called ‘glade-3’. (Yes, that is

counter-intuitive and quite annoying!)

The first thing we need to do is to install glade-3.

At a Terminal, type sudo apt-get install glade-3,

and answer yes to any prompts. You should then

have an entry labelled ‘Glade’ in the Programming

menu on your desktop. If you launch it, you’ll see a

screen like the one shown in Figure 1.

This is the basic design screen in Glade. On the

left side is a palette of all the widgets available. In

the centre is the area where you actually design your

window, and on the right is an area which allows

you to set the properties of individual widgets.

Using Glade to create a layout file

We’ll create a simple window for our application,

so the first thing we need to do is to add a top-

level window. Under the palette section labelled

‘Toplevels’, the top-left entry is a GtkWindow – if

you hover over it with the mouse, a tooltip will

pop up with the label ‘Window’ to confirm this. So

just click on this icon to add a blank window to the

design area in the centre of the screen (Figure 2).

Use this layout editor to more easily create window layouts for applications

A

s can be seen in the previous tutorials in

this series, while creating widgets with

GTK is a lot easier than doing it all from

scratch by writing pixels to screen buffers, you

can still end up with quite a lot of code for even

a fairly simple window layout, and you do have

to think quite carefully about the code you are

writing to make sure the window looks the way

you want it to. It’s also less than ideal that you

can’t actually see what the window will look like

until you run the application.

Fortunately, there is a way to work on the layout

of a window without having to write all its code,

and that is to use a layout editor. GTK allows the

layout of widgets on a window to be defined in an

XML file, which is then loaded and drawn on the

screen when the application runs – you still need

to link up the behaviour of any widgets to code, but

the appearance of the widgets can be determined

in advance. A layout editor is a useful tool to create

such an XML file.

The most widely used layout editor for GTK

is a tool called Glade. There are two versions of

Glade, one for GTK 2 applications and one for

GTK 3 applications; they aren’t interchangeable,

Simon

Long

Simon Long

is a software

engineer working

for Raspberry Pi,

responsible for

the Raspberry

Pi Desktop on

both Raspbian

and Debian.

rpf.io

MAKER

Glade layout editor

with C and GTK

Figure 1 The Glade layout editor

An Introduction

to C & GUI

Programming

For further tutorials on how to start coding

in C and creating GUIs with GTK, take a

look at our new book, An Introduction to

C & GUI Programming. Its 156 pages are

packed with all the information you need

to get started – no previous experience of

C or GTK is required!

magpi.cc/guibook

Part 10

Figure 1

TUTORIAL

54 magpi.cc Glade layout editor with C and GTK