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

New to Qt5 and Python? Check out the complete PyQt5 tutorial.

For [[ activeDiscount.description ]] I'm giving a [[ ]]% discount on my PyQt5 book and PySide2 book with the code [[ couponCode ]].

Read the free tutorial below or unlock the video

Unlock video course
This video is unlocked by your membership.

Adding application Help and About dialogs

Put some finishing touches to your application

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.

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 )

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 )

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.

def navigate_mozarella(self):
    self.browser.setUrl( QUrl("") )

def about(self):
    dlg = AboutDialog()

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.

class AboutDialog(QDialog):

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

        QBtn = QDialogButtonBox.Ok  # No cancel
        self.buttonBox = QDialogButtonBox(QBtn)

        layout = QVBoxLayout()

        title = QLabel("Mozarella Ashbadger")
        font = title.font()


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

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

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



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.

Enjoyed this?
You might enjoy my books.

Create GUI Applications is my hands-on guide to making desktop apps with Python.

Stop searching for how to create GUI applications with Python — it's all here.

I've been teaching PyQt for 8 years, helping thousands of developers just like you to bring their apps to life. Let's make your project a success!

PyQt5 Book PySide2 Book