As already discussed, we will be writing the code as clean as possible and maintain a clear separation between UI elements and main code.
For this tutorial we will be looking at how the widgets work and how to interact with widgets from Python.
Let’s start with the directory structure of the project, this is how the project directory is going to look like.
-- pyqttutorial | |-- ui |-- hello_world.py |-- __init__.py
Where ui is a directory which is going to contain
.ui files which are the files that hold the GUI layout and objects and
hello_world.py is out main entry point for the application.
Sometimes we need to generate and place objects dynamically on the Application window but most of the times it is not needed, so we will be using Qt Designer for the purpose of generating
QtDesigner is already included with PyQt5 library which we installed. To start the application all you need to do is go into the environment of your project and enter designer in terminal.
(pyqt) :~$ designer
This will open up a window like shown below.
Now we select Main Window and create it. Now on the right hand size of the QtDesigner we can see a tool bar with properties bar which displays the properties of the GUI element selected. Now as there is only main window it shows the property of main window.
There is a property called
objectName for every GUI element you create in designer. This should be unique and this property helps us to modify the properties of the element from python code.
Now lets change objectName to
main_window and windowTitle to
Now let us drag and drop a label from left toolbar of Designer and change it’s name to
helloworld_label . Double click the label to edit the text or property named
text of the label can be changed to
main_window as much as you need and then save it in ui folder as
hello_world.ui. So our directory structure will be like
-- pyqttutorial | |-- ui | |-- hello_world.ui | |-- hello_world.py |-- __init__.py
So finally it looks like what is shown in the screenshot
We are now done with UI part of the hello world program and lets get into Python code. ui There are two ways of integrating ui file with python. The first one is converting ui files to python files and importing them and second being loading them directly into python files using
uic module. We will be using the second method to load the ui files into the code.
hello_world.py fill first we need to import PyQt5 module and all relevant modules needed to run the code.
from PyQt5 import QtCore, QtWidgets, uic, QtGui import os,sys
Next we get the folder path where our main file is located and ui folder and store them int variables.
BASE_FOLDER = os.path.dirname(os.path.realpath(__file__)) UI_FOLDER = os.path.join(BASE_FOLDER,"ui")
Now we get the Base UI class (Form Class) which has all the UI elements in it
main_window_ui_file = os.path.join(UI_FOLDER,"hello_world.ui") main_window_uic = uic.loadUiType(main_window_ui_file) ## Get Ui Class (Form class)
We now create a class which Inherits
base class and
form class of main_window
class HelloWorld(QtWidgets.QMainWindow,main_window_uic): def __init__(self): super(HelloWorld, self).__init__() self.setupUi(self)
self.setupUi(self) is important and must be called before calling or interacting with any GUI elements.
Let’s write the code which creates class instance and display the Ui.
if __name__ == "__main__": app = QtWidgets.QApplication(sys.argv) main_window = HelloWorld() main_window.show() sys.exit(app.exec_())
That is it, now save the file and execute it, it pop a window with Hello World.
Here is the whole code together
from PyQt5 import QtCore, QtWidgets, uic import os,sys BASE_FOLDER = os.path.dirname(os.path.realpath(__file__)) UI_FOLDER = os.path.join(BASE_FOLDER,"ui") main_window_ui_file = os.path.join(UI_FOLDER,"hello_world.ui") main_window_uic = uic.loadUiType(main_window_ui_file) ## Get Ui Class (Form Class) class HelloWorld(QtWidgets.QMainWindow,main_window_uic): def __init__(self): super(HelloWorld, self).__init__() self.setupUi(self) if __name__ == "__main__": app = QtWidgets.QApplication(sys.argv) main_window = HelloWorld() main_window.show() sys.exit(app.exec_())