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 & Qt5
The easy way to create desktop applications

The complete guide to building GUI applications with PySide2. From the basics of creating a desktop window to the key features you need to build real apps.

Downloadable ebook (PDF, ePub) & Complete Source code

To support developers in [[ countryRegion ]] I give a [[ localizedDiscount[couponCode] ]]% discount with the code [[ couponCode ]] — Enjoy!

For [[ activeDiscount.description ]] I'm giving a [[ activeDiscount.discount ]]% discount with the code [[ couponCode ]] — Enjoy!

Complete Mark As Complete Next

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 Qt was motivated by improved cross-platform support, multimedia and HTML5 features, together with a rapid development pace offering better future proofing. The benefits were considered enough to warrant breaking API changes in a non-major release, rather than waiting for Qt 6. The API for `QtWebEngineWidgets` was designed to make it — more or less — a drop-in replacement for it's predecessor, and this is also the case when using the API from PyQt5. However, the opportunity was taken to make a number of improvements to the API, which require changes to existing code. These changes include simplification of the page model and the conversion of HTML export and printing methods to be asynchronous. This is good news since it prevents either of these operations from blocking your application execution. This course gives a quick walkthrough of the changes, including working examples with the new API. Goodbye .mainFrame() In the WebKit based API, each page was represented by a QWebPage object, which in turn contained frames of content. This reflects the origin of this API during a time when HTML frames were thing, used to break a document down into grid of constituent parts, each loaded as a separate source. The .mainFrame() of the page refers to the browser window, as a QWebFrame object which can itself contain multiple child frames, or HTML content. To get the HTML content of the page we would previously have to access it via — python browser.page().mainFrame().toHtml() With the use of frames in web pages falling out favour, and being deprecated in HTML5, this API becomes an unnecessary complication. Now the call to .page() returns a QWebEnginePage object, which directly contains the HTML itself. python browser.page().toHtml() If you try to use the above to actually get the HTML content of a page, it won't work. That's because this method has been changed to use an asynchronous callback. See the next section. Asynchronous toHtml Generating the HTML for a page can take some time, particularly on large pages. Not a really long time, but enough to make your application stutter. To avoid this, the .toHtml() method on QWebEnginePage has been converted to be asynchronous. To receive a copy of the HTML content you call .toHtml() as before, but now pass in a callback function to receive the HTML once the generation has completed. The initial completes immediately and so does not block your application execution. The following example shows a save method using a small callback function write_html_to_file to complete the process of writing the page HTML to the selected file location. python def save_file(self): filename, _ = QFileDialog.getSaveFileName(self, "Save Page As", "", "Hypertext Markup Language (*.htm *html);;" "All files (*.*)") if filename: def write_html_to_file(html): with open(filename, 'w') as f: f.write(html) self.browser.page().toHtml(write_html_to_file) The `write_html_to_file` method will be called whenever the generation of the HTML has completed, assuming there are no errors in doing so. You can pass any Python function/method in as a callback. Asynchronous Printing & Print to PDF In the previous API printing was also handled from the QWebFrame object, via the print slot (print_ in PyQt due to print being a keyword in Python 2.7). This too has been moved to the QWebEnginePage object, now as a normal method rather than a slot. Because PyQt5 is Python 3 only, the method is now named `print()`, without a trailing underscore. To print a page we can call .print() on any QWebEnginePage object, passing in an instance of QPrinter to print to, and a callback function to call once complete. The QPrinter instance can be configured using a QPrintDialog as normal, however you must ensure the printer object is not cleaned up/removed before the end of the printing process. While you can generate a new `QPrinter` object from a call to `QPrintDialog`, this will be cleared up by Qt even if you hold onto a Python reference, leading to a segmentation fault. The simplest solution is just to create a `QPrinter` object at the start of your application and re-use it. First create an instance of QPrinter on your main window during initialization, e.g. python self.printer = QPrinter() Then you can use the following to show a print dialog and (optionally) print a page: python def print_page(self): dlg = QPrintDialog(self.printer) if dlg.exec_(): self.browser.page().print(self.printer, self.print_completed) def print_completed(self, success): pass # Do something in here, maybe update the status bar? The callback is required, but your not required to do anything in it. It receives a bool value indicating the success/failure of the printing process. Print to PDF The new QWebEnginePage API also provides a little bonus in the form of PDF printing from HTML pages via printToPdf. This method accepts either a str filename to write the resulting PDF to, or a callback function to receive the rendered PDF as a QByteArray. python browser.page().printToPdf(path) # render to PDF and save to path Existing files will be overwritten when writing to file. While this operation is is asynchronous there is no callback. Instead the notification of success/failure comes via a signal on the page object pdfPrintingFinished, which receives the file path string and a success bool. This signal is not triggered when using a callback: python def rendered_pdf_callback(b): print(b) browser.page().printToPdf(rendered_pdf_callback) # render to PDF and send as `QByteArray` to `rendered_pdf_callback` Paper formats and margins can all be configured by passing additional parameters. More