CMP 4266
Software Development UG1
Lecture –11
GUI Programming
(Based on Gaddis, T., Starting out with Python 3e, Pearson Education)
CMP4266, School of CS and DT, Birmingham City University.
Outline
Graphical User Interface (GUI)
tkinter Module
Widgets
– Label
– Buttons
– Entry
– Radio Buttons
– Organizing Widgets with Pack, Frames, Grid layout
CMP 4266, School of CS and DT, Birmingham City University.
Graphical User Interfaces (GUI)
User Interface: the part of the computer with which the user
interacts
Command line interface / text based interface: displays a
prompt and the user types a command that is then executed
CMP 4266, School of CS and DT, Birmingham City University.
Graphical User Interfaces (GUI)
Graphical User Interface (GUI): allows users to interact with a program
through graphical elements on the screen
Dialog boxes: small windows that display information and allow the user to
perform actions
– Responsible for most of the interaction through GUI
– User interacts with graphical elements such as icons, buttons, and
slider bars
CMP 4266, School of CS and DT, Birmingham City University.
GUI Programs Are Event-Driven
In text-based environments, programs determine the order in
which things happen
– The user can only enter data in the order requested by the program
GUI environment is event-driven
– The user determines the order in which things happen
- User causes events to take place and the program responds to the
events
CMP 4266, School of CS and DT, Birmingham City University.
tkinter Module
No GUI programming features built into Python
tkinter module: allows you to create simple GUI programs
– Comes with Python
Widget: graphical element that the user can interact with or
view
– Presented by a GUI program
CMP 4266, School of CS and DT, Birmingham City University.
GUI Widgets in Python
Label
Image
Checkbutton Button
Entry
CMP 4266, School of CS and DT, Birmingham City University.
GUI Widgets in Python
Widgets Description
Button A button that can cause an action to occur when it is clicked.
Canvas A rectangular area that can be used to display graphics.
Checkbutton A button that may be in either the “on” or “off” position.
Entry An area in which the user may type a single line of input from the keyboard.
Frame A container that can hold other widgets.
Label An area that displays one line of text or an image.
Listbox A list from which the user may select an item
Menu A list of menu choices that are displayed when the user clicks a Menubutton
widget.
Menubutton A menu that is displayed on the screen and may be clicked by the user
Message Displays multiple lines of text.
Radiobutton A widget that can be either selected or deselected. Radiobutton widgets usually
appear in groups and allow the user to select one of several options.
Scale A widget that allows the user to select a value by moving a slider along a track.
Scrollbar Can be used with some other types of widgets to provide scrolling ability.
Text A widget that allows the user to enter multiple lines of text input.
Toplevel A container, like a Frame, but displayed in its own window.
CMP 4266, School of CS and DT, Birmingham City University.
Label Widget
Label widget: displays a single line of text in a window
– Made by creating an instance of tkinter module’s Label class
– Format:
label = tkinter.Label(container, text = ‘some text')
- First argument references the root widget, second argument shows
text that should appear in label
pack method: determines where a widget should be positioned and makes
it visible when the main window is displayed
– Called for each widget in a window
– Receives an argument to specify positioning
- Positioning depends on the order in which widgets were added to
the main window
- Valid arguments: side='top', side=‘bottom',
side='left', side='right'
CMP 4266, School of CS and DT, Birmingham City University.
Label Widget
import tkinter
class Label_GUI:
def __init__(self):
#create main window
self.mw = tkinter.Tk()
self.label1 = tkinter.Label(self.mw, text = "Hello World")
self.label1.pack() mainloop is an infinite loop that listens
tkinter.mainloop() to user interactions (mouse clicks, key
presses, etc) and requests from the
gui = Label_GUI() OS/window manager to draw or
redraw a widget
import tkinter
class Label_GUI:
def __init__(self):
#create main window
self.mw = tkinter.Tk()
self.label1 = tkinter.Label(self.mw, text = "Hello World")
self.label2 = tkinter.Label(self.mw, text = "Hello again")
self.label1.pack(side = "left")
self.label2.pack(side = "top")
tkinter.mainloop()
Label_GUI()
CMP 4266, School of CS and DT, Birmingham City University.
Button Widget
Button widget: widget that the user can click to cause an
action to take place
– When creating a button can specify:
- Text to appear on the face of the button
- A callback function
– Format
button1 = tkinter.Button(container, text = “some text",
command = .. .)
Callback function: function or method that executes when the
user clicks the button
– Also known as an event handler
CMP 4266, School of CS and DT, Birmingham City University.
Button Widget
import tkinter
class Button_GUI:
def __init__(self):
#create main window
self.mw = tkinter.Tk()
self.button1 =tkinter.Button(self.mw, text = "Button 1", command = self.function_1)
self.button2 =tkinter.Button(self.mw, text = "Button 2", command = self.function_2)
self.button1.pack(side = "left")
self.button2.pack(side = "left")
tkinter.mainloop()
def function_1(self):
#do something when button 1 is clicked
print("Button 1 is clicked")
def function_2(self):
#do something when button 2 is clicked
print("Button 2 is clicked")
Button_GUI()
CMP 4266, School of CS and DT, Birmingham City University.
Creating a Quit Button
Quit button: closes the program when the user clicks it
To create a quit button in Python:
– Create a Button widget
– Set the root widget’s destroy method as the callback function
- When the user clicks the button the destroy method is called and
the program ends
CMP 4266, School of CS and DT, Birmingham City University.
Entry Widget
Entry widget: rectangular area that the user can type text into
– Used to gather input in a GUI program
– Typically followed by a button for submitting the data
- The button’s callback function retrieves the data from the Entry
widgets and processes it
– Format
entry1 = tkinter.Entry(container, width = ..)
– Entry widget’s get method: used to retrieve the data from an Entry
widget
- Returns a string
CMP 4266, School of CS and DT, Birmingham City University.
Entry Widget
CMP 4266, School of CS and DT, Birmingham City University.
Label Widget as Output Fields
Can use Label widgets to dynamically display output
– Create empty Label widget in main window, and write code that
displays desired data in the label when a button is clicked
StringVar class: tkinter module class that can be used
along with Label widget to display data
– Create StringVar object and then create Label widget and associate
it with the StringVar object
– Subsequently, any value stored in the StringVar object with
automatically be displayed in the Label widget
CMP 4266, School of CS and DT, Birmingham City University.
Label Widget as Output Fields
CMP 4266, School of CS and DT, Birmingham City University.
Exercise 11.1 – Implementation of BMI
calculation (25 minutes)
In-class
The program calculates a person's BMI from the Exercise
weight and height supplied by the user.
The system should request user’s weigh and
height via tkinter entres.
Each input value should be converted into the
correct data format.
The formula to calculate human BMI is:
The BMI calculation should be printed on the screen
using a tkinter.Label and a tkinter.StringVar().
The software output will look like
CMP4266 , School of CS & DT, Birmingham City University.
Exercise 11.1.a – Advance exercise
Optional (25 minutes)
In-class
Enhance the bmi_cal GUI by giving Exercise
more meaningful feedback. For
example, tell the user if she/he is being
underweight or obese.
Look at the Figure on the right to identify
the weight categories.
For example, if the calculated BMI value
is 25.5, the programme outputs the BMI
value and a message suggesting that a
user is being “Overweight”.
The GUI should also change the colour
of the frame’s background according to
the weight category. E.g underweight is
blue, healthy is green, overweight is
yellow and obese is red
CMP4266 , School of CS & DT, Birmingham City University.
Radio Button Widget
Radio button: small circle that appears filled when it is selected
and appears empty when it is deselected
– Useful when you want the user to select one choice from several
possible options
Radiobutton widgets: created using tkinter module’s
Radiobutton class
– Radiobutton widgets are mutually exclusive
- Only one radio button in a container may be selected at any given
time
CMP 4266, School of CS and DT, Birmingham City University.
Radio Button Widget
IntVar class: a tkinter module class that can be used
along with Radiobutton widgets
– Steps for use:
- Associate group of Radiobutton widgets with the same IntVar
object
- Assign unique integer to each Radiobutton
- When a Radiobutton widgets is selected, its unique integer is
stored in the IntVar object
– Can be used to select a default radio button
CMP 4266, School of CS and DT, Birmingham City University.
Radio Button Widget
You can specify a callback function with Radiobutton
widgets
– Provide an argument command=self.my_method when creating the
Radiobutton widget
– The command will execute immediately when the radio button is
selected
– Replaces the need for a user to click OK or submit before determining
which Radiobutton is selected
CMP 4266, School of CS and DT, Birmingham City University.
Radio Button Widget
CMP 4266, School of CS and DT, Birmingham City University.
Organizing Widgets with Frames
Frame widget: container that holds other widgets
– Useful for organizing and arranging groups of widgets in a window
– The contained widgets are added to the frame widget which contains them
– Example:
#create main window
self.mw = tkinter.Tk()
#create farmes
self.top_frame = tkinter.Frame(self.mw, bg='blue')
self.right_frame = tkinter.Frame(self.mw, bg='red')
self.bottom_frame = tkinter.Frame(self.mw, bg='yellow')
#create the widgets for the top frame
self.button_1 = tkinter.Button(self.top_frame, text = "OK")
self.button_1.pack(side="left")
self.entry_1 = tkinter.Entry(self.top_frame, width = 20)
self.entry_1.pack()
CMP 4266, School of CS and DT, Birmingham City University.
The Tkinter Grid Geometry Manager
The Grid geometry manager puts the import tkinter
widgets in a 2-dimensional table. class Grid_GUI:
def __init__(self):
Creating this layout using the pack self.mw = tkinter.Tk()
manager is possible, but it takes a
number of extra frame widgets, and a lb1 = tkinter.Label(self.mw, text="First")
lb2 = tkinter.Label(self.mw, text="Second")
lot of work to make things look good.
lb1.grid(row=0, column=0)
lb2.grid(row=1, column=0)
e1 = tkinter.Entry(self.mw)
e2 = tkinter.Entry(self.mw)
e1.grid(row=0, column=1)
e2.grid(row=1, column=1)
0 1 2
bt1 = tkinter.Button(self.mw, text = "Enter")
bt1.grid(row=2, column=2)
0 Label Entry
tkinter.mainloop()
1 Label Entry
Button gui = Grid_GUI()
2
CMP 4266, School of CS and DT, Birmingham City University.
Exercise 11.2 –BMI calculator with grid
layout (25 minutes)
In-class
Use the grid layout to reorganise the widgets in BMI Exercise
calculator frame created in Exercise 8.1.
The frame layout should look like
Before with
pack()
Advance feature “Optional”
– Output the BMI results into a new frame.
– The new frame should appear displaying the results
and possibly the weight category colour. The frame
should also contain an “OK” button.
– Once the OK button is clicked, the new prompt frame
should disappear.
After with
– The BMI main frame should always be visible
grid(row,column)
regardless if the results frame is visible or hidden.
CMP4266 , School of CS & DT, Birmingham City University.
