GUI Programming with

Python
by Gideon T. Marandu
Ardhi University
Graphical User Interfaces
Concept:

A graphical user interface allows the user to interact with the

operating system and other programs using graphical elements such
as icons, buttons, and dialog boxes.
Graphical User Interfaces
• A computer’s user interface is the part of the computer that the
user interacts with
• User interface consists of
• Hardware devices
• Commands from the user the operating system accepts
• Command line interface displays a prompt and the user types a
command which is then executed
Graphical User Interfaces
• A graphical user interface (GUI) allows the user to interact with the
operating system and other programs through graphical elements
(icons, buttons, slider bars, etc.) on the screen.

• GUIs popularized the use of the mouse.

• GUIs allow the user to point at graphical elements and click the
mouse button to activate them.
Graphical User Interfaces
• Interaction with a GUI is done
through dialog boxes – small
windows that display information
and allow the user to perform
actions
Graphical User Interfaces
• GUI Programs Are Event-Driven
• User determines the order in which things happen
• GUI programs respond to the actions of the user, thus they are event
driven.

Figure: A GUI program

Using the tkinter Module
Concept:

In Python you can use the tkinter module to create simple GUI
programs.
Using the tkinter Module
• The tkinter package (“Tk interface”) is the standard Python
interface to the Tk GUI toolkit.

• Both Tk and tkinter are available on most Unix platforms, as well

as on Windows systems.

• Running from the command line should

open a window demonstrating a simple Tk interface, letting you
know that tkinter is properly installed on your system.
Using the tkinter Module
• The tkinter module allows the creation of simple GUI programs.

• tkinter does not always run reliably under IDLE

• Use IDLE’s editor to write GUI programs

Using the tkinter Module
• Usually, to use tkinter all you need is a simple import statement:

import tkinter

• Or, more often:

from tkinter import *

Using the tkinter Module Figure: Window displayed by
Program

# This is the program that display empty window

import tkinter

def main():
# create the main window widget
main_window = tkinter.Tk()

# insert title on the window widget

main_window.title("This is my 1st Tk window") window.mainloop() tells Python to run
the Tkinter event loop. This method listens for
# enter the tkinter main loop events, such as button clicks or keypresses,
main_window.mainloop() and blocks any code that comes after it from
running until the window it’s called on is
closed.
main()
Display Text with Label Widgets
Concept:

You use the Label widget to display text in a window.

 Display Text with Label Widgets
# This program displays a label with text.
import tkinter
Figure: Window displayed by
class MyGUI:
Program
def __init__(self):
# Create the main window widget.
self.main_window = tkinter.Tk()

#create a label containing the text

self.lbl = tkinter.Label(self.main_window,text='Hello World!')

# Call the Label widget's pack method

self.lbl.pack()
# Enter the main loop
self.main_window.mainloop()

my_gui = MyGUI()
 Display Text with Label Widgets
# This program uses the side='left' argument with.
# the pack method to change the layout of the widgets
import tkinter
Figure: Window displayed by
class MyGUI: Program
def __init__(self):
# Create the main window widget.
self.main_window = tkinter.Tk()

# Create two label widget

self.lbl1 = tkinter.Label(self.main_window,text='Hello World!')
self.lbl2 = tkinter.Label(self.main_window, text='This is my GUI program')

# Call both Label widgets' pack method

self.lbl1.pack(side='left')
self.lbl2.pack(side='left’)

# Enter the main loop

self.main_window.mainloop()

my_gui = MyGUI()
Organizing Widgets with Frames
Concept:

A Frame is a container that can hold other widgets. You can use
Frames to organize the widgets in a window.
Organizing Widgets with Frames
• A Frame is a container.
• It is a widget that can hold other widgets.
• Frames are useful for organizing and arranging groups of widgets in
a window.
 Organizing Widgets with Frames
# This program creates labels in two different frames. # Create three Label widgets for the bottom frame
import tkinter self.lbl4 = tkinter.Label(self.bottom_frame, text='Gideon')
class MyGUI: self.lbl5 = tkinter.Label(self.bottom_frame, text='Tumainiel')
def __init__(self): self.lbl6 = tkinter.Label(self.bottom_frame, text='Marandu')
# Create the main window widget.
self.main_window = tkinter.Tk() # Pack the labels that are in the bottom frame
# Use the side='left' argument to arrange them
# Create two frames, one for the top # horizontally from the left of the frame
# window and one for the bottom self.lbl4.pack(side='left')
self.top_frame = tkinter.Frame(self.main_window) self.lbl5.pack(side='left')
self.bottom_frame = tkinter.Frame(self.main_window) self.lbl6.pack(side='left')

# Create three label widget for the top frame # Yes, we have to pack the frames too!
self.lbl1 = tkinter.Label(self.top_frame,text='Gideon') self.top_frame.pack()
self.lbl2 = tkinter.Label(self.top_frame, text='Tumainiel') self.bottom_frame.pack()
self.lbl3 = tkinter.Label(self.top_frame, text='Marandu') # Enter the main loop
self.main_window.mainloop()
# Pack the labels that are in the top frame
# Use the side='top' argument to stack them my_gui = MyGUI()
# one on top of the other
self.lbl1.pack(side='top')
self.lbl2.pack(side='top')
self.lbl3.pack(side='top')
 Organizing Widgets with Frames
Figure: Window displayed by Program

lbl1 top_frame
Figure: Arrangement of widgets lbl2
lbl3
bottom_frame

lbl4 lbl5 lbl6

Button Widgets and Info Dialog Boxes
Concept:
Use the Button widget to create a standard button in a window.
When the user clicks a button, a specified function or method is called.
An info dialog box is a simple window that displays a message to the
user and has an OK button that dismisses the dialog box. You can use
the tkMessageBox module’s showinfo function to display an info
dialog box.
Button Widgets and Info Dialog Boxes
• A Button is a widget that the user can click to cause an action to take
place
• A callback function (event handler) is a function or method that
executes when the user clicks the button
 Button Widgets and Info Dialog Boxes
""""This program demonstrates a Button widget
when the user clicks the Button, an # Pack the Button

info dialog box is displayed""" self.my_button.pack()

# Enter the tkinter main loop

import tkinter
self.main_window.mainloop()
from tkinter import messagebox

def do_something(self):
class MyGUI:
# Display an info dialog box.
def __init__(self):
messagebox.showinfo('Response', 'Thanks for
# Create the main window widget.
clicking the button')
self.main_window = tkinter.Tk()

# Create a Button widget. The text 'Click Me!' my_gui = MyGUI()

# should appear on the face of the Button. The
# do_something method should be executed when
# the user clicks the Button
self.my_button = tkinter.Button(self.main_window,
text='Click Me!’, command=self.do_something)
 Button Widgets and Info Dialog Boxes
""""This program has a Quit button that calls
the Tk class's quit method when clicked""" # Create a Quit button. When this button is clicked
# the root widget's quit method is called
# (The main_window variable references the root widget,
import tkinter
# so the callback function is self.main_window.quit.)
from tkinter import messagebox
self.quit_button = tkinter.Button(self.main_window,
text='Quit’, command=self.main_window.quit)
class MyGUI:
def __init__(self): # Pack the Button
self.my_button.pack()
# Create the main window widget.
self.quit_button.pack()
self.main_window = tkinter.Tk()

# Enter the tkinter main loop

# Create a Button widget. The text 'Click Me!' self.main_window.mainloop()
# should appear on the face of the Button. The
# do_something method should be executed when # Callback function
def do_something(self):
# the user clicks the Button
# Display an info dialog box.
self.my_button = tkinter.Button(self.main_window,
messagebox.showinfo('Response', 'Thanks for clicking
text='Click Me!',command=self.do_something)
the button')

my_gui = MyGUI()
Getting Input with the Entry Widget
Concept:

An Entry widget is a rectangular area into which the user can type
input. Use the Entry widget’s get method to retrieve the data that
has been typed into the widget.
Getting Input with the Entry Widget
• An Entry widget is a rectangular area into which the user can type
text.
• These widgets are used to gather input in a GUI program.
• The get method returns a string.
 Getting Input with the Entry Widget
""""This program converts distances in kilometers
Program: (kilo_converter.py)
to miles. The result is displayed in an info
# Pack the top frame's widgets
dialog box"""
self.prompt_label.pack(side='left')
self.kilo_entry.pack(side='left')
import tkinter
from tkinter import messagebox
# Create the button widgets for the bottom frame.
self.calc_button = tkinter.Button(self.bottom_frame,
class KiloConverterGUI:
text='Convert',
def __init__(self):
command=self.convert)
# Create the main window widget.
self.quit_button = tkinter.Button(self.bottom_frame, text='Quit',
self.main_window = tkinter.Tk()
command=self.main_window.quit)
# Pack the buttons
# Create two frames, one for the top
self.calc_button.pack(side='left')
self.top_frame = tkinter.Frame(self.main_window)
self.quit_button.pack(side='left')
self.bottom_frame = tkinter.Frame(self.main_window)

# Pack the frames.

# Create the widgets for the top frame.
self.top_frame.pack()
self.prompt_label = tkinter.Label(self.top_frame,
self.bottom_frame.pack()
text='Enter a distance in kilometers:')
self.kilo_entry = tkinter.Entry(self.top_frame,
# Enter the tkinter main loop
width=10)
self.main_window.mainloop()
 Getting Input with the Entry Widget
Program (cont.): (kilo_converter.py)

The user enters 1000 into the

# The convert method as a callback function
1 Entry widget and clicks the
def convert(self): Convert button
# Get the value from the kilo_entry widget
# entered by the user
kilo = float(self.kilo_entry.get())

# convert kilometers to miles 2

miles = kilo * 0.6214
The info dialog box is
# Display the results in an info dialog box. displayed
messagebox.showinfo('Results',
str(kilo) + ' kilometers is equal to ‘ +
str(miles) + ' miles.')

# Create an instance of the KiloConverterGUI class

kilo_conv = KiloConverterGUI()
Using Labels as Output Fields
Concept:

When a StringVar object is associated with a Label widget, the

Label widget displays any data that is stored in the StringVar
object.
 Using Labels as
Program : (kilo_converter2.py)
Output Fields
""""This program converts distances in kilometers
# Pack the top frame's widgets
to miles. The result is displayed in a label
self.prompt_label.pack(side='left')
on the main window"""
self.kilo_entry.pack(side='left')

import tkinter
# Create the widgets for the middle frame.
self.descr_label = tkinter.Label(self.mid_frame,
class KiloConverterGUI:
text='Converted to miles')
def __init__(self):
# Create the main window widget.
# We need a StringVar object to associate with
self.main_window = tkinter.Tk()
# an output label. Use the object's set method
# to store a string of blank characters.
# Create two frames, one for the top
self.value = tkinter.StringVar()
self.top_frame = tkinter.Frame(self.main_window)
self.mid_frame = tkinter.Frame(self.main_window)
# Create a label and associate it with the
self.bottom_frame = tkinter.Frame(self.main_window)
# StringVar object. Any value stored in the
# StringVar object will automatically be displayed
# Create the widgets for the top frame.
# in the label
self.prompt_label = tkinter.Label(self.top_frame,
self.miles_label = tkinter.Label(self.mid_frame,
text='Enter a distance in kilometers:')
textvariable=self.value)
self.kilo_entry = tkinter.Entry(self.top_frame,
width=10)
 Using Labels as Output Fields
Program (cont.): (kilo_converter2.py) # Enter the tkinter main loop
self.main_window.mainloop()

# Pack the middle frame's widgets.

# The convert method as a callback function
self.descr_label.pack(side='left')
def convert(self):
self.miles_label.pack(side='left')
# Get the value from the kilo_entry widget
# entered by the user
# Create the button widgets for the bottom frame.
kilo = float(self.kilo_entry.get())
self.calc_button = tkinter.Button(self.bottom_frame,
text='Convert',
# convert kilometers to miles
command=self.convert)
miles = kilo * 0.6214
self.quit_button = tkinter.Button(self.bottom_frame, text='Quit',
command=self.main_window.quit)
# Convert miles to a string and store it
# in the StringVar object. This will automatically
# Pack the buttons
# update the miles_label widget.
self.calc_button.pack(side='left')
self.value.set(miles)
self.quit_button.pack(side='left')

# Create an instance of the KiloConverterGUI class

# Pack the frames.
kilo_conv = KiloConverterGUI()
self.top_frame.pack()
self.mid_frame.pack()
self.bottom_frame.pack()
Radio Buttons and Check Buttons
Concept:

Radio buttons normally appear in groups of two or more and allow the
user to select one of several possible options. Check buttons, which
may appear alone or in groups, allow the user to make yes/no or
on/off selections.
 Radio Buttons
• Radio buttons are used when the user needs to select one choice from
several options

Figure: A group of radio buttons

 Radio Buttons
Program: (radiobutton_demo.py)
#This program demonstrates a group of Radiobutton widgets. # Create the Radiobutton widgets in the top_frame.
self.rb1 =tkinter.Radiobutton(self.top_frame,

import tkinter text='Option 1', variable=self.radio_var,

from tkinter import messagebox value=1)

self.rb2 = tkinter.Radiobutton(self.top_frame,

class MyGUI: text='Option 2', variable=self.radio_var,

def __init__(self): value=2)

# Create the main window widget. self.rb3 = tkinter.Radiobutton(self.top_frame,

self.main_window = tkinter.Tk() text='Option 3', variable=self.radio_var,

value=3)

# Create two frames. One for the Radiobuttons

# and another for the regular Button widgets. # Pack the Radiobuttons.

self.top_frame = tkinter.Frame(self.main_window) self.rb1.pack()

self.bottom_frame = tkinter.Frame(self.main_window) self.rb2.pack()

self.rb3.pack()

# Create an IntVar object to use with

# the Radiobuttons # Create an OK button and a Quit button

self.radio_var = tkinter.IntVar() self.ok_button = tkinter.Button(self.bottom_frame,

text='OK', command=self.show_choice)

# set the IntVar object to 1. self.quit_button = tkinter.Button(self.bottom_frame, text='Quit',

self.radio_var.set(1) command=self.main_window.quit)
 Program (cont.): (radiobutton_demo.py)
Radio Buttons
# Pack the Buttons
self.ok_button.pack(side='left')
self.quit_button.pack(side='left')

# Pack the frames

self.top_frame.pack()
self.bottom_frame.pack()

# start the mainloop

self.main_window.mainloop()

# The show_choice method is the callback function for the

# Ok button
def show_choice(self):
messagebox.showinfo('Selection', 'You selected option ' +
str(self.radio_var.get()))

# Create an instance of the MyGUI class.

my_gui = MyGUI()
 Check Buttons
• Check buttons are used when the user can make multiple choices.

Figure: A group of check

buttons
Program: (checkbutton_demo.py)
Check Buttons
#This program demonstrates a group of Checkbutton widgets.
import tkinter # Create the Checkbutton widgets in the top_frame.
from tkinter import messagebox self.cb1 =tkinter.Checkbutton(self.top_frame,
class MyGUI: text='Option 1', variable=self.cb_var1)
def __init__(self): self.cb2 = tkinter.Checkbutton(self.top_frame,
# Create the main window widget. text='Option 2', variable=self.cb_var2)
self.main_window = tkinter.Tk() self.cb3 = tkinter.Checkbutton(self.top_frame,
# Create two frames. One for the Checkbuttons text='Option 3', variable=self.cb_var3)
# and another for the regular Button widgets.
self.top_frame = tkinter.Frame(self.main_window) # Pack the Checkbuttons.
self.bottom_frame = tkinter.Frame(self.main_window) self.cb1.pack()
self.cb2.pack()
# Create three IntVar objects to use with self.cb3.pack()
# the Checkbuttons
self.cb_var1 = tkinter.IntVar() # Create an OK button and a Quit button
self.cb_var2 = tkinter.IntVar() self.ok_button = tkinter.Button(self.bottom_frame,
self.cb_var3 = tkinter.IntVar() text='OK', command=self.show_choice)
self.quit_button = tkinter.Button(self.bottom_frame, text='Quit',
# set the IntVar object to 0. command=self.main_window.quit)
self.cb_var1.set(0) # Pack the Buttons
self.cb_var2.set(0) self.ok_button.pack(side='left')
self.cb_var3.set(0) self.quit_button.pack(side='left')
 Program (cont.) : (checkbutton_demo.py)

# Pack the frames

self.top_frame.pack()
Check Buttons
# Create an instance of the MyGUI class.
self.bottom_frame.pack()
my_gui = MyGUI()
# start the mainloop
self.main_window.mainloop()

# The show_choice method is the callback function for the

# Ok button
def show_choice(self):
# Create a message string
self.message = 'You selected: \n'

# Determine which Checkbuttons are selected and

# build the message string accordingly
if self.cb_var1.get() == 1:
self.message = self.message + '1\n'
if self.cb_var2.get() == 1:
self.message = self.message + '2\n'
if self.cb_var3.get() == 1:
self.message = self.message + '3\n'

# Display the message in an info dialog box.

messagebox.showinfo('Selection', self.message)
GUI Programming with Python

QUESTIONS
?