/****************************************************************************
|
**
|
** Copyright (C) 2016 The Qt Company Ltd.
|
** Contact: https://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 https://www.qt.io/terms-conditions. For further
|
** information use the contact form at https://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: https://www.gnu.org/licenses/fdl-1.3.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 disk 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{FullScreenRequest::}{accept()} method to accept the fullscreen request.
|
The methdod sets the \l{WebEngineView::}{isFullScreen} property to be equal to the
|
\l{FullScreenRequest::}{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}\}/
|
|
\section1 Files and Attributions
|
|
The example uses icons from the Tango Icon Library:
|
|
\table
|
\row
|
\li \l{quicknanobrowser-tango}{Tango Icon Library}
|
\li Public Domain
|
\endtable
|
*/
|
