01 Introduction To TKinter - Windows, Labels, Entry Boxes, Buttons and Text Boxes

ComputerScienceUK Programming Guide – Python & Tkinter
Introduction to TKinter
Programming Guides
www.computerscienceuk.com
Activity 1
3 minutes
Research the following:
What is a GUI?
Find as many libraries as you can that allow

you to write GUIs in Python
Tkinter – GUI Building in Python

Introduction
A graphical user interface (GUI) is simply a ‘screen’

that allows a user to interact with their computer
through graphics such as menus and buttons.
In python there are a number of libraries which can

help build GUIs. This document will introduce the
‘tkinter’ toolkit library which comes as standard with
Python 3 (other GUI libraries have to be downloaded
separately such as pyQT and wxpython).

Importing the ‘tkinter’ Library
In order to make use of the tkinter library it first needs to be imported. To import
the library simply write the following at the top of your program code:

Creating a Window
The next job is to create a window for your GUI. To do this we create a window object from the
tkinter library:
This object doesn’t have to be called ‘window’, but it makes sense to do so. Also, notice that the
object is being created from the class Tk() where the ‘T’ is capital.
The result of this code is shown here:

Adding a ‘Title’ to the Window
Next we can add a title to the window (which will appear in the bar at the top of the window by using
the following code:
As you can see, this code has added a title to the bar at the top of the window:

The mainloop()
In order for our window to stay on the screen and not immediately close once the code to
create the window has been executed, we run a method of our window object called
“mainloop()” at the end of our program code.
To do this we write the name of our window object (in this case ‘window’) followed by
‘.mainloop()’.

Widgets
In programming, we call the different items that you might find in a GUI, “widgets”. The
main widgets that GUIs will contain are ‘labels’, ‘buttons’, ‘text boxes’, ‘drop down
menus’, ‘check boxes’ and ‘radio buttons’.
The next few slides will show how some of these widgets can be created and positioned in
our new GUI window.

Organising / Arranging Widgets
Before we create some widgets lets first look at how these widgets can be arranged in the window.
With the tkinter library, the window is arranged into a grid with as many columns and rows as we
require. Each row and column is numbered so that the cells can be referenced by coordinates.
As is common practice in computing, the coordinates start (0,0) from the TOP LEFT.

Organising / Arranging Widgets
As well as adding widgets into the cells of a grid, we can also state where we want these
widgets to be positioned INSIDE the cells.
We do this by using the ‘sticky’ property. We can get the widgets to stick to either the top,
bottom, left or right of the cell. We do this using the compass directions north (N), south
(S), east (E) and west (W). We use capital N,S,E and W when using the ‘sticky’ command.
You can further improve the control you have in positioning widgets and the general
layout of a window by using a frame widget. We look at frame widgets later.

Label Widgets
The label widget is probably the most simple. It just provides an area for some text to be displayed.
To create a label we use the ‘Label’ command (notice the capital ‘L’). We then say where we want it
to be placed (in this case it is inside the window object) and then we write the text that the label is to
contain. Finally we use the ‘grid’ method to position the widget inside our window in a location of
our choice.
Here is an example:
…and this is the result:
Activity 2
10 minutes Create your first GUI
Write a program which creates a window with

the title “My First GUI”, and that displays a
message of your choice.

The Entry Widget
This widget provides a place to enter text. It could be added the same way as the label widget.
However, as entry widgets are usually a place for the user to enter different inputs, we will often want
to refer back to entry boxes later. Because of this, it is usually best to assign an ‘Entry’ widget to a
variable name so that we can call on it elsewhere in our code.
Here is an example of creating an entry widget, assigning it to a variable and then positioning this
variable using the grid() method.
*IMPORTANT: When assigning the entry

box to the variable, don’t try to write the
grid() method at the same time as the
assignment will not work properly. It needs
to be done in two stages like it was above.
1. Create the entry box and assign it to a

variable
2. Then position the variable where you
want in the window

The Entry Widget
I updated the text in my label…
…and the result is the following GUI:

The Button Widget
The button widget provides a button. To create a button we use the following code:
…except that we need to add a value into the command.
What is needed next to “command=” is the name of a function. This is because when a button is
clicked it needs to execute some code and so by adding the name of a function here, will allow the
button to execute a function when it is clicked.
So, let’s create a function which will ‘collect’ the text that a user might write into the ‘Entry’ box:

Now, let’s update the Button code so that it executes this function when clicked:
This is the result:
Although it can’t be shown, the text

‘Something…’ is collected and stored
in the variable ‘entered_text’ when
the button is clicked.

The Text Widget
A text widget is one which displays text, a little like a label. To create one we use the following code:
Like we did for the entry widget, it is best to assign text widgets to variables as often we will want to
call on text widgets so that they can be updated, when a button is clicked, to display new text.
Notice also the ability to set height and width, to allow text to wrap onto another line when the
window is resized and the option to set a background colour.
On the grid method, notice the ‘columnspan’ property. This allows widgets to be positioned across
columns, which may be a useful option when trying to arrange widgets more professionally.

This is the result of this code:

Finishing off the button action
Previously we created a function to be executed when the button was clicked. The function collected
the text that was entered into the ‘entry’ box. Now that we have a text box, we can update the function
so that it can manipulate and output the inputted text.
Activity 3
10 minutes Create your first GUI
Develop your GUI so that it also can copy text

entered into an entry box and place it in a text box
(concatenated with a message) when the button is
clicked.
Activity 4
45 minutes
Create a ‘FLASH CARD’ GUI

program.
Pick a topic in computing (e.g.

Computing Hardware) and
create a program which has a
series of ‘buttons’ and a ‘text
area’.
When each button is clicked,

information about that part of
the topic is presented in the text
area.

01 Introduction To TKinter - Windows, Labels, Entry Boxes, Buttons and Text Boxes

Uploaded by

01 Introduction To TKinter - Windows, Labels, Entry Boxes, Buttons and Text Boxes

Uploaded by

ComputerScienceUK Programming Guide – Python & Tkinter

Research the following:

Find as many libraries as you can that allow

Tkinter – GUI Building in Python

A graphical user interface (GUI) is simply a ‘screen’

In python there are a number of libraries which can

Tkinter – GUI Building in Python

Tkinter – GUI Building in Python

The result of this code is shown here:

Tkinter – GUI Building in Python

Tkinter – GUI Building in Python

Tkinter – GUI Building in Python

Tkinter – GUI Building in Python

Tkinter – GUI Building in Python

Tkinter – GUI Building in Python

…and this is the result:

Write a program which creates a window with

Tkinter – GUI Building in Python

*IMPORTANT: When assigning the entry

1. Create the entry box and assign it to a

Tkinter – GUI Building in Python

I updated the text in my label…

…and the result is the following GUI:

Tkinter – GUI Building in Python

…except that we need to add a value into the command.

Tkinter – GUI Building in Python

This is the result:

Although it can’t be shown, the text

Tkinter – GUI Building in Python

Tkinter – GUI Building in Python

Tkinter – GUI Building in Python

Develop your GUI so that it also can copy text

Create a ‘FLASH CARD’ GUI

Pick a topic in computing (e.g.

When each button is clicked,

You might also like