Working with Item Selection from Dropdown List (QComboBox Widget)

Hi Guys, welcome back to my Python Blog. Today, I am going to write a complete guide for the QComboBox widget to be used as a dropdown list. Recall, in previous posts, we are designing application GUI in Qt. Similarly, we design another GUI for this post in Qt as well.

Open PyCharm from Start menu, once it is opened. Start PyQt5Designer from Terminal. 

Create a new GUI file, which contains a title label 'QComboBox Example', a 'QComboBox' widget from the left panel and a label below the widget. It is shown in the figure below.

Now, you can add items of the dropdown list in many ways. I am using the simplest one, by right-clicking on the QComboBox and select 'Edit Items...' option as shown in the following figure.

A new pop-up window will be opened, by clicking on bottom-left green '+' button, it will add 'New Item' of the list. You can enter any item value as per your need.

For instance, I entered five games on the list including Cricket, Hocky, Soccer, Tennis and Table Tennis.

After entering the list items, I clicked the OK button. By default, the first item will be displayed in the dropdown list.

From the 'QComboBox' properties, I entered the objectName as 'gamesComboBox' and saved this GUI as 'combo.ui' file.

Now, going straight to the Python. I load the 'combo.ui' file in the 'init_ui' method. Here, we need to observe the item change from the dropdown list as the user selects. Therefore, 'currentTextChanged' will be called a user selects any item. Next, is the 'on_combobox_changed' method containing if-else statements and will be invoked particularly related to any item selection. Whenever the user chooses any item, it will display the selected item to the label below this dropdown list.

Run the Python file, it will display the GUI as under:

Click the dropdown list, it displays the games list.

I selected the Tennis game, this game is displayed on the label as shown below:

It is pretty simple to work with QComboBox widget. That's all about this post. 

Cheers!

Create a Python File and Connect GUI File

Once you have created a graphical user interface (GUI) of your application using PyQt5Designer tool, then the next step is to create a Python file and use this .ui file. Launch PyCharm from Start menu and open the FirstGUIApp project, which was created in the earlier post. I already saved the 'appGUI.ui' file in the same project directory.

Right-click on the project, click New from the menu and then select Python File, as shown in the figure below:

Enter the new filename e.g. 'FirstApp and click on OK button.

It creates an empty python file, it opens this file as shown below:

Python has the major advantage of having a short-code and this is one of the greatest features of python language. There are few ways to work with loading .ui file into python file. We will create a class first namely FirstApp (you can name it whatever you like). In python, 'def' keyword is used to define a method, following the name of the method. Similarly, '_ _init_ _' is a reserved method and used as a constructor of the class, in python. To access the methods and instances of the class in python, 'self' keyword is used. It represents the instance of that class.

In the class constructor, we set the Title, Width, and Height of the GUI window. It will set the title of the window with a fixed width and height as defined. The width and height of the window will be the same as defined in the 'appGUI.ui' file. We can confirm these in PyQt5Designer tool as shown below:

We need a QApplication object before QWidget. After this, we load the 'appGUI.ui' file in another method. This is all we should have in the class constructor.

For instance, no need to know about the imports, we can talk about these later.

Then we define another method namely 'init_ui' to initialize the UI and its components. First, we load our 'appGUI.ui' file and assign it to 'self.ui_window' object. Then we set the title, width, and height using 'self.title', 'self.width', and 'self.height' respectively, which we already defined in the class constructor. Finally, we need to show this window using 'self.ui_window.show()'. That's all about the initialization of the graphical user interface in the python file.

Now, we need to run the python file to display our application GUI. In the python, we can build and run a single python file separately instead of the complete project. If we run this python file, then nothing will be displayed since we only defined the class constructor with 'init_ui' method but didn't call these. For this, we need to call the class constructor by class name following by empty parenthesis ().

Let's run this python file, and it will load and display our 'appGUI.ui' file as shown below:

We can enter the text in the given input box, and click on the Click Me button. Nothing will happen since we didn't handle the Click Event for this button. Next, we define a method 'show_text' and write just a single statement to print whatever is entered in the input box, on the graphical user interface. Then call this method, on the button click.

'print_text' is the method which contains a single statement. 'textLineEdit' is the objectName of QLineEdit (i.e. input box), and its text will be printed on the console. The statement next to the arrow shown in the figure above is the click event. 'clickButton' is the push button objectName, and we passed 'self.print_text' method in the 'connect' of Click Me button. When we press this button, it prints the text that is entered in the input box, to the console. Let's run the python file and see how it works.

In the above figure, text ' Hi, welcome to GUI application.' is entered in the input box. When we click on Click Me button, then it prints this text on the Console as shown on the bottom-left block.

That's all, how to create a Python file, load GUI and interact with GUI of the application.

Create a Basic Graphical User Interface (GUI)

Launch PyQt5Designer from Terminal in PyCharm. Create a new file 'appGUI(filename).ui'. It looks like as below:

Now, I create a basic graphical user interface as a sample GUI.

1. Drag a Label, for the title of the app, from Widget Box ==> Display Widgets ==> Label and drop it to the MainWindow. Similarly, drag and drop another Label for caption 'Enter Text' below the title label.
2. We need an Input box, for text input. Drag Line Edit from Widget Box ==> Input Widgets ==> Line Edit and drop it next to cation 'Enter Text'.
3. Lastly, a button added to the MainWindow. Drag a Push Button from Widget Box ==> Buttons ==> Push Button and drop it to below the Line Edit.

Starting from the title of the graphical user interface, now, we set the title text, customize its size and style. Double click on the first Label to edit text, and enter 'Application Graphical User Interface' text. Then click on the title, and set properties in the Property Editor. First of all, set the objectName value as 'gui_title' from QObject section as illustrated by the green arrow on top in the figure below. Similarly, we set the font from QWidget as shown in the lower green arrow. I set Font size from QWidget ==> font section, known as Point Size in Qt, to 14 and checked the CheckBox next to Bold and pressed the enter key.

In the case of the second label, I set the 'Enter Text' caption by double-clicking this label. The objectName of this label is the same as set by default. 

Similarly, for the push button, I entered 'Click Me' caption of the button. The objectName of this button is 'clickButton'. 

For instance, the objectName of all the widgets used to access these controls in the Python file. Therefore, the objectNames should be meaningful for every widget. 

This is the basic graphical user interface with few widgets. Next step is how to access these in the Python file? and perform some action on button click. 

Basics of Qt Designer

Qt Designer is a cross-platform integrated development environment (IDE) and used as a framework for the design and development of GUI application. It is used to create GUI of the C++, Python, JavaScript languages. Qt Designer Tool contains three main components:

1. MainWindow 
2. Widget Box - (Layouts, Buttons, Input Widgets...)
3. Property Editor - (Property list of widgets)

MainWindow

It contains all the widgets, layouts, etc. of the application. 

Widget Box
It contains GUI controls:
Layouts (vertical, horizontal, grid and form)
Buttons (Push Button, Radio Button, CheckBox...)
Input Widgets (Combo Box, Line Edit, Date Edit...)
Display Widgets (Labels, Progress Bar...)
Each control name has a prefix Q e.g. QLabel, QPushButton, etc.

Property Editor
It contains properties of the main window and widgets e.g. objectName, geometry (height, width), font (family, point size, bold, italic).

*GUI file is created with the extension '.ui' following the filename.

Setting up PyQt5 and PyQt5Designer

Once you downloaded and installed the PyCharm, the next step is to launch it from the Start menu. The Pycharm dialog will be opened like:

Click on Create New Project, set the project location (for this, you can make a new folder for Pycharm projects) and Enter the project name. Next, you need to set up the virtual environment of your project. The most convenient method to deal with various dependencies is Virtualenv in Python. The virtual environment is simply a local directory on your system which consists of all the libraries and dependencies for a particular project. You can set up a virtual environment of your project as under:

Click on Create button, it takes little time for basic configurations and then opens the main screen of PyCharm.

First of all, click on the Terminal from the bottom toolbar. Just type the following commands to make sure PyQt5 and PyQt5-Tools are set up properly. If not already installed then it installs it now.

1. pip install PyQt5
2. pip install PyQt5-Tools

In the above screen, it states that PyQt5 and its Tools are already installed. On the other hand, if not already installed then the same commands will install the necessary tools. 

Now, we can go ahead and start creating a GUI for our application. We create a GUI using Qt Designer which is installed under PyQt5-Tools. We can launch by typing PyQt5Designer command in the terminal. Once you typed the aforesaid command, it launches the Qt Designer application as shown below:

Click on Create button and it opens the main form as shown below:

You only need all this setup for the first time only. That's all about setting up. Now, you are ready to create GUI of your app and then use this in Python.

Guidelines for Selecting and Configuring Tools for GUI App

Several code editors and IDEs are available for developing Python application e.g. Idle, Spyder, PyDev, Wing, PyCharm, etc. Being a mobile app developer since the past 7+ years, I prefer IDE developed by Jet Brains. Among the aforesaid IDEs for Python language, PyCharm is the one developed by Jet Brains. Throughout this blog, I'll develop applications using PyCharm. In the previous post, it is said that Python does not provide GUI controls, instead, it supports open-source widget toolkit like QT.

Installing PyCharm 

By using PyCharm, you can find all the Python tools in one place. It provides code inspections, code completion, efficient error highlighting, rich navigation and automated code refactoring. PyCharm can be downloaded from this link. I would suggest Community Edition which is a lightweight and free version.

Installing Python

Pycharm installation isn't sufficient, you need to download Python Interpreter first. The latest Python release is available and can be downloaded here. In our case, the latest Python version is 3.7.4 which is available for both 32-bits and 64-bits system. Download the executable installer according to your system. I chose Windows x86-64 executable installer from Python 3.7.4rc1 - June 18, 2019, from the aforesaid link. After download, run the executable Windows installer. 

Installing PyQt

Once you installed the PyCharm Community Edition, next you need to install PyQt5 and PyQt5Designer for the GUI framework. In python, there are two ways to install dependencies i.e. from Terminal - by entering the command and second way is from File => Settings=>Project Interpreter. You can choose any of these which is convenient for you. I use both of these alternatively for adding dependencies OR installing required packages. From File => Settings=>Project Interpreter option Enter PyQt5 in the top search bar, it will list as shown below:

Select the PyQt5 package and click on Install Package. It takes some time for the installation. PyQt5 reference guide is available here.

Installing PyQt5Designer | PyQt-Tools 

PyQt5 provides Python bindings for the Qt cross-platform and application toolkit. Finally, you need to install PyQt5Designer Tool, which contains all the GUI controls required to create any GUI application. Go to File => Settings=>Project Interpreter, then click on + button on right side of the window. Enter PyQt5Designer to search and install:

Click on Install Package and it will be installed. Then click on OK button and window will be closed. Reference guide for the designer is available here.

In case, PyQt5Designer not installed, then try installing PyQt-Tools. It is more convenient to install PyQt-Tools without any error. 

That's all you need so far, for the initial setup for Python GUI application. 

Basics of Python Language

Hi Folks,

In the recent past few years, Python got tremendous attention in the programming field. According to the Statistics-Times, Python is considered as the top programming language in May 2019.

Since the past 5 years, Python growth was amazing as per statistics provided on Stack Overflow by the most asked/viewed questions.

Unlike Java, .NET and other programming languages, Python does not provide Graphical User Interface (GUI) controls directly i.e. Forms, Buttons, Labels, etc. which a user can drag and drop to develop a desktop application. Python is widely used for Scripting, Data Science, Web development, etc. Thus, learning python and start developing any kind of application(s) is the need of the hour.

In this blog, I'll particularly focus on developing a GUI application in Python. Python supports 3rd-party Open-source Widget Toolkits like QT, GUI Toolkit like Tkinter, etc. for developing GUI applications. To support various cross-platform applications for various operating systems including Microsoft (MS) Windows, Linux, Macintosh, etc. QT is one of the first choices. PyQt5 provides a widespread set of Python bindings for the Qt version 5. I selected PyQt5, therefore, this blog guides about GUI application development in Python.