computing science 1p

Computing Science 1P

Lecture 17: Friday 23rd February

Simon GayDepartment of Computing Science

University of Glasgow

2006/07

2006/07 Computing Science 1P Lecture 17 - Simon Gay 2

Graphical User Interfaces

The key ideas of graphical user interfaces (on-screen windows,icons, menus, buttons etc, and a pointing device (mouse)) weredeveloped 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, Microsoftintroduced Windows, first as an application and later as anoperating system.

Python makes it very easy to implement simple GUIs, so we willlook at the main points.


The main ideas

Some of the programs we have written have almost no userinterface, or at least take no input from the user.For example, the GPA program (lecture 15). There is just asequence of statements, carrying out the computation.

We have also seen programs with a simple text-based menuinterface. For example, the birthday book program (Unit 12).The structure of the program is a loop, prompting the user fora command and then calling a function in order to carry it out.

GUI programs have a similar structure, except that the mainloop is provided by a module, and the functions doing the workare called in response to mouse clicks on buttons, etc.


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 withTkinter, although they tend to make the simple examples morecomplicated than they need to be.

A useful reference can be found at

although again, its examples are over-complicated.

http://infohost.nmt.edu/tcc/help/pubs/tkinter/tkinter.pdf

Other links: http://wiki.python.org/moin/TkInter


The simplest GUI program in Python

# Use the Tkinter moduleimport Tkinter

# Create the top-level (or root) windowtop = Tkinter.Tk()

# Create a button ...quitButton = Tkinter.Button(top,text="Quit", command=top.destroy)# ... and display it in the windowquitButton.grid()

# Start the main loop: responds to the mouse etcTkinter.mainloop()

example1


Line by line

top = Tkinter.Tk()

This must be present in order to create a window. You alwaysneed at least one window to put buttons etc. in.


Line by line

quitButton = Tkinter.Button(top,text="Quit", command=top.destroy)

this must be present, to associatethe button with the root window

optional

specifies a callback to be used when the button is pressed


Line by line

quitButton.grid()

This uses the layout manager called grid to place the buttonin the root window.

Without this line, the button will not be displayed.


Line by line

Tkinter.mainloop()

This starts the main loop, which tracks the mouse and worksout when and where it has been pressed.

Clicking the mouse on the Quit button causes the callbackto be called: i.e. the method top.destroy is called, whichterminates the root window.

In some books you will see top.mainloop() instead;it doesn't matter.


Event-driven programming

GUI applications use a style of programming calledevent-driven. Events are mouse movements, mouse clicks,key presses, and many higher-level events constructed fromthese.

(For example, clicking the mouse while the pointer is over abutton generates a button press event).

Some events are handled completely within the main loopprovided by Tkinter.

(For example, mouse movements are used to update theposition of the pointer on the screen; clicking the minimizebutton of the window has the usual effect.)


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 ispressing it. When the button is created, the command parameteris used to specify which function to call when the button ispressed.

quitButton = Tkinter.Button(top,text="Quit", command=top.destroy)


Extending the example

First let's add something to enable us to display a message tothe 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", command=top.destroy)quitButton.grid()

Tkinter.mainloop()

example2


Extending the example

Instead of displaying the message immediately, let's addanother 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,text="")messageLabel.grid()

showButton = Tkinter.Button(top,text="Show",command=display)showButton.grid()

quitButton = Tkinter.Button(top,text="Quit",command=top.destroy)quitButton.grid()

Tkinter.mainloop() example3


Points to note

import Tkinter


top = Tkinter.Tk()

messageLabel = Tkinter.Label(top,text="")messageLabel.grid()

showButton = Tkinter.Button(top,text="Show",command=display)showButton.grid()

quitButton = Tkinter.Button(top,text="Quit",command=top.destroy)quitButton.grid()

Tkinter.mainloop()no brackets

definition before use


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 nameof which is unknown or temporarily forgotten[C20: changed from GADGET]


Changing the layout

We can use optional arguments with the grid method to controlhow widgets are placed.import Tkinter


top = Tkinter.Tk()

messageLabel = Tkinter.Label(top,text="",width=12)messageLabel.grid(row=0,column=0)

showButton = Tkinter.Button(top,text="Show",command=display)showButton.grid(row=0,column=1)

quitButton = Tkinter.Button(top,text="Quit",command=top.destroy)quitButton.grid(row=0,column=2)

Tkinter.mainloop()

example4


Getting input from the userimport Tkinter

def display(): name = textVar.get() messageLabel.configure(text="Hello "+name)

top = Tkinter.Tk()

textVar = Tkinter.StringVar("")textEntry = Tkinter.Entry(top,textvariable=textVar,width=12)textEntry.grid(row=0,column=0)

messageLabel = Tkinter.Label(top,text="",width=12)messageLabel.grid(row=1,column=0)

showButton = Tkinter.Button(top,text="Show",command=display)showButton.grid(row=1,column=1)

quitButton = Tkinter.Button(top,text="Quit",command=top.destroy)quitButton.grid(row=1,column=2)

Tkinter.mainloop()

example5


Important idea

The Entry widget allows the user to enter text, but it does nothave storage for the text built in.

We have to create a Tkinter.StringVar object and give itto the Entry object.

We can then use the get method of the StringVar to obtainthe text.

This style of programming is also needed with several otherTkinter widgets.

It must be a StringVar, not an ordinary string variable.


Another example: Radiobuttondef display(): name = textVar.get() ch = choice.get() if ch == 1: message = "Hello "+name elif ch == 2: message = "Goodbye "+name else: message = "" messageLabel.configure(text=message)

top = Tkinter.Tk()textVar = Tkinter.StringVar("")textEntry = Tkinter.Entry(top,textvariable=textVar,width=12)textEntry.grid(row=0,column=0)messageLabel = Tkinter.Label(top,text="",width=12)messageLabel.grid(row=1,column=0)choice = Tkinter.IntVar(0)helloButton = Tkinter.Radiobutton(top,text="Hello", variable=choice,value=1,command=display)helloButton.grid(row=1,column=1)goodbyeButton = Tkinter.Radiobutton(top,text="Goodbye", variable=choice,value=2,command=display)goodbyeButton.grid(row=1,column=2)quitButton = Tkinter.Button(top,text="Quit",command=top.destroy)quitButton.grid(row=1,column=3)Tkinter.mainloop()

example6


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

computing science 1p

Documents

tkinter moduleimport

quit button

main loop

python books

associatethe button

mouse etctkinter

mouse clicks

user fora command