Computing Science 1P

1
Computing Science 1P
Lecture 17 Friday 23rd February
Simon Gay Department of Computing
Science University of Glasgow
2006/07
2
Graphical User Interfaces
The key ideas of graphical user interfaces
(on-screen windows, icons, menus, buttons etc,
and a pointing device (mouse)) were developed at
Xerox PARC during the late 1970s.
These ideas were adopted by Apple, first in the
Lisa (1983) and then in the popular Macintosh
(1984). In 1985, Microsoft introduced Windows,
first as an application and later as an operating
system.
Python makes it very easy to implement simple
GUIs, so we will look at the main points.
3
The main ideas
Some of the programs we have written have almost
no user interface, or at least take no input from
the user. For example, the GPA program (lecture
15). There is just a sequence of statements,
carrying out the computation.
We have also seen programs with a simple
text-based menu interface. For example, the
birthday book program (Unit 12). The structure of
the program is a loop, prompting the user for a
command and then calling a function in order to
carry it out.
GUI programs have a similar structure, except
that the main loop is provided by a module, and
the functions doing the work are called in
response to mouse clicks on buttons, etc.
4
Where to find more information
We will be using the Tkinter module for GUI
programming.
It is not covered in the course textbook. It will
be in the exam.
Many other Python books cover GUI programming
with Tkinter, although they tend to make the
simple examples more complicated than they need
to be.
A useful reference can be found at
http//infohost.nmt.edu/tcc/help/pubs/tkinter/tkin
ter.pdf
although again, its examples are over-complicated.
Other links http//wiki.python.org/moin/TkInter
5
The simplest GUI program in Python
Use the Tkinter module import Tkinter Create
the top-level (or root) window top
Tkinter.Tk() Create a button ... quitButton
Tkinter.Button(top,text"Quit",
commandtop.destroy) ... and display
it in the window quitButton.grid() Start the
main loop responds to the mouse
etc Tkinter.mainloop()
example1
6
Line by line

top Tkinter.Tk()
This must be present in order to create a window.
You always need at least one window to put
buttons etc. in.
7
Line by line
quitButton Tkinter.Button(top,text"Quit",
commandtop.destroy)
this must be present, to associate the button
with the root window
optional
specifies a callback to be used when the button
is pressed
8
Line by line
quitButton.grid()
This uses the layout manager called grid to place
the button in the root window.
Without this line, the button will not be
displayed.
9
Line by line
Tkinter.mainloop()
This starts the main loop, which tracks the mouse
and works out when and where it has been pressed.
Clicking the mouse on the Quit button causes the
callback to be called i.e. the method
top.destroy is called, which terminates the root
window.
In some books you will see top.mainloop()
instead it doesn't matter.
10
Event-driven programming
GUI applications use a style of programming
called event-driven. Events are mouse movements,
mouse clicks, key presses, and many higher-level
events constructed from these.
(For example, clicking the mouse while the
pointer is over a button generates a button press
event).
Some events are handled completely within the
main loop provided by Tkinter.
(For example, mouse movements are used to update
the position of the pointer on the screen
clicking the minimize button of the window has
the usual effect.)
11
Event-driven programming
Other events, usually higher-level events such as
button presses, menu selections, typing in a
text field, are handled in a way that involves
the user's code.
This is controlled by defining callbacks.
Example if we have a button, the event we are
interested in is pressing it. When the button is
created, the command parameter is used to specify
which function to call when the button is pressed.
quitButton Tkinter.Button(top,text"Quit",
commandtop.destroy)
12
Extending the example
First let's add something to enable us to display
a message to the user. Tkinter provides Label for
this purpose.
import Tkinter top Tkinter.Tk() messageLabel
Tkinter.Label(top,text"Hello
World!") messageLabel.grid() quitButton
Tkinter.Button(top,text"Quit",
commandtop.destroy) quitButton.grid()
Tkinter.mainloop()
example2
13
Extending the example
Instead of displaying the message immediately,
let's add another button with a callback which
will display the message.
import Tkinter def display()
messageLabel.configure(text"Hello World!") top
Tkinter.Tk() messageLabel Tkinter.Label(top,t
ext"") messageLabel.grid() showButton
Tkinter.Button(top,text"Show",commanddisplay) sh
owButton.grid() quitButton Tkinter.Button(top,t
ext"Quit",commandtop.destroy) quitButton.grid()
Tkinter.mainloop()
example3
14
Points to note
import Tkinter def display()
messageLabel.configure(text"Hello World!") top
Tkinter.Tk() messageLabel Tkinter.Label(top,t
ext"") messageLabel.grid() showButton
Tkinter.Button(top,text"Show",commanddisplay) sh
owButton.grid() quitButton Tkinter.Button(top,t
ext"Quit",commandtop.destroy) quitButton.grid()
Tkinter.mainloop()
definition before use
no brackets
15
Terminology
The generic term for a GUI element (button, menu,
label, ) is a widget.
Collins English Dictionary (1986)
widget n. Informal. any small mechanism or
device, the name of which is unknown or
temporarily forgotten C20 changed from GADGET
16
Changing the layout
We can use optional arguments with the grid
method to control how widgets are placed.
example4
import Tkinter def display()
messageLabel.configure(text"Hello World!") top
Tkinter.Tk() messageLabel Tkinter.Label(top,t
ext"",width12) messageLabel.grid(row0,column0)
showButton Tkinter.Button(top,text"Show",comm
anddisplay) showButton.grid(row0,column1) quit
Button Tkinter.Button(top,text"Quit",commandto
p.destroy) quitButton.grid(row0,column2) Tkinte
r.mainloop()
17
Getting input from the user
example5
import Tkinter def display() name
textVar.get() messageLabel.configure(text"Hel
lo "name) top Tkinter.Tk() textVar
Tkinter.StringVar("") textEntry
Tkinter.Entry(top,textvariabletextVar,width12) t
extEntry.grid(row0,column0) messageLabel
Tkinter.Label(top,text"",width12) messageLabel.g
rid(row1,column0) showButton
Tkinter.Button(top,text"Show",commanddisplay) sh
owButton.grid(row1,column1) quitButton
Tkinter.Button(top,text"Quit",commandtop.destroy
) quitButton.grid(row1,column2) Tkinter.mainloo
p()
18
Important idea
The Entry widget allows the user to enter text,
but it does not have storage for the text built
in.
We have to create a Tkinter.StringVar object and
give it to the Entry object.
We can then use the get method of the StringVar
to obtain the text.
This style of programming is also needed with
several other Tkinter widgets.
It must be a StringVar, not an ordinary string
variable.
19
Another example Radiobutton
def display() name textVar.get() ch
choice.get() if ch 1 message
"Hello "name elif ch 2 message
"Goodbye "name else message ""
messageLabel.configure(textmessage) top
Tkinter.Tk() textVar Tkinter.StringVar("") textE
ntry Tkinter.Entry(top,textvariabletextVar,widt
h12) textEntry.grid(row0,column0) messageLabel
Tkinter.Label(top,text"",width12) messageLabel
.grid(row1,column0) choice Tkinter.IntVar(0) h
elloButton Tkinter.Radiobutton(top,text"Hello",

variablechoice,value1,commanddisplay) helloButt
on.grid(row1,column1) goodbyeButton
Tkinter.Radiobutton(top,text"Goodbye",
variablechoice,value2,
commanddisplay) goodbyeButton.grid(row1,column2
) quitButton Tkinter.Button(top,text"Quit",comm
andtop.destroy) quitButton.grid(row1,column3) T
kinter.mainloop()
example6
20
Another example Radiobutton
def display() name textVar.get() ch
choice.get() if ch 1 message
"Hello "name elif ch 2 message
"Goodbye "name else message ""
messageLabel.configure(textmessage) top
Tkinter.Tk() textVar Tkinter.StringVar("") textE
ntry Tkinter.Entry(top,textvariabletextVar,widt
h12) textEntry.grid(row0,column0) messageLabel
Tkinter.Label(top,text"",width12) messageLabel
.grid(row1,column0) choice Tkinter.IntVar(0) h
elloButton Tkinter.Radiobutton(top,text"Hello",

variablechoice,value1,commanddisplay) helloButt
on.grid(row1,column1) goodbyeButton
Tkinter.Radiobutton(top,text"Goodbye",
variablechoice,value2,
commanddisplay) goodbyeButton.grid(row1,column2
) quitButton Tkinter.Button(top,text"Quit",comm
andtop.destroy) quitButton.grid(row1,column3) T
kinter.mainloop()
21
Another example Radiobutton
def display() name textVar.get() ch
choice.get() if ch 1 message
"Hello "name elif ch 2 message
"Goodbye "name else message ""
messageLabel.configure(textmessage) top
Tkinter.Tk() textVar Tkinter.StringVar("") textE
ntry Tkinter.Entry(top,textvariabletextVar,widt
h12) textEntry.grid(row0,column0) messageLabel
Tkinter.Label(top,text"",width12) messageLabel
.grid(row1,column0) choice Tkinter.IntVar(0) h
elloButton Tkinter.Radiobutton(top,text"Hello",

variablechoice,value1,commanddisplay) helloButt
on.grid(row1,column1) goodbyeButton
Tkinter.Radiobutton(top,text"Goodbye",
variablechoice,value2,
commanddisplay) goodbyeButton.grid(row1,column2
) quitButton Tkinter.Button(top,text"Quit",comm
andtop.destroy) quitButton.grid(row1,column3) T
kinter.mainloop()
22
What would you prefer me to do on Wednesdays?

• More short questions (you do more work)
• More long problem-solving examples
• A mixture of both