/**************************************************************************** ** ** Copyright (C) 2015 The Qt Company Ltd. ** Contact: http://www.qt.io/licensing/ ** ** This file is part of the documentation of the Qt Toolkit. ** ** $QT_BEGIN_LICENSE:FDL$ ** Commercial License Usage ** Licensees holding valid commercial Qt licenses may use this file in ** accordance with the commercial license agreement provided with the ** Software or, alternatively, in accordance with the terms contained in ** a written agreement between you and The Qt Company. For licensing terms ** and conditions see http://www.qt.io/terms-conditions. For further ** information use the contact form at http://www.qt.io/contact-us. ** ** GNU Free Documentation License Usage ** Alternatively, this file may be used under the terms of the GNU Free ** Documentation License version 1.3 as published by the Free Software ** Foundation and appearing in the file included in the packaging of ** this file. Please review the following information to ensure ** the GNU Free Documentation License version 1.3 requirements ** will be met: http://www.gnu.org/copyleft/fdl.html. ** $QT_END_LICENSE$ ** ****************************************************************************/ /*! \example webengine/quicknanobrowser \title WebEngine Quick Nano Browser \ingroup webengine-examples \brief A web browser implemented using the WebEngineView QML type. \image quicknanobrowser-demo.jpg \e {Quick Nano Browser} demonstrates how to use the \l{Qt WebEngine QML Types} {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. \include examples-run.qdocinc \section1 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 \e BrowserWindow.qml file using the ApplicationWindow type: \quotefromfile webengine/quicknanobrowser/BrowserWindow.qml \skipto ApplicationWindow \printuntil currentWebView \dots \skipto width \printuntil 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: \skipto TabView \printuntil Component.onCompleted The tab contains a web engine view that loads web content: \printuntil focus We use the \l Action type to create new tabs: \quotefromfile webengine/quicknanobrowser/BrowserWindow.qml \skipto reload \skipto Action \printuntil } We use the \l TextField Qt Quick Control within a \l ToolBar to create an address bar that shows the current URL and where users can enter another URL: \skipto toolBar \printuntil anchors.fill \dots \skipto TextField \printuntil addressBar \dots \skipto focus \printuntil /^\ {16}\}/ \section1 Handling Certificate Errors If the certificate of the site being loaded triggers a certificate error, we call the \l{WebEngineCertificateError::}{defer()} QML method to pause the URL request and wait for user input: \quotefromfile webengine/quicknanobrowser/BrowserWindow.qml \skipto onCertificateError \printuntil } We use the MessageDialog type to prompt users to continue or cancel the loading of the web page. If users select \uicontrol Yes, we call the \l{WebEngineCertificateError::}{ignoreCertificateError()} method to ignore the error and continue loading content from the URL. If users select \uicontrol No, we call the \l{WebEngineCertificateError::}{rejectCertificate()} method to reject the request and stop loading content from the URL: \skipto MessageDialog \printuntil /^\ {4}\}/ \section1 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 \l{WebEngineFullScreenRequest::}{accept()} method to accept the fullscreen request. The methdod sets the \l{WebEngineView::}{isFullScreen} property to be equal to the \l{WebEngineFullScreenRequest::}{toggleOn} property. \quotefromfile webengine/quicknanobrowser/BrowserWindow.qml \skipto onFullScreenRequested \printuntil /^\ {16}\}/ When entering fullscreen mode, we display a notification using the FullScreenNotification custom type that we create in \e FullScreenNotification.qml. We use the \l Action type in the settings menu to create a shortcut for leaving fullscreen mode by pressing the escape key: \quotefromfile webengine/quicknanobrowser/BrowserWindow.qml \skipto Settings \printuntil appSettings \skipto fullScreenSupportEnabled \printuntil Action \skipto Escape \printuntil /^\ {4}\}/ */