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 )
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
.
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.
Purchasing Power Parity
Developers in [[ country ]] get [[ discount.discount_pc ]]% OFF on all books & courses with code [[ discount.coupon_code ]]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(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.
PyQt6 Crash Course by Martin Fitzpatrick — The important parts of PyQt6 in bite-size chunks
Have other improvements you'd like to make? Then do! It's the best way to learn.
Create GUI Applications with Python & Qt5 by Martin Fitzpatrick — (PySide2 Edition) The hands-on guide to making apps with Python — Over 10,000 copies sold!