I’ve explored much of the basic coding in Python, but I’ll need a good user interface for the projects I’m doing. When it comes to the graphical user interface (GUI), Xcode and Python are on  two different planets. With storyboards and interface builder, Xcode arguably spoils developers. There are times one does need to add buttons and text programmatically to UIView, but it is mandatory to do so in Python, using a module called tkinter.

Making  a Tkinter Window and Frame

A bare bones version of a tkinter window look like this:

#tkinter_playbox_01
#regular import
from tkinter import *

#make the  window
root = Tk()
root.title('tkinter Playbox')

#start the mainloop
root.mainloop()

This is actually pretty boring.

The code makes a window by creating an instance of Tk and set the window’s title. We the start the main loop to get everything going:

Next we will need to add a frame to the code:

#tkinter_playbox_01
#regular import
from tkinter import *

#make the  window
root = Tk()
root.title('tkinter Playbox')

#make a frame
rootFrame = Frame(root)
rootFrame.grid(row=0,column=0)

#start the mainloop
root.mainloop()

This time when we run, our window seems to disappear. If you look around, you might find a tiny  black sliver like this one:

We created a frame, and the frame is an auto-sizing frame. We have no content in the frame , so it is the smallest it can possibly be.

Adding Labels in Tkinter

Now under the frame code add this:

#make labels
label1 = Label(rootFrame,text= 'Hello')
label1.grid(row=0,column=0)

Now run this code:

Here, we add a label called label1. This prints the always familiar message Hello. Let’s make another label. In our code, under the first label add this:

label2 = Label(rootFrame,text= 'Python')
label2.grid(row=0,column=1)

And that works as expected:

Notice the use of .grid(). This method places the widget in the row and column in the frame specified. We can swap the labels by changing our code to this:

#make labels
label1 = Label(rootFrame,text= 'Hello')
label1.grid(row=0,column=1)

label2 = Label(rootFrame,text= 'Python')
label2.grid(row=0,column=0)

or stack them like this:

#make labels
label1 = Label(rootFrame,text= 'Hello')
label1.grid(row=0,column=0)

label2 = Label(rootFrame,text= 'Python')
label2.grid(row=1,column=0)

Adding Buttons to the Tkinter Window

Now let’s add two buttons. Change the code as shown below. Make sure to change the grid positions on the labels:

#make buttons
button1 = Button(rootFrame, text = 'Press Me')
button1.grid(row =1, column = 0)
quit_button = Button(rootFrame,text='quit)
quit_button.grid(row = 1,column = 1)
#make labels
label1 = Label(rootFrame,text= 'Hello')
label1.grid(row=0,column=0)

label2 = Label(rootFrame,text= 'Python')
label2.grid(row=0,column=1)

We added the buttons the same way we added the labels, except using the Button constructor instead. When we run this time we get:

We can even click the buttons but they do nothing. Add the following to the quit button:

quit_button = Button(rootFrame,text='quit', command = quit)

Now when we click the quit button our program ends. adding in the command option allows us to call a method or function where the work gets done. Let’s try another example, but before we do we need to introduce variables in Tkinter. Add the following to the code, Just under the root.title assignment:

#define some variables
my_label_text = StringVar()
my_label_text.set('Python')

Now change label2 as follows:

label2 = Label(rootFrame,textvariable= my_label_text)

Run and you should see no difference.

Tkinter has its own set of variables. Unlike Python, they are strongly typed. These can be assigned to the textvariable or variable option of widgets to allow for dynamic changes to the widget, in this case a label. The variables have two methods associated with them, set and get. In the above code, we create a Stringvar, and then set its value to Python.

We can use the getter for the variable in a function for our button. Just underneath the from..import, add

def pressMe():
    print ('GO!')
    if my_label_text.get() == 'Python':
        my_label_text.set('Monty')
    else:
        my_label_text.set('Python')

Now change button 1 to this

button1 = Button(rootFrame, text = 'Press Me', command = pressMe)

Your code should now look like this:

#tkinter_playbox_01
#regular import
from tkinter import *

def pressMe():
    print ('GO!')
    if my_label_text.get() == 'Python':
        my_label_text.set('Monty')
        print ('Monty')
    else:
        my_label_text.set('Python')
        print ('Python')
#make the  window
root = Tk()
root.title('tkinter Playbox 01')

#define some variables
my_label_text = StringVar()
my_label_text.set('Python')

#make a frame
rootFrame = Frame(root)
rootFrame.grid(row=0,column=0)

#make buttons
button1 = Button(rootFrame, text = 'Press Me', command = pressMe)
button1.grid(row =1, column = 0)
quit_button = Button(rootFrame,text='quit', command = quit)
quit_button.grid(row = 1,column = 1)

#make labels
label1 = Label(rootFrame,text= 'Hello')
label1.grid(row=0,column=0)

label2 = Label(rootFrame,textvariable = my_label_text)
label2.grid(row=0,column=1)

#start the mainloop
root.mainloop()

Now when you click the button, the label will toggle between Monty and Python. This gives us buttons and labels, two of the most important of the widgets/controls in a UI. In our next installment, we will do a bit of customization to the buttons and labels.