Python GUI Programming Cookbook - Third Edition

4.4 (5 reviews total)
By Burkhard Meier
  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Creating the GUI Form and Adding Widgets

About this book

Python is a multi-domain, interpreted programming language that is easy to learn and implement. With its wide support for frameworks to develop GUIs, you can build interactive and beautiful GUI-based applications easily using Python. This third edition of Python GUI Programming Cookbook follows a task-based approach to help you create effective GUIs with the smallest amount of code. Every recipe in this book builds upon the last to create an entire, real-life GUI application. These recipes also help you solve problems that you might encounter while developing GUIs. This book mainly focuses on using Python’s built-in tkinter GUI framework. You'll learn how to create GUIs in Python using simple programming styles and object-oriented programming (OOP). As you add more widgets and expand your GUI, you will learn how to connect to networks, databases, and graphical libraries that greatly enhance the functionality of your GUI. You’ll also learn how to use threading to ensure that your GUI doesn't become unresponsive. Toward the end, you’ll learn about the versatile PyQt GUI framework, which comes along with its own visual editor that allows you to design GUIs using drag and drop features. By the end of the book, you’ll be an expert in designing Python GUIs and be able to develop a variety of GUI applications with ease.

Publication date:
October 2019
Publisher
Packt
Pages
486
ISBN
9781838827540

 

Creating the GUI Form and Adding Widgets

In this chapter, we will develop our first GUI in Python. We will start with the minimum code required to build a running GUI application. Each recipe then adds different widgets to the GUI form.

We will start by using the tkinter GUI toolkit.

tkinter ships with Python. There is no need to install it once you have installed Python version 3.7 or later. The tkinter GUI toolkit enables us to write GUIs with Python.

The old world of the DOS Command Prompt has long been outdated. Some developers still like it for development work. The end user of your program expects a more modern, good-looking GUI.

In this book, you will learn how to develop GUIs using the Python programming language.

By starting with the minimum amount of code, we can see the pattern every GUI written with tkinter and Python follows. First come the import statements, followed by the creation of a tkinter class. We then can call methods and change attributes. At the end, we always call the Windows event loop. Now we can run the code.
We progress from the most simple code, adding more and more functionality with each following recipe, introducing different widget controls and how to change and retrieve attributes.

In the first two recipes, we will show the entire code, consisting of only a few lines of code. In the following recipes, we will only show the code to be added to the previous recipes because, otherwise, the book would get too long, and seeing the same code over and over again is rather boring.

If you don't have the time to type the code yourself, you can download all of the code for the entire book from https://github.com/PacktPublishing/Python-GUI-Programming-Cookbook-Third-Edition.

At the beginning of each chapter, I will show the Python modules that belong to each chapter. I will then reference the different modules that belong to the code shown, studied, and run.

By the end of this chapter, we will have created a working GUI application that consists of labels, buttons, textboxes, comboboxes, check buttons in various states, and radio buttons that change the background color of the GUI.

Here is an overview of the Python modules (ending in a .py extension) for this chapter:

In this chapter, we start creating amazing GUIs using Python 3.7 or later. We will cover the following topics:

  • Creating our first Python GUI
  • Preventing the GUI from being resized
  • Adding a label to the GUI form
  • Creating buttons and changing their text attributes
  • Creating textbox widgets
  • Setting the focus to a widget and disabling widgets
  • Creating combobox widgets
  • Creating a check button with different initial states
  • Using radio button widgets
  • Using scrolled text widgets
  • Adding several widgets in a loop
 

Creating our first Python GUI

Python is a very powerful programming language. It ships with the built-in tkinter module. In only a few lines of code (four, to be precise) we can build our first Python GUI.

tkinter is a Python interface to tk. tk is a GUI toolkit and related to Tcl, which is a tool command language. You can learn more about tk at https://docs.python.org/3/library/tk.html.

Another website related to tcl and tk is https://www.tcl.tk/.

Getting ready

To follow this recipe, a working Python development environment is a prerequisite. The IDLE GUI, which ships with Python, is enough to start. IDLE was built using tkinter!

How to do it…

Let's take a look at how to create our first Python GUI:

  1. Create a new Python module and name it First_GUI.py.
  2. At the top of the First_GUI.py module, import tkinter:
import tkinter as tk
  1. Create an instance of the Tk class:
win = tk.Tk()
  1. Use the instance variable to set a title:
win.title("Python GUI")
  1. Start the window's main event loop:
win.mainloop()

The following screenshot shows the four lines of First_GUI.py required to create the resulting GUI:

  1. Run the GUI module. On executing the preceding code, the following output is obtained:

Now, let's go behind the scenes to understand the code better.

How it works…

In line 9, we import the built-in tkinter module and alias it as tk to simplify our Python code. In line 12, we create an instance of the Tk class by calling its constructor (the parentheses appended to Tk turns the class into an instance). We are using the tk alias so we don't have to use the longer word tkinter. We are assigning the class instance to a variable named win (short for a window) so that we can access the class attributes via this variable. As Python is a dynamically typed language, we did not have to declare this variable before assigning to it, and we did not have to give it a specific type. Python infers the type from the assignment of this statement. Python is a strongly typed language, so every variable always has a type. We just don't have to specify its type beforehand like in other languages. This makes Python a very powerful and productive language to program in.

A little note about classes and types: In Python, every variable always has a type. We cannot create a variable that does not have a type. Yet, in Python, we do not have to declare the type beforehand, as we have to do in the C programming language.

Python is smart enough to infer the type. C#, at the time of writing this book, also has this capability.

Using Python, we can create our own classes using the class keyword instead of the def keyword.

In order to assign the class to a variable, we first have to create an instance of our class. We create the instance and assign this instance to our variable, for example:
class AClass(object):
print('Hello from AClass')
class_instance = AClass()

Now, the class_instance variable is of the AClass type.
If this sounds confusing, do not worry. We will cover object-oriented programming (OOP) in the coming chapters.

In line 15, we use the instance variable (win) of the class to give our window a title by calling the title() method, passing in a string.

You might have to enlarge the running GUI to see the entire title.

In line 20, we start the window's event loop by calling the mainloop method on the class instance, win. Up to this point in our code, we have created an instance and set one attribute (the window title), but the GUI will not be displayed until we start the main event loop.

An event loop is a mechanism that makes our GUI work. We can think of it as an endless loop where our GUI is waiting for events to be sent to it. A button click creates an event within our GUI, or our GUI being resized also creates an event.

We can write all of our GUI code in advance and nothing will be displayed on the user's screen until we call this endless loop (win.mainloop() in the preceding code). The event loop ends when the user clicks the red X button or a widget that we have programmed to end our GUI. When the event loop ends, our GUI also ends.

This recipe used the minimum amount of Python code to create our first GUI program. However, throughout this book we will use OOP when it makes sense.

We've successfully learned how to create our first Python GUI. Now, let's move on to the next recipe.

 

Preventing the GUI from being resized

By default, a GUI created using tkinter can be resized. This is not always ideal. The widgets we place onto our GUI forms might end up being resized in an improper way, so in this recipe, we will learn how to prevent our GUI from being resized by the user of our GUI application.

Getting ready

How to do it…

Here are the steps to prevent the GUI from being resized:

  1. Start with the module from the previous recipe and save it as Gui_not_resizable.py.
  2. Use the Tk instance variable, win, to call the resizable method:
win.resizable(False, False)

Here is the code to prevent the GUI from being resized (GUI_not_resizable.py):

  1. Run the code. Running the code creates this GUI:

Let's go behind the scenes to understand the code better.

How it works…

Line 18 prevents the Python GUI from being resized.

The resizable() method is of the Tk() class and, by passing in (False, False), we prevent the GUI from being resized. We can disable both the x and y dimensions of the GUI from being resized, or we can enable one or both dimensions by passing in True or any number other than zero. (True, False) would enable the x dimension but prevent the y dimension from being resized.

Running this code will result in a GUI similar to the one we created in the first recipe. However, the user can no longer resize it. Also, note how the maximize button in the toolbar of the window is grayed out.

Why is this important? Because once we add widgets to our form, resizing our GUI can make it not look the way we want it to look. We will add widgets to our GUI in the next recipes, starting with Adding a label to the GUI form.

We also added comments to our code in preparation for the recipes contained in this book.

In visual programming IDEs such as Visual Studio .NET, C# programmers often do not think of preventing the user from resizing the GUI they developed in this language. This creates inferior GUIs. Adding this one line of Python code can make our users appreciate our GUI.

We've successfully learned how to prevent the GUI from being resized. Now, let's move on to the next recipe.

 

Adding a label to the GUI form

A label is a very simple widget that adds value to our GUI. It explains the purpose of the other widgets, providing additional information. This can guide the user to the meaning of an Entry widget, and it can also explain the data displayed by widgets without the user having to enter data into it.

Getting ready

We are extending the first recipe, Creating our first Python GUI. We will leave the GUI resizable, so don't use the code from the second recipe (or comment the win.resizable line out).

How to do it…

Perform the following steps to add a label to the GUI from:

  1. Start with the First_GUI.py module and save it as GUI_add_label.py.
  2. Import ttk:
from tkinter import ttk
  1. Use ttk to add a label:
ttk.Label(win, text="A Label")
  1. Use the grid layout manager to position the label:
.grid(column=0, row=0)

In order to add a Label widget to our GUI, we will import the ttk module from tkinter. Please note the two import statements on lines 9 and 10.

The following code is added just above win.mainloop(), which is located at the bottom of the first and second recipes (GUI_add_label.py):

  1. Run the code and observe how a label is added to our GUI:

Let's go behind the scenes to understand the code better.

How it works…

In line 10 of the preceding code, we import a separate module from the tkinter package. The ttk module has some advanced widgets such as a notebook, progress bar, labels, and buttons that look different. These help to make our GUI look better. In a sense, ttk is an extension within the tkinter package.

We still need to import the tkinter package, but we need to specify that we now want to also use ttk from the tkinter package.

ttk stands for themed tk. It improves our GUI's look and feel. You can find more information at https://docs.python.org/3/library/tkinter.ttk.html.

Line 19 adds the label to the GUI, just before we call mainloop.

We pass our window instance into the ttk.Label constructor and set the text attribute. This becomes the text our Label will display. We also make use of the grid layout manager, which we'll explore in much more depth in Chapter 2, Layout Management.

Observe how our GUI suddenly got much smaller than in the previous recipes. The reason why it became so small is that we added a widget to our form. Without a widget, the tkinter package uses a default size. Adding a widget causes optimization, which generally means using as little space as necessary to display the widget(s). If we make the text of the label longer, the GUI will expand automatically. We will cover this automatic form size adjustment in a later recipe in Chapter 2, Layout Management.

Try resizing and maximizing this GUI with a label and watch what happens. We've successfully learned how to add a label to the GUI form.

Now, let's move on to the next recipe.

 

Creating buttons and changing their text attributes

In this recipe, we will add a button widget, and we will use this button to change an attribute of another widget that is a part of our GUI. This introduces us to callback functions and event handling in a Python GUI environment.

Getting ready

How to do it…

In this recipe, we will update the label we added in the previous recipe as well as the text attribute of the button. The steps to add a button that performs an action when clicked are as follows:

  1. Start with the GUI_add_label.py module and save it as GUI_create_button_change_property.py.
  2. Define a function and name it click_me():
def click_me()
  1. Use ttk to create a button and give it a text attribute:
action.configure(text="** I have been Clicked! **")
a_label.configure (foreground='red')
a_label.configure(text='A Red Label')
  1. Bind the function to the button:
action = ttk.Button(win, text="Click Me!", command=click_me)
  1. Use the grid layout to position the button:
 action.grid(column=1, row=0)

The preceding instructions produce the following code (GUI_create_button_change_property.py):

  1. Run the code and observe the output.

The following screenshot shows how our GUI looks before clicking the button:

After clicking the button, the color of the label changed and so did the text of the button, which can be seen in the following screenshot:

Let's go behind the scenes to understand the code better.

How it works…

In line 19, we assign the label to a variable, a_label, and in line 20, we use this variable to position the label within the form. We need this variable in order to change its attributes in the click_me() function. By default, this is a module-level variable, so as long as we declare the variable above the function that calls it, we can access it inside the function.

Line 23 is the event handler that is invoked once the button gets clicked.

In line 29, we create the button and bind the command to the click_me() function.

GUIs are event-driven. Clicking the button creates an event. We bind what happens when this event occurs in the callback function using the command attribute of the ttk.Button widget. Notice how we do not use parentheses, only the name click_me.

Lines 20 and 30 both use the grid layout manager, which will be discussed in Chapter 2, Layout Management, in the Using the grid layout manager recipe. This aligns both the label and the button. We also change the text of the label to include the word red to make it more obvious that the color has been changed. We will continue to add more and more widgets to our GUI, and we will make use of many built-in attributes in the other recipes of this book.

We've successfully learned how to create buttons and change their text attributes. Now, let's move on to the next recipe.

 

Creating textbox widgets

In tkinter, a typical one-line textbox widget is called Entry. In this recipe, we will add such an Entry widget to our GUI. We will make our label more useful by describing what the Entry widget is doing for the user.

Getting ready

This recipe builds upon the Creating buttons and changing their text attributes recipe, so download it from the repository and start working on it.

How to do it…

Follow these steps to create textbox widgets:

  1. Start with the GUI_create_button_change_property.py module and save it as GUI_textbox_widget.py.
  2. Use the tk alias of tkinter to create a StringVar variable:
name = tk.StringVar()
  1. Create a ttk.Entry widget and assign it to another variable:
name_entered = ttk.Entry(win, width=12, textvariable=name)
  1. Use this variable to position the Entry widget:
name_entered.grid(column=0, row=1)

The preceding instructions produce the following code (GUI_textbox_widget.py):

  1. Run the code and observe the output; our GUI looks like this:
  1. Enter some text and click the button; we will see that there is a change in the GUI, which is as follows:

Let's go behind the scenes to understand the code better.

How it works…

In step 1 we are creating a new Python module, and in step 2 we are adding a StringVar type of tkinter and saving it in the name variable. We use this variable when we are creating an Entry widget and assigning it to the textvariable attribute of the Entry widget. Whenever we type some text into the Entry widget, this text will be saved in the name variable.

In step 4, we position the Entry widget and the preceding screenshot shows the entire code.

In line 24, as shown in the screenshot, we get the value of the Entry widget using name.get().

When we created our button, we saved a reference to it in the action variable. We use the action variable to call the configure method of the button, which then updates the text of our button.

We have not used OOP yet, so how come we can access the value of a variable that was not even declared yet? Without using OOP classes, in Python procedural coding, we have to physically place a name above a statement that tries to use that name. So, how does this work (it does)? The answer to this is that the button click event is a callback function, and by the time the button is clicked by a user, the variables referenced in this function are known and do exist.

Line 27 gives our label a more meaningful name; for now, it describes the textbox below it. We moved the button down next to the label to visually associate the two. We are still using the grid layout manager, which will be explained in more detail in Chapter 2, Layout Management.

Line 30 creates a variable, name. This variable is bound to the Entry widget and, in our click_me() function, we are able to retrieve the value of the Entry widget by calling get() on this variable. This works like a charm.

Now we observe that while the button displays the entire text we entered (and more), the textbox Entry widget did not expand. The reason for this is that we hardcoded it to a width of 12 in line 31.

Python is a dynamically typed language and infers the type from the assignment. What this means is that if we assign a string to the name variable, it will be of the string type, and if we assign an integer to name, its type will be an integer.

Using tkinter, we have to declare the name variable as the tk.StringVar() type before we can use it successfully. The reason is that tkinter is not Python. We can use it with Python, but it is not the same language. See https://wiki.python.org/moin/TkInter for more information.

We've successfully learned how to create textbox widgets. Now, let's move on to the next recipe.

 

Setting the focus to a widget and disabling widgets

While our GUI is nicely improving, it would be more convenient and useful to have the cursor appear in the Entry widget as soon as the GUI appears.

In this recipe, we learn how to make the cursor appear in the Entry box for immediate text Entry rather than the need for the user to click into the Entry widget to give it the focus method before typing into the entry widget.

Getting ready

This recipe extends the previous recipe, Creating textbox widgets. Python is truly great. All we have to do to set the focus to a specific control when the GUI appears is call the focus() method on an instance of a tkinter widget we previously created. In our current GUI example, we assigned the ttk.Entry class instance to a variable named name_entered. Now, we can give it the focus.

How to do it…

Place the following code just above the previous code, which is located at the bottom of the module, and which starts the main window's event loop, like we did in the previous recipes:

  1. Start with the GUI_textbox_widget.py module and save it as GUI_set_focus.py.
  2. Use the name_entered variable we assigned the ttk Entry widget instance to and call the focus() method on this variable:
name_entered.focus()

The preceding instructions produce the following code (GUI_set_focus.py):

  1. Run the code and observe the output.

If you get some errors, make sure you are placing calls to variables below the code where they are declared. We are not using OOP as of now, so this is still necessary. Later, it will no longer be necessary to do this.

On a Mac, you might have to set the focus to the GUI window first before being able to set the focus to the Entry widget in this window.

Adding line 38 of the Python code places the cursor in our text Entry widget, giving the text Entry widget the focus. As soon as the GUI appears, we can type into this textbox without having to click it first. The resulting GUI now looks like this, with the cursor inside the Entry widget:

Note how the cursor now defaults to residing inside the text entry box.

We can also disable widgets. Here, we are disabling the button to show the principle. In larger GUI applications, the ability to disable widgets gives you control when you want to make things read only. Most likely, those would be combobox widgets and Entry widgets, but as we have not yet gotten to those widgets yet, we will use our button.

To disable widgets, we will set an attribute on the widget. We can make the button disabled by adding the following code below line 37 of the Python code to create the button:

  1. Use the GUI_set_focus.py module and save it as GUI_disable_button_widget.py.
  2. Use the action button variable to call the configure method and set the state attribute to disabled:
action.configure(state='disabled')
  1. Call the focus() method on the name_entered variable:
name_entered.focus()

The preceding instructions produce the following code (GUI_disable_button_widget.py):

  1. Run the code. After adding the preceding line of Python code, clicking the button no longer creates an action:

Let's go behind the scenes to understand the code better.

How it works…

This code is self-explanatory. In line 39, we set the focus to one control, and in line 37, we disable another widget. Good naming in programming languages helps to eliminate lengthy explanations. Later in this book, there will be some advanced tips on how to do this while programming at work or practicing our programming skills at home.

We've successfully learned how to set the focus to a widget and disable widgets. Now, let's move on to the next recipe.

 

Creating combobox widgets

In this recipe, we will improve our GUI by adding drop-down comboboxes that can have initial default values. While we can restrict the user to only certain choices, we can also allow the user to type in whatever they wish.

Getting ready

This recipe extends the previous recipe, Setting the focus to a widget and disabling widgets.

How to do it…

We insert another column between the Entry widget and the Button widget using the grid layout manager. Here is the Python code:

  1. Start with the GUI_set_focus.py module and save it as GUI_combobox_widget.py.
  2. Change the button column to 2:
action = ttk.Button(win, text="Click Me!", command=click_me)
action.grid(column=2, row=1)
  1. Create a new ttk.Label widget:
ttk.Label(win, text="Choose a number:").grid(cloumn=1, row=0)

  1. Create a new ttk.Combobox widget:
number_chosen = ttk.Combobox(win, width=12, textvariable=number)
  1. Assign values to the Combobox widget:
number_chosen['value'] = (1, 2, 4, 42, 100)
  1. Place the Combobox widget into column 1:
number_chosen.grid(column=1, row=1)
number_chosen.current(0)

The preceding steps produce the following code (GUI_combobox_widget.py):

  1. Run the code.

The code, when added to the previous recipes, creates the following GUI. Note how, in line 43 in the preceding code, we assigned a tuple with default values to the combobox. These values then appear in the drop-down box. We can also change them if we like (by typing in different values when the application is running):

Let's go behind the scenes to understand the code better.

How it works…

Line 40 adds a second label to match the newly created combobox (created in line 42). Line 41 assigns the value of the box to a variable of a special tkinter type StringVar, as we did in a previous recipe.

Line 44 aligns the two new controls (label and combobox) within our previous GUI layout, and line 45 assigns a default value to be displayed when the GUI first becomes visible. This is the first value of the number_chosen['values'] tuple, the string "1". We did not place quotes around our tuple of integers in line 43, but they were cast into strings because, in line 41, we declared the values to be of the tk.StringVar type.

The preceding screenshot shows the selection made by the user is 42. This value gets assigned to the number variable.

If 100 is selected in the combobox, the value of the number variable becomes 100.
Line 42 binds the value selected in the combobox to the number variable via the textvariable attribute.

There's more…

If we want to restrict the user to only being able to select the values we have programmed into the Combobox widget, we can do it by passing the state attribute into the constructor. Modify line 42 as follows:

  1. Start with the GUI_combobox_widget.py module and save it as GUI_combobox_widget_readonly.py.
  2. Set the state attribute when creating the Combobox widget:
number_chosen = ttk.Combobox(win, width=12, textvariable=number, state='readonly')

The preceding steps produce the following code (GUI_combobox_widget_readonly.py):

  1. Run the code.

Now, users can no longer type values into the Combobox widget.

We can display the value chosen by the user by adding the following line of code to our button click event callback function:

  1. Start with the GUI_combobox_widget_readonly.py module and save it as GUI_combobox_widget_readonly_plus_display_number.py.
  2. Extend the button click event handler by using the get() method on the name variable, use concatenation (+ ' ' +), and also get the number from the number_chosen variable (also calling the get() method on it):
def click_me(): 
action.configure(text='Hello ' + name.get() + ' ' +
number_chosen.get())
  1. Run the code.

After choosing a number, entering a name, and then clicking the button, we get the following GUI result, which now also displays the number selected next to the name entered (GUI_combobox_widget_readonly_plus_display_number.py):

We've successfully learned how to add combobox widgets. Now, let's move on to the next recipe.

 

Creating a check button with different initial states

In this recipe, we will add three check button widgets, each with a different initial state:

  • The first is disabled and has a checkmark in it. The user cannot remove this checkmark as the widget is disabled.
  • The second check button is enabled, and by default has no checkmark in it, but the user can click it to add a checkmark.
  • The third check button is both enabled and checked by default. The users can uncheck and recheck the widget as often as they like.

Getting ready

This recipe extends the previous recipe, Creating combobox widgets.

How to do it…

Here is the code for creating three check button widgets that differ in their states:

  1. Start with the GUI_combobox_widget_readonly_plus_display_number.py module and save it as GUI_checkbutton_widget.py.
  2. Create three tk.IntVar instances and save them in local variables:
chVarDis = tk.IntVar()
chVarUn = tk.IntVar()
chVarEn = tk.IntVar()
  1. Set the text attributes for each of the Combobox widgets we are creating:
text="Disabled"
text="UnChecked"
text="Enabled"
  1. Set their state to deselect/select:
check1.select()
check2.deselect()
check3.select()
  1. Use grid to lay them out:
check1.grid(column=0, row=4, sticky=tk.W)
check2.grid(column=1, row=4, sticky=tk.W)
check3.grid(column=2, row=4, sticky=tk.W)

The preceding steps will finally produce the following code (GUI_checkbutton_widget.py):

  1. Run the module. Running the new code results in the following GUI:

Let's go behind the scenes to understand the code better.

How it works…

Steps 1 to 4 show the details and the screenshot in step 5 displays the important aspects of the code.

In lines 47, 52, and 57 ,we create three variables of the IntVar type. In the line following each of these variables, we create a Checkbutton widget, passing in these variables. They will hold the state of the Checkbutton widget (unchecked or checked). By default, that is either 0 (unchecked) or 1 (checked), so the type of the variable is a tkinter integer.

We place these Checkbutton widgets in our main window, so the first argument passed into the constructor is the parent of the widget, in our case, win. We give each Checkbutton widget a different label via its text attribute.

Setting the sticky property of the grid to tk.W means that the widget will be aligned to the west of the grid. This is very similar to Java syntax, and it means that it will be aligned to the left. When we resize our GUI, the widget will remain on the left side and not be moved toward the center of the GUI.

Lines 49 and 59 place a checkmark into the Checkbutton widget by calling the select() method on these two Checkbutton class instances.

We continue to arrange our widgets using the grid layout manager, which will be explained in more detail in Chapter 2, Layout Management.

We've successfully learned how to create a check button with different initial states. Now, let's move on to the next recipe.

 

Using radio button widgets

In this recipe, we will create three radio button widgets. We will also add some code that changes the color of the main form, depending upon which radio button is selected.

Getting ready

This recipe extends the previous recipe, Creating a check button with different initial states.

How to do it…

We add the following code to the previous recipe:

  1. Start with the GUI_checkbutton_widget.py module and save it as GUI_radiobutton_widget.py.
  2. Create three module-level global variables for the color names:
COLOR1 = "Blue"
COLOR2 = "Gold"
COLOR3 = "Red"
  1. Create a callback function for the radio buttons:
if radSel == 1: win.configure(background=COLOR1)
elif radSel == 2: win.configure(background=COLOR2)
elif radSel == 3: win.configure(background=COLOR3)
  1. Create three tk radio buttons:
rad1 = tk.Radiobutton(win, text=COLOR1, variable=radVar, value=1,                               
command=radCall)
rad2 = tk.Radiobutton(win, text=COLOR2, variable=radVar, value=2,
command=radCall)
rad3 = tk.Radiobutton(win, text=COLOR3, variable=radVar, value=3,
command=radCall)
  1. Use the grid layout to position them:
rad1.grid(column=0, row=5, sticky=tk.W, columnspan=3)
rad2.grid(column=1, row=5, sticky=tk.W, columnspan=3)
rad3.grid(column=2, row=5, sticky=tk.W, columnspan=3)

The preceding steps will finally produce the following code (GUI_radiobutton_widget.py):

  1. Run the code. Running this code and selecting the radio button named Gold creates the following window:

Let's go behind the scenes to understand the code better.

How it works…

In lines 75-77, we create some module-level global variables that we will use in the creation of each radio button, as well as in the callback function that creates the action of changing the background color of the main form (using the win instance variable).

We are using global variables to make it easier to change the code. By assigning the name of the color to a variable and using this variable in several places, we can easily experiment with different colors. Instead of doing a global search and replace of the hardcoded string (which is prone to errors), we just need to change one line of code and everything else will work. This is known as the DRY principle, which stands for Don't Repeat Yourself. This is an OOP concept that we will use in the later recipes of the book.

The names of the colors we are assigning to the variables (COLOR1, COLOR2, ...) are tkinter keywords (technically, they are symbolic names). If we use names that are not tkinter color keywords, then the code will not work.

Line 80 is the callback function that changes the background of our main form (win) depending upon the user's selection.

In line 87, we create a tk.IntVar variable. What is important about this is that we create only one variable to be used by all three radio buttons. As can be seen from the screenshot, no matter which radio buttons we select, all the others will automatically be unselected for us.

 

Lines 89 to 96 create the three radio buttons, assigning them to the main form, passing in the variable to be used in the callback function that creates the action of changing the background of our main window.

While this is the first recipe that changes the color of a widget, quite honestly, it looks a bit ugly. A large portion of the following recipes in this book explain how to make our GUI look truly amazing.

There's more…

Here is a small sample of the available symbolic color names that you can look up in the official TCL documentation at http://www.tcl.tk/man/tcl8.5/TkCmd/colors.htm:

Name Red Green Blue
alice blue 240 248 255
AliceBlue 240 248 255
Blue 0 0 255
Gold 255 215 0
Red 255 0 0

 

Some of the names create the same color, so alice blue creates the same color as AliceBlue. In this recipe, we used the symbolic names Blue, Gold, and Red.

We've successfully learned how to use radio button widgets. Now, let's move on to the next recipe.

 

Using scrolled text widgets

ScrolledText widgets are much larger than simple Entry widgets and span multiple lines. They are widgets like Notepad and wrap lines, automatically enabling vertical scroll bars when the text gets larger than the height of the ScrolledText widget.

Getting ready

How to do it…

By adding the following lines of code, we create a ScrolledText widget:

  1. Start with the GUI_radiobutton_widget.py module and save it as GUI_scrolledtext_widget.py.

 

  1. Import scrolledtext:
from tkinter import scrolledtext
  1. Define variables for the width and height:
scrol_w = 30
scrol_h = 3
  1. Create a ScrolledText widget:
scr = scrolledtext.ScrolledText(win, width=scrol_w, height=scrol_h, wrap=tk.WORD)
  1. Position the widget:
scr.grid(column=0, columnspan=3)

The preceding steps will finally produce the following code (GUI_scrolledtext_widget.py):

  1. Run the code. We can actually type into our widget, and if we type enough words, the lines will automatically wraparound:

Once we type in more words than the height of the widget can display, the vertical scroll bar becomes enabled. This all works out of the box without us needing to write any more code to achieve this:

Let's go behind the scenes to understand the code better.

How it works…

In line 11, we import the module that contains the ScrolledText widget class. Add this to the top of the module, just below the other two import statements.

Lines 100 and 101 define the width and height of the ScrolledText widget we are about to create. These are hardcoded values we are passing into the ScrolledText widget constructor in line 102.

These values are magic numbers found by experimentation to work well. You might experiment by changing scol_w from 30 to 50 and observe the effect!

In line 102, we are also setting a property on the widget by passing in wrap=tk.WORD. By setting the wrap property to tk.WORD, we are telling the ScrolledText widget to break lines by words so that we do not wraparound within a word. The default option is tk.CHAR, which wraps any character regardless of whether we are in the middle of a word.

The second screenshot shows that the vertical scroll bar moved down because we are reading a longer text that does not entirely fit into the x, y dimensions of the ScrolledText control we created.

Setting the columnspan attribute of the grid layout to 3 for the ScrolledText widget makes this widget span all of the three columns. If we do not set this attribute, our ScrolledText widget would only reside in column one, which is not what we want.

We've successfully learned how to use scrolled text widgets. Now, let's move on to the next recipe.

 

Adding several widgets in a loop

So far, we have created several widgets of the same type (for example, a radio button) by basically copying and pasting the same code and then modifying the variations (for example, the column number). In this recipe, we start refactoring our code to make it less redundant.

Getting ready

We are refactoring some parts of the previous recipe's code, Using scrolled text widgets, so you need that code for this recipe.

How to do it…

Here's how we refactor our code:

  1. Start with the GUI_scrolledtext_widget.py module and save it as GUI_adding_widgets_in_loop.py.
  2. Delete the global name variables and create a Python list instead:
colors = ["Blue", "Gold", "Red"]

  1. Use the get() function on the radio button variable:
radSel=radVar.get()
  1. Create logic with an if ... elif structure:
if radSel == 0: win.configure(background=colors[0])
elif radSel == 1: win.configure(background=color[1])
elif radSel == 2: win.configure(background=color[2])
  1. Use a loop to create and position the radio buttons:
for col in range(3):
curRad = tk.Radiobutton(win, text=colors[col], cariable=radVar,
value, command=radCall)
curRad.brid(column=col, row=5, sticky=tk.W)
  1. Run the code (GUI_adding_widgets_in_loop.py):

Running this code will create the same window as before, but our code is much cleaner and easier to maintain. This will help us when we expand our GUI in the coming recipes.

How it works…

In line 77, we have turned our global variables into a list. In line 89, we set a default value to the tk.IntVar variable that we named radVar. This is important because, while in the previous recipe we had set the value for radio button widgets to start at 1, in our new loop it is much more convenient to use Python's zero-based indexing. If we did not set the default value to a value outside the range of our radio button widgets, one of the radio buttons would be selected when the GUI appears. While this in itself might not be so bad, it would not trigger the callback and we would end up with a radio button selected that does not do its job (that is, change the color of the main win form).

In line 95, we replace the three previously hardcoded creations of the radio button widgets with a loop that does the same. It is just more concise (fewer lines of code) and much more maintainable. For example, if we want to create 100 instead of just 3 radio button widgets, all we have to change is the number inside Python's range operator. We would not have to type or copy and paste 97 sections of duplicate code, just 1 number.

Line 82 shows the modified callback function.

This recipe concludes the first chapter of this book. All the following recipes in all of the next chapters will build upon the GUIs we have constructed so far, greatly enhancing it.

About the Author

  • Burkhard Meier

    Burkhard Meier has more than 19 years of professional experience working in the software industry as a software tester and developer, specializing in software test automation development, execution, and analysis. He has a very strong background in Python 3 software test automation development, as well as in SQL relational database administration, the development of stored procedures, and debugging code. His previous jobs include working as a senior test automation engineer and designer for InfoGenesis (now Agilysys), QAD, InTouch Health, and FLIR Systems. Over the past three years, he has also developed several video courses on Python for Packt, the latest course being Mastering Object-Oriented Programming with Python.

    Browse publications by this author

Latest Reviews

(5 reviews total)
Great Book about GUI, exactly that I was looking for.
Vidéo très utile qui rend le perfectionnement de la programmation Python plus convivial qu'un livre plus classique...
Complessivamente chiaro ed esauriente

Recommended For You

Python GUI Programming - A Complete Reference Guide

Explore Python’s GUI frameworks and create visually stunning and feature-rich applications

By Alan D. Moore and 1 more
The Python Workshop

Cut through the noise and get real results with a step-by-step approach to learning Python 3.X programming

By Andrew Bird and 4 more
Python API Development Fundamentals

Learn all that’s needed to build a fully functional web application from scratch.

By Jack Chan and 2 more
The Complete Python Course [Video]

Go from beginner to expert in Python by building projects. The best investment for your Python journey!

By Company Eco Web Hosting Ltd and 1 more