Create GUI apps in Python Using Qt Designer

I assume that you have Python interpreter and PyQt installed on your machine. Download PyQt from the .http://www.riverbankcomputing.co.uk/software/ pyqt/download location. Just double click the downloaded file to begin installation.Though we can write PyQt program from scratch using a simple text editor, we can use the Qt Designer that comes with PyQt. For developing GUI applications in PyQt, using Qt designer is a quick and easy way to design user interfaces without writing a single line of code.

On opening the QT Designer, the first screen asks us to select the template for the new application. Qt Designer provides a number of templates that are suitable for different kinds of applications. We can choose any one of these templates followed by Create button. Let us select Main Window for our application. A GUI application may either consist of a main window with several dialogs or of just dialogs. A small GUI application usually consists of at least one dialog. A Dialog application contains some buttons. It doesn't contains menu bar, toolbar, status bar or central widget whereas, a main window application normally have a menu bar, toolbars, status bar, buttons and a central widget. A central widget is a widget that contains other widgets. Qt Designer displays a menu bar and toolbar at the top. Besides this, the Qt Designer shows a Widget Toolbox on its left that contains varieties of widgets required in developing applications. The widgets are grouped into sections.

All, we have to do is to drag and drop desired widgets from the respective sections on the form. We can set their appearance through Property Window on the right. The user interface that we create through Qt designer is stored in a .ui file that is an XML file. To use the XML file created by Qt Designer, we need to convert it into Python code. We will soon see the method of converting .ui files into python code.

On the right side, in the Qt Designer we will find three windows:

Object Inspector - It displays a hierarchical list of all the objects that are present on the form. We can select any object on a form by clicking on its corresponding name in the Object Inspector. Usually, we select an object in Object Inspector window when we have overlapping objects. The window also displays the layout state of the containers. Containers are those widgets that can store other widgets or object. Few of the examples of containers are Frames, Group Boxes, Stacked Widgets, Tab Widgets and ToolBox Widgets.

Properties Editor - Used to view and change the properties of the form and widgets. It consists of two columns, the Property column and Value column. The Property column lists property names and the Value column lists the corresponding values. To change the same property to the same value for a set of widgets, select all of them. To select a set of widgets, click one of the widgets, then Shift+Click the others one by one. When a set of widgets is selected, the properties window will show the properties that are common in all the selected widgets, and any change made to one property will be applied to the same property for all the selected widgets.

Signal/Slot Editor — This window displays the signal/slot connections between objects. We can edit the signal/slot connections through this window.

Let's create an application in Qt designer that prompts the user to enter a name followed by selecting a button. A welcome message will be displayed to the user. On selecting the template Main Window, a blank form will be created with an “untitled” caption. Now, drag and drop Label, LineEdit and Push Button widgets from the Widget Tool box on the form.

The default text property of Label widget is TextLabel. We can change its text either by double clicking on it in the form and editing in place or through the text property from the Property Editor. Either way, lets set the text of Label widget to Enter your Name. Similarly, set the text of the Push Button widget to Click Me. Lets save the form by name say welcomemsg. The file will be saved with extension .ui. It is an XML file that carries the information of the widgets, layout and other default information of the form. On opening the file, we may find the code as shown below:

To use the above XML file, we need to convert it into Python code. The .ui file can be converted into the python code by using the pyuic4 command. The format of using the pyuic4 command is D:\python>pyuic4 welcomemsg.ui -o welcomemsg.py. By this command, a python file will be automatically created for us by name welcomemsg.py that contains all the information of the form that we just created in python code. The code in the file is as shown below:

Now, its time to add some action to the form. Recall, we wanted that when user selects the Push Button after entering her name, a welcome message be displayed to her. In traditional programming language, it is known as event handling but in PyQt language it is known as signal/slot connection. When user selects any widget on the form, a signal is generated and it has to be connected to some slot that is nothing but a function carrying the code that we want to execute on selection of the widget. To sum up, signal is an event and slot is the function that executes on occurrence of the signal.

We need to create another Python program that will use the above generated welcomemsg.py file and will make some action to happen. Lets name this program as callwelcome.py and its code is as shown below :

The sys module is imported as it enables us to access the command line arguments stored in the sys.argv list. First of all, we create a QApplication object. Every PyQt GUI application must have a QApplication object as it provides access to information such as the application's directory, screen size etc. While creating a QApplication object we pass the command line arguments to it for the simple reason that PyQt can act on the command line arguments like -geometry, -style etc, which are of its concern. We create an instance of MyForm() class and call its show() method that adds a new event to the QApplication object's event queue, which is a request to paint the specified widget. The method app.exec_() is called to start the QApplication object's event loop. Once the event loop begins, the form is displayed. All the events that occur whether through user interaction or are system generated, are added to the event queue. The application's event loop continuously checks to see if any event has occurred. On occurrence of an event, the event loop processes it and eventually passes it to the associated method.

In PyQt, any widget can be used as a top level window. By inheriting QMainWindow we get a blank form. To declare as a top level window, to the __init__() method of our form, we pass a default parent of None, and use the super class's __init__ method to initialize it. Note that a widget that has no parent becomes a top-level window.

Also, the clicked event of the pushButton is connected to the dispmessage method. Hence, whenever user will select the pushbutton (Click Me), the code in dispmessage method will be executed. The code in dispmessage method retrieves the name entered by the user in the lineEdit (text box) and displays it through the label after prefixing it with a string "Hello". On execution of the above program, we get a form that prompts the user to enter name. If the user enters the name as Caroline in the lineEdit and selects the Click Me push button, the output displayed via Label widget will be Hello Caroline.