QT Designer Demystified: A Practical Tutorial for Developing Python Desktop Applications

The frontend is one of the essential components your program must have, especially when you intend to take it into production. It should feature a user-friendly and easy-to-use environment, allowing users to interact with the program and perform their tasks seamlessly.

This article will teach you how to program and design a desktop GUI using the QT Design application and Python. Later, we will explore how to compile the entire program’s functionality into a single portable executable using auto-py-to-exe.

QT Designer is a powerful visual development tool that simplifies the creation of user interfaces for applications built with the QT framework. With an intuitive drag-and-drop interface, designers and developers can effortlessly design and customize UI elements.

Installation of QT Designer with PySide6

Lets download the QT Designer environment, which provides quick and intuitive control over your design — a task that can be challenging to visualize programmatically. In this tutorial, we focus on using QT Designer purely for design purposes, while the programmed actions will be written in Python.

To achieve this, we need to install PySide6. PySide6 is a powerful set of Python bindings for the Qt application framework. It enables developers to create cross-platform applications with ease, combining the simplicity and flexibility of Python with the robustness and versatility of Qt. PySide6 contains QT Designer by default.

The minimum requirements for your computer or environment (if you use virtual environments like Anaconda) are Python >= 3.9.0 and pip >= 21.0.0.

Run the following command to install PySide6

pip install pyside6

Once installed PySide6 you can access to QT Design with the following command:

pyside6-designer

We won’t delve deeply into the workings of the QT Designer application; instead, we’ll create a very simple screen where a label with information is displayed, along with a button that triggers an action.

In the QT Designer screen, in the menu bar, we select File >> New >> Dialog without Buttons, then click on Create. This action will display the dialog window of our application on the screen.

We will start by adding a Label; drag the Label from the toolbox Widget Box >> Display Widgets >> Label in the left side of QT Designer to our interface. When you do this, you will notice that our label appears floating in the interface. You could arrange a component like this in case you prefer your window size not to be dynamic, which is common in dialog windows. However, if you have a little bit of OCD (Obsessive-Compulsive Disorder) like me, everything must be in order in all cases. Right-click on any empty space within our window and select Layout >> Layout in a Grid.

By activating the grid, the Label will adjust to cover the entire interface. If we double-click on the Label, we can change its text; we can type ‘This is my first application,’ and finish with an Enter.

Enabling the grid, the Label will adjust to cover the entire window. If we double-click on the Label, we can change its text; we can type ‘This is my first App!!’ and finish with an Enter. If we select our Label component, we can change several of its properties in the Property Editor submenu, located on the right side of the screen. In this case, we will change the text alignment to the center by selecting AlignHCenter in Property Editor >> QLabel >> alignment >> Horizontal.

Furthermore, let’s change the name of our PushButton object. This name will be used to refer to the instance. This is useful when dealing with many objects. In the Property Editor >> QObject >> objectName, we change the name to the following: ‘my_PushButton’.

Our GUI is ready! We save our work under the name my_first_ui.ui. To be able to use our GUI in our program in Python.

We need to convert our interface into a Python file to be able to use it in our program,weneedtoconvertour. To achieve this, navigate to the directory where we saved our *.ui file, and insert the following command:

cd [directory where the ui is located]
pyside6-uic my_first_ui.ui -o my_first_ui.py

This automatically generates our interface code in Python. If we open the generated my_first_ui.py, we will see a class called QDialog. This will be the class we will call in our main program later on.

Programming Actions in Python

We create a Python file named main.py in the same folder where we generated our GUI.

from my_first_ui import Ui_Dialog
from PySide6.QtWidgets import QDialog, QApplication

class myApp(QDialog, Ui_Dialog):
    def __init__(self):
        super().__init__()
        self.setupUi(self)

if __name__ == "__main__":
    app = QApplication([])
    ui = myApp()
    ui.exec_()

In this, we import Ui_Dialog from our previously generated program and define a new class called MyApp that inherits from both QDialog and Ui_Dialog. The setupUi function contains the configuration of our UI.

The QApplication instance is required to manage the configuration flow that PySide6 needs for its operation. If we run this script, our interface will be displayed. Clicking the ‘Accept’ button does nothing at this point, as we haven’t programmed any actions yet.

To start programming actions, let’s create a function that displays another window called message_box.

    def message_box(self):
        msg = QMessageBox()
        msg.setIcon(QMessageBox.Information)
        msg.setText("This is a message box")
        msg.setWindowTitle("MessageBox demo")
        msg.setStandardButtons(QMessageBox.Ok)

        retval = msg.exec_()

This function displays a second pre-defined dialog box from PySide6 called QMessageBox. In this, we define the text, an information icon, the application title, and the Ok button. Finally, we execute it with exec_ to make it appear.

Now we need to create a signal that triggers our function when the ‘my_PushButton’ button is pressed.

from my_first_ui import Ui_Dialog
from PySide6.QtWidgets import QDialog, QApplication, QMessageBox

class myApp(QDialog, Ui_Dialog):
    def __init__(self):
        super().__init__()
        self.setupUi(self)

        #my_pushButton signal 
        self.my_pushButton.clicked.connect(self.message_box)
    
    def message_box(self):
        msg = QMessageBox()
        msg.setIcon(QMessageBox.Information)
        msg.setText("This is a message box")
        msg.setWindowTitle("MessageBox demo")
        msg.setStandardButtons(QMessageBox.Ok)

        retval = msg.exec_()

if __name__ == "__main__":
    app = QApplication([])
    ui = myApp()
    ui.exec_()

This is achieved by adding a method inherit from my_pushButtoncalled clicked.connect(func). QT contains a series of predefined signals that are activated when an action is performed, in this case, the button click. The method of message_box, contained in myApp is triggered every time we clic on my_pushButton.

Fantastic! You’ve already created your first application with a GUI! Now let’s create the executable.

Create a Standalone Executable With Auto-py-to-exe

Auto-py-to-exe is a graphical user interface (GUI) tool for converting Python scripts into standalone executables. It simplifies the process of packaging Python applications, providing an easy-to-use interface for users who want to distribute their Python programs as standalone applications without requiring the end-users to install Python or any dependencies.

We just need to install auto-py-to-exe running the following text in your command prompt or terminal.

pip install auto-py-to-exe

Once installed, we run the following in the terminal or command prompt.

auto-py-to-exe

In the auto-py-to-exe GUI, choose the location of main.py by clicking on Browser next to Script Location. Select One File and Windows Based (hide the console), then click on CONVERT .PY TO .EXE. That’s it! Auto-py-to-exe will generate a folder named output in your directory, containing the standalone executable. This will work without the need to install anything on the target computer.

Note: Keep in mind that if it was compiled on a Windows computer, the executable will only run on Windows. Similarly, if it was compiled on Linux, the executable will only work on Linux.

Thanks for reading!