Read the free tutorial below or

Get the Video

Adding application Help and About dialogs
Put some finishing touches to your application

Mozzarella Ashbadger course

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.

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 a HTML file for custom offline help.

python
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)

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_mozzarella opens up a page with more information on the browser, the second creates and executes a custom QDialog class AboutDialog.

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

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

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 iterate over them to set the alignment to the center in a single loop. This saves duplication for the individual sections.

python
class AboutDialog(QDialog):

    def __init__(self, *args, **kwargs):
        super(AboutDialog, self).__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(0, layout.count() ):
            layout.itemAt(i).setAlignment( Qt.AlignHCenter )

        layout.addWidget(self.buttonBox)

        self.setLayout(layout)

The 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 implemented tabbed web browsing -- allowing you 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.

Create GUI Applications with Python & Qt6
The easy way to create desktop applications

My complete guide, updated for 2021 & PySide6. Everything you need build real apps.

Downloadable ebook (PDF, ePub) & Complete Source code

To support developers in [[ countryRegion ]] I give a [[ localizedDiscount[couponCode] ]]% discount on all books and courses.

[[ activeDiscount.description ]] I'm giving a [[ activeDiscount.discount ]]% discount on all books and courses.

Continue reading

QtWebEngineWidgets, the new browser API in PyQt 5.6  pyqt

With the release of Qt 5.5 the Qt WebKit API was deprecated and replaced with the new QtWebEngine API, based on Chromium. The WebKit API was subsequently removed from Qt entirely with the release of Qt 5.6 in mid-2016. The change to use Chromium for web widgets within … More