Exploring Qt Designer’s User Interface

When you first open up Qt Designer, you will notice a dialog in the center of the window with the title New Form. This dialog can be seen in Figure 7-2. From here you can select a template for creating a main window, a widget, or different kinds of dialog boxes. You can also choose what kinds of widgets to add to your project’s layout. Once you have selected a template and the application’s size, an empty window, also known as a form, will appear for you to modify.

At the top of the main window in Figure 7-1, you will notice Qt Designer’s menubar and toolbar for managing and editing your GUI. On the left side of the main window is the Widget Box dock widget, shown in Figure 7-3, which provides an organized list of layouts and widgets that can be dragged and dropped onto the required locations of your GUI. Other features for tinkering with the form can be accessed by right-clicking and opening up various context menus.

Another very useful dock widget is the Property Editor displayed in Figure 7-4. The properties of windows, widgets, and layouts such as an object’s name, size constraints, status tips, and more can all be altered using the Property Editor. Each widget you add to a form will have its own set of properties as well as ones that the widget inherits from other classes. To select a specific widget, you can either click the object in the form or the widget’s name in the Object Inspector dock widget.

The Object Inspector allows you to view all of the objects that are currently being used as well as their hierarchical layout. In Figure 7-5, you can see how the MainWindow is listed first, followed by the centralwidget and all of its widgets. If your form also has a menu or toolbar, then they will also be listed in the Object Inspector along with their corresponding actions.

In Qt Designer, it is also possible to create, edit, and delete signals and slots between objects using the Signal/Slot Editor. You should be aware that although you can connect signals and slots, you will not always be able to completely configure your widgets and will sometimes need to complete that yourself later in the code. The Signal/Slot Editor can be seen in Figure 7-6. Qt Designer also provides an editing mode for connecting widgets.

Items in a menu, submenu, or a toolbar are assigned commands by using actions. These actions can then be given a shortcut key, made checkable, and more. The Action Editor seen in Figure 7-7 gives you access to working with actions. For more information about assigning actions, refer to Chapter 5.

Finally, there is the Resource Browser which allows you specify and manage resources you need to use in your application. These resources can include images and icons. The Resource Browser dock widget can be seen in Figure 7-8.

If you need to add resources, you first need to create a new resource file. To do so, click the pencil in the top-left corner of the Resource Browser dock widget. This will open an Edit Resources dialog similar to the one in Figure 7-9. Next, click the Create New Resource button, navigate to the correct directory, and enter a name for the resource file. The file will be saved with a .qrc file extension, which stands for Qt Resource Collection and contains a list of all the resources used in your program. From here, create a prefix for managing the types of resources and begin adding files such as images and icons. When you are finished, click the OK button and the files will be added to the Resource Browser.

To access files in code found in the resource file, append “:/” to the beginning of the file’s location. For example, to use the new_file icon

self.label.setPixmap(QtGui.QPixmap(":/icons/images/new_file.png"))

Qt Designer’s Editing Modes

Explanation

In order to utilize the Ui_Keypad class that was created using Qt Designer, we create a new Python file, keypad_main.py. The KeypadGUI class created in keypad_main.py will inherit from the Ui_Keypad class.

We begin by importing the modules needed for this project, including the Ui_Keypad class and a new Qt class, QIntValidator. Qt provides a few classes that can be used to verify the types of input text. QIntValidator will be used to check if the values input into the QLineEdit widgets are integers.

In the initializeUI() method, local modifications are made to the QLineEdit widgets. Here the line edit widget’s focus policy is set to NoFocus so that users can only enter input in the correct order.

Then we connect the signals and slots for the button widgets. When each button is clicked, it sends a signal that is connected to the numberClicked() slot . Rather than creating a separate method for each button, the lambda function is used to reuse a method for signals. lambda calls the numberClicked() function and passes it a new parameter every time, in this case the specific text from each button.

When a user clicks a button, that button’s number needs to appear in the correct line edit widget from left to right. A widget receives focus if its text() value is empty. On MacOS, the repaint() method was used to update the text in the QLineEdit widgets. repaint() is used to force a widget to update itself.

Finally, if the user presses the # button, the method checkPasscode() checks if the user entered the passcode that matches self.passcode. If the input does not match, the line edit widgets are reset. This project could be designed so that the password is read from a file or from a database.

We have taken a look at the user interface class created from Qt Designer and at the file that inherits from it. The following section shows in detail how to create the GUI in Qt Designer.

Select a Form

Begin by opening up Qt Designer. Choose the Widget template from New Form dialog box. We will use the default screen size. Select Create. This opens up a blank GUI window with a grid of dots inside of the Qt Designer interface like in Figure 7-12.

Arrange Objects on the Form

From here you could immediately begin to adjust certain features of the form such as the window size or the background color. Instead, let’s begin by adding whatever widgets you may need for your project by dragging and dropping them into the main window from the Widget Box on the left of the window.

Start by selecting a QLabel widget and two QFrame containers and place them on the form like in Figure 7-13. You can resize the frames by clicking them and moving the edges of the frame. Then drag four QLineEdit widgets and arrange them in the top QFrame container . They will overlap, but that will be fixed when you apply layouts to the frames and the main window. When an object is dragged on top of a container that it can be placed into, the container will be highlighted to indicate that you can drop the widget inside. In addition, place twelve QPushButton widgets in the bottom frame.

The QFrame Class

The QFrame class is used as a container to group and surround widgets, or to act as placeholders in GUI applications. You can also apply a frame style to a QFrame container to visually separate it from nearby widgets. The following bit of code shows an example of how to create a frame object, modify its properties, and add a widget:

    def frameUI(self):

        self.frame = QFrame(self) # Create QFrame object

        size_policy = QSizePolicy(QSizePolicy.Expanding, QSizePolicy.Preferred)

        self.frame.setSizePolicy(size_policy)

        self.frame.setFrameShape(QFrame.Box)

        self.frame.setFrameShadow(QFrame.Raised)

        self.frame.setLineWidth(3)

        self.frame.setMidLineWidth(5)

        # Set layout for QFrame object

        self.grid = QGridLayout(self.frame)

        # Place other widgets inside the frame by

        # calling the addWidget() method on the layout.

        self.button = QPushButton("Enter", self)

        self.grid.addWidget(self.button, 0, 0, 1, 0)

A frame object can have a number of different styles of frames, including boxes, panels, or lines. The style of the frame can be adjusted using the setFrameShadow(), setLineWidth(), and setMidLineWidth() methods.

Apply Layouts in Qt Designer

The next step is to add layouts to all of the containers and to the main window, as well. This is important to make sure that items are placed and resized correctly. Layouts can be added either from the toolbar or from context menus. It is possible to add more widgets to existing layouts once they have been set.

Since Qt Designer uses a drag and drop interface, you only need to place the objects on the form close to where you want them to be and then select one of the four layouts – QGridLayout, QHBoxLayout, QVBoxLayout, or QFormLayout – and Qt Designer will take care of placing them by using a widget’s size hint. For more information about the types of layouts in PyQt, refer to Chapter 4.

Right-click the topmost frame to open a context menu. Scroll down to the last option, Lay out, and select Layout Out Horizontally. Do the same thing for the bottom frame, but this time select Layout Out in a Grid. This is demonstrated in Figure 7-14.

The top-level layout of a form can be set by right-clicking the form itself in the main window, and locating the layout you want to use. For the keypad GUI, select Layout Out Vertically. If the widgets are not aligned properly, you can also open the context menu, select Break Layout, and rearrange the widgets. Figure 7-15 shows the form with layouts applied.

Connect Signals and Slots in Qt Designer

Switch to the Edit Signals/Slots mode by selecting it from the toolbar. Qt Designer has a simple interface for connecting signals and slots. Click the object that will emit a signal and drag it to the object that will receive the signal, which is the slot.

For the keypad GUI, we are only making one set of connections. The remaining signals and slots will be handled by manually coding them. When the ‘∗’ button is clicked, we want to clear all four line edit widgets. Click the button and drag the red arrow to the first line edit object. A dialog box will appear (displayed in Figure 7-16) that allows you to select the methods for both the signal and the slot. Select clicked() for the button and clear() for the line edit. Finish connecting the other three line edit widgets. Refer to Figure 7-17 as a guide for connecting the widgets.

Tip

When connecting signals and slots, make sure to check the “Show signals and slots inherited from QWidget” checkbox to access more methods.

Setting Up Main Windows and Menus

Open Qt Designer and select the Main Window template from the Form Menu in Figure 7-2. This creates a main window with a menubar and status bar by default. You can see a main window form displayed in Figure 7-1.

Adding Menus and Submenus in Qt Designer

Adding menus in Qt Designer is simple. Double-click the Type Here placeholder text in the menubar and enter the title of the menu. This process is shown in Figure 7-18. If you want to create a shortcut, you can also add the ampersand, ‘&’, to the beginning of the menu’s text. This updates the menubar object in the Object Inspector dialog. You can also edit the menu’s properties in the Property Editor.

From here you can either add more menus, submenus, or actions. To add a submenu, first create a menu item. Then click the plus symbol next to the new entry in the menu. This will add a new menu that branches off of the existing menu entry. Double-click the Type Here placeholder and enter the text for the new item. Refer to Figure 7-19.

Adding Toolbars in Qt Designer

Toolbars can be added to the main window by right-clicking the form to open a context menu. Click the Add Tool Bar option.

The actions in toolbars are created as toolbar buttons and can be dragged between the menus and the toolbar. You can also add icons to the toolbar. This topic is covered in the “Display Images in Qt Designer” section. An example of the toolbar with an icon is shown in Figure 7-20.