INTEGRATIVE PROGRAMMING AND TECHNOLOGIES

SGM8 – Study Guide for Module 8

Graphical User Interface (GUI)

SUBTOPIC 1
Event-driven Programming Paradigm

UI in Python-Tkinter

• Modern computer applications are user-friendly. User interaction is not restricted

to console-based I/O. They have a more ergonomic graphical user interface
(GUI) thanks to high speed processors and powerful graphics hardware. These
applications can receive inputs through mouse clicks and can enable the user to
choose from alternatives with the help of radio buttons, dropdown lists, and other
GUI elements (or widgets).
• Such applications are developed using one of various graphics libraries
available. A graphics library is a software toolkit having a collection of classes
that define a functionality of various GUI elements. These graphics libraries are
generally written in C/C++. Many of them have been ported to Python in the form
of importable modules.

GUI Elements Graphic Libraries

Tkinter is the Python port for Tcl-Tk GUI toolkit developed by Fredrik Lundh. This
module is bundled with standard distributions of Python for all platforms.

PyQtis, the Python interface to Qt, is a very popular cross-platform GUI framework.

PyGTK is the module that ports Python to another popular GUI widget toolkit called
GTK.

WxPython is a Python wrapper around WxWidgets, another cross-platform graphics

library.

GUI elements and their functionality are defined in the Tkinter module. The following
code demonstrates the steps in creating a UI.
All Tkinter widget classes are inherited from the Widget class
First import the TKinter module then setup the application object by calling the Tk() function.
This will create a top-level window (root) having a frame with a title bar, control box with the
minimize and close buttons, and a client area to hold other widgets. ]
The geometry() method defines the width, height and coordinates of the top left corner of the
frame as below (all values are in pixels) : window.geometry("widthxheight+XPOS+YPOS") The
application object then enters an event listening loop by calling the mainloop() method.

The application is now constantly waiting for any event generated on the elements in it. The
event could be text entered in a text field, a selection made from the dropdown or radio
button, single/double click actions of mouse, etc. The application's functionality involves
executing appropriate callback functions in response to a particular type of event. We shall
discuss event handling later in this tutorial. The event loop will terminate as and when the close
button on the title bar is clicked. The above code will create the following window:

Components: Label

A label can be created in the UI in Python using the Label class. The Label constructor requires
the top-level window object and options parameters. Option parameters are similar to the
Button object.

A label's caption will be displayed in red color using Helvetica font of 16 point size.

Components: Entry

This widget renders a single-line text box for accepting the user input. For multi-line text input
use the Text widget. Apart from the properties already mentioned, the Entry class constructor
accepts the following:
• bd : border size of the text box; default is 2 pixels.
• show : to convert the text box into a password field, set show property to "*".

The given code adds the text field.

txtfld=Entry(window, text="This is Entry Widget", bg='black',fg='white', bd=5)
Components: Selection Widgets

Radiobutton: This widget displays a toggle button having an ON/OFF state. There may be more
than one button, but only one of them will be ON at a given time.

Checkbutton: This is also a toggle button. A rectangular check box appears before its caption.
Its ON state is displayed by the tick mark in the box which disappears when it is clicked to OFF.

Combobox: This class is defined in the ttk module of tkinterpackage. It populates drop down
data from a collection data type, such as a tuple or a list as values parameter.

Listbox: Unlike Combobox, this widget displays the entire collection of string items. The user
can select one or multiple items.
SUBTOPIC 2
GUI Event Handling

An event is a notification received by the application object from various GUI widgets as a result
of user interaction. The Application object is always anticipating events as it runs an event
listening loop. User's actions include mouse button click or double click, keyboard key pressed
while control is inside the text box, certain element gains or goes out of focus etc.

Events are expressed as strings in <modifier-type-qualifier> format.

Many events are represented just as qualifier. The type defines the class of the event.
An event should be registered with one or more GUI widgets in the application. If it's not, it will
be ignored. In Tkinter, there are two ways to register an event with a widget. First way is by
using the bind() method and the second way is by using the command parameter in the widget
constructor.

Event: bind()

The bind() method associates an event to a callback function so that, when the even occurs, the
function is called.

Widget.bind(event, callback)

Event: command parameter

Each widget primarily responds to a particular type. For example, Button is a source of the
Button event. So, it is by default bound to it. Constructor methods of many widget classes have
an optional parameter called command. This command parameter is set to callback the
function which will be invoked whenever its bound event occurs. This method is more
convenient than the bind() method.

btn = Button(window, text='OK', command=myEventHandlerFunction)

From the example the application window has two text input fields and another one to display
the result. There are two button objects with the captions Add and Subtract. The user is
expected to enter the number in the two Entry widgets. Their addition or subtraction is
displayed in the third.

The first button (Add) is configured using the command parameter. Its value is
the add() method in the class. The second button uses the bind() method to register the left
button click with the sub() method. Both methods read the contents of the text fields by
the get() method of the Entry widget, parse to numbers, perform the addition/subtraction and
display the result in third text field using the insert() method.