This text is used together with Mark Pilgrims book Dive Into Python 3 for the Arthead course Python Fundamentals.

Transcription

1

2 2

3 About this text This text is used together with Mark Pilgrims book Dive Into Python 3 for the Arthead course Python Fundamentals. The first part is written for Python 2 and at the end there is a section for Python 3. This document is copyright by Arthead AB, all rights reserved. This text can only be distributed to participants to the course Python Fundamentals by Arthead. Permission is hereby granted for course participants to make hardcopies and freely distribute the material herein under the following conditions: The copyright and this legal notice must appear in any copies of this document made in whole or in part. None of material herein can be sold or otherwise distributed for commercial purposes without written permission of the copyright holder. 3

4 Writing GUI s in Python 2 To create a graphical user interface (GUI) in Python we will use a framework. There are a number to pick from but here we will look at Python s standard GUI library, Tkinter. What is Tkinter? The Tkinter module ( Tk interface ) is the standard Python interface to the Tk GUI toolkit from Scriptics(formerly developed by Sun Labs). Both Tk and Tkinter are available on most Unix platforms, as well as on Windows and Macintosh systems. Starting with the 8.0 release, Tk offers native look and feel on all platforms. Tkinter consists of a number of modules. The Tk interface is provided by a binary extension module named _tkinter. This module contains the low-level interface to Tk, and should never be used directly by application programmers. It is usually a shared library (or DLL), but might in some cases be statically linked with the Python interpreter. The public interface is provided through a number of Python modules. The most important interface module is the Tkinter module itself. To use Tkinter, all you need to do is to import the Tkinter module: import Tkinter Or, more often: from Tkinter import * The Tkinter module only exports widget classes and associated constants, so you can safely use the from-inform in most cases. If you prefer not to, but still want to save some typing, you can use import-as: as we will do in this text A First Program Let s create a small program that will display a window with a text label widget inside of it. #Create the window widget. #Crate a label widget that is a child of window label = tk.label(window, text = "Hi GUI") #Pack it to make it visible label.pack() #Enter the main loop making the window visible First we import the Tkinter module. It contains all classes, functions and other things needed to work with the Tk toolkit. 4

5 In the main function the first thing we do is to create a window widget. This is an ordinary window with a title bar and other decoration that we would expect from a window. You should only create one window widget per program and it must be created before all other widgets. Next we create the label widget and make it a child of window. We also provide the text for this widget. Next we make a call to a function called pack. This is one out of three methods we can use to add widgets to the window. We will soon look at them in more detail but for now this is what we need to do to add the label widget to the window. The last call is to the main loop of the window widget. This is the loop that will be executed until we exit the window. This is needed so Tkinter can process different events that we might want to respond to. More on this too a bit later. This is what the window looks like: Tkinter Geometry Managers Tkinter contains three different geometry managers that will help us handle where and how widgets are placed in the window. These are pack, grid and place. Let us examine these in more detail. Pack Geometry Manager What the pack manager does it that it places its children (the widgets) on top of each other in columns or side by side in rows. There are three situations when we want to use this manager and they are: 1. Put the widget inside a frame (or any other container widget), and have it fill the entire frame (or container) 2. Place a number of widgets on top of each other 3. Place a number of widgets side by side Look at the example below. listbox = tk.listbox(window) listbox.pack() for i in range(20): listbox.insert(tk.end,str(i)) This will result in a program that looks like this: 5

6 The listbox widget will by default make room to display 10 items. In this case we insert 20 items. If the user tries to enlarge the window to see the rest the result will look like this: What we need to do is to let the listbox fill the container and let it expand. We can do this by providing the fill and expand options to pack: listbox.pack(fill=tk.both, expand= 1) The fill BOTH indicates that we want the listbox to fill its container both vertically and horizontally. Instead we can pass in X to only fill it vertically and Y to only fill it horizontally. Expand tells the manager to assign more space to the widget box. If the parent widget is made larger than necessary to hold all packed widgets, any exceeding space is distributed among all widgets that have the expand option set to a non-zero value. 6

7 If we don t provide any arguments to pack the widgets will be place on top of each other like this: label = tk.label(window, text="red", bg="red", fg="white") label.pack() label = tk.label(window, text="green", bg="green", fg="black") label.pack() label = tk.label(window, text="blue", bg="blue", fg="white") label.pack() Or we can put them side by side if we use the side option wit pack: label = tk.label(window, text="red", bg="red", fg="white") label.pack(side=tk.left) label = tk.label(window, text="green", bg="green", fg="black") label.pack(side=tk.left) label = tk.label(window, text="blue", bg="blue", fg="white") label.pack(side=tk.left) If we use RIGHT for the green label we get this result The pack method is not always the best one and can be hard to handle in most situations. Let s assume we want to have two label widgets and two entry widgets (to let get user input) that looks like this: 7

8 If we used pack with no arguments it would look like this: We could use pack to make it work but it would involve several containers to get it right. Instead we can use the grid manager. Grid Geometry Manager The grid manager works with rows and columns making it very easy for us to place the widgets where we want them to be. In the example above we saw that placing four widgets with pack can be difficult so let us see how this can be done with the grid manager: label = tk.label(window, text= "Name:") label.grid(row=0) name = tk.entry(window) name.grid(row=0,column=1) label = tk.label(window, text= " ") label.grid(row=1) = tk.entry(window) .grid(row=1,column=1) Here we create a label and use the grid manager and pass in row 0 (the first row). We will not need to specify the column as it defaults to 0. Setting both row and column to zero will place this widget in the upper left corner of the window. Next we create an entry widget and place it on the same row (0) but in column 1. The next label will go on row 1 and column 0 (right below the first label) and the next entry will be placed at row 1 and column 1 right below the first entry. The result will be as we saw before. Empty rows and columns will be ignored so we could just as well have started at 10 or 50. 8

9 Note that widgets are centered in their cells. You can use the sticky option to change this. To see this better let us change the text in the second label to address: To make the labels justify to the left we can use the sticky option. Sticky uses N,S,E, and W to set the direction (North, South, East, and West). If we want to justify name to the left we use the stick option with W. label = tk.label(window, text= "Name:") label.grid(row=0,sticky=tk.w) This will give us this result: We can let a widget span over more than one cell. Here is an example of that: label = tk.label(window, text= "Name:") label.grid(row=0,sticky=tk.w) name = tk.entry(window) name.grid(row=0,column=1) label = tk.label(window, text= " address:") label.grid(row=1) = tk.entry(window) .grid(row=1,column=1) check = tk.checkbutton(window, text="remeber me...") check.grid(columnspan=2,row=2) button = tk.button(window, text="submit") button.grid(row=2,column=3) 9

10 The checkbox will span over the first two columns. If we draw a grid on top of the window this will be clearer and we can see how the checkbox spans over two columns. Column 0 Column 1 Column 2 Row 0 Row 1 Row 2 Columnspan 2 The Place Manager The place manager is the simplest and least useful of the three managers. It can be used with exact coordinates like this: label = tk.label(window, text= "First label:") label.place(x=10, y=30) label = tk.label(window, text= "Second label") label.place(x=100, y=34) This will produce a window like this: 10

11 Events and Bindings To make a GUI useful we need to be able to respond to events. This is done by binding a callback function to a widget and a particular event. Let us start with a simple form, just a label, an entry field and a button. label = tk.label(window,text = "Name: ") label.grid() #row and column defaults to 0 name = tk.entry(window) name.grid(row=0, column=1) button = tk.button(window, text="submit") button.grid(row=1,column=1,sticky=e) Now we want to react to when the user press the left mouse button over the button. We will do this by binding a callback function to this event. First we need to write the callback function. import tkmessagebox def buttoncallback(event): tkmessagebox.showinfo("say hi","hi there") We import the module tkmessagebox so we can display a message box. In the function (that takes one argument called event, more about this soon) we just display a message box with the title Say hi and the text Hi there. Now we want to bind this function to the event that the button was clicked. We can do this by calling a method called bind for the button. The bind method takes two arguments. The first one is what event to respond to and the second one is the function to call when this event occurs. 11

12 The events we can respond to are Event <Button-1> Description A mouse button is pressed over the widget. Button 1 is the leftmost button, button 2 is the middle button (where available), and button 3 the rightmost button. When you press down a mouse button over a widget, Tkinter will automatically grab the mouse pointer, and subsequent mouse events (e.g. Motion and Release events) will then be sent to the current widget as long as the mouse button is held down, even if the mouse is moved outside the current widget. The current position of the mouse pointer (relative to the widget) is provided in the x and y members of the event object passed to the callback. You can use ButtonPress instead of Button, or even leave it out completely: <Button-1>,<ButtonPress-1>, and <1> are all synonyms. For clarity, I prefer the <Button-1> syntax. <B1-Motion> <ButtonRelease-1> <Double-Button-1> <Enter> <Leave> <FocusIn> <FocusOut> <Return> The mouse is moved, with mouse button 1 being held down (use B2 for the middle button, B3 for the right button). The current position of the mouse pointer is provided in the x and y members of the event object passed to the callback. Button 1 was released. The current position of the mouse pointer is provided in the x and y members of the event object passed to the callback. Button 1 was double clicked. You can use Double or Triple as prefixes. Note that if you bind to both a single click (<Button- 1>) and a double click, both bindings will be called. The mouse pointer entered the widget (this event doesn t mean that the user pressed the Enter key!). The mouse pointer left the widget. Keyboard focus was moved to this widget, or to a child of this widget. Keyboard focus was moved from this widget to another widget. The user pressed the Enter key. You can bind to virtually all keys on the keyboard. For an ordinary 102-key PC-style keyboard, the special keys are Cancel (the Break key), BackSpace, Tab, Return(the Enter key), Shift_L (any Shift key), Control_L (any Control key), Alt_L (any Alt key),pause, Caps_Lock, Escape, Prior (Page Up), Next (Page Down), End, Home, Left, Up, Right,Down, Print, Insert, Delete, F1, F2, F3, F4, F5, F6, F7, F8, F9, F10, F11, F12, Nu m_lock, and Scroll_Lock. 12

13 <Key> A The user pressed any key. The key is provided in the char member of the event object passed to the callback (this is an empty string for special keys). The user typed an a. Most printable characters can be used as is. The exceptions are space (<space>) and less than (<less>). Note that 1 is a keyboard binding, while <1> is a button binding. <Shift-Up> <Configure> The user pressed the Up arrow, while holding the Shift key pressed. You can use prefixes like Alt, Shift, and Control. The widget changed size (or location, on some platforms). The new size is provided in the width and height attributes of the event object passed to the callback. We could pick the <Button-1> event for this but we would then respond to the mouse down part of the event and that would leave the button visually pressed down in our form. If we want to avoid this we could instead react to the <ButtonRelease-1> event. This will let the button come back up and when the mouse button is released our function will be called. We bind the event to the function like this: button.bind("<buttonrelease-1>", buttoncallback) When the button is pressed the buttoncallback function will be called and the message box will be displayed. If we want to pick up what is in the entry field in the function we will need to do two things. First is to bind a variable to the entry field so we can access the content of the field in the callback function. To be able to access the variable we will need to declare it global. Tkinter will provide a class called StringVar that we can use to bind a variable to the entry field. We can declare it like this: v = tk.stringvar() As mentioned we want this to be global so we must declare it above our callback function. But to able to declare it we must declare our window variable first. So we need to declare window global as well. Then we need to bind the variable v to the entry field. This is done when we create the entry object: name = tk.entry(window, textvariable=v) Last change we need to do to the program is to print the content of the variable v in the callback function. This is done by calling the member function get for the v object. 13

14 The full program now looks like this: import tkmessagebox v = tk.stringvar() def buttoncallback(event): tkmessagebox.showinfo("say hi","hi there " + v.get()) label = tk.label(window,text = "Name: ") label.grid() #row and column defaults to 0 name = tk.entry(window, textvariable=v) name.grid(row=0, column=1) button = tk.button(window, text="submit") button.grid(row=1,column=1,sticky=e) button.bind("<buttonrelease-1>", buttoncallback) if name == ' main ': main() And the result: Using global variables like this is of course not how we want to create a stable program. A better solution is to wrap all this into a class. 14

15 Widgets There are a number if widgets included in Tkinter. Let us take a brief look at them. Canvas The canvas can be used to draw graphics on. You can see it as a drawing surface. This little demo shows how it can be used: """Simple line drawing demo.""" b1 = "up" xold, yold = None, None def b1down(event): global b1 b1 = "down" # you only want to draw when the button is down # because "Motion" events happen -all the time- def b1up(event): global b1, xold, yold b1 = "up" xold = None yold = None # reset the line when you let go of the button def motion(event): if b1 == "down": global xold, yold if xold is not None and yold is not None: event.widget.create_line(xold,yold,event.x,event.y,smooth=tk.true) # here's where you draw it. smooth. neat. xold = event.x yold = event.y drawing_area = tk.canvas(window) drawing_area.pack() drawing_area.bind("<motion>", motion) drawing_area.bind("<buttonpress-1>", b1down) drawing_area.bind("<buttonrelease-1>", b1up) Checkbutton To use the checkbutton widget you must a Tkinter variable of the type IntVar (does not have to be IntVar, can be StringVar for example but IntVar is the most commonly used variable type) and bind it 15

16 to the checkbutton. It is with this variable you can check the state of the checkbutton. Easiest way to do this import functools class GUI: def init (self,window): self.var = tk.intvar() checkbutton = tk.checkbutton(window, text="check me", variable=self.var) checkbutton.bind("<buttonrelease-1>",functools.partial(self.cb)) checkbutton.pack() def cb(self,event): if self.var.get() == 1: print "Unchecked" else: print "Checked" g = GUI(window) if name == ' main ': main() To be able to call a member function of the class as a callback we can use the functools module and its partial member function. By using this we can get the object to call its own member function as a callback. The normal callback is expecting just one argument (event) but in our case the function takes two, self and event. This little sample will print Checked in the console when the checkbutton is checked and Unchecked when it is not checked. 16

17 Frame The frame widget is used to group other widgets. It can also be used for decorations like this: tk.label(text="top").pack() separator = tk.frame(height=2, bd=1, relief= tk.sunken) separator.pack(fill=tk.x, padx=5, pady=5) tk.label(text="bottom").pack() if name == ' main ': main() Radiobutton The radio button works almost like the check button but only one can be selected at a time: import functools class GUI: def init (self,window): self.var = tk.intvar() radio1 = tk.radiobutton(window, text="first", variable=self.var,value = 0) radio2 = tk.radiobutton(window, text="second", variable=self.var, value = 1) radio1.bind("<buttonrelease-1>",functools.partial(self.cb)) radio2.bind("<buttonrelease-1>",functools.partial(self.cb)) radio1.pack() radio2.pack() def cb(self,event): print self.var.get() if self.var.get() == 1: print "First" else: print "Second" g = GUI(window) if name == ' main ': main() 17

18 If we, when we create the radio buttons set the option indicatoron to 0 they will become button boxes instead radio1=tk.radiobutton(window,text="first",variable=self.var,value=0,indicatoron=0) radio2=tk.radiobutton(window,text="second",variable=self.var,value=1,indicatoron=0) 18

19 LabelFrame The label frame is used to group items such as radio buttons. To wrap our radio button example in a label frame we can do this: import functools class GUI: def init (self,window): self.var = tk.intvar() group = tk.labelframe(window, text="select", padx=5, pady=5) group.pack(padx=10, pady=10) radio1 = tk.radiobutton(group, text="first", variable=self.var,value = 0) radio2 = tk.radiobutton(group, text="second", variable=self.var, value = 1) radio1.bind("<buttonrelease-1>",functools.partial(self.cb)) radio2.bind("<buttonrelease-1>",functools.partial(self.cb)) radio1.pack(side=tk.left) radio2.pack(side=tk.left) def cb(self,event): print self.var.get() if self.var.get() == 1: print "First" else: print "Second" g = GUI(window) if name == ' main ': main() 19

20 Menus This widget is used to display all kinds of menus used by an application. Since this widget uses native code where possible, you shouldn t try to fake menus using buttons and other Tkinter widgets. Pull-down Menus Top-level and pull-down menus are created the same way so here is a small example of a pull-down menu. All menu choices except Exit call the same function that just will print Hello! in the console. def hello(): print "hello!" menubar = tk.menu(window) # create a pulldown menu, and add it to the menu bar filemenu = tk.menu(menubar, tearoff=0) filemenu.add_command(label="open", command=hello) filemenu.add_command(label="save", command=hello) filemenu.add_separator() filemenu.add_command(label="exit", command=window.quit) menubar.add_cascade(label="file", menu=filemenu) # create more pulldown menus editmenu = tk.menu(menubar, tearoff=0) editmenu.add_command(label="cut", command=hello) editmenu.add_command(label="copy", command=hello) editmenu.add_command(label="paste", command=hello) menubar.add_cascade(label="edit", menu=editmenu) helpmenu = tk.menu(menubar, tearoff=0) helpmenu.add_command(label="about", command=hello) menubar.add_cascade(label="help", menu=helpmenu) # display the menu window.config(menu=menubar) if name == ' main ': main() 20

21 Popup Menus Popup menus is created the same way as normal menus, but is explicitly displayed using the post method. def hello(): print "hello!" # create a popup menu menu = tk.menu(window, tearoff=0) menu.add_command(label="undo", command=hello) menu.add_command(label="redo", command=hello) # create a canvas frame = tk.frame(window, width=512, height=512) frame.pack() # define the callback method def popup(event): menu.post(event.x_window, event.y_window) # attach popup to canvas frame.bind("<button-3>", popup) if name == ' main ': main() 21

22 Message Widget This widget is used to display short text messages using a single font. You can often use a plain Label instead. If you need to display text in multiple fonts, use the Text widget. tmessage = tk.message(window,text="hi there. This is a text message...") tmessage.pack() if name == ' main ': main() Text Widget The text widget is used to display text documents, containing either plain text or formatted text (using different fonts, embedded images, and other embellishments). The text widget can also be used as a text editor. This widget is rather complex and has lots of features. For more information look at this web page: There is also a variant of this widget called ScrolledText that offers all features of the text widget along with a vertical scrollbar. More Widgets There are more widgets you can use in your programs. To learn more about them you can visit or 22

23 Writing GUI in Python 3 As for Python 3 Tkinter has went through some changes. Most of what we saw for Python 2 still applies but as the programs above will not run we will look at some examples here to see the difference. Importing Tkinter in Python 3 This is where we see the first difference. When importing the Tkinter package in Python 3 we will need to do it with the name tkinter all lower case like this import tkinter or as I will do it in this text import tkinter as tk I will use the later version so I will not have to type tkinter each time but just tk. 23

24 Using the Python 2 Examples in Python 3 All of the examples above will work in Python 3 if we use this import with a few exceptions. First you will need to change all print-statements from print something to print(something) Then there is a change when it comes to how to show a message box. In the Events and Binding section above we saw an example where we used a message box to display some information. The messagebox has been moved in the tkinter package structure. The very same program for Python 3 will look like this import tkinter as tk from tkinter import messagebox v = tk.stringvar() def buttoncallback(event): messagebox.showinfo("say hi","hi there " + v.get()) label = tk.label(window,text = "Name: ") label.grid() #row and column defaults to 0 name = tk.entry(window, textvariable=v) name.grid(row=0, column=1) button = tk.button(window, text="submit") button.grid(row=1,column=1,sticky=tk.e) button.bind("<buttonrelease-1>", buttoncallback) Exercisers GUI 1. Write your own Window class that does all the setup in the constructor and then has a function called addwidgets that will add all widgets you will use to the frame. 2. Create a file browser with a GUI. You can solve this in many ways but let the user choose a directory and list all files and sub-directories. Let the user be able to select one of the subdirectories and then you should list all files in this directory. 24