Laboratory Activity No.
9
Introduction to GUI Development using PyQt5
Course Code: CPE009 Program: BSCPE
Course Title: Object-Oriented Programming Date Performed:
Section: Date Submitted:
Name: Instructor:
1. Objective(s):
This activity aims to familiarize students with the PyQt5 framework for GUI Development
2. Intended Learning Outcomes (ILOs):
The students should be able to:
2.1 Identify the main components in a GUI Application
2.2 Create a simple GUI Application using PyQt5 Widgets
3. Discussion:
A Graphical User Interface (GUI) application is a program that the user can interact with through graphics (windows, buttons,
text fields, checkboxes, images, icons, etc..) such as the Desktop GUI of Windows OS by using a mouse and keyboard unlike
with a Command-line program or Terminal program that support keyboard inputs only.
PyQt5 is a Python GUI Framework based on the Qt Framework of C++ which enables Python developers to build a wide range
of Desktop GUI Applications through the Qt Widgets.
4. Materials and Equipment:
Desktop Computer with Anaconda Python
Windows Operating System
5. Procedure:
Installing PyQt5
1. Open the Anaconda Navigator and go to Environments
2. Create a new conda environment which can be found at the bottom portion of the window + Create.
3. A new window should appear. Make the name pyqt5 and python should be version 3.7. Click Create.
4. A New Environment should be available.
5. Open the Terminal in the pyqt5 environment and type the following command:
pip install pyqt5==5.12
6. Verify that the pyqt5 framework was successfully installed.
Creating your first GUI program (Procedural)
1. Create a folder named oopfa1<lastname>_lab8
2. Open your Anaconda Navigator and select Visual Studio Code or Spyder IDE.
3. Open that folder in your editor and create first_guiprocedural.py
4. Copy the following code as shown below (Add your last name to the setWindowTitle):
5. Run the program and observe the output.
6. Resize he program manually using the mouse so that the title First GUI can be seen in the window.
7. Modify the code so that the window will result in the size seen in task#6.
Creating your first GUI program (Object-Oriented)
1. Create a new file named gui_oop.py and copy the code below (Add your last name to the self.title):
2. Run the program and observe the output.
Adding an icon
3. Download any .ico picture from https://icon-icons.com/ or any similar sites.
4. Place the icon in your folder (ex. Oopfa1<lastname>_lab8)
5. Run the program again, the program should now have an icon similar to the program below.
Creating Buttons
1. Create a new .py file named gui_buttons.py then copy the program as shown below:
2. Run the program and observe the output.
3. Add a new button named button2 named Register to the GUI that will display “this button does nothing.. yet..” when it
is hovered.
Creating Text Fields
1. Create a new file named gui_text.py and copy the code shown below:
2. Run the program and observe the error.
3. Add an import QLineEdit to the PyQt5.Widgets import
4. Run the program and observe the output.
5. Add the following code below self.textbox.resize()
self.textbox.setText("Set this text value")
4. Run the program again then resize the textbox so that it fits in the Window and that its height is just above the written
text’s height.
Creating Labels
1. Create a new file called gui_labels.py and copy the following code below:
2. Run the program and observe the output.
3. Add the necessary Widget at the import line to make the program run.
4. Center the label by adjusting the parameters of .move(). This is called Absolute Positioning.
5. Create a new label called “This program is written in PyQt5” and place it at the center and below the Hello World!
6. Supplementary Activity:
Task
Create an Object-Oriented GUI Application for a simple Account Registration System with the following required information:
first name, last name, username, password, email address, contact number.
Requirements:
• The GUI must be centered on your screen.
• The GUI Components should be organized according to the order of information required using Absolute Positioning.
• The position of the components should be automatically computed based on the top component.
• All the text fields should be accompanied with their corresponding label on the left side while the text field is on the
right side.
• There should a program title other than the Window Title.
• There should be a submit button and clear button at the bottom (submit button on the left, clear button on the right).
• The program should be launched on main.py while the GUI Codes should be on a separate file called
registration.py
Questions
1. What are the common GUI Applications that general end-users such as home users, students, and office employees
use? (give at least 3 and describe each)
________________________________________________________________________________
________________________________________________________________________________
2. Based from your answer in question 1, why do you think home users, students, and office employees use those GUI
programs?
________________________________________________________________________________
________________________________________________________________________________
3. How does PyQt5 help developers in making GUI applications, what would be the difference if developers made GUI
programs without GUI Frameworks such as PyQt5 or Tkinter?
________________________________________________________________________________
________________________________________________________________________________
4. What are the different platforms a GUI program may be created and deployed on? (Three is required then state why
might a program be created on that specific platform)
________________________________________________________________________________
________________________________________________________________________________
5. What is the purpose of app = QApplication(sys.argv), ex = App(), and sys.exit(app.exec_())?
________________________________________________________________________________
________________________________________________________________________________
7. Conclusion:
8. Assessment Rubric:
