Adding application Help and About dialogs

In the previous parts we've added some basic UI elements, including menus and toolbars, and implemented basic loading & saving of HTML files to the browser view. Now, to complete the standard interface, we will add a Help menu with an About dialog using PyQt5.

Since our application is a web browser, it makes sense to show the help in the browser view. We have two options here: either include the help HTML with the application, and use our load HTML code from the previous tutorial. Or, load up a web page in the browser view.

Here we're doing the latter, redirecting the user to a web page (this tutorial!), but have a go at implementing loading an HTML file for custom offline help.

Creating the Help Menu with QAction

The first step is to create the Help menu and add QAction items for the About dialog and a homepage link. Each action gets an icon, status tip, and a connected slot method.

help_menu = self.menuBar().addMenu("&Help")

about_action = QAction(
    QIcon(os.path.join('icons','question.png')), "About Mozarella Ashbadger", self
)
about_action.setStatusTip("Find out more about Mozarella Ashbadger") # Hungry!
about_action.triggered.connect(self.about)
help_menu.addAction(about_action)

navigate_mozarella_action = QAction(
    QIcon(os.path.join('icons','lifebuoy.png')), "Mozarella Ashbadger Homepage", self
)
navigate_mozarella_action.setStatusTip("Go to Mozarella Ashbadger Homepage")
navigate_mozarella_action.triggered.connect(self.navigate_mozarella)
help_menu.addAction(navigate_mozarella_action)

Implementing the Slot Methods

Next we add two custom slot methods to handle the display of the dialog, and to load the "browser page" with more information.

The first method navigate_mozarella opens up a page with more information on the browser; the second creates and executes a custom QDialog class, AboutDialog.

def navigate_mozarella(self):
    self.browser.setUrl(
        QUrl("https://www.pythonguis.com/examples/python-web-browser/")
    )

def about(self):
    dlg = AboutDialog()
    dlg.exec_()

Building a Custom About Dialog with QDialog

The definition for the About dialog is given below. The structure follows that seen earlier, with a QDialogButtonBox and associated signals to handle user input, and a series of QLabels to display the application information and a logo.

The only trick here is adding all the elements to the layout, then iterating over them to set the alignment to the center in a single loop. This saves duplication for the individual sections.

class AboutDialog(QDialog):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        QBtn = QDialogButtonBox.Ok  # No cancel
        self.buttonBox = QDialogButtonBox(QBtn)
        self.buttonBox.accepted.connect(self.accept)
        self.buttonBox.rejected.connect(self.reject)

        layout = QVBoxLayout()

        title = QLabel("Mozarella Ashbadger")
        font = title.font()
        font.setPointSize(20)
        title.setFont(font)

        layout.addWidget(title)

        logo = QLabel()
        logo.setPixmap(QPixmap( os.path.join('icons','ma-icon-128.png')))
        layout.addWidget(logo)

        layout.addWidget(QLabel("Version 23.35.211.233232"))
        layout.addWidget(QLabel("Copyright 2015 Mozarella Inc."))

        for i in range(layout.count()):
            layout.itemAt(i).setAlignment(Qt.AlignHCenter)

        layout.addWidget(self.buttonBox)

        self.setLayout(layout)

This completes the basic user interface for our web browser. In the next part, we're going to take this functional web browser and extend it to implement tabbed web browsing -- allowing us to keep multiple documents open at the same time.

Have other improvements you'd like to make? Then do! It's the best way to learn.