C H A P T E R 13

GUI
Programming

Copyright © 2018 Pearson Education, Ltd.

 Topics
• Graphical User Interfaces
• Using the tkinter Module
• Display Text with Label Widgets
• Organizing Widgets with Frames
• Button Widgets and Info Dialog Boxes
• Getting Input with the Entry Widget
• Using Labels as Output Fields
• Radio Buttons and Check Buttons
• Drawing Shapes with the Canvas Widget

Copyright © 2018 Pearson Education, Ltd.

 Graphical User Interfaces
• User Interface: the part of the computer
with which the user interacts
• Command line interface: displays a
prompt and the user types a command
that is then executed
• Graphical User Interface (GUI): allows
users to interact with a program through
graphical elements on the screen

Copyright © 2018 Pearson Education, Ltd.

 Graphical User Interfaces
(cont’d.)
• A command line interface

Copyright © 2018 Pearson Education, Ltd.

 Graphical User Interfaces
(cont’d.)
• 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

Copyright © 2018 Pearson Education, Ltd.

 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

Copyright © 2018 Pearson Education, Ltd.

 Using the 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

Copyright © 2018 Pearson Education, Ltd.

Copyright © 2018 Pearson Education, Ltd.
 Using the tkinter Module
(cont’d.)
• Programs that use tkinter do not always
run reliably under IDLE
• For best results run them from operating system
command prompt
• Most programmers take an object-oriented
approach when writing GUI programs
• __init__ method builds the GUI
• When an instance is created the GUI appears on
the screen

Copyright © 2018 Pearson Education, Ltd.

 Display Text with Label
Widgets
• Label widget: displays a single line of
text in a window
• Made by creating an instance of tkinter
module’s Label class
• Format:
tkinter.Label(self.main_window,
text = 'my text')
• First argument references the root widget, second
argument shows text that should appear in label

Copyright © 2018 Pearson Education, Ltd.

 Display Text with Label
Widgets (cont’d.)
• 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='left',
side='right'

Copyright © 2018 Pearson Education, Ltd.

Display Text with Label
Widgets (cont’d.)

Copyright © 2018 Pearson Education, Ltd.

 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:
tkinter.Label(self.top_frame,
text = 'hi')

Copyright © 2018 Pearson Education, Ltd.

Organizing Widgets with
Frames (cont’d.)

Copyright © 2018 Pearson Education, Ltd.

 Button Widgets and Info
Dialog Boxes
• 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
• Callback function: function or method that
executes when the user clicks the button
• Also known as an event handler

Copyright © 2018 Pearson Education, Ltd.

 Button Widgets and Info
Dialog Boxes (cont’d.)
• Info dialog box: a dialog box that
shows information to the user
• Format for creating an info dialog box:
• Import tkinter.messagebox module
• tkinter.messagebox.showinfo(title,
message)
• title is displayed in dialog box’s title bar
• message is an informational string displayed in the main
part of the dialog box

Copyright © 2018 Pearson Education, Ltd.

Button Widgets and Info
Dialog Boxes (cont’d.)

Copyright © 2018 Pearson Education, Ltd.

 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

Copyright © 2018 Pearson Education, Ltd.

 Getting Input with the 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
• Entry widget’s get method: used to retrieve
the data from an Entry widget
• Returns a string

Copyright © 2018 Pearson Education, Ltd.

Getting Input with the Entry
Widget (cont’d.)

Copyright © 2018 Pearson Education, Ltd.

Using Labels as Output Fields
• Can use Label widgets to dynamically
display output
• Used to replace info dialog box
• Create empty Label widget in main window,
and write code that displays desired data in
the label when a button is clicked

Copyright © 2018 Pearson Education, Ltd.

Using Labels as Output Fields
(cont’d.)
• 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

Copyright © 2018 Pearson Education, Ltd.

Using Labels as Output Fields
(cont’d.)

Copyright © 2018 Pearson Education, Ltd.

 Radio Buttons and Check
Buttons
• 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

Copyright © 2018 Pearson Education, Ltd.

 Radio Buttons and Check
Buttons (cont’d)
• 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

Copyright © 2018 Pearson Education, Ltd.

 Using Callback Functions
with Radiobuttons
• 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

Copyright © 2018 Pearson Education, Ltd.

 Check Buttons
• Check button: small box with a label
appearing next to it; check mark indicates
when it is selected
• User is allowed to select any or all of the check
buttons that are displayed in a group
• Not mutually exclusive
• Checkbutton widgets: created using
tkinter module’s Checkbutton class
• Associate different IntVar object with each
Checkbutton widget

Copyright © 2018 Pearson Education, Ltd.

 Drawing Shapes with the
Canvas Widget
• The Canvas widget is a blank, rectangular area that
allows you to draw simple 2D shapes.

• You use the Canvas widget's screen coordinate system to

specify the location of your graphics.

• The coordinates of the pixel in the upper-left corner of the

screen are (0, 0).
• The X coordinates increase from left to right
• The Y coordinates increase from top to bottom.

Copyright © 2018 Pearson Education, Ltd.

Drawing Shapes with the
Canvas Widget

Copyright © 2018 Pearson Education, Ltd.

 Drawing Shapes with the
Canvas Widget
• Creating a Canvas widget:

# Create the main window.

self.main_window = tkinter.Tk()
 
# Create the Canvas widget.
self.canvas = tkinter.Canvas(self.main_window, width=200, height=200) 

Copyright © 2018 Pearson Education, Ltd.

 Drawing Shapes with the
Canvas Widget
• The Canvas widget has numerous methods for drawing
graphical shapes on the surface of the widget.
• The methods that we will discuss are:
 create_line
 create_rectangle
 create_oval
 create_arc
 create_polygon
 create_text

Copyright © 2018 Pearson Education, Ltd.

 Drawing a Line

Coordinates of
the line's ending
point

canvas_name.create_line(x1, y1, x2, y2, options…)

Coordinates of Optional arguments

the line's starting (See Table 13-2)
point

Copyright © 2018 Pearson Education, Ltd.

Copyright © 2018 Pearson Education, Ltd.
 Drawing a Rectangle

Coordinates of
the lower-right
corner

canvas_name.create_rectangle(x1, y1, x2, y2, options…)

Coordinates of Optional arguments

the upper-left (See Table 13-3)
corner

Copyright © 2018 Pearson Education, Ltd.

Copyright © 2018 Pearson Education, Ltd.
 Drawing an Oval
Coordinates of
the lower-right
corner of
bounding rectangle

canvas_name.create_oval(x1, y1, x2, y2, options…)

Coordinates of Optional arguments

the upper-left (See Table 13-4)
corner of
bounding rectangle

Copyright © 2018 Pearson Education, Ltd.

Copyright © 2018 Pearson Education, Ltd.
 Drawing an Arc
Coordinates of Coordinates of
the upper-left the lower-right
corner of corner of
bounding rectangle bounding rectangle

canvas_name.create_arc(x1, y1, x2, y2,

Starting angle start=angle, extent=width,
options…)
Counter clockwise
extent of the arc
Optional arguments
(See Table 13-5)

Copyright © 2018 Pearson Education, Ltd.

Copyright © 2018 Pearson Education, Ltd.
 Drawing a Polygon

Coordinates of
the second vertex

canvas_name.create_polygon(x1, y1, x2, y2, …,options…)

Coordinates of
the first vertex Optional arguments
(See Table 13-7)

Copyright © 2018 Pearson Education, Ltd.

 Drawing a Polygon
self.canvas.create_polygon(60, 20, 100, 20, 140, 60, 140, 100,
100, 140, 60, 140, 20, 100, 20, 60)

Copyright © 2018 Pearson Education, Ltd.

Copyright © 2018 Pearson Education, Ltd.
 Displaying Text on the
Canvas
Text to display

canvas_name.create_text(x, y, text=text, options…)

Coordinates of
the text's insertion Optional arguments
point (See Table 13-8)

Copyright © 2018 Pearson Education, Ltd.

Copyright © 2018 Pearson Education, Ltd.
 Summary
• This chapter covered:
• Graphical user interfaces and their role as event-
driven programs
• The tkinter module, including:
• Creating a GUI window
• Adding widgets to a GUI window
• Organizing widgets in frames
• Receiving input and providing output using widgets
• Creating buttons, check buttons, and radio buttons
• Drawing simple shapes with the Canvas widget

Copyright © 2018 Pearson Education, Ltd.