Building GUIs with PyQt5

In this chapter, we will introduce another Python GUI toolkit, named PyQt5, which is truly excellent. PyQt5 has similar capabilities to tkinter but comes with a very nice Visual Designer tool that lets us drag and drop widgets onto a form. We will also use another tool that converts the Designer .ui code into Python code.

After visually designing our GUI in the Designer and then converting the code into Python code, we will continue using pure Python to add functionality to our widgets. First, we will install PyQt5 and the Designer before writing a simple PyQt5 GUI without the Designer. After that, we will visually design our GUI.

Knowing how to use PyQt5, and the Visual Designer tool and how to convert .ui into .py code will add great skills to your Python GUI development toolbox. From this, you will learn how to create powerful and complex GUIs, as well...

Installing PyQt5

In this recipe, we will install the PyQt5 GUI framework. We will be using Python's pip tool to download the PyQt5 wheel format installer.

You can find the official documentation at the following link: https://www.riverbankcomputing.com/static/Docs/PyQt5/installation.html.

Getting ready

You need to have Python's pip tool installed on your computer. You probably already have it.

How to do it...

Let's see how we can install PyQt5 using Python's pip tool:

1. Open a Windows PowerShell window or Command Prompt.
2. Type in the pip install pyqt5...

Installing the PyQt5 Designer tool

In this recipe, we will install the PyQt5 Designer tool. We will do this by using Python's pip tool. The steps are very similar to the previous recipe's, where we installed PyQt5.

Getting ready

You need to have Python's pip tool installed on your computer.

How to do it...

Let's see how we can install the PyQt5 Designer using Python's pip tool. Note that the package includes more than just the Designer tool:

1. Open a Windows PowerShell window or Command Prompt.
2. Type in the following command:

pip install pyqt5-tools...

Writing our first PyQt5 GUI

In this recipe, we will be writing our first PyQt5 GUI. We will be using PyQt5 directly without using the Designer.

Getting ready

You need to have PyQt5 installed. See the Installing PyQt5 recipe to find out how to install PyQt5. Use your favorite Python editor to write the code. If you are not familiar with modern IDEs such as Eclipse, PyCharm, and so on, you can use the IDLE editor, which ships with Python.

How to do it...

Let's look at how we can build our first GUI with PyQt5:

1. Open your favorite Python editor.
2. Create a new Python module...

Changing the title of the GUI

In this recipe, we will change the title of the GUI we created in the previous recipe.

Getting ready

We will be using the code from the previous recipe, so either type it into a module of your own or download it from the Packt website for this book.

How to do it...

We will enhance the GUI from the previous recipe by changing the title of this GUI. Let's get started:

1. Open First_GUI_PyQt5.py and save it as GUI_PyQt5_title.py.
2. Add the following line of code into the middle of the existing code:

gui.setWindowTitle('PyQt5 GUI&apos...

Refactoring our code into object-oriented programming

In this recipe, we will refactor our code into object-oriented programming (OOP) using classes. This is in preparation for the PyQt5 Designer code and the recipes we will be building later in this chapter. In this recipe, the resultant output of the GUI will look the same, but the code will be different.

We will build a class that inherits from QWidget.

Getting ready

We will be refactoring the code from the previous recipe, so make sure you understand that code.

How to do it...

We will turn our previous, procedural...

Inheriting from QMainWindow

Now that we have seen how to inherit from PyQt5 classes, in this recipe, we will inherit from QMainWindow. This gives us more options when it comes to designing our GUI compared to inheriting from QWidgets. In addition to setting the GUI window title, we will also give it a certain size.

Getting ready

Read through the previous recipe so that you understand the code we are writing here.

How to do it...

We will inherit from QMainWindow and specify the size of the GUI. Let's get started:

1. Create a new module and name it GUI_PyQt5_QMainWindow...

Adding a status bar widget

In this recipe, we will start to add widgets to the GUI we created previously. We will start by adding a status bar. This is a widget that comes built in with PyQt5, so all we have to do is use it.

Getting ready

We will extend the GUI from the previous recipe, so read the previous recipe in order to understand the code we are writing here.

How to do it...

Let's get started:

1. Create a new module and name it GUI_PyQt5_statusbar.py.
2. Write the exact same code from the previous recipe, which can be found in GUI_PyQt5_QMainWindow.py.

3. Create...

Adding a menu bar widget

In this recipe, we will add a menu bar to the GUI we created in the previous recipe. We did this in a previous chapter with tkinter, but in this recipe, we will see how creating a menu bar with PyQt5 is much simpler and more intuitive.

We will also start creating PyQt5 actions, which add functionality to the GUI.

Getting ready

We will extend the GUI from the previous recipe, where we added a status bar. Read the previous recipe in order to understand the code we are writing here.

How to do it...

We will extend from the previous recipe, in which...

Starting the PyQt5 Designer tool

In this recipe, we will start to use the PyQt5 Designer tool. We will visually design our GUIs and drag and drop our widgets onto a window main form. This form can be a QWidgets form or a QMainWindow form.

Getting ready

You will need to have both PyQt5 and the Qt Designer tool installed on your computer. Please read the Installing PyQt5 and Installing the PyQt5 Designer tool recipes to find out how to do this.

How to do it...

You will need to run the Designer.exe file. Its location can be found in the Installing the PyQt5 Designer tool...

Previewing the form within the PyQt5 Designer

In this recipe, we will learn how to preview the form we are creating with the Designer. This is a very useful feature the Designer offers us because we can make changes, undo them, preview them, and so on until we are happy with our design. At that point, we can save the design.

Getting ready

You will need to have both PyQt5 and the Qt Designer tool installed on your computer.

How to do it...

Run Designer.exe, as explained in the previous recipe. We will change the Main Window size and then preview it. Follow these steps...

Saving the PyQt5 Designer form

In this recipe, we will add the same menu and menu item that we created previously. We will save our UI after previewing it.

Getting ready

You will need to have both PyQt5 and the Qt Designer tool installed on your computer.

How to do it...

Run Designer.exe, as explained in the previous recipe. In order to create the menu and menu item, we can simply type into the Main Window within the Designer. Moving on, perform the following steps:

1. Perform step 1 and step 2 from the previous recipe.
2. In the Designer, inside MainWindow - untitled*, type...

Converting Designer .ui code into .py code

In this recipe, we will look at the .ui code we saved in the previous recipe when we saved our design in the Qt Designer tool. After that, we will use a utility we installed during the installation of the PyQt5 tools that will convert the ui code into Python py code.

We will be specifically using the pyuic5 tool. You can think of the name as follows:

Generate Python py code from the Designer ui code by converting it, using PyQt version 5.

If you are trying to find where pyuic5.exe is located, it actually gets installed into the Python scripts subfolder. On my installation, this is C:\Python37\Scripts\pyuic5.exe. Make sure your PATH is set to the Scripts folder in order to successfully run it.

Let's get ready.

Getting ready

...

Understanding the converted Designer code

In the previous recipe, we converted the Designer UI code into Python code using the pyuic5 converter tool. In this recipe, we will look at the generated code. Every GUI we create with the Designer needs to be converted and any changes we make will overwrite all the previous code. This will allow us to understand how to decouple UI code from the functionality we will add to the UI using a modular approach in Python.

Getting ready

You will need to have the converted code from the previous recipe available. If you did not follow the preceding recipes in this chapter, simply download the necessary code from the Packt website for this book. The website provides all of the code for this...

Building a modular GUI design

As we saw in the previous recipe, all of the auto generated code of the UI we are designing with the Designer will be overwritten as soon as we rerun the pyuic5 utility. This is a good thing because it encourages us to design our Python modules in a modular fashion (hence the name module).

In this recipe, we will import the generated UI from a new Python module and add functionality within it. Whenever we rerun the pyuic5 utility, our code will not get accidentally overwritten, because we are separating the logic from the UI.

Separation of Concerns (SoC) is a software term that refers to the benefits of good, modular design.

So, let's write some code!

Getting ready

You will need the converted...

Adding another menu item to our menu bar

In this recipe, we will add a second menu item to our GUI. We will use the Designer and then regenerate the UI code. After that, we will attach functionality to the menu item from our modular Python module. The Designer has certain capabilities so that it can add this functionality as well, but here, we are simply keeping the UI code separated from the functionality of our GUI.

Getting ready

You will need to have the UI code from the previous recipes available. All the other recipes' prerequisites apply to this recipe as well.

How to do it...

...

Connecting functionality to the Exit menu item

In this recipe, we will add functionality to the Exit menu item we created in the previous recipe. So far, we have two menu items, but they aren't interactive.

Here, we will learn how to add functionality outside of the UI by using our modular approach to coding. We will also improve our code by transforming the "__main__" self-testing section into a class of its own.

Getting ready

You will need to have the .ui code from the previous recipe available. All the other prerequisites apply to this recipe as well.

How to do it...

...

Adding a Tab Widget via the Designer

In this recipe, we will add a Tab Widget to our UI using the Designer tool. Then, we will convert the .ui code into Python code. This will serve us well in preparation for adding more widgets and functionality to our GUI.

Getting ready

You will need to have the .ui code from the previous recipe available. All the other prerequisites apply to this recipe as well.

How to do it...

We will add a Tab Widget to our UI design by using the Designer. It is as simple as dragging and dropping. Let's get started:

1. In Qt Designer, open Designer_First_UI...

Using layouts in the Designer

In this recipe, we will explore the very important concept of using layouts with PyQt5 and we will do so using the Designer tool. In tkinter, we explored Label Frames. In PyQt5, horizontal and vertical layouts are the main ways in which we can design our UI.

This can get a little bit tricky, so, as I mentioned previously, make sure you back up your UI design often so that, when things turn out ugly, you have a foundation to go back to.

In the following recipe, we will place widgets into these layouts.

Getting ready

You will need to have the .ui code from the previous recipe available. All the other prerequisites apply to this recipe as well.

...

Adding buttons and labels in the Designer

In this recipe, we will add a button and a label, both of which we will place in the layouts we added to our UI design in the previous recipe.

Getting ready

You will need to have the .ui code from the previous recipe available. All the other prerequisites apply to this recipe as well.

How to do it...

We will add a button and a label to our UI design. We will also use the Designer to connect the two, creating some of the available functionality directly within the Designer. Let's take a look at the steps:

1. In the Designer...