Time for action – generating the UI code

PyQt4 comes with an application called QT Designer. It is a GUI designer for QT-based applications and provides a quick way to develop a graphical user interface containing some basic widgets. With this, let's see how the Thumbnail Maker dialog looks in QT Designer and then run a command to generate Python source code from the .ui file.

1. Download the thumbnailMaker.ui file from the Packt website.
2. Start the QT Designer application that comes with PyQt4 installation.
3. Open the file thumbnailMaker.ui in QT Designer. Notice the red-colored borders around the UI elements in the dialog. These borders indicate a 'layout' in which the widgets are arranged. Without a layout in place, the UI elements may appear distorted when you run the application and, for instance, resize the dialog. Three types of QLayouts are used, namely Horizontal, Vertical, and Grid layout.
   
4. You can add new UI elements, such as a QCheckbox or a QLabel, by dragging and dropping it from the 'Widget Box' of QT Designer. It is located in the left panel by default.
5. Click on the field next to the label "Input file". In the right-hand panel of QT Designer, there is a Property Editor that displays the properties of the selected widget (in this case it's a QLineEdit). This is shown in the following illustration. The Property Editor allows us to assign values to various attributes such as the objectName, width, and height of the widget, and so on.

   Qt Designer shows the details of the selected widget in Property Editor.

   
6. QT designer saves the file with extension .ui. To convert this into Python source code, PyQt4 provides a conversion utility called pyuic4. On Windows XP, for standard Python installation, it is present at the following location—C:\Python26\Lib\site-packages\PyQt4\pyuic4.bat. Add this path to your environment variable. Alternatively specify the whole path each time you want to convert ui file to Python source file. The conversion utility can be run from the command prompt as:

   pyuic4 thumbnailMaker.ui -o Ui_ThumbnailMakerDialog.py

7. This script will generate Ui_ThumbnailMakerDialog.py with all the GUI elements defined. You can further review this file to understand how the UI elements are defined.

What just happened?

We learned how to autogenerate the Python source code defining UI elements of Thumbnail Maker Dialog from a Qt designer file.

Have a go hero – tweak UI of Thumbnail Maker dialog

Modify the thumbnailMaker.ui file in QT Designer and implement the following list of things in the Thumbnail Maker dialog.

1. Change the color of all the line edits in the left panel to pale yellow.
2. Tweak the default file extension displayed in the Output file Format combobox such that the first option is .png instead of .jpeg

   Tip

   Double click on this combobox to edit it.

3. Add new option .tiff to the output format combobox.
4. Align the OK and Cancel buttons to the right corner.

   Tip

   You will need to break layouts, move the spacer around, and recreate the layouts.

5. Set the range of rotation angle 0 to 360 degrees instead of the current -180 to +180 degrees.

After this, create Ui_ThumbnailMakerDialog.py by running the pyuic4 script and then run the Thumbnail Maker application.

Connecting the widgets

In the earlier section, the Python source code representing UI was automatically generated using the pyuic4 script. This, however, only has the widgets defined and placed in a nice layout. We need to teach these widgets what they should do when a certain event occurs. To do this, QT's slots and signals will be used. A signal is emitted when a particular GUI event occurs. For example, when the user clicks on the OK button, internally, a clicked() signal is emitted. A slot is a function that is called when a particular signal is emitted. Thus, in this example, it will call a specified method, whenever the OK button is clicked. See PyQt4 documentation for a complete list of available signals for various widgets.