Python Programming –

GUI Applications
Networking for Software Developer
Narendra Pershad
Agenda

 GUI vs CLI interfaces

 Python support for gui application?

 Build a simple application

 Uses of some widgets

 Frame, Label, Entry, Radiobutton, Combobox, Checkbutton, Button

 Handling event

 Reading and writing properties


CLI vs Gui
CLI

 Command Line Interface will be the most common way of deploying python code in this course

 Simple especially if the program does not sport lots of options

 Using the sys module to processing the argument can be tedious

 Especially if the developer needs to process multiple switches

 The argparse module makes it easy to write user-friendly command-line interfaces.

 You may define what arguments are required

 It will figure out how to parse them out of sys.argv

 It also automatically generates help and usage messages and issues errors

 It is part of the standard python library. So no extra installation

GUI toolkits for Python
 wxPython
 A Python wrapper around a C++ library called wxWidgets.

 Uses actual widgets on the native platform whenever possible

 Applications look native to the operating system that it is running on.

 Does not come with the default installation.

 PyQt.
 Bindings for the Qt cross-platform C++ framework

 Both this and the toolkit below does not use platform widgets, so they are lighter and faster

 Tkinter
 The default gui toolkit for standard installation

 This is the one we will be using in this course

Gui application

 The Tk widget library originates from Tcl (Tool Command Language)

 It is simple and fast robust and platform independent windowing toolkit

 Tkinter in an interface to the Tk GUI library

 It is a part of the Python standard library

 Almost universally available wherever python is

 Very stable

 Only one purpose – GUI toolkit

 Lacks more complex widget e.g. rich text, HTML rendering

Before you start

 tk vs ttk
 ttk offers more sophisticated theme styling
 Most of the widgets are comparable
 To get the best of both worlds use the following style of import statements

from tkinter import *

from tkinter.ttk import *

 This will give you access to the themed versions of the widgets if available in
the ttk library otherwise fall back to the original tk library
 Button

Button(

parent, # the host container

text='Hello', # the text to go on this widget

command=callback, # the function to call

state=DISABLED/NORMAL, # the NORMAL is the default

image=image # image to put on this widget

)
 Label
 Can be used to display either an image or some text

Label(

parent, # the host container

text='Hello', # the text to go on this widget

textvariable=var, # the string var that is bound to this widget

image=image # image to put on this widget

)
 Entry
 Similar to a single lined textbox
 You may use the get() and insert() methods to interface with this widget

Entry(

parent, # the host container

text='Hello', # the text to go on this widget

textvariable=var, # the string var that is bound to this widget

state=DISABLED/NORMAL, # the NORMAL is the default

)
 Frame
 Can serve as a container for other widgets
 Is used to organised other widgets
 Its cousin LabelFrame is able to show text directly

Frame(
parent, # the host container
cursor, # the pointer style to show when over this widget
style, # the style
)

LabelFrame(
parent, # the host container
text=«text to display»
)
 Text
 Multi-lined formatted text
 It can also handle images
 get(), insert() and delete() methods facilitate text editing

Text(

parent, # the host container

font=«font», # the text to go on this widget

height=«number of text lines», # the string var that is bound to this widget

wrap=«WORD/CHAR», # the CHAR is the default

)
 Radiobutton
 Implements a multiple-choice button
 You may elect to define a call back function

def sel():
text = f'You have selected {residency.get()}'

residency = StringVar()

Radiobutton(parent, text='Domestic',
variable=residency, value='dom', command=sel)

Radiobutton(parent, text='International',
variable=residency, value='intl', command=sel)
 Combobox
 Implements a drop-down list

program = StringVar()

country = Combobox (parent, textvariable=program)

country['values'] = ('Gaming', 'Health', 'Software')

country.current(1) #select the second item in the combobox

program.get() #reads the current selected item
 Checkbutton
 Implements a toggle button
 Like the Radiobutton, you may also elect to define a call back function

comp100 = StringVar()
comp213 = StringVar()
comp120 = StringVar()

Checkbutton(parent, text='Programming I',

variable=comp100, onvalue='COMP100', offvalue='')

Checkbutton(parent, text='Web Page Design',

variable=comp213, onvalue='COMP213', offvalue='')

comp100.set('COMP100') #check the first widget

comp120.set('') #uncheck the second widget
 Canvas
 Manages a 2D collection of graphical objects — lines, circles, text, images, other
widgets, and more.
 It is suitable for a wide range of uses, including drawing or diagramming, CAD tools,
displaying or monitoring simulations or actual equipment, and building more complex
widgets out of simpler ones.

Canvas(parent, bg='blue', height=250, height=300)

 It support the following:

create_arc(), create_image(), create_line(), create_oval(),
create_polygon(), create_rectangle()
Layout Managers

 There are three layout managers:

 grid
 pack
 place
 Each widget can only have a single layout manager
 They are responsible for the final size and position of each containing widgets
Placing widget in container – grid()
 grid()
 This provides a table-like management features for layout management
 This makes it easier to create data capture forms and dialogs etc.

 Options
 column=«column to put this widget, default=0»
 columnspan=«number of column to occupy, default=1»
 row=«row to put this widget, default=0»
 rowspan=«number of rows to occupy, default=1»
 sticky=«what to do if cell is larger than widget, E, W, N, S, NE, NW, SE, SW default=0»

 The following will distribute 2/5 of extra space to column 0 and 3/5 to column 1
w.columnconfigure(0, weight=2)
w.columnconfigure(1, weight=3)
Placing widget in container – pack()

 pack()
 Simple for simple layout, but may become complex for slightly complex
layout
 Options:
 expand=«True, False(default)»
 fill=«X, Y, BOTH, NONE(default)»
 side=«LEFT, RIGHT, BOTTOM, TOP(default)»
Placing widget in container – place()

 place()
 Provides the best placement capability
 Options:
 x, y=«distance from left or top of parent container»
 width, height=«size in pixel of widget»
 relx, rely=«relative distance from left or top of parent container»
 relwidth, relheight=«relative size in pixel of widget»
 fill=«X, Y, BOTH, NONE(default)»
 side=«LEFT, RIGHT, BOTTOM, TOP(default)»
Using internal bitmaps
 A container can a Tk window, frame, canvas or panel
 To put the widget onto its container, use the following:
 e.g.

Button(parent, text='Error',
relief=RAISED, bitmap='error')

 Other bitmap available are:

'error', circle', 'clock', 'cross', 'dotbox', 'exchange', 'fleur',
'heart', 'man', 'mouse', 'pirate', 'plus', 'shuttle', 'sizing',
'spider', 'spraycan', 'star', 'target', 'tcross', 'trek', 'watch'
Using cursors and relief
 A container can a Tk window, frame, canvas or panel
 To put the widget onto its container, use the following:
 e.g.

Button(parent, text='Error',
relief=RAISED, bitmap='error’)

 Other relief available are:

'FLAT', 'RAISED', 'SUNKEN', 'GROOVE', 'RIDGE'

 Other cursors available are:

'arrow', 'circle', 'clock', 'cross, 'gray12', 'heart', 'plus', 'spider',
'praycan', 'watch'
Using font
 Font to specify

family – The family name as a string

size – The font height as an integer in points. To get a font n pixels high,
use -n.
weight – bold/normal
slant – italic/roman
underline – /normal
overstrike – /normal

 Specifying a font style

style = Style()
style.configure('Heading.TLabel', background='#80ffc1’,
font=('Times', 24, 'bold', 'italic', 'overstrike', 'underline'))
Using message box
messagebox.showinfo('Message title', 'Message content')
messagebox.showwarning('Message title', 'Message content') #shows warning message
messagebox.showerror('Message title', 'Message content') #shows error message

res2 = messagebox.askquestion('Message title','Message content')

res2 = messagebox.askyesno('Message title','Message content')
res2 = messagebox.askyesnocancel('Message title','Message content')
res2 = messagebox.askokcancel('Message title','Message content')
res3 = messagebox.askretrycancel('Message title','Message content')

 res2 can be True or False

 res3 can be True, False or None
Using file dialog box
file = filedialog.askopenfilename(initialdir= path.dirname(__file__))
 file will be the path name of the selected file

files = filedialog.askopenfilenames(filetypes = (('Text files', '*.txt'),('all files',

'*.*')))

dir = filedialog.askdirectory()
messagebox.showinfo('Message title', 'Message content')
messagebox.showwarning('Message title', 'Message content') #shows warning message
messagebox.showerror('Message title', 'Message content') #shows error message

 res2 can be True or False

 res3 can be True, False or None
A simple Tkinter application

from tkinter import Tk, Label #importing only what is needed

root = Tk() #creates the root application object

label = Label( #create a Label widget
root, #parent of this widget
text='Narendra\"s Masterpiece' #keyword argument, specifying the text to be displayed
)

label.pack() #adds the label to the window

root.mainloop() #starts the main event loop

from tkinter import *
from tkinter import ttk

root = Tk() #similar to a windows form

root.title("Narendra's Masterpiece") #title of the window

frame = ttk.Frame( #create a Frame (container in this case)

root, #parent of this widget
width=360, #width

height=240) #height

frame.grid() #row=0, column=0

frame['padding'] = (5,10) #padding

frame['borderwidth'] = 10 #border
frame['relief'] = 'sunken' #style: panel or gropubox
 Label

Label Entry

Label
Radiobutton
Radiobutton

Label Combobox

Label Checkbutton
Checkbutton
Checkbutton

Button Button Button

Intended steps
 Add the necessary imports
 Create the root
 Build the rows
 Row 0
 One Label with an image in column 1
 Row 1
 One Label with text and an Entry
 Row 2
 One Label with text and a Frame with two Radiobutton
 Row 3
 One Label with text and a Combobox with three items
 Row 4
 One Label with text and a Frame that spans two columns consisting of three Checkbutton
 Row 5
 Three Buttons, one in each column
#row 0
lbl_feather = ttk.Label(frame) #the parent of this widget

image = PhotoImage(file='feather.png') #create a PhotoImage

lbl_feather['image'] = image #put the above image on label

lbl_feather.grid( #positionsing the label

column=1, #column=1

row=0, #row=0

sticky=(W, E)) #where to anchor in the cell

#row 1
lbl_full_name = ttk.Label( #creates a Label
frame, #parent
text='Full name:').grid( #sets the text
column=0, #column=0
row=1, #row=1
sticky=(W, E)) #align center

username = StringVar() #variable that will be used to communicate

name = ttk.Entry( #creates an Entry

frame, #parent
textvariable=username).grid( #the variable to bind to
column=1, #column=1
row=1, #row=1
sticky=(W)) #align left
#row 2
ttk.Label( frame, text='Residency:').grid( column=0, row=2, sticky=(W, E))

panel = ttk.Frame(frame) #this will be the container for the widget below
panel.grid(column=1, row=2, sticky=(W, E))
panel['borderwidth'] = 3
panel['relief'] = 'ridge'

residency = StringVar()

ttk.Radiobutton(panel, text='Domestic', variable=residency, value='dom').grid(

column=0, row=0, sticky=(W)) #grid coordinate is for its immediate parent
ttk.Radiobutton(panel, text='International', variable=residency, value='intl').grid(
column=0, row=1, sticky=(W))
#row 4
ttk.Label( frame, text='Courses:').grid( column=0, row=4, sticky=(W, E))

panel = ttk.Frame(frame)
panel.grid( column=1, row=4, columnspan=4, sticky=(W, E)
panel['borderwidth'] = 3
panel['relief'] = 'ridge'

comp100 = StringVar()
comp213 = StringVar()
comp120 = StringVar()
#row 4 continued
check = ttk.Checkbutton( panel,
text='Programming I',
variable=comp100,
# offvalue='imperial',
onvalue='comp100')
check.grid(column=0, row=0, sticky=(W))

ttk.Checkbutton( panel, text='Web Page Design',

variable=comp213, onvalue='comp213').grid(
column=0, row=1, sticky=(W))

ttk.Checkbutton( panel, text='Software Engineering Fundamentals',

variable=comp120, onvalue='comp129').grid(
column=0, row=2, sticky=(W))
#row 5
button = ttk.Button(frame, text='Reset') #buttons can also have images
button.grid(column=0, row=5, sticky=(W, E))

ttk.Button(frame, text='Ok',
command=read_form).grid( #the function that will be called
column=1, row=5, sticky=(W, E))

ttk.Button(frame, text='Exit',
command=root.quit).grid( #the delegate that will be called
column=2, row=5, sticky=(W, E))

def read_form(*args):
messagebox.showinfo( #from tkinter import messagebox
title='Form Information',
message=f'Username: {username.get()} \nResidency: {residency.get()}\nCourses:
{comp100.get()} {comp120.get()} {comp213.get()}\nProgram: {program.get()}')
Summary