A Quickstart to building GUI based applications in Python

When you're learning a new language, particularly a scripting language such as Python, you might be forced to stick to console based programs for some time before you've picked up enough to start writing graphical based programs. It's now been more than 25 years since the first commercial graphical user interface was released (for the curious, the Xerox STAR) and it seems a little archaic to still be using the console for applications.

Thankfully Python's emphasis on simplicity means that you can include a graphical user interface in your programs without needing to be a Python guru. To prove this, I'll run through the creation of a simple note taking program, using the standard GUI toolkit for Python: Tk. I'll be assuming some familiarity with Python though, so if you're a bit lacking you might want to read my previous articles on the subject (here and here).

Let's start with the basics, first you need to import the Tk interface into your programs namespace. Since we'll be referring to Tk widgets pretty consistently, we don't want to have to qualify them with a package all the time, so the best way to do this is:

from Tkinter import *

This differs from the traditional import statement in that it puts everything in the module into the default namespace of your program, so now rather than needing to refer to a textbox as Tkinter.Textbox you can just write Textbox.

Now we create the root window and set its title to something a bit more explanatory:

root = Tk()
root.title("Note Taker")

Creating the root window is as simple as creating an instance of the Tk class, which loads the graphical toolkit and gives us a blank window for which to put our widgets on. This is the first half of the basic procedure for starting a Tk program.:

root.mainloop()

The second (shown above) is to call the Tk mainloop, which processes events, such as keyboard or mouse input, allowing the user to interact with the window. In fact, that's all you really need for a GUI program. Run a python script with just those four lines and a window will pop up and just sit there, not really doing anything.

Placing Widgets in your Window

That's pretty boring though, what really makes an interface is its widgets: the buttons, forms and so on that the user can do things to. Let's create a few buttons, a text box and a list box:

button1 = Button(root, text="button1")
button2 = Button(root, text="button2")
button3 = Button(root, text="button3")

text = Entry(root)
listbox = Listbox(root)

It's that simple to create basic objects. The first parameter of each class initialisation is the surface the widget belongs to, in this case we've only got the root window available. The text attribute of a Button sets the label of a button. There are more types of widgets, and many more ways to customise them, but this is pretty much all we'll need for this program -- for a complete list, take a look at the official Tkinter documentation here. Now all we need to do is drop these widgets on our window using the pack method like so:

text.pack()
button1.pack()
button2.pack()
button3.pack()
listbox.pack()

The order in which you pack the widgets onto the window is the order in which they appear on the screen. Running this program gives you a window that will look something like this, depending upon the natural look of your operating system or window manager:

Interactions Between Widgets

Now this looks more interesting, but it still doesn't really do anything, you can click on the buttons or type into the text box, but there's not a lot of point. Let's change that. The way this works in Tk, and indeed in most GUI toolkits, is through callbacks -- functions that are called when a certain event occurs. Let's write a simple callback to provide feedback when button1 is pressed:

def Button1():
	listbox.insert(END, "button1 pressed")

All this function does is add the string "button1 pressed" to the end of the items in the list box. All we need then to make this function called when the button is pressed is to change the creation of button1 as follows:

button1 = Button(root, text="button1", command = Button1)

Do the same thing for button2 by creating a new callback function which inserts a different string into the listbox when the second button is pressed and then try out the program. Sure enough, clicking the buttons changes the contents of the list box. What if we were getting bored of those strings and wanted to add new things to the box? Hang on, don't we have a textbox lying around somewhere, can't we just type in the string we want each time and add that to the box? Well of course we can, that's the point of the program, write a callback for the third button like so:

def Button3():
	text_contents = text.get()
	listbox.insert(END, text_contents)
	text.delete(0,END)

Then set the command of button3 to be this function. When the button is clicked, the callback Button3 first grabs the contents of the textbox and inserts it into the bottom of the listbox, then clears the textbox. Load up the program and try this out.

If you play with this it may seem that after awhile the buttons stop working, that the listbox is full. In fact it's working fine, but we can only see the top group of items in the list, and you can use the in built support for mouse wheel scrolling to scroll down to the rest of the list. This is a little unwieldy, what we need here is a scrollbar, so we can choose where in the list we want to look. Adding a scrollbar is only a little more complicated than one of the other widgets, because we must hook it up to the list box, if we replace the creation of the listbox with the following:

scrollbar = Scrollbar(root, orient=VERTICAL)
listbox = Listbox(root, yscrollcommand=scrollbar.set)
scrollbar.configure(command=listbox.yview)

Then when we move the scrollbar around it will change the y-position (vertical position) of the listbox. Plus, now if we use the mouse wheel to scroll the listbox, then the position of the scrollbar will update.

If you've been following along, the code should look something like this:

#!/usr/bin/python

from Tkinter import *

root = Tk()
root.title("Note Taker")

def Button1():
	listbox.insert(END, "button1 pressed")

def Button2():
	listbox.insert(END, "button2 pressed")

def Button3():
	text_contents = text.get()
	listbox.insert(END, text_contents)
	text.delete(0,END)

button1 = Button(root, text="button1", command = Button1)
button2 = Button(root, text="button2", command = Button2)
button3 = Button(root, text="button3", command = Button3)

text = Entry(root)

scrollbar = Scrollbar(root, orient=VERTICAL)
listbox = Listbox(root, yscrollcommand=scrollbar.set)
scrollbar.configure(command=listbox.yview)

text.pack()
button1.pack()
button2.pack()
button3.pack()
listbox.pack()
scrollbar.pack()

root.mainloop()