Designing the GUI and Creating the Window

Design the GUI layout of our user profile app.

We'll cover the following

A user profile is a particular type of visual display used to present specific users' personal information. The information on the profile enables others to learn more about that person while associating certain traits with that user. User profiles can be found on various platforms, such as operating systems, computer programs, and social networking websites like Facebook and LinkedIn. The profile's appearance will change to fit the objectives, guidelines, and requirements of the application you are viewing.

User profiles frequently feature parameters that can be customized to meet the user's tastes and are either required or optional, such as a profile image or background colors. Many of them have elements usually present in all sorts of profiles, such as the user's name and an "About" section where the user can share personal information.

The initial design

Notably, many modules will feature smaller programs focused primarily on coding them for people who have a project in mind or need to learn how to add specific widgets to their applications.

Let's dissect the user profile GUI and decide which widgets you'll need and how to organize them in the window, as shown in the illustration below.

In PyQt, create a blank window to see what happens. We’ll look at the following:

  • Information on the fundamental classes and modules required to set up your GUI.

  • How to change the title and window size.

We’ll also find out how to make widgets:

  • Use QLabel, in particular, to add text and images to your GUI.

  • Use move() to arrange the widgets in your window.

Real user profile applications frequently combine a variety of widgets. Some are meant to be read and cannot be changed by the viewer; others are interactive, allowing the viewer to click the "Like" buttons or the links in the profile. In this chapter, we'll look at creating a simple PyQt interface and demonstrate how to use the QLabel widget to display data in the window. Two components make up the user interface:

  1. The background and title/name are on the top.

  2. The user's information is at the bottom. The bottom text can be divided into smaller portions distinguished by various font sizes.

The main window and one or more dialog boxes typically make up a GUI application. While the main window of your program might have a status bar, menu bar, and other widgets, a dialog is made up of buttons designed to present information to the user and solicit feedback from them. A dialog is an alert window that appears and asks you if you want to save changes to your document.

Making the window

The first step in the code is to import the sys and PyQt6 modules that we require to create a window. We frequently use sys to stop applications or send command-line parameters to them. This module offers a collection of UI components that can be used to build desktop-style GUIs. We import the classes QApplication and QWidget from the QtWidgets module. The QApplication class, which controls the primary event loop, flow, initialization, and finalization of the application, and session management, only needs to be created once.

Press + to interact
import sys
from PyQt6.QtWidgets import QApplication, QWidget

Then we create a class—EmptyWindow—and define a function—initializeUI—to initialize the window and display its contents on the screen. The setGeometry() function specifies the window's position on your computer's screen and its width and height. So the window we just opened has a width of 700 and a height of 700, and it is situated at x = 150, y = 50 in the window. The title of our window can be modified with setWindowTitle().

Press + to interact
class EmptyWindow(QWidget):

  def __init__(self):

    super().__init__()

    self.initializeUI()

  

  def initializeUI(self):

    self.setGeometry(150, 50, 700, 700)

    self.setWindowTitle('Empty Window in PyQt')

    self.show()

Finally, we end by running the program. Look at app = QApplication(sys.argv), which uses sys.argv as one of its arguments. The next step is to create a window object derived from the EmptyWindow class we just generated. Since QWidget is the base class from which all other user interface objects are built, our class derives from it. In addition, to display the window object on the screen, we must use the show() method. This can be found inside the EmptyWindow class' initializeUI() function. In the program's final line, you'll see app.exec(). This function starts the event loop, and it will run indefinitely. A clean exit is ensured by sys.exit(). QApplication can be thought of as the frame that houses our window if all of this makes sense. We must create an application before generating the window. QWidget is used to generate the window, also known as our GUI.

Press + to interact
if __name__ == '__main__':

    app = QApplication(sys.argv)

    window = EmptyWindow()

    sys.exit(app.exec())

Try it yourself

import sys
from PyQt6.QtWidgets import QApplication, QWidget

class EmptyWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.initializeUI()
    
    def initializeUI(self):
        self.setGeometry(150, 50, 700, 700)
        self.setWindowTitle('Empty Window in PyQt')
        self.show()

if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = EmptyWindow()
    sys.exit(app.exec())
Creating an empty window

To develop our GUI, we must first establish a QApplication instance to position the window. Look at the following code to see how to create a window using procedural programming in PyQt, with instructions provided at each stage.

We start by importing the necessary modules and use sys to accept command line arguments.

Press + to interact
import sys
from PyQt6.QtWidgets import QApplication, QWidget

Then, we create the application object and the window.

Press + to interact
app = QApplication(sys.argv)

window = QWidget()

We call show() to view our GUI.

Press + to interact
window.show()

Finally, we start the event loop and use sys.exit to close the application.

Press + to interact
sys.exit(app.exec())

Feel free to run the above code in the widget provided above!

Note: The widget below shows how to create a window with procedural programming in PyQt.

import sys
from PyQt6.QtWidgets import QApplication, QWidget

app = QApplication(sys.argv)
window = QWidget()
window.show()

sys.exit(app.exec())
Creating a window using procedural programming in PyQt