Introduction

The GUI programming introduction document leads you through the basics of GUI programming. It explains some concepts and some of the basic GUI components as well as how to use them. The code is based on Python and PyGtk.

GUI programming introduction basics

– Overview

A Graphical User Interface (GUI) is an interface which consists of graphical objects such as windows, menus and icons. They are designed to interact with the underlying software.

Adding a GUI to a (command line) program means that your program uses an API of a GUI software. A GUI software can be a library, a RAD tool or an IDE.

If you want to build GUI applications, you have to understand the principles of event driven programming and object-oriented programming.

– GUI and events

If you perform an action on a GUI, an event is generated, so the program must be event driven.
The event is handled by the event-handler, the result will be sent back to the GUI.
Example : if you click on a button, an event is emitted. Now you have to connect this event to the event-handler in order to respond properly to the event.

A GUI program is basically built on 3 components :

• the overall program structure
• the GUI
• the event-handlers

Callback programming

The event-handler may be referred to as callback because GUI widgets “call back” to it in order to handle events. So you will see this type of programming referred to as “callback programming”.

– GUI and OOP

GUI elements are predefined as classes. You will find a window class as well as several classes for buttons, list boxes, menus, status bars, etc. The classes can be used to build several objects for the GUI. If you need special features for some objects, you have to build subclasses to achieve this.

– GUI vocabulary

Widgets

The origin of the term widget is a combination of the words window and gadget.
A widget is a visual component of a GUI, it is also called a control. The widget allows the user to interact with the underlying software (OS, application…).
Widget examples are : a window, a check-box, a radio button, a menu …

Frame

A frame is used to group widgets. Often a frame is used to represent the complete window and further widgets are embedded within it.

Window

A window or container is an area on the screen that displays content independently from the rest of the screen. A window usually includes other graphical objects like a menu bar,
tool-bars, controls …

Child

GUI applications tend to consist of a hierarchy of widgets. The top level frame comprising the application window will contain sub frames which in turn contain still more frames or widgets.
The widgets can be visualized as a tree structure with each widget having a single parent and a number of children. In consequence, the GUI environment can perform some common actions to a widget and all its children.

Event

Also called signal. It is emitted from an activated (clicked) widget.

Event-handler

Also called callback function. It executes the appropriate function for a given event.

– The containment tree

The widgets are contained in a tree structure with a top level widget controlling the entire interface. It has various child widgets which in turn may have children of their own.
Events arrive at a child widget and if it is unable to handle it, it will pass the event to its parent and so on up to the top level.
Similarly, if a command is given to draw a widget, it will send the command down to its children. A draw command to the top level widget will redraw the entire application. For example, if we set the background color for a container, all components inside the panel will have the same background color.
On the other hand, if a command is sent to a button, it will likely only redraw the button itself.
The concept of events percolating up the tree and commands being pushed down is fundamental to understanding how GUI’s operate at the programmer level, and why you always need to specify a widgets parent when creating it, so that it knows where it is located in the containment tree.

– How to integrate the GUI in a program

It’s common when programming GUIs to wrap the entire program as a class.
In this class you will have for example : the window, the widgets, the connections of the (widget-) signals to the event-handlers, the event-handlers themselves and the program logic. This model varies on the used GUI software.

– Things to remember

• GUI’s widgets are also known as controls
• Widgets are assembled in a containment hierarchy
• Different GUI softwares provide different sets of widgets, although there will be a basic set implemented
• Frames allow you to group related widgets and form the basis of reusable GUI components
• Event-handlers are associated with widgets by linking their name with the widgets
• Object-oriented programming can simplify GUI programming by creating objects that correspond to widgets and methods that correspond to events

Quick start

– Decide which programming language you use

Examples:
– C family
– Ruby
– Java
– Python
– other

– Decide which OS you use

Examples:
– Microsoft Windows
– Linux
– Others

– Decide which GUI software fits with your programming language and OS

Examples:
– Windows : Win32 API, .net framework, other
– Linux : Qt, GTK+, other

– Build the GUI

For example:

– Use a library : for example Pygtk for Python (“GTK+” based)

– Use a RAD tool : for example Glade for Python (“GTK+” based)

– Use an IDE : for example BoaConstructor for Python (wxPython based)

– “Quick and dirty” : add a GUI to your CL program with EasyGUI

– Build the overall program including the event-handlers and connect the GUI

Wrap the entire program as a class. Define the window and the widgets. Create the event-handlers. Connect the (widget-) signals to the event-handlers.

 

PyGtk in action

– PyGtk introduction

PyGTK is a set of Python wrappers for the “GTK+” object-oriented library.

PyGTK consists of several modules :

• GObject is a base class providing the common attributes and functions for PyGTK classes.
• ATK is the accessibility toolkit. This toolkit provides tools which help physically challenged people work with computers.
• GTK is the user interface module.
• Pango is a library which is used to work with text and internationalization.
• Cairo is a library for creating 2D vector graphics.
• Glade is used to build GUI interfaces from XML descriptions.

It’s a good practice to use the following program structure. The class does wrap the GUI and the program logic.

The class contains the :

• base window and the gtk main loop
• the widgets (put in a method)
• the signals (put in a method)
• the event-handlers (or callback functions)

The “GTK+” elements must have a specific order to work correctly !

The top-level of every “GTK+” GUI is the window. A window can contain exactly one widget.
In consequence, you have to add a child container to a window which can accept more than one widget . A child container can be for example a HBox, VBox, Table… In the child container you can add the other widgets to build your GUI.

Window -> child container -> widgets
-> widgets
-> etc.

– HBox and VBox

When packing widgets into a horizontal box, the objects are inserted horizontally from left to right or right to left depending on the pack method used.
In a vertical box, widgets are packed from top to bottom or vice versa depending on the pack method used.
You may use any combination of boxes inside or beside other boxes to create the desired visual effect.

vertbox = gtk.VBox(homogeneous, spacing)
horbox = gtk.HBox(homogeneous, spacing)

The box parameters are explained below

– The add() and pack_xxx() methods

You will have one main box that will hold all other boxes and widgets. This main box will be added to the window by the add() method. To add widgets or boxes to the main box, the pack_start() and pack_end() methods are used.

add()

Add one widget to a box : destination_box_add(child)

child is the widget you are adding to the box

pack_xxx()

If you want to add more then one widget to a box and you want to control where to put the widget, you have to use the pack methods.

destination_box_pack_start(child, expand=True, fill=True, padding=0)
child is the widget you are adding to the box, the other parameters are explained below

– The box and pack parameters

The box parameters –>> example : box_homogenous_true_false.py

Defaults : homogeneous=False
spacing=0

homogeneous=True

each widget has the same size (the size is determined by the largest child widget)
If homogeneous=True the pack works as if expand=True !

homogeneous=False

each widget has its individual size (the box is shrunk to fit the child widgets)

The pack parameters –>> example : pack_expand_fill.py

Defaults :

expand=True
fill=True
padding=0

expand :

If homogeneous=True the pack works as if expand=True !

TRUE : allows the child widget to take all available space it can

FALSE : the box will be shrunken to the same size as the child widget

fill  :

fill has only an effect if the expand argument is True !

TRUE : – A child is always allocated the full height of a <gtk-hbox> and the full width of a <gtk-vbox>. This option affects the other dimension. Extra space is allocated to the widget themselves

FALSE : extra padding around the widgets

The box and pack parameter combinations

–>> example : pack_box_true.py

demo_box = gtk.HBox(homogeneous=True, spacing=0)

demo_box.pack_start(widget_1, expand=True, fill=True, padding=0) *1
demo_box.pack_start(widget_2, expand=True, fill=False, padding=0) *2

*1 each widget has the same size, no gap between the widgets (box filled)
*2 each widget has its individual size, gap between the widgets (box not filled)

–>> example : pack_box_false.py

demo_box = gtk.HBox(homogeneous=False, spacing=0)

demo_box.pack_start(widget_1, expand=True, fill= True, padding=0) *1
demo_box.pack_start(widget_2, expand=True, fill=False, padding=0) *2
demo_box.pack_start(widget_2, expand=False, fill=False, padding=0) *3

*1 the widget fills the box proportionally to their content (box filled)
*2 each widget has its individual size, gap between the widgets (box not filled)
*3 each widget has its individual size, no gap between the widgets (box not filled)

The spacing and padding parameters –>> example : spacing_padding.py

spacing is added between widgets (horizontally or vertically – padding is added on either side of an element

demo_box = gtk.HBox(homogeneous=False, spacing=5)
demo_box.pack_start(widget_2, expand=True, fill=True, padding=0)
demo_box.pack_start(widget_3, expand=True, fill=False, padding=0)

demo_box = gtk.HBox(homogeneous=False, spacing=0)
demo_box.pack_start(widget_2, expand=True, fill=True, padding=5)
demo_box.pack_start(widget_3, expand=True, fill=False, padding=5)

The pack “start” and “end” methods –>> example : pack_start_end.py

If expand and homogeneous are False, then it’s possible to use start- and end-packing to get left aligned and right aligned elements in the same box.

demo_box = gtk.HBox(homogeneous=False, spacing=0)
demo_box.pack_end(widget_2, expand=False, fill=False, padding=0) # first right
demo_box.pack_end(widget_3, expand=False, fill=False, padding=0) # second right
demo_box.pack_start(widget_1, expand=False, fill=False, padding=0) # first left

– Get the GUI to do something

When you click on a button, this will generate a signal. This signal must be connected to an event-handler (callback function) which executes something useful.

Principle :

connects the widget by its name to the callback function

widget_name.connect (event_name, callback_function [callback_data]) # connect a signal to the
def callback_function (widget, callback_data=None) # callback function
here comes the code

Implementation :

self.label_c.connect(“clicked”, self.callback_label_c) # connect the signal to the
def callback_label_c(self, widget, callback_data=None): # callback function
print “this function prints only this text on the console”

 

Examples step by step

– Window : def_ex_1.py

– Window with menu : def_ex_2.py and def_ex_2_a.py

– Window with menu and signals : def_ex_3.py

– Window with widgets : def_ex_4.py

– Window with text area : def_ex_5.py

– All together with signals and event-handlers (callback functions) : def_ex_6.py and def_ex_6_a.py

 

Download the GUI code examples here : code examples