Qt Documentation

Contents

WebEngine Quick Nano Browser

Quick Nano Browser demonstrates how to use the Qt WebEngine QML types to develop a small web browser application that consists of a browser window with a title bar, toolbar, tab view, and status bar. The web content is loaded in a web engine view within the tab view. If certificate errors occur, users are prompted for action in a message dialog. The status bar pops up to display the URL of a hovered link.

A web page can issue a request for being displayed in fullscreen mode. Users can allow full screen mode by using a toolbar button. They can leave fullscreen mode by using a keyboard shortcut. Additional toolbar buttons enable moving backwards and forwards in the browser history, reloading tab content, and opening a settings menu for enabling the following features: JavaScript, plugins, fullscreen mode, off the record, HTTP disc cache, autoloading images, and ignoring certificate errors.

Running the Example

To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.

Creating the Main Browser Window

When the browser main window is loaded, it creates an empty tab using the default profile. Each tab is a web engine view that fills the main window.

We create the main window in the BrowserWindow.qml file using the ApplicationWindow type:

ApplicationWindow {
    id: browserWindow
    property QtObject applicationRoot
    property Item currentWebView: tabs.currentIndex < tabs.count ? tabs.getTab(tabs.currentIndex).item : null
    ...
    width: 1300
    height: 900
    visible: true
    title: currentWebView && currentWebView.title

We use the TabView Qt Quick control to create an empty tab view that fills the main window. We set the tab active first, to make sure that the tab item is immediately instantiated:

    TabView {
        id: tabs
        function createEmptyTab(profile) {
            var tab = addTab("", tabComponent)
            // We must do this first to make sure that tab.active gets set so that tab.item gets instantiated immediately.
            tab.active = true
            tab.title = Qt.binding(function() { return tab.item.title })
            tab.item.profile = profile
            return tab
        }

        anchors.fill: parent
        Component.onCompleted: createEmptyTab(defaultProfile)

The tab contains a web engine view that loads web content:

        Component {
            id: tabComponent
            WebEngineView {
                id: webEngineView
                focus: true

We use the Action type to create new tabs:

    Action {
        shortcut: StandardKey.AddTab
        onTriggered: {
            tabs.createEmptyTab(currentWebView.profile)
            tabs.currentIndex = tabs.count - 1
            addressBar.forceActiveFocus();
            addressBar.selectAll();
        }

We use the TextField Qt Quick Control within a ToolBar to create an address bar that shows the current URL and where users can enter another URL:

    toolBar: ToolBar {
        id: navigationBar
            RowLayout {
                anchors.fill: parent;
    ...
                TextField {
                    id: addressBar
    ...
                    focus: true
                    Layout.fillWidth: true
                    text: currentWebView && currentWebView.url
                    onAccepted: currentWebView.url = utils.fromUserInput(text)
                }

Handling Certificate Errors

If the certificate of the site being loaded triggers a certificate error, we call the defer() QML method to pause the URL request and wait for user input:

                onCertificateError: {
                    error.defer()
                    sslDialog.enqueue(error)
                }

We use the MessageDialog type to prompt users to continue or cancel the loading of the web page. If users select Yes, we call the ignoreCertificateError() method to ignore the error and continue loading content from the URL. If users select No, we call the rejectCertificate() method to reject the request and stop loading content from the URL:

    MessageDialog {
        id: sslDialog

        property var certErrors: []
        icon: StandardIcon.Warning
        standardButtons: StandardButton.No | StandardButton.Yes
        title: "Server's certificate not trusted"
        text: "Do you wish to continue?"
        detailedText: "If you wish so, you may continue with an unverified certificate. " +
                      "Accepting an unverified certificate means " +
                      "you may not be connected with the host you tried to connect to.\n" +
                      "Do you wish to override the security check and continue?"
        onYes: {
            certErrors.shift().ignoreCertificateError()
            presentError()
        }
        onNo: reject()
        onRejected: reject()

        function reject(){
            certErrors.shift().rejectCertificate()
            presentError()
        }
        function enqueue(error){
            certErrors.push(error)
            presentError()
        }
        function presentError(){
            visible = certErrors.length > 0
        }
    }

Entering and Leaving Fullscreen Mode

We create a menu item for allowing fullscreen mode in a settings menu that we place on the tool bar. Also, we create an action for leaving fullscreen mode by using a keyboard shortcut. We call the accept() method to accept the fullscreen request. The methdod sets the isFullScreen property to be equal to the toggleOn property.

                onFullScreenRequested: {
                    if (request.toggleOn) {
                        webEngineView.state = "FullScreen"
                        browserWindow.previousVisibility = browserWindow.visibility
                        browserWindow.showFullScreen()
                        fullScreenNotification.show()
                    } else {
                        webEngineView.state = ""
                        browserWindow.visibility = browserWindow.previousVisibility
                        fullScreenNotification.hide()
                    }
                    request.accept()
                }

When entering fullscreen mode, we display a notification using the FullScreenNotification custom type that we create in FullScreenNotification.qml.

We use the Action type in the settings menu to create a shortcut for leaving fullscreen mode by pressing the escape key:

    Settings {
        id : appSettings
        property alias fullScreenSupportEnabled: fullScreenSupportEnabled.checked;
        property alias autoLoadIconsForPage: autoLoadIconsForPage.checked;
        property alias touchIconsEnabled: touchIconsEnabled.checked;
    }

    Action {
        shortcut: "Escape"
        onTriggered: {
            if (currentWebView.state == "FullScreen") {
                browserWindow.visibility = browserWindow.previousVisibility
                fullScreenNotification.hide()
                currentWebView.triggerWebAction(WebEngineView.ExitFullScreen);
            }
        }
    }

Files:

© 2017 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.