Chapter 11. Designing Your GUI with Qt

In this chapter, we will look at using the Qt (www.qt.io) framework to build a graphical interface for a Python application. In this case, we will be extending the unit conversion application created in Chapter 9, Creating Command-line Interfaces.

The Qt framework is a commonly used framework for a lot of open source desktop applications. It is written in C++ and, typically, most applications use the C++ Qt library. However, it also has a Python wrapper around this library, which is what we will use in this chapter.

Setting up the codebase

We will start extending the unit conversion application by taking a copy of the unitconverter directory and the setup.py scripts from the code written in Chapter 9, Creating Command-line Interfaces (a copy of this code is included in the code downloads for Chapter 9, Creating Command-line Interfaces).

We will then create a new module named gui within the unitconverter module. This will contain the Qt window that will provide a graphical interface to the unit conversion tool and the code that will launch it.

As we have done before, this is done by creating a directory named gui inside the unitconverter directory and a file named __init__.py inside the gui directory.

At this point, the code structure will be identical to that shown in the following image:

We must also install the libraries and tools required to develop the application. This includes the setuptools utility for packaging Python code and the Qt framework and supporting utilities, including Qt Designer, which...

Building the UI with Qt Designer

Start by launching Qt Designer using the following command:

designer-qt4

When Qt Designer first loads, you will see the New Form dialog box, as shown in the following screenshot:

Here, select the Main Window option and click Create. You will then see the new window open in the main Qt Designer window, as follows:

The first thing we need to do is to rename the window class name. This is done by first selecting QMainWindow in Object Inspector, and then changing the objectName property in Property Editor to UnitConverter. We will also change the WindowTitle property to "Unit Converter", as shown in the following screenshot:

Next, we will add a menu to the top menu bar of the main window. This will only have a single File menu. To add this, click on the Type Here section in the position of the top menu bar and enter &File. Here, & is used to designate the character that can be used to access the menu using the Alt key.

Add the option by pressing Enter, after...

Writing the UI code

Once the .ui file has been created with Qt Designer, we can now write the code that will manage the functionality behind the UI. This will be in a Python file of the same name as the .ui file in the unitconverter.gui package.

As always, we will start the Python file with the imports for the modules and functions used within the file:

import os.path
from PyQt4 import uic
from PyQt4.QtGui import QApplication, QMainWindow
from PyQt4.QtCore import SIGNAL
from ..Converter import get_table

Next, we will load the .ui file in order to create an instance of the user interface it defines. This is done by replacing the extension of the full file path of the Python source file with .ui.

ui_filename = os.path.splitext(__file__)[0] + '.ui'
ui_UnitConverter = uic.loadUiType(ui_filename)[0]

We will now define a class named UnitConverter, which provides the functionality for the user interface. This class will inherit from both QMainWindow and the user interface class created when the .ui...

Launching the UI

To launch the UI, we will add a simple function to the __init__.py file in the gui module:

import sys
from PyQt4.QtGui import QApplication
from UnitConverter import UnitConverter

The run_gui function is used to create a new Qt application and start a new instance of the unit converter user interface. This is the function that will be called by the launch command that we set in the package in the next section.

def run_gui():
    app = QApplication(sys.argv)
    ui_window = UnitConverter(None)
    ui_window.show()
    app.exec_()

Packaging the code

The last step is to modify the package to include the static files used to define the user interface and add the additional entry point for launching the user interface.

Firstly, we will modify the entry_points option to include the unitconverter-ui command, as follows:

entry_points = {
    'console_scripts': ['unitconvert=unitconverter.CLI:run_cli'],
    'gui_scripts': ['unitconverter-ui=unitconverter.gui:run_gui']
}

Next, we will add the package_data option to define the static files that we wish to include in the package:

package_data = {
    '': ['*.ui']
}

In this case, we are including any file with the .ui extension anywhere in the package.

Note

Note that the package_data option is technically only required when the include_package_data option has not been set to True.

Once the package has been modified, it can be installed using the following command:

sudo python setup.py install

When this completes, you can launch the UI using the following command. Note that you may need...

Summary

In this chapter, we looked at how to go about creating a graphical user interface using the Qt framework in Python and extended our unit conversion application to have a graphical interface.

This is the final chapter of this book and by now, I hope you have a good working knowledge of Python and the tools and libraries that come with it. You should now have a try at creating your own scripts and applications using the techniques covered throughout the book.