Introduction to Graphical User Interfaces

Take a look at the diagram below. The user sees some sort of desktop wallpaper (in this case, an image of the moon) covered with icons, application windows, and (since the desktop is that of a Windows XP machine) the taskbar that holds icons representing each running application, a whole load of quick-launch icons, and a Start icon that can be used to bring up a menu allowing access to most of the facilities of the computer.

The desktop is called a "two-and-a-half dimensional" surface because, although it does not actually have a third dimension (depth), one window can cover another, just as though it were a piece of paper covering another piece on a real, physical desktop. (Sadly, my own physical and virtual desktops are rarely tidy!) When you click on something, the window manager must know which window is on top where you have clicked, so it can channel the event to that window.

In a GUI environment, you write programs that present a description of the desired window structures to the window manager, which is the system component that handles (among other things) tracking mouse movements and distributing keystrokes and mouse clicks to the right programs. Which programs receive these events depends on a number of factors, including the current cursor position and which window has the focus.

Each window is composed of widgets, some of which contain other widgets, and so on. One widget can be positioned on top of another. The window manager has to make the determination about which widget is uppermost at the particular position of the cursor when the click occurs. (We'll go over widgets a bit more later in the lesson.)

This example is taken straight from the documentation for the tkinter module. The program creates a window that looks like this:

When you click the button on the right, the program prints some text on its standard output. When you click the button on the left, the program terminates. Create a tkdemo.py file as shown:

from tkinter import *

class Application(Frame):

    def say_hi(self):
        print("Hi there, everyone!")

    def createWidgets(self):
        self.QUIT = Button(self)
        self.QUIT["text"] = "Quit"
        self.QUIT["fg"]   = "red"
        self.QUIT["command"] =  self.quit
        self.QUIT.pack({"side": "left"})

        self.hi_there = Button(self)
        self.hi_there["text"] = "Hello",
        self.hi_there["command"] = self.say_hi
        self.hi_there.pack({"side": "left"})

    def __init__(self, master=None):
        Frame.__init__(self, master)
        self.pack()
        self.createWidgets()

root = Tk()
app = Application(master=root)
app.mainloop()

Run it. Click the Hello button and then the Quit button, to see what they do.

Let's look at the code more closely:

from tkinter import *

class Application(Frame):
    def say_hi(self):
        print("Hi there, everyone!")

    def createWidgets(self):
        self.QUIT = Button(self)
        self.QUIT["text"] = "Quit"
        self.QUIT["fg"]   = "red"
        self.QUIT["command"] =  self.quit
        self.QUIT.pack({"side": "left"})

        self.hi_there = Button(self)
        self.hi_there["text"] = "Hello",
        self.hi_there["command"] = self.say_hi
        self.hi_there.pack({"side": "left"})

    def __init__(self, master=None):
        Frame.__init__(self, master)
        self.pack()
        self.createWidgets()

root = Tk()
app = Application(master=root)
app.mainloop()

The majority of the code in the program defines a class named Application, which subclasses the tkinter.Frame class. The tkinter.Frame class defines all of the general behaviors required of a program's GUI, but these general behaviors do not encompass the specifics of the contents of this window. For those specifics, we have the createWidgets() method.

Let's begin by looking at the tkinter.Frame class's __init__() method. First, it performs all of the standard tkinter.Frame initialization actions by calling its superclass's (tkinter.Frame's __init__()) method. Next, it calls the newly created frame's pack() method, which prepares it to be part of the window display. Then, it calls the createWidgets() method, which as its name suggests, creates the widgets (or components) that go inside of it.

createWidgets() initializes only two widgets: the first is the Quit button, which reads "Quit" with the foreground ("fg") text in "red" and calls the Frame's self.quit() method (inherited from tkinter.Frame) when clicked; the second is the hi_there button, which reads "Hello" and calls the Frame's say_hi() method when clicked.

Now, suppose the customer changed the specification for this project. They want to change the colors and text a bit to make the application to look like this:

The changes include:

• Change the "QUIT" button label to "Goodbye."
• Make the "Hello" label blue.
• Move the "Goodbye" button to the right of the "Hello" button.

Try to make the changes without looking at the answers below.

. . .

Try to figure it out on your own first!

. . .

I mean it!

. . .

Don't peek!

. . .

If everything went alright, your changes look something like those in the box below (additions and changes in this color and deletions in this style):

from tkinter import *

class Application(Frame):

    def say_hi(self):
        print("Hi there, everyone!")

    def createWidgets(self):
        self.hi_there = Button(self)
        self.hi_there["text"] = "Hello",
        self.hi_there["fg"]   = "blue"
        self.hi_there["command"] = self.say_hi
        self.hi_there.pack({"side": "left"})

        self.QUIT = Button(self)
        self.QUIT["text"] = "QuitGoodbye"
        self.QUIT["fg"]   = "red"
        self.QUIT["command"] =  self.quit
        self.QUIT.pack({"side": "left"})

        self.hi_there = Button(self)
        self.hi_there["text"] = "Hello",
        self.hi_there["command"] = self.say_hi
        self.hi_there.pack({"side": "left"})
        

    def __init__(self, master=None):
        Frame.__init__(self, master)
        self.pack()
        self.createWidgets()

root = Tk()
app = Application(master=root)
app.mainloop()

The Program Window

So, when you run the program, you see a window like this:

The layout of the components was created by calls to the various components' pack() methods. Every time you click the "Hello" button, the program will print "Hi there, everyone!" in the console window. When you click the "Goodbye" button (or terminate the program by clicking the "X" button at the top right of the window) the program terminates.

So, there you have it. You have written and run your first GUI program using Python's tkinter package! Good for you!

Note	By the way, you may be wondering what tkinter means: tk stands for tool kit, and inter stands for interface.

The word "widget" is often used as an abstract name for an object, most often for something manufactured. Modern GUI toolkits, tkinter included, are comprised of components that are referred to as "widgets." All Tkinter widgets have a lot in common, even though they may not look alike.

There aren't a whole lot of widgets in the Tkinter toolkit, but using them wisely will allow you to create a variety of useful graphical interfaces. Below are some important ones that you should know about now:

Each of the above widgets has its own place in user interfaces. Your first program used a Toplevel (created automatically to contain the application) and a Frame that contained two Buttons. In case you are curious about the appearance, here is a picture of a "kitchen sink" interface showing various widgets. By the look of the window, you can probably tell that the elements have been thrown together. Try and avoid this look at all cost.

So, the program you wrote above runs perfectly well, but the code is a bit to wordy. Each attribute of each widget is configured in a separate statement. If individual aspects of the widgets need to be configured at run-time, this might a convenient way to do it, but when you are creating a widget and many aspects need to be configured, there are better ways.

The most basic way to configure your widgets is with keyword arguments to the widget creation call. Rather than having to write self.QUIT["fg"] = "red" after you have created the button, you can add an argument reading fg="red" when you create the button. The same principle applies to most other widget configuration items. Try this out by modifying the tkdemo.py file as shown:

from tkinter import *

class Application(Frame):

    def say_hi(self):
        print("Hi there, everyone!")

    def createWidgets(self):
        self.hi_there = Button(self)
        self.hi_there["text"] = "Hello",
        self.hi_there["fg"]   = "blue"
        self.hi_there["command"] = self.say_hi
        self.hi_there.pack({"side": "left"})
        self.hi_there = Button(self, text="Hello", fg="blue", command=self.say_hi)
        self.hi_there.pack(side="left")

        self.QUIT = Button(self)
        self.QUIT["text"] = "Goodbye"
        self.QUIT["fg"]   = "red"
        self.QUIT["command"] =  self.quit
        self.QUIT.pack({"side": "left"})

        
        self.QUIT = Button(self, text="Goodbye", fg="red", command=self.quit)
        self.QUIT.pack(side="left")

    def __init__(self, master=None):
        Frame.__init__(self, master)
        self.pack()
        self.createWidgets()

root = Tk()
app = Application(master=root)
app.mainloop()

Run it. The window will have the same appearance and behavior as before, but you've compressed the code considerably without sacrificing readability.

Read over the code; you'll see that once the buttons have been created there's no reference to them anywhere else in the code. So it isn't necessary to save a reference to the buttons in instance attributes, and you could abbreviate the creation of the QUIT button even further to this:

Button(self, text="Goodbye", fg="red", command=self.quit).pack(side="left")

But that might be taking things just a little too far. It's a judgment call. Remember, the programmer who has to understand your code in six months might be you! Ask yourself whether brevity is important enough to make your code that little bit harder to understand.

>>> from tkinter import *
>>> b = Button()
>>> for k in b.keys():
...     print(k)
...
activebackground
activeforeground
anchor
background
bd
bg
bitmap
borderwidth
command
compound
cursor
default
disabledforeground
fg
font
foreground
height
highlightbackground
highlightcolor
highlightthickness
image
justify
overrelief
padx
pady
relief
repeatdelay
repeatinterval
state
takefocus
text
textvariable
underline
width
wraplength
>>>

Now that you understand a bit more about the way GUIs are put together and the use of widgets, we'll try to use a couple of widgets in an example. We'll create a window that takes a text input and produces different results, depending on which of three radio buttons is selected.

We'll be looking at an interface with inputs—we'll have an Entry widget into which users can type text, and a set of Radiobutton widgets that determine which operation the program performs on the text entered, when the user clicks the Convert button.

A More Complex Program

At last, here's a program that actually does something!

The next program is longer than previous examples, because it describes a more complicated interface. Two frames are used inside of the main frame. The first contains an Entry item where the user can enter text, a Label under it, and three Radiobuttons. The second frame holds the regular buttons.

The value of the Entry widget is read from the text configuration item, but the Radiobuttons are read using an associated IntVar, as integer values are associated with the choices.

Create texthandler.py and enter the code as shown:

Code

from tkinter import *

class Application(Frame):
    """Application main window class."""

    def __init__(self, master=None):
        """Main frame initialization (mostly delegated)"""
        Frame.__init__(self, master)
        self.pack()
        self.createWidgets()

    def createWidgets(self):
        """Add all the widgets to the main frame."""

        top_frame = Frame(self)
        self.text_in = Entry(top_frame)

        self.label = Label(top_frame, text="Output label")
        self.text_in.pack()
        self.label.pack()
        self.r = IntVar()
        Radiobutton(top_frame, text="Upper case", variable=self.r, value=1).pack(side=LEFT)
        Radiobutton(top_frame, text="Lower case", variable=self.r, value=2).pack(side=LEFT)
        Radiobutton(top_frame, text="Title case", variable=self.r, value=3).pack(side=LEFT)
        top_frame.pack(side=TOP)

        bottom_frame = Frame(self)
        bottom_frame.pack(side=TOP)

        self.QUIT = Button(bottom_frame, text="Quit", command=self.quit)
        self.QUIT.pack(side=LEFT)

        self.handleb = Button(bottom_frame, text="Convert", command=self.handle)
        self.handleb.pack(side=LEFT)

    def handle(self):
        """Handle a click of the button by processing any text the
        user has placed in the Entry widget according to the selected
        radio button."""
        text = self.text_in.get()
        operation = self.r.get()
        if operation == 1:
            output = text.upper()
        elif operation == 2:
            output = text.lower()
        elif operation == 3:
            output  = text.title()
        else:
            output = "*******"
        self.label.config(text=output)

root = Tk()
app = Application(master=root)
app.mainloop()

Run it. You'll see a window that looks like the one shown below. If you click the Convert button before you select one of the RadioButtons, then the label text is filled with asterisks. If you make a choice, then the appropriate method is applied to the contents of the Entry widget, and displayed as the text of the label.

So, now you know something about creating GUIs. The code can get pretty lengthy, but it's relatively straightforward. In the next lesson we'll find out more about window layout, which will give us better control over the appearance of our windows.

A lot of the tkinter documentation offers code samples written in Python 2. Don't be afraid to get creative in adapting them to Python 3. Python 3 isn't really much different from Python 2 (although the package's name is capitalized in Python 2). I'm confident you'll be able to work out any necessary changes!

Your next port of call should be the Python documentation. The Tkinter Wiki is a community-maintained set of documentation that is informal and friendly to read. It's also user-editable and eternally incomplete; you may want to add your own insights later, as your expertise grows! Onward and forward to the next lesson!