diff options
Diffstat (limited to 'examples/webenginewidgets')
114 files changed, 2789 insertions, 1772 deletions
diff --git a/examples/webenginewidgets/CMakeLists.txt b/examples/webenginewidgets/CMakeLists.txt index d9b12607f..07ffa9bc4 100644 --- a/examples/webenginewidgets/CMakeLists.txt +++ b/examples/webenginewidgets/CMakeLists.txt @@ -1,16 +1,17 @@ -qt_internal_add_example(minimal) +# Copyright (C) 2022 The Qt Company Ltd. +# SPDX-License-Identifier: BSD-3-Clause + qt_internal_add_example(contentmanipulation) qt_internal_add_example(cookiebrowser) qt_internal_add_example(notifications) qt_internal_add_example(simplebrowser) -qt_internal_add_example(stylesheetbrowser) +qt_internal_add_example(push-notifications) qt_internal_add_example(videoplayer) -qt_internal_add_example(webui) if(QT_FEATURE_webengine_geolocation) qt_internal_add_example(maps) endif() if(QT_FEATURE_webengine_webchannel) - qt_internal_add_example(markdowneditor) + qt_internal_add_example(recipebrowser) endif() if(QT_FEATURE_webengine_printing_and_pdf) qt_internal_add_example(printme) diff --git a/examples/webenginewidgets/contentmanipulation/CMakeLists.txt b/examples/webenginewidgets/contentmanipulation/CMakeLists.txt index b53274507..7edf62044 100644 --- a/examples/webenginewidgets/contentmanipulation/CMakeLists.txt +++ b/examples/webenginewidgets/contentmanipulation/CMakeLists.txt @@ -1,3 +1,6 @@ +# Copyright (C) 2022 The Qt Company Ltd. +# SPDX-License-Identifier: BSD-3-Clause + cmake_minimum_required(VERSION 3.16) project(contentmanipulation LANGUAGES CXX) diff --git a/examples/webenginewidgets/cookiebrowser/CMakeLists.txt b/examples/webenginewidgets/cookiebrowser/CMakeLists.txt index c5c6b41d3..e606e848d 100644 --- a/examples/webenginewidgets/cookiebrowser/CMakeLists.txt +++ b/examples/webenginewidgets/cookiebrowser/CMakeLists.txt @@ -1,3 +1,6 @@ +# Copyright (C) 2022 The Qt Company Ltd. +# SPDX-License-Identifier: BSD-3-Clause + cmake_minimum_required(VERSION 3.16) project(cookiebrowser LANGUAGES CXX) diff --git a/examples/webenginewidgets/html2pdf/CMakeLists.txt b/examples/webenginewidgets/html2pdf/CMakeLists.txt index 7e3758d1a..034b89102 100644 --- a/examples/webenginewidgets/html2pdf/CMakeLists.txt +++ b/examples/webenginewidgets/html2pdf/CMakeLists.txt @@ -1,3 +1,6 @@ +# Copyright (C) 2022 The Qt Company Ltd. +# SPDX-License-Identifier: BSD-3-Clause + cmake_minimum_required(VERSION 3.16) project(html2pdf LANGUAGES CXX) diff --git a/examples/webenginewidgets/maps/CMakeLists.txt b/examples/webenginewidgets/maps/CMakeLists.txt index 62eb04e42..f6e6b94ea 100644 --- a/examples/webenginewidgets/maps/CMakeLists.txt +++ b/examples/webenginewidgets/maps/CMakeLists.txt @@ -1,3 +1,6 @@ +# Copyright (C) 2022 The Qt Company Ltd. +# SPDX-License-Identifier: BSD-3-Clause + cmake_minimum_required(VERSION 3.16) project(maps LANGUAGES CXX) diff --git a/examples/webenginewidgets/maps/doc/src/maps.qdoc b/examples/webenginewidgets/maps/doc/src/maps.qdoc index 547572750..ad727e165 100644 --- a/examples/webenginewidgets/maps/doc/src/maps.qdoc +++ b/examples/webenginewidgets/maps/doc/src/maps.qdoc @@ -22,6 +22,12 @@ geolocation requests are denied by default. This example demonstrates the steps an application must take in order to start accepting these requests. + \note On Windows 11, enable settings to grant the application access to + Windows location services. In the Settings App under + \uicontrol {Privacy & Security} > \uicontrol {Location}, enable \uicontrol + {Location services}, \uicontrol {Let apps access your location} and \uicontrol + {Let desktop apps access your location}. + \include examples-run.qdocinc \section1 The Code diff --git a/examples/webenginewidgets/markdowneditor/CMakeLists.txt b/examples/webenginewidgets/markdowneditor/CMakeLists.txt deleted file mode 100644 index c1a0974a0..000000000 --- a/examples/webenginewidgets/markdowneditor/CMakeLists.txt +++ /dev/null @@ -1,55 +0,0 @@ -cmake_minimum_required(VERSION 3.16) -project(markdowneditor LANGUAGES CXX) - -set(CMAKE_AUTOMOC ON) -set(CMAKE_AUTOUIC ON) - -if(NOT DEFINED INSTALL_EXAMPLESDIR) - set(INSTALL_EXAMPLESDIR "examples") -endif() - -set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/webenginewidgets/markdowneditor") - -find_package(Qt6 REQUIRED COMPONENTS Core Gui WebChannel WebEngineWidgets) - -qt_add_executable(markdowneditor - document.cpp document.h - main.cpp - mainwindow.cpp mainwindow.h mainwindow.ui - previewpage.cpp previewpage.h -) - -set_target_properties(markdowneditor PROPERTIES - WIN32_EXECUTABLE TRUE - MACOSX_BUNDLE TRUE -) - -target_link_libraries(markdowneditor PUBLIC - Qt::Core - Qt::Gui - Qt::WebChannel - Qt::WebEngineWidgets -) - -# Resources: -set(markdowneditor_resource_files - "resources/3rdparty/markdown.css" - "resources/3rdparty/marked.js" - "resources/default.md" - "resources/index.html" -) - -qt_add_resources(markdowneditor "markdowneditor" - PREFIX - "/" - BASE - "resources" - FILES - ${markdowneditor_resource_files} -) - -install(TARGETS markdowneditor - RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}" - BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}" - LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}" -) diff --git a/examples/webenginewidgets/markdowneditor/doc/images/markdowneditor-example.png b/examples/webenginewidgets/markdowneditor/doc/images/markdowneditor-example.png Binary files differdeleted file mode 100644 index 9f456c4db..000000000 --- a/examples/webenginewidgets/markdowneditor/doc/images/markdowneditor-example.png +++ /dev/null diff --git a/examples/webenginewidgets/markdowneditor/doc/src/markdowneditor.qdoc b/examples/webenginewidgets/markdowneditor/doc/src/markdowneditor.qdoc deleted file mode 100644 index f8c67fd63..000000000 --- a/examples/webenginewidgets/markdowneditor/doc/src/markdowneditor.qdoc +++ /dev/null @@ -1,159 +0,0 @@ -// Copyright (C) 2017 The Qt Company Ltd. -// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only - -/*! - \example webenginewidgets/markdowneditor - \title WebEngine Markdown Editor Example - \ingroup webengine-widgetexamples - \brief Demonstrates how to integrate a web engine in a hybrid desktop - application. - - \image markdowneditor-example.png - - \e {Markdown Editor} demonstrates how to use QWebChannel and JavaScript - libraries to provide a rich text preview tool for a custom markup language. - - \l{http://daringfireball.net/projects/markdown/}{Markdown} is a lightweight - markup language with a plain text formatting syntax. - Some services, such as \l{http://github.com}{github}, acknowledge the - format, and render the content as rich text when viewed in a browser. - - The Markdown Editor main window is split into an editor and a preview area. - The editor supports the Markdown syntax and is implemented by using - QPlainTextEdit. The document is rendered as rich text in the preview area, - which is implemented by using QWebEngineView. To render the text, the - Markdown text is converted to HTML format with the help of a JavaScript - library inside the web engine. The preview is updated from the editor - through QWebChannel. - - \include examples-run.qdocinc - - \section1 Exposing Document Text - - Because we expose the current Markdown text to be rendered to the web engine - through QWebChannel, we need to somehow make the current text available - through the Qt metatype system. This is done by using a dedicated - \c Document class that exposes the document text as a \c{Q_PROPERTY}: - - \quotefromfile webenginewidgets/markdowneditor/document.h - \skipto class Document - \printto #endif - - The \c Document class wraps a QString to be set on the C++ side with - the \c setText() method and exposes it at runtime as a \c text property - with a \c textChanged signal. - - We define the \c setText method as follows: - - \quotefromfile webenginewidgets/markdowneditor/document.cpp - \skipto Document::setText - \printuntil - - \section1 Previewing Text - - We implement our own \c PreviewPage class that publicly inherits from - \c QWebEnginePage: - - \quotefromfile webenginewidgets/markdowneditor/previewpage.h - \skipto class PreviewPage - \printto #endif - - We reimplement the virtual \c acceptNavigationRequest method to - stop the page from navigating away from the current document. Instead, - we redirect external links to the system browser: - - \quotefromfile webenginewidgets/markdowneditor/previewpage.cpp - \skipto acceptNavigationRequest - \printuntil - - \section1 Creating the Main Window - - The \c MainWindow class inherits the QMainWindow class: - - \quotefromfile webenginewidgets/markdowneditor/mainwindow.h - \skipto class MainWindow : - \printto endif - - The class declares private slots that match the actions in the menu, - as well as the \c isModified() helper method. - - The actual layout of the main window is specified in a \c .ui file. - The widgets and actions are available at runtime in the \c ui member - variable. - - \c m_filePath holds the file path to the currently loaded document. - \c m_content is an instance of the \c Document class. - - The actual setup of the different objects is done in the \c MainWindow - constructor: - - \quotefromfile webenginewidgets/markdowneditor/mainwindow.cpp - \skipto MainWindow::MainWindow - \printto PreviewPage - - The constructor first calls \c setupUi to construct the widgets and menu - actions according to the UI file. The text editor font is set to one - with a fixed character width, and the QWebEngineView widget is told not - to show a context menu. - - \printto connect - - Here the constructor makes sure our custom - \c PreviewPage is used by the QWebEngineView instance in \c{ui->preview}. - - \printto ui->preview - - Here the \c textChanged signal of the editor is connected to a lambda that - updates the text in \c m_content. This object is then exposed to the JS side - by \c QWebChannel under the name \c{content}. - - \printto connect - - Now we can actually load the \e index.html file from the - resources. For more information about the file, see - \l{Creating an Index File}. - - \printto defaultTextFile - - The menu items are connected to the corresponding member slots. The - \uicontrol Save item is activated or deactivated depending on whether - the user has edited the content. - - \printuntil } - - Finally, we load a default document \e default.md from the resources. - - \section1 Creating an Index File - - \quotefile webenginewidgets/markdowneditor/resources/index.html - - In the \e index.html, we load a custom stylesheet and two JavaScript - libraries. \l{https://bitbucket.org/kevinburke/markdowncss/src/master/}{markdown.css} is - a markdown-friendly stylesheet created by Kevin Burke. - \l{https://github.com/chjj/marked}{marked.js} is a markdown parser and - compiler designed for speed written by Christopher Jeffrey and - \e qwebchannel.js is part of the \l{QWebChannel} module. - - In the \c <body> element we first define a \c placeholder element, and - make it available as a JavaScript variable. We then define the \c updateText - helper method that updates the content of \c placeholder with the HTML - that the JavaScript method \c marked() returns. - - Finally, we set up the web channel to access the \c content proxy object - and make sure that \c updateText() is called whenever \c content.text - changes. - - \section1 Files and Attributions - - The example bundles the following code with third-party licenses: - - \table - \row - \li \l{markdowneditor-marked}{Marked} - \li MIT License - \row - \li \l{markdowneditor-markdowncss}{Markdown.css} - \li Apache License 2.0 - \endtable -*/ - diff --git a/examples/webenginewidgets/markdowneditor/document.cpp b/examples/webenginewidgets/markdowneditor/document.cpp deleted file mode 100644 index 8ece76509..000000000 --- a/examples/webenginewidgets/markdowneditor/document.cpp +++ /dev/null @@ -1,12 +0,0 @@ -// Copyright (C) 2016 The Qt Company Ltd. -// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause - -#include "document.h" - -void Document::setText(const QString &text) -{ - if (text == m_text) - return; - m_text = text; - emit textChanged(m_text); -} diff --git a/examples/webenginewidgets/markdowneditor/document.h b/examples/webenginewidgets/markdowneditor/document.h deleted file mode 100644 index f4eabbdaa..000000000 --- a/examples/webenginewidgets/markdowneditor/document.h +++ /dev/null @@ -1,26 +0,0 @@ -// Copyright (C) 2016 The Qt Company Ltd. -// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause - -#ifndef DOCUMENT_H -#define DOCUMENT_H - -#include <QObject> -#include <QString> - -class Document : public QObject -{ - Q_OBJECT - Q_PROPERTY(QString text MEMBER m_text NOTIFY textChanged FINAL) -public: - explicit Document(QObject *parent = nullptr) : QObject(parent) {} - - void setText(const QString &text); - -signals: - void textChanged(const QString &text); - -private: - QString m_text; -}; - -#endif // DOCUMENT_H diff --git a/examples/webenginewidgets/markdowneditor/main.cpp b/examples/webenginewidgets/markdowneditor/main.cpp deleted file mode 100644 index 98e76bfba..000000000 --- a/examples/webenginewidgets/markdowneditor/main.cpp +++ /dev/null @@ -1,19 +0,0 @@ -// Copyright (C) 2016 The Qt Company Ltd. -// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause - -#include "document.h" -#include "mainwindow.h" - -#include <QApplication> -#include <QFile> - -int main(int argc, char *argv[]) -{ - QCoreApplication::setOrganizationName("QtExamples"); - QApplication a(argc, argv); - - MainWindow window; - window.show(); - - return a.exec(); -} diff --git a/examples/webenginewidgets/markdowneditor/mainwindow.cpp b/examples/webenginewidgets/markdowneditor/mainwindow.cpp deleted file mode 100644 index a4ef50a31..000000000 --- a/examples/webenginewidgets/markdowneditor/mainwindow.cpp +++ /dev/null @@ -1,147 +0,0 @@ -// Copyright (C) 2016 The Qt Company Ltd. -// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause - -#include "mainwindow.h" -#include "previewpage.h" -#include "ui_mainwindow.h" - -#include <QFile> -#include <QFileDialog> -#include <QFontDatabase> -#include <QMessageBox> -#include <QStatusBar> -#include <QTextStream> -#include <QWebChannel> - -MainWindow::MainWindow(QWidget *parent) : - QMainWindow(parent), - ui(new Ui::MainWindow) -{ - ui->setupUi(this); - ui->editor->setFont(QFontDatabase::systemFont(QFontDatabase::FixedFont)); - ui->preview->setContextMenuPolicy(Qt::NoContextMenu); - - PreviewPage *page = new PreviewPage(this); - ui->preview->setPage(page); - - connect(ui->editor, &QPlainTextEdit::textChanged, - [this]() { m_content.setText(ui->editor->toPlainText()); }); - - QWebChannel *channel = new QWebChannel(this); - channel->registerObject(QStringLiteral("content"), &m_content); - page->setWebChannel(channel); - - ui->preview->setUrl(QUrl("qrc:/index.html")); - - connect(ui->actionNew, &QAction::triggered, this, &MainWindow::onFileNew); - connect(ui->actionOpen, &QAction::triggered, this, &MainWindow::onFileOpen); - connect(ui->actionSave, &QAction::triggered, this, &MainWindow::onFileSave); - connect(ui->actionSaveAs, &QAction::triggered, this, &MainWindow::onFileSaveAs); - connect(ui->actionExit, &QAction::triggered, this, &QWidget::close); - - connect(ui->editor->document(), &QTextDocument::modificationChanged, - ui->actionSave, &QAction::setEnabled); - - QFile defaultTextFile(":/default.md"); - defaultTextFile.open(QIODevice::ReadOnly); - ui->editor->setPlainText(defaultTextFile.readAll()); -} - -MainWindow::~MainWindow() -{ - delete ui; -} - -void MainWindow::openFile(const QString &path) -{ - QFile f(path); - if (!f.open(QIODevice::ReadOnly)) { - QMessageBox::warning(this, windowTitle(), - tr("Could not open file %1: %2").arg( - QDir::toNativeSeparators(path), f.errorString())); - return; - } - m_filePath = path; - ui->editor->setPlainText(f.readAll()); - statusBar()->showMessage(tr("Opened %1").arg(QDir::toNativeSeparators(path))); -} - -bool MainWindow::isModified() const -{ - return ui->editor->document()->isModified(); -} - -void MainWindow::onFileNew() -{ - if (isModified()) { - QMessageBox::StandardButton button = QMessageBox::question(this, windowTitle(), - tr("You have unsaved changes. Do you want to create a new document anyway?")); - if (button != QMessageBox::Yes) - return; - } - - m_filePath.clear(); - ui->editor->setPlainText(tr("## New document")); - ui->editor->document()->setModified(false); -} - -void MainWindow::onFileOpen() -{ - if (isModified()) { - QMessageBox::StandardButton button = QMessageBox::question(this, windowTitle(), - tr("You have unsaved changes. Do you want to open a new document anyway?")); - if (button != QMessageBox::Yes) - return; - } - - QFileDialog dialog(this, tr("Open MarkDown File")); - dialog.setMimeTypeFilters({"text/markdown"}); - dialog.setAcceptMode(QFileDialog::AcceptOpen); - if (dialog.exec() == QDialog::Accepted) - openFile(dialog.selectedFiles().constFirst()); -} - -void MainWindow::onFileSave() -{ - if (m_filePath.isEmpty()) { - onFileSaveAs(); - return; - } - - QFile f(m_filePath); - if (!f.open(QIODevice::WriteOnly | QIODevice::Text)) { - QMessageBox::warning(this, windowTitle(), - tr("Could not write to file %1: %2").arg( - QDir::toNativeSeparators(m_filePath), f.errorString())); - return; - } - QTextStream str(&f); - str << ui->editor->toPlainText(); - - ui->editor->document()->setModified(false); - - statusBar()->showMessage(tr("Wrote %1").arg(QDir::toNativeSeparators(m_filePath))); -} - -void MainWindow::onFileSaveAs() -{ - QFileDialog dialog(this, tr("Save MarkDown File")); - dialog.setMimeTypeFilters({"text/markdown"}); - dialog.setAcceptMode(QFileDialog::AcceptSave); - dialog.setDefaultSuffix("md"); - if (dialog.exec() != QDialog::Accepted) - return; - - m_filePath = dialog.selectedFiles().constFirst(); - onFileSave(); -} - -void MainWindow::closeEvent(QCloseEvent *e) -{ - if (isModified()) { - QMessageBox::StandardButton button = QMessageBox::question(this, windowTitle(), - tr("You have unsaved changes. Do you want to exit anyway?")); - if (button != QMessageBox::Yes) - e->ignore(); - } -} diff --git a/examples/webenginewidgets/markdowneditor/mainwindow.h b/examples/webenginewidgets/markdowneditor/mainwindow.h deleted file mode 100644 index 271664852..000000000 --- a/examples/webenginewidgets/markdowneditor/mainwindow.h +++ /dev/null @@ -1,45 +0,0 @@ -// Copyright (C) 2016 The Qt Company Ltd. -// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause - -#ifndef MAINWINDOW_H -#define MAINWINDOW_H - -#include "document.h" - -#include <QMainWindow> -#include <QString> - -QT_BEGIN_NAMESPACE -namespace Ui { -class MainWindow; -} -QT_END_NAMESPACE - -class MainWindow : public QMainWindow -{ - Q_OBJECT - -public: - explicit MainWindow(QWidget *parent = nullptr); - ~MainWindow(); - - void openFile(const QString &path); - -protected: - void closeEvent(QCloseEvent *e) override; - -private slots: - void onFileNew(); - void onFileOpen(); - void onFileSave(); - void onFileSaveAs(); - -private: - bool isModified() const; - - Ui::MainWindow *ui; - QString m_filePath; - Document m_content; -}; - -#endif // MAINWINDOW_H diff --git a/examples/webenginewidgets/markdowneditor/mainwindow.ui b/examples/webenginewidgets/markdowneditor/mainwindow.ui deleted file mode 100644 index 36ab352b7..000000000 --- a/examples/webenginewidgets/markdowneditor/mainwindow.ui +++ /dev/null @@ -1,115 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<ui version="4.0"> - <class>MainWindow</class> - <widget class="QMainWindow" name="MainWindow"> - <property name="geometry"> - <rect> - <x>0</x> - <y>0</y> - <width>800</width> - <height>600</height> - </rect> - </property> - <property name="windowTitle"> - <string>MarkDown Editor</string> - </property> - <widget class="QWidget" name="centralwidget"> - <layout class="QHBoxLayout" name="horizontalLayout"> - <item> - <widget class="QSplitter" name="splitter"> - <property name="orientation"> - <enum>Qt::Horizontal</enum> - </property> - <widget class="QPlainTextEdit" name="editor"/> - <widget class="QWebEngineView" name="preview" native="true"/> - </widget> - </item> - </layout> - </widget> - <widget class="QMenuBar" name="menubar"> - <property name="geometry"> - <rect> - <x>0</x> - <y>0</y> - <width>800</width> - <height>26</height> - </rect> - </property> - <widget class="QMenu" name="menu_File"> - <property name="title"> - <string>&File</string> - </property> - <addaction name="actionNew"/> - <addaction name="actionOpen"/> - <addaction name="actionSave"/> - <addaction name="actionSaveAs"/> - <addaction name="separator"/> - <addaction name="actionExit"/> - </widget> - <addaction name="menu_File"/> - </widget> - <widget class="QStatusBar" name="statusbar"/> - <action name="actionOpen"> - <property name="text"> - <string>&Open...</string> - </property> - <property name="toolTip"> - <string>Open document</string> - </property> - <property name="shortcut"> - <string>Ctrl+O</string> - </property> - </action> - <action name="actionSave"> - <property name="text"> - <string>&Save</string> - </property> - <property name="toolTip"> - <string>Save current document</string> - </property> - <property name="shortcut"> - <string>Ctrl+S</string> - </property> - </action> - <action name="actionExit"> - <property name="text"> - <string>E&xit</string> - </property> - <property name="toolTip"> - <string>Exit editor</string> - </property> - <property name="shortcut"> - <string>Ctrl+Q</string> - </property> - </action> - <action name="actionSaveAs"> - <property name="text"> - <string>Save &As...</string> - </property> - <property name="toolTip"> - <string>Save document under different name</string> - </property> - </action> - <action name="actionNew"> - <property name="text"> - <string>&New</string> - </property> - <property name="toolTip"> - <string>Create new document</string> - </property> - <property name="shortcut"> - <string>Ctrl+N</string> - </property> - </action> - </widget> - <customwidgets> - <customwidget> - <class>QWebEngineView</class> - <extends>QWidget</extends> - <header>qwebengineview.h</header> - <container>1</container> - </customwidget> - </customwidgets> - <resources/> - <connections/> -</ui> diff --git a/examples/webenginewidgets/markdowneditor/markdowneditor.pro b/examples/webenginewidgets/markdowneditor/markdowneditor.pro deleted file mode 100644 index 099edf4b5..000000000 --- a/examples/webenginewidgets/markdowneditor/markdowneditor.pro +++ /dev/null @@ -1,32 +0,0 @@ -TEMPLATE = app - -QT += webenginewidgets webchannel - -HEADERS += \ - mainwindow.h \ - previewpage.h \ - document.h - -SOURCES = \ - main.cpp \ - mainwindow.cpp \ - previewpage.cpp \ - document.cpp - -RESOURCES = \ - resources/markdowneditor.qrc - -# Disable Qt Quick compiler because the example doesn't use QML, but more importantly so that -# the source code of the .js files is not removed from the embedded qrc file. -CONFIG -= qtquickcompiler - -FORMS += \ - mainwindow.ui - -DISTFILES += \ - resources/3rdparty/MARKDOWN-LICENSE.txt \ - resources/3rdparty/MARKED-LICENSE.txt - -# install -target.path = $$[QT_INSTALL_EXAMPLES]/webenginewidgets/markdowneditor -INSTALLS += target diff --git a/examples/webenginewidgets/markdowneditor/previewpage.cpp b/examples/webenginewidgets/markdowneditor/previewpage.cpp deleted file mode 100644 index 17249fdb0..000000000 --- a/examples/webenginewidgets/markdowneditor/previewpage.cpp +++ /dev/null @@ -1,17 +0,0 @@ -// Copyright (C) 2016 The Qt Company Ltd. -// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause - -#include "previewpage.h" - -#include <QDesktopServices> - -bool PreviewPage::acceptNavigationRequest(const QUrl &url, - QWebEnginePage::NavigationType /*type*/, - bool /*isMainFrame*/) -{ - // Only allow qrc:/index.html. - if (url.scheme() == QString("qrc")) - return true; - QDesktopServices::openUrl(url); - return false; -} diff --git a/examples/webenginewidgets/markdowneditor/previewpage.h b/examples/webenginewidgets/markdowneditor/previewpage.h deleted file mode 100644 index 4a5d98c7c..000000000 --- a/examples/webenginewidgets/markdowneditor/previewpage.h +++ /dev/null @@ -1,19 +0,0 @@ -// Copyright (C) 2016 The Qt Company Ltd. -// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause - -#ifndef PREVIEWPAGE_H -#define PREVIEWPAGE_H - -#include <QWebEnginePage> - -class PreviewPage : public QWebEnginePage -{ - Q_OBJECT -public: - using QWebEnginePage::QWebEnginePage; - -protected: - bool acceptNavigationRequest(const QUrl &url, NavigationType type, bool isMainFrame) override; -}; - -#endif // PREVIEWPAGE_H diff --git a/examples/webenginewidgets/markdowneditor/resources/3rdparty/qt_attribution.json b/examples/webenginewidgets/markdowneditor/resources/3rdparty/qt_attribution.json deleted file mode 100644 index d51ac744b..000000000 --- a/examples/webenginewidgets/markdowneditor/resources/3rdparty/qt_attribution.json +++ /dev/null @@ -1,34 +0,0 @@ -[ - { - "Id": "markdowneditor-marked", - "Name": "Marked (WebEngine Markdown Editor example)", - "QDocModule": "qtwebengine", - "QtUsage": "Marked is used in the WebEngine MarkDown Editor example", - "QtParts": [ "examples" ], - "Files": "marked.js", - "Description": "A full-featured markdown parser and compiler, written in JavaScript. Built for speed.", - "Homepage": "https://github.com/chjj/marked", - "Version": "0.4.0", - "DownloadLocation": "https://github.com/markedjs/marked/blob/0.4.0/lib/marked.js", - "Copyright": "Copyright (c) 2011-2018, Christopher Jeffrey", - "License": "MIT License", - "LicenseId": "MIT", - "LicenseFile": "MARKED-LICENSE.txt" - }, - { - "Id": "markdowneditor-markdowncss", - "Name": "Markdown.css (WebEngine Markdown Editor example)", - "QDocModule": "qtwebengine", - "QtUsage": "markdown.css is used in the WebEngine MarkDown Editor example", - "QtParts": [ "examples" ], - "Files": "markdown.css", - "Description": "Markdown.css is better default styling for your Markdown files.", - "Version": "188530e4b5d020d7e237fc6b26be13ebf4a8def3", - "DownloadLocation": "https://bitbucket.org/kevinburke/markdowncss/src/188530e4b5d020d7e237fc6b26be13ebf4a8def3/markdown.css", - "Copyright": "Copyright 2011 Kevin Burke - Copyright Twitter Inc.", - "License": "Apache License 2.0", - "LicenseId": "Apache-2.0", - "LicenseFile": "MARKDOWN-LICENSE.txt" - } -] diff --git a/examples/webenginewidgets/markdowneditor/resources/default.md b/examples/webenginewidgets/markdowneditor/resources/default.md deleted file mode 100644 index af835fa4d..000000000 --- a/examples/webenginewidgets/markdowneditor/resources/default.md +++ /dev/null @@ -1,12 +0,0 @@ -## WebEngine Markdown Editor Example - -This example uses [QWebEngineView](http://doc.qt.io/qt-5/qwebengineview.html) -to preview text written using the [Markdown](https://en.wikipedia.org/wiki/Markdown) -syntax. - -### Acknowledgments - -The conversion from Markdown to HTML is done with the help of the -[marked JavaScript library](https://github.com/chjj/marked) by _Christopher Jeffrey_. -The [style sheet](https://kevinburke.bitbucket.io/markdowncss/) -was created by _Kevin Burke_. diff --git a/examples/webenginewidgets/markdowneditor/resources/index.html b/examples/webenginewidgets/markdowneditor/resources/index.html deleted file mode 100644 index 289a2110b..000000000 --- a/examples/webenginewidgets/markdowneditor/resources/index.html +++ /dev/null @@ -1,32 +0,0 @@ -<!doctype html> -<html lang="en"> -<meta charset="utf-8"> -<head> - <link rel="stylesheet" type="text/css" href="3rdparty/markdown.css"> - <script src="3rdparty/marked.js"></script> - <script src="qrc:/qtwebchannel/qwebchannel.js"></script> -</head> -<body> - <div id="placeholder"></div> - <script> - 'use strict'; - - var placeholder = document.getElementById('placeholder'); - - var updateText = function(text) { - placeholder.innerHTML = marked(text); - } - - new QWebChannel(qt.webChannelTransport, - function(channel) { - var content = channel.objects.content; - updateText(content.text); - content.textChanged.connect(updateText); - } - ); - </script> -</body> -</html> - - - diff --git a/examples/webenginewidgets/markdowneditor/resources/markdowneditor.qrc b/examples/webenginewidgets/markdowneditor/resources/markdowneditor.qrc deleted file mode 100644 index bc738f1cf..000000000 --- a/examples/webenginewidgets/markdowneditor/resources/markdowneditor.qrc +++ /dev/null @@ -1,8 +0,0 @@ -<RCC> - <qresource prefix="/"> - <file>default.md</file> - <file>index.html</file> - <file>3rdparty/markdown.css</file> - <file>3rdparty/marked.js</file> - </qresource> -</RCC> diff --git a/examples/webenginewidgets/minimal/CMakeLists.txt b/examples/webenginewidgets/minimal/CMakeLists.txt deleted file mode 100644 index 7c1cac1d8..000000000 --- a/examples/webenginewidgets/minimal/CMakeLists.txt +++ /dev/null @@ -1,33 +0,0 @@ -cmake_minimum_required(VERSION 3.16) -project(minimal LANGUAGES CXX) - -set(CMAKE_AUTOMOC ON) - -if(NOT DEFINED INSTALL_EXAMPLESDIR) - set(INSTALL_EXAMPLESDIR "examples") -endif() - -set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/webenginewidgets/minimal-widgets") - -find_package(Qt6 REQUIRED COMPONENTS Core Gui WebEngineWidgets) - -qt_add_executable(minimal-widgets - main.cpp -) - -set_target_properties(minimal-widgets PROPERTIES - WIN32_EXECUTABLE TRUE - MACOSX_BUNDLE TRUE -) - -target_link_libraries(minimal-widgets PUBLIC - Qt::Core - Qt::Gui - Qt::WebEngineWidgets -) - -install(TARGETS minimal-widgets - RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}" - BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}" - LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}" -) diff --git a/examples/webenginewidgets/minimal/doc/images/minimal-example.png b/examples/webenginewidgets/minimal/doc/images/minimal-example.png Binary files differdeleted file mode 100644 index 18ac9b177..000000000 --- a/examples/webenginewidgets/minimal/doc/images/minimal-example.png +++ /dev/null diff --git a/examples/webenginewidgets/minimal/doc/src/minimal.qdoc b/examples/webenginewidgets/minimal/doc/src/minimal.qdoc deleted file mode 100644 index 5fb5f8be3..000000000 --- a/examples/webenginewidgets/minimal/doc/src/minimal.qdoc +++ /dev/null @@ -1,55 +0,0 @@ -// Copyright (C) 2016 The Qt Company Ltd. -// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only - -/*! - \example webenginewidgets/minimal - \title WebEngine Widgets Minimal Example - \ingroup webengine-widgetexamples - \brief Displays a web page using \QWE Widgets. - - \image minimal-example.png - - \e {WebEngine Widgets Minimal Example} demonstrates how to use - \l{QWebEngineView} to render a web page. It shows the minimum amount of code - needed to load and display an HTML page, and can be used as a basis for - further experimentation. - - \include examples-run.qdocinc - - \section1 The Code - - We first define a \c commandLineUrlArgument function that returns the URL to open. - This is either the first positional argument given on the command line, or - \c https://www.qt.io as a fallback. - - \quotefromfile webenginewidgets/minimal/main.cpp - \skipto #include - - \printto int main - - In the \c main function we first set the - \l{QCoreApplication::organizationName} property. This affects the locations - where \QWE stores persistent and cached data (see also - \l{QWebEngineProfile::cachePath} and - \l{QWebEngineProfile::persistentStoragePath}). - - Next, we instantiate a QApplication and a QWebEngineView. The URL - to load is taken from \c commandLineUrlArgument and - loaded by calling \l QWebEngineView::setUrl. The view widget is - given a reasonable default size, and shown. - Finally, QApplication::exec() launches the main event loop. - - \printuntil } - - \section1 Requirements - - The example requires a working internet connection to render - the \l{Qt Homepage}. - An optional system proxy should be picked up automatically. - However, for proxies that require a username or password, - you need to connect to - QWebEnginePage::proxyAuthenticationRequired. - - \l{Qt WebEngine Widgets} uses the \l{Qt Quick Scene Graph} to compose the - page. Therefore, OpenGL support is required. -*/ diff --git a/examples/webenginewidgets/minimal/main.cpp b/examples/webenginewidgets/minimal/main.cpp deleted file mode 100644 index 86c04e721..000000000 --- a/examples/webenginewidgets/minimal/main.cpp +++ /dev/null @@ -1,28 +0,0 @@ -// Copyright (C) 2016 The Qt Company Ltd. -// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause - -#include <QApplication> -#include <QWebEngineView> - -QUrl commandLineUrlArgument() -{ - const QStringList args = QCoreApplication::arguments(); - for (const QString &arg : args.mid(1)) { - if (!arg.startsWith(QLatin1Char('-'))) - return QUrl::fromUserInput(arg); - } - return QUrl(QStringLiteral("https://www.qt.io")); -} - -int main(int argc, char *argv[]) -{ - QCoreApplication::setOrganizationName("QtExamples"); - QApplication app(argc, argv); - - QWebEngineView view; - view.setUrl(commandLineUrlArgument()); - view.resize(1024, 750); - view.show(); - - return app.exec(); -} diff --git a/examples/webenginewidgets/minimal/minimal.pro b/examples/webenginewidgets/minimal/minimal.pro deleted file mode 100644 index 849f4b9b6..000000000 --- a/examples/webenginewidgets/minimal/minimal.pro +++ /dev/null @@ -1,8 +0,0 @@ -TEMPLATE = app - -QT += webenginewidgets - -SOURCES += main.cpp - -target.path = $$[QT_INSTALL_EXAMPLES]/webenginewidgets/minimal -INSTALLS += target diff --git a/examples/webenginewidgets/notifications/CMakeLists.txt b/examples/webenginewidgets/notifications/CMakeLists.txt index 17d4f343b..688d06eb2 100644 --- a/examples/webenginewidgets/notifications/CMakeLists.txt +++ b/examples/webenginewidgets/notifications/CMakeLists.txt @@ -1,3 +1,6 @@ +# Copyright (C) 2022 The Qt Company Ltd. +# SPDX-License-Identifier: BSD-3-Clause + cmake_minimum_required(VERSION 3.16) project(notifications LANGUAGES CXX) diff --git a/examples/webenginewidgets/printme/CMakeLists.txt b/examples/webenginewidgets/printme/CMakeLists.txt index 2c38103c1..013ba48ca 100644 --- a/examples/webenginewidgets/printme/CMakeLists.txt +++ b/examples/webenginewidgets/printme/CMakeLists.txt @@ -1,3 +1,6 @@ +# Copyright (C) 2022 The Qt Company Ltd. +# SPDX-License-Identifier: BSD-3-Clause + cmake_minimum_required(VERSION 3.16) project(printme LANGUAGES CXX) diff --git a/examples/webenginewidgets/webui/CMakeLists.txt b/examples/webenginewidgets/push-notifications/CMakeLists.txt index e736a2cde..8ea2e25d1 100644 --- a/examples/webenginewidgets/webui/CMakeLists.txt +++ b/examples/webenginewidgets/push-notifications/CMakeLists.txt @@ -1,5 +1,8 @@ +# Copyright (C) 2022 The Qt Company Ltd. +# SPDX-License-Identifier: BSD-3-Clause + cmake_minimum_required(VERSION 3.16) -project(webui LANGUAGES CXX) +project(notifications LANGUAGES CXX) set(CMAKE_AUTOMOC ON) @@ -7,39 +10,36 @@ if(NOT DEFINED INSTALL_EXAMPLESDIR) set(INSTALL_EXAMPLESDIR "examples") endif() -set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/webenginewidgets/webui") +set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/webenginewidgets/push-notifications") find_package(Qt6 REQUIRED COMPONENTS Core Gui WebEngineWidgets) -qt_add_executable(webui +qt_add_executable(push-notifications main.cpp - webuihandler.cpp webuihandler.h + notificationpopup.h ) -set_target_properties(webui PROPERTIES +set_target_properties(push-notifications PROPERTIES WIN32_EXECUTABLE TRUE MACOSX_BUNDLE TRUE ) -target_link_libraries(webui PUBLIC +target_link_libraries(push-notifications PUBLIC Qt::Core Qt::Gui Qt::WebEngineWidgets ) -# Resources: -set(webui_resource_files - "about.html" -) - -qt_add_resources(webui "webui" +qt_add_resources(push-notifications "data" PREFIX "/" + BASE + "data" FILES - ${webui_resource_files} + "data/icon.png" ) -install(TARGETS webui +install(TARGETS push-notifications RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}" BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}" LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}" diff --git a/examples/webenginewidgets/push-notifications/content/index.html b/examples/webenginewidgets/push-notifications/content/index.html new file mode 100644 index 000000000..cce3055cd --- /dev/null +++ b/examples/webenginewidgets/push-notifications/content/index.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>Push Notification Using Node and FCM</title> + <link rel="stylesheet" href="style.css"> +</head> +<body> + <h1>Push Notification Using NodeJS and QtWebEngine</h1> + <div id="app"> + <div id="ping-setup"> + <form> + <div> + Ping Me Every [sec]: + </div> + <div class="ping-input"> + <input type="number" name="seconds" min="0" max="3600" required=""> + </div><button>Ping Me</button> + </form> + </div> + <div id="ping-clear"> + <div id="ping-text"></div><button id="ping-clear-button">Clear</button> + </div> + </div> + <script src="ping.js"></script> +</body> +</html> diff --git a/examples/webenginewidgets/push-notifications/content/ping.js b/examples/webenginewidgets/push-notifications/content/ping.js new file mode 100644 index 000000000..285a57019 --- /dev/null +++ b/examples/webenginewidgets/push-notifications/content/ping.js @@ -0,0 +1,84 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +const publicVapidKey = + "BNO4fIv439RpvbReeABNlDNiiBD2Maykn7EVnwsPseH7-P5hjnzZLEfnejXVP7Zt6MFoKqKeHm4nV9BHvbgoRPg"; + +async function setup(delay) +{ + console.log('>> register service worker...'); + const register = await navigator.serviceWorker.register('/worker.js', { scope : '/' }); + console.log('>> service worker registered...'); + + console.log('>> subscribe push subscription to FCM'); + var subscription = await register.pushManager.subscribe( + { userVisibleOnly : true, applicationServerKey : publicVapidKey }); + console.log('>> subscription created...'); + + console.log('>> subscribe to push service...'); + await fetch('/subscribe', { + method : 'POST', + body : JSON.stringify(subscription), + headers : { 'content-type' : 'application/json', 'ping-time' : delay } + }); + console.log('>> push subscription created...') +} + +async function clear() +{ + const register = await navigator.serviceWorker.getRegistration(); + var subscription = await register.pushManager.getSubscription(); + console.log('>> unsubscribe to push service...'); + await fetch('/unsubscribe', { + method : 'POST', + body : JSON.stringify(subscription), + headers : { 'content-type' : 'application/json' } + }); + console.log('>> push unsubscription removed...') + + console.log('>> unsubscribe push subscription to FCM'); + await subscription.unsubscribe(); + console.log('>> subscription removed...'); +} + +function displaySetup(delay = null) +{ + const pingSetup = document.getElementById('ping-setup'); + const pingClear = document.getElementById('ping-clear'); + const pingText = document.getElementById('ping-text'); + if (delay) { + pingClear.style.display = 'block'; + pingSetup.style.display = 'none'; + pingText.innerHTML = 'Ping Me Every ' + delay + ' seconds'; + } else { + pingClear.style.display = 'none'; + pingSetup.style.display = 'block'; + pingText.innerHTML = ""; + } +} + +function handleSetupPing(event) +{ + event.preventDefault(); + + const seconds = document.forms[0].seconds.value; + document.forms[0].reset(); + + // check for service worker support + if ('serviceWorker' in navigator) { + setup(seconds).catch(err => console.error(err)); + } + + displaySetup(seconds); +}; + +function handleClearPing(event) +{ + event.preventDefault(); + clear(); + displaySetup(); +}; + +document.forms[0].addEventListener('submit', handleSetupPing); +const clearButton = document.getElementById('ping-clear-button'); +clearButton.addEventListener('click', handleClearPing); diff --git a/examples/webenginewidgets/push-notifications/content/style.css b/examples/webenginewidgets/push-notifications/content/style.css new file mode 100644 index 000000000..8176462a2 --- /dev/null +++ b/examples/webenginewidgets/push-notifications/content/style.css @@ -0,0 +1,29 @@ +body { + font-family: monaco; + height: 100vh; + flex-direction: column; + align-items: center; + justify-content: center; + display: flex; +} +#ping-clear, +#ping-setup { + font-size: 32px; + text-align: center; +} +.form-inputs{ + margin-top: 20px; +} +input { + width: 100px; + height: 30px; +} +button { + font-size: 16px; +} +#ping-text { + margin-bottom: 30px; +} +#ping-clear { + display: none; +} diff --git a/examples/webenginewidgets/push-notifications/content/worker.js b/examples/webenginewidgets/push-notifications/content/worker.js new file mode 100644 index 000000000..ed660a6e9 --- /dev/null +++ b/examples/webenginewidgets/push-notifications/content/worker.js @@ -0,0 +1,7 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +self.addEventListener('push', event => { + const data = event.data.json(); + self.registration.showNotification(data.title, { body : data.text }); +}); diff --git a/examples/webenginewidgets/webui/webui.qrc b/examples/webenginewidgets/push-notifications/data/data.qrc index 6ddf01fa2..619648d1b 100644 --- a/examples/webenginewidgets/webui/webui.qrc +++ b/examples/webenginewidgets/push-notifications/data/data.qrc @@ -1,5 +1,5 @@ <RCC> <qresource prefix="/"> - <file>about.html</file> + <file>icon.png</file> </qresource> </RCC> diff --git a/examples/webenginewidgets/push-notifications/data/icon.png b/examples/webenginewidgets/push-notifications/data/icon.png Binary files differnew file mode 100644 index 000000000..4c3870c06 --- /dev/null +++ b/examples/webenginewidgets/push-notifications/data/icon.png diff --git a/examples/webenginewidgets/push-notifications/doc/images/notification.png b/examples/webenginewidgets/push-notifications/doc/images/notification.png Binary files differnew file mode 100644 index 000000000..ec5c67457 --- /dev/null +++ b/examples/webenginewidgets/push-notifications/doc/images/notification.png diff --git a/examples/webenginewidgets/push-notifications/doc/images/permissions.png b/examples/webenginewidgets/push-notifications/doc/images/permissions.png Binary files differnew file mode 100644 index 000000000..dedb6e472 --- /dev/null +++ b/examples/webenginewidgets/push-notifications/doc/images/permissions.png diff --git a/examples/webenginewidgets/push-notifications/doc/images/push-notifications.png b/examples/webenginewidgets/push-notifications/doc/images/push-notifications.png Binary files differnew file mode 100644 index 000000000..c5ba5f589 --- /dev/null +++ b/examples/webenginewidgets/push-notifications/doc/images/push-notifications.png diff --git a/examples/webenginewidgets/push-notifications/doc/images/website.png b/examples/webenginewidgets/push-notifications/doc/images/website.png Binary files differnew file mode 100644 index 000000000..10a4a6150 --- /dev/null +++ b/examples/webenginewidgets/push-notifications/doc/images/website.png diff --git a/examples/webenginewidgets/push-notifications/doc/src/push-notifications.qdoc b/examples/webenginewidgets/push-notifications/doc/src/push-notifications.qdoc new file mode 100644 index 000000000..2f234c1e0 --- /dev/null +++ b/examples/webenginewidgets/push-notifications/doc/src/push-notifications.qdoc @@ -0,0 +1,202 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +/*! + +\example webenginewidgets/push-notifications +\title WebEngine Push Notifications Example +\ingroup webengine-widgetexamples +\brief Demonstrates how to subscribe to and unsubscribe from push notifications. + +In this example we are going to send push notifications from a web push service to the user. +This is the typical scenario where messages are sent from the application server i.e. website +back-end through a 3rd-party push service, to finally arrive at the user's browser in form of +notifications. To demonstrate this flow, we will implement a simple push service server +application, to which the user can subscribe to receive \e ping messages. + +As already mentioned, in such a workflow there are three different parties involved: + +\list + \li the user's web browser where they receive push notifications + \li 3rd-party push service, which is defined by a subscription endpoint and is a part + of a browser's push service implementation + \li application server, which will store user's subscriptions and initiate push messages + using a subscription endpoint +\endlist + +The user visits a website, where a JavaScript web application uses the JavaScript Push API +to create a push notification subscription. The user is then asked to grant a permission +to receive and display push notifications. Once accepted, the Push API establishes a push channel +with a 3rd-party push service, which in case of QtWebEngine is \l {https://firebase.google.com} +{Firebase Cloud Messaging (FCM)}. The unique push subscription is created that +includes the subscription endpoint URL. The browser then sends a subscription message +to the application server forwarding the endpoint setup. The application server can now +use the subscription endpoint to send notifications to the browser. The browser push service +implementation will deliver a push message. However, to show it, a service worker must +be registered. As the service worker runs in the background, it allows displaying notifications +even if a website, which has installed it, is no longer opened. + +\image push-notifications.png + +Let's go more into implementation details. We start with implementing our custom +push service using NodeJS with two modules: + +\list + \li \l {https://github.com/web-push-libs/web-push} {web-push} - provides the web-push protocol + implementation + \li \l {https://github.com/expressjs/express} {express} - provides the web application framework +\endlist + +Let's initialize a new project and install the required modules in the root directory of this +example: + +\snippet /push-notifications/commands 0 + +These commands should create package.js, which defines the start command: + +\snippet /push-notifications/commands 1 + +Now let's move on to the push service back-end implementation in server.js. + +We start by including the required modules and doing basic \e express framework setup, which +we use to create our custom push server. For simplicity we are going to handle only one +subscription at a time. To do that we need to create \e VAPID keys which we are going to +generate with \e web-push libs. The public key is going to be used by the front-end and authenticate +to the service. + +\quotefromfile webenginewidgets/push-notifications/server.js +\skipto const express +\printto add subscribe route + +\note We are not going to cover the encryption of messages in this example. + +To generate keys, we can use the tool shipped with \e web-push lib, that is installed by +\c npm in our example's root directory. + +\snippet /push-notifications/commands 2 + +Now we add two \c routes to the push server. One to \c subscribe and one to \c unsubscribe, +so that our front-end can send an HTTP POST request to handle the push subscription. +In the subscribe request we will get \c subscription in the request body and we also retrieve +the custom header \c ping-time that defines how often the ping messages should be pushed to +the user. We keep around the \c subscription to be able to send push notifications later. +As a confirmation, we send the 201 status code and schedule the first push notification based on +the \c ping-time value. The \c unsubscribe request simply removes a subscription. + +\quotefromfile webenginewidgets/push-notifications/server.js +\skipto add subscribe route +\printto function sendNotification + +The \c sendNotication() function sends push messages using the web-push lib. We create the payload +with the message we want to present to a user and schedule the next push message. + +\quotefromfile webenginewidgets/push-notifications/server.js +\skipto function sendNotification +\printto server.listen + +In the end we start the server to listen on the given port. + +\quotefromfile webenginewidgets/push-notifications/server.js +\skipto server.listen +\printline started + +Let's move now to our front-end. We create a simple page index.html, where the user can enter how +often they want to receive ping notification messages. We will have two buttons: +\e {Ping Me} to subscribe for push notifications and \e Clear to unsubscribe. +In the end we load ping.js, which we cover next. + +\quotefromfile webenginewidgets/push-notifications/content/index.html +\skipto <body> +\printuntil </body> + +The last piece is creating the logic for the push subscription within the front-end. Here we have two +functions, \c setup and \c clear, to handle subscriptions. When the user clicks on the \e {Ping Me} +button, \c setup is called. To be able to receive notifications, the service worker is needed. +This way the user can leave the website and still get notified as the service worker works +in the background and handles incoming messages. To achieve that, we have to first register +one with: + +\quotefromfile webenginewidgets/push-notifications/content/ping.js +\skipto const register +\printline worker.js + +The call to \c cpushManager.subscribe() will trigger a permission prompt, which is displayed to the +user. If the permission is granted, the push subscription is returned. It includes a URL endpoint +that allows sending notifications to the browser, where the registered service worker waits for +push messages. + +\quotefromfile webenginewidgets/push-notifications/content/ping.js +\skipto var subscription +\printto console.log + +As mentioned the subscription is created for FCM and should be now sent to our custom server +with an HTTP POST request. In addition, we add to the post request the HTTP header with the +\c ping-time the user entered on our website. + +\quotefromfile webenginewidgets/push-notifications/content/ping.js +\skipto await fetch +\printto console.log + +The function \c clear call unsubscribes first from our push server by sending an HTTP POST request +and later from the 3rd-party push service (FCM). + +\quotefromfile webenginewidgets/push-notifications/content/ping.js +\skipuntil async function clear() +\skipuntil { +\printto console.log +\dots +\skipto await fetch +\printto console.log +\dots +\skipto await subscription +\printto console.log + +The rest of code in ping.js is just boilerplate code to read a user provided value +and call \c setup() or \c clear(). + +As the last part of the front-end let's look inside a service worker script, where we simply +register an event listener for \e push events. + +\quotefromfile webenginewidgets/push-notifications/content/worker.js +\skipto self +\printuntil }); +\printuntil }); + +When a push event comes we simply use the Notification JavaScript API to display a notification. + +\note QtWebEngine Notification Example shows how to provide your own handler and customize +the look and feel of a notification message. + +Having the implementation in place, we can start the server on localhost at the port 5000. +To do that, we can simply enter in the console in the project's root directory: + +\snippet /push-notifications/commands 3 + +Now we can look into the \e push-notification browser application, which is based on +\l {WebEngine Notifications Example}: + +\quotefromfile webenginewidgets/push-notifications/main.cpp +\skipto main +\printuntil app.exec +\printuntil } + +This application simply opens the page at \c http:\\localhost:5000. We are not going into detail +about how to open a notification as it is documented \l {WebEngine Notifications Example}{here}. +However, you need to modify the application in two ways. First, \c QWebEngineProfile cannot be +set to \e off-the-record because push messaging would be disabled. Therefore, as you can see +above, \c QWebEngineProfile is initialized with the name. Second, you need to enable push +messaging with the call QWebEngineProfile::setPushServiceEnabled for the created \c profile. + +When the application runs it displays: + +\image website.png + +After granting the permission we can send our ping request: + +\image permissions.png + +We should see the coming push notification: + +\image notification.png + +*/ diff --git a/examples/webenginewidgets/push-notifications/doc/src/push-notifications.qmodel b/examples/webenginewidgets/push-notifications/doc/src/push-notifications.qmodel new file mode 100644 index 000000000..048a55911 --- /dev/null +++ b/examples/webenginewidgets/push-notifications/doc/src/push-notifications.qmodel @@ -0,0 +1,837 @@ +<?xml version="1.0" encoding="UTF-8"?> +<qmt> + <project> + <uid>{9fd14f7e-7b67-4e13-9980-ef8fbe24b780}</uid> + <root-package> + <instance> + <MPackage> + <base-MObject> + <MObject> + <base-MElement> + <MElement> + <uid>{a26e0efd-1b21-4fba-96ce-a607bbcdb4f7}</uid> + </MElement> + </base-MElement> + <name>push_notifications</name> + <children> + <handles> + <handles> + <qlist> + <item> + <handle> + <uid>{6b1a06e9-960b-4a10-872e-5504d8c0b127}</uid> + <target> + <instance type="MCanvasDiagram"> + <MCanvasDiagram> + <base-MDiagram> + <MDiagram> + <base-MObject> + <MObject> + <base-MElement> + <MElement> + <uid>{6b1a06e9-960b-4a10-872e-5504d8c0b127}</uid> + </MElement> + </base-MElement> + <name>push_notifications</name> + </MObject> + </base-MObject> + <elements> + <qlist> + <item> + <instance type="DBoundary"> + <DBoundary> + <base-DElement> + <DElement> + <uid>{d50762f2-c7f4-4d52-9592-8bcc07274ba1}</uid> + </DElement> + </base-DElement> + <text>Browser / User Agent</text> + <pos>x:415;y:390</pos> + <rect>x:-105;y:-125;w:210;h:250</rect> + </DBoundary> + </instance> + </item> + <item> + <instance type="DItem"> + <DItem> + <base-DObject> + <DObject> + <base-DElement> + <DElement> + <uid>{cc80cad6-2e47-4913-aeb1-0c6f41de44bb}</uid> + </DElement> + </base-DElement> + <object>{121189af-36df-4efa-b451-3f1f85ef339f}</object> + <name>JavaScript Web Application</name> + <pos>x:410;y:395</pos> + <rect>x:-75;y:-15;w:150;h:30</rect> + <visual-role>0</visual-role> + </DObject> + </base-DObject> + <shape-editable>false</shape-editable> + </DItem> + </instance> + </item> + <item> + <instance type="DItem"> + <DItem> + <base-DObject> + <DObject> + <base-DElement> + <DElement> + <uid>{8bde1815-304a-41f6-8528-c754dc3d1eda}</uid> + </DElement> + </base-DElement> + <object>{13c69399-5587-4169-a012-8d86216139fd}</object> + <name>Push Manager API</name> + <pos>x:410;y:320</pos> + <rect>x:-75;y:-15;w:150;h:30</rect> + <auto-sized>false</auto-sized> + <visual-role>0</visual-role> + </DObject> + </base-DObject> + <shape-editable>false</shape-editable> + </DItem> + </instance> + </item> + <item> + <instance type="DItem"> + <DItem> + <base-DObject> + <DObject> + <base-DElement> + <DElement> + <uid>{75431119-9e8e-4e3e-a539-9d7bad6dbf81}</uid> + </DElement> + </base-DElement> + <object>{3f1676be-d3a4-4751-8bcb-400b11c88ada}</object> + <name>Service Worker</name> + <pos>x:410;y:470</pos> + <rect>x:-75;y:-15;w:150;h:30</rect> + <auto-sized>false</auto-sized> + <visual-role>0</visual-role> + </DObject> + </base-DObject> + <shape-editable>false</shape-editable> + </DItem> + </instance> + </item> + <item> + <instance type="DDependency"> + <DDependency> + <base-DRelation> + <DRelation> + <base-DElement> + <DElement> + <uid>{0a7b0146-d34b-4c39-a1af-df15a1b4108d}</uid> + </DElement> + </base-DElement> + <object>{648fd8d0-6f61-4cc9-b5ce-6c5b9057fe5d}</object> + <a>{cc80cad6-2e47-4913-aeb1-0c6f41de44bb}</a> + <b>{8bde1815-304a-41f6-8528-c754dc3d1eda}</b> + <name>subscribe</name> + </DRelation> + </base-DRelation> + </DDependency> + </instance> + </item> + <item> + <instance type="DDependency"> + <DDependency> + <base-DRelation> + <DRelation> + <base-DElement> + <DElement> + <uid>{e7d4a675-ddbd-41aa-a802-32221a56dae2}</uid> + </DElement> + </base-DElement> + <object>{afae2401-ea81-4514-aa80-da53d61a8516}</object> + <a>{cc80cad6-2e47-4913-aeb1-0c6f41de44bb}</a> + <b>{75431119-9e8e-4e3e-a539-9d7bad6dbf81}</b> + <name>register</name> + </DRelation> + </base-DRelation> + </DDependency> + </instance> + </item> + <item> + <instance type="DItem"> + <DItem> + <base-DObject> + <DObject> + <base-DElement> + <DElement> + <uid>{998e7d36-3416-4b2f-843a-a437449f09f1}</uid> + </DElement> + </base-DElement> + <object>{5a7b90ea-801e-43ea-a0b5-edaa59761b5b}</object> + <name>Firebase Cloud Messaging </name> + <pos>x:770;y:320</pos> + <rect>x:-75;y:-15;w:150;h:30</rect> + <visual-role>6</visual-role> + </DObject> + </base-DObject> + <shape-editable>false</shape-editable> + </DItem> + </instance> + </item> + <item> + <instance type="DDependency"> + <DDependency> + <base-DRelation> + <DRelation> + <base-DElement> + <DElement> + <uid>{28c1fccd-c50e-458c-865d-4ba41d55690b}</uid> + </DElement> + </base-DElement> + <object>{d9959769-74a4-40ad-bf00-904c12a67309}</object> + <a>{8bde1815-304a-41f6-8528-c754dc3d1eda}</a> + <b>{998e7d36-3416-4b2f-843a-a437449f09f1}</b> + <name>create subscription</name> + </DRelation> + </base-DRelation> + <direction>2</direction> + </DDependency> + </instance> + </item> + <item> + <instance type="DItem"> + <DItem> + <base-DObject> + <DObject> + <base-DElement> + <DElement> + <uid>{ba581e41-cc00-4129-adae-0a1208bb3222}</uid> + </DElement> + </base-DElement> + <object>{13d79379-1727-46a3-947c-e3f2f6eb3a87}</object> + <name>Push Application Server</name> + <pos>x:770;y:390</pos> + <rect>x:-75;y:-15;w:150;h:30</rect> + <auto-sized>false</auto-sized> + <visual-role>6</visual-role> + </DObject> + </base-DObject> + <shape-editable>false</shape-editable> + </DItem> + </instance> + </item> + <item> + <instance type="DDependency"> + <DDependency> + <base-DRelation> + <DRelation> + <base-DElement> + <DElement> + <uid>{e796d1cc-f574-45db-a440-7e47d7560d71}</uid> + </DElement> + </base-DElement> + <object>{373c492c-0b9a-4032-9ff4-b3a7cc442883}</object> + <a>{cc80cad6-2e47-4913-aeb1-0c6f41de44bb}</a> + <b>{ba581e41-cc00-4129-adae-0a1208bb3222}</b> + <name>subscribe with endpoint</name> + </DRelation> + </base-DRelation> + </DDependency> + </instance> + </item> + <item> + <instance type="DDependency"> + <DDependency> + <base-DRelation> + <DRelation> + <base-DElement> + <DElement> + <uid>{6332f8ae-ef9d-4c15-9fbf-d6ee06ba3f84}</uid> + </DElement> + </base-DElement> + <object>{94241d64-4e88-4855-8e78-365be237108b}</object> + <a>{ba581e41-cc00-4129-adae-0a1208bb3222}</a> + <b>{998e7d36-3416-4b2f-843a-a437449f09f1}</b> + <name>push notification</name> + <points> + <qlist> + <item> + <DRelation--IntermediatePoint> + <pos>x:770;y:335</pos> + </DRelation--IntermediatePoint> + </item> + </qlist> + </points> + </DRelation> + </base-DRelation> + </DDependency> + </instance> + </item> + <item> + <instance type="DItem"> + <DItem> + <base-DObject> + <DObject> + <base-DElement> + <DElement> + <uid>{582af542-5f2d-4660-a6d0-a3bd983d9682}</uid> + </DElement> + </base-DElement> + <object>{00b8f12d-e08b-426a-83b8-83fea8907fab}</object> + <name>User</name> + <pos>x:185;y:395</pos> + <rect>x:-10;y:-20;w:20;h:40</rect> + <visual-role>0</visual-role> + </DObject> + </base-DObject> + <variety>actor</variety> + <shape-editable>false</shape-editable> + </DItem> + </instance> + </item> + <item> + <instance type="DDependency"> + <DDependency> + <base-DRelation> + <DRelation> + <base-DElement> + <DElement> + <uid>{66ca12e1-84a1-4247-82e5-ae6891f3f376}</uid> + </DElement> + </base-DElement> + <object>{6d0ce78f-28e1-4a82-a443-59f4efcb8e66}</object> + <a>{582af542-5f2d-4660-a6d0-a3bd983d9682}</a> + <b>{cc80cad6-2e47-4913-aeb1-0c6f41de44bb}</b> + <name>subscribe</name> + </DRelation> + </base-DRelation> + </DDependency> + </instance> + </item> + <item> + <instance type="DDependency"> + <DDependency> + <base-DRelation> + <DRelation> + <base-DElement> + <DElement> + <uid>{7657479a-a855-4d97-8c61-098690da9023}</uid> + </DElement> + </base-DElement> + <object>{eef542f5-e2cf-40a8-92c9-9892f3d06e1f}</object> + <a>{75431119-9e8e-4e3e-a539-9d7bad6dbf81}</a> + <b>{582af542-5f2d-4660-a6d0-a3bd983d9682}</b> + <name>notify</name> + <points> + <qlist> + <item> + <DRelation--IntermediatePoint> + <pos>x:340;y:430</pos> + </DRelation--IntermediatePoint> + </item> + </qlist> + </points> + </DRelation> + </base-DRelation> + </DDependency> + </instance> + </item> + <item> + <instance type="DDependency"> + <DDependency> + <base-DRelation> + <DRelation> + <base-DElement> + <DElement> + <uid>{97f3e5b0-93ca-4351-98d6-ad88567979f7}</uid> + </DElement> + </base-DElement> + <object>{963ad9f9-ecad-430f-8233-b7897fa630bd}</object> + <a>{75431119-9e8e-4e3e-a539-9d7bad6dbf81}</a> + <b>{998e7d36-3416-4b2f-843a-a437449f09f1}</b> + <name>push notification</name> + <points> + <qlist> + <item> + <DRelation--IntermediatePoint> + <pos>x:535;y:470</pos> + </DRelation--IntermediatePoint> + </item> + <item> + <DRelation--IntermediatePoint> + <pos>x:590;y:470</pos> + </DRelation--IntermediatePoint> + </item> + <item> + <DRelation--IntermediatePoint> + <pos>x:615;y:470</pos> + </DRelation--IntermediatePoint> + </item> + <item> + <DRelation--IntermediatePoint> + <pos>x:670;y:470</pos> + </DRelation--IntermediatePoint> + </item> + <item> + <DRelation--IntermediatePoint> + <pos>x:670;y:365</pos> + </DRelation--IntermediatePoint> + </item> + </qlist> + </points> + </DRelation> + </base-DRelation> + <direction>1</direction> + </DDependency> + </instance> + </item> + </qlist> + </elements> + <last-modified>1665083804306</last-modified> + <toolbarid>UseCases</toolbarid> + </MDiagram> + </base-MDiagram> + </MCanvasDiagram> + </instance> + </target> + </handle> + </item> + <item> + <handle> + <uid>{121189af-36df-4efa-b451-3f1f85ef339f}</uid> + <target> + <instance type="MItem"> + <MItem> + <base-MObject> + <MObject> + <base-MElement> + <MElement> + <uid>{121189af-36df-4efa-b451-3f1f85ef339f}</uid> + </MElement> + </base-MElement> + <name>JavaScript Web Application</name> + <relations> + <handles> + <handles> + <qlist> + <item> + <handle> + <uid>{648fd8d0-6f61-4cc9-b5ce-6c5b9057fe5d}</uid> + <target> + <instance type="MDependency"> + <MDependency> + <base-MRelation> + <MRelation> + <base-MElement> + <MElement> + <uid>{648fd8d0-6f61-4cc9-b5ce-6c5b9057fe5d}</uid> + </MElement> + </base-MElement> + <name>subscribe</name> + <a>{121189af-36df-4efa-b451-3f1f85ef339f}</a> + <b>{13c69399-5587-4169-a012-8d86216139fd}</b> + </MRelation> + </base-MRelation> + </MDependency> + </instance> + </target> + </handle> + </item> + <item> + <handle> + <uid>{afae2401-ea81-4514-aa80-da53d61a8516}</uid> + <target> + <instance type="MDependency"> + <MDependency> + <base-MRelation> + <MRelation> + <base-MElement> + <MElement> + <uid>{afae2401-ea81-4514-aa80-da53d61a8516}</uid> + </MElement> + </base-MElement> + <name>register</name> + <a>{121189af-36df-4efa-b451-3f1f85ef339f}</a> + <b>{3f1676be-d3a4-4751-8bcb-400b11c88ada}</b> + </MRelation> + </base-MRelation> + </MDependency> + </instance> + </target> + </handle> + </item> + <item> + <handle> + <uid>{373c492c-0b9a-4032-9ff4-b3a7cc442883}</uid> + <target> + <instance type="MDependency"> + <MDependency> + <base-MRelation> + <MRelation> + <base-MElement> + <MElement> + <uid>{373c492c-0b9a-4032-9ff4-b3a7cc442883}</uid> + </MElement> + </base-MElement> + <name>subscribe with endpoint</name> + <a>{121189af-36df-4efa-b451-3f1f85ef339f}</a> + <b>{13d79379-1727-46a3-947c-e3f2f6eb3a87}</b> + </MRelation> + </base-MRelation> + </MDependency> + </instance> + </target> + </handle> + </item> + </qlist> + </handles> + </handles> + </relations> + </MObject> + </base-MObject> + </MItem> + </instance> + </target> + </handle> + </item> + <item> + <handle> + <uid>{13c69399-5587-4169-a012-8d86216139fd}</uid> + <target> + <instance type="MItem"> + <MItem> + <base-MObject> + <MObject> + <base-MElement> + <MElement> + <uid>{13c69399-5587-4169-a012-8d86216139fd}</uid> + </MElement> + </base-MElement> + <name>Push Manager API</name> + <relations> + <handles> + <handles> + <qlist> + <item> + <handle> + <uid>{d9959769-74a4-40ad-bf00-904c12a67309}</uid> + <target> + <instance type="MDependency"> + <MDependency> + <base-MRelation> + <MRelation> + <base-MElement> + <MElement> + <uid>{d9959769-74a4-40ad-bf00-904c12a67309}</uid> + </MElement> + </base-MElement> + <name>create subscription</name> + <a>{13c69399-5587-4169-a012-8d86216139fd}</a> + <b>{5a7b90ea-801e-43ea-a0b5-edaa59761b5b}</b> + </MRelation> + </base-MRelation> + <direction>2</direction> + </MDependency> + </instance> + </target> + </handle> + </item> + </qlist> + </handles> + </handles> + </relations> + </MObject> + </base-MObject> + </MItem> + </instance> + </target> + </handle> + </item> + <item> + <handle> + <uid>{3f1676be-d3a4-4751-8bcb-400b11c88ada}</uid> + <target> + <instance type="MItem"> + <MItem> + <base-MObject> + <MObject> + <base-MElement> + <MElement> + <uid>{3f1676be-d3a4-4751-8bcb-400b11c88ada}</uid> + </MElement> + </base-MElement> + <name>Service Worker</name> + <relations> + <handles> + <handles> + <qlist> + <item> + <handle> + <uid>{bfebbc32-3541-4c1a-b3c6-a3652f700767}</uid> + <target> + <instance type="MDependency"> + <MDependency> + <base-MRelation> + <MRelation> + <base-MElement> + <MElement> + <uid>{bfebbc32-3541-4c1a-b3c6-a3652f700767}</uid> + </MElement> + </base-MElement> + <name>push notification</name> + <a>{3f1676be-d3a4-4751-8bcb-400b11c88ada}</a> + <b>{5a7b90ea-801e-43ea-a0b5-edaa59761b5b}</b> + </MRelation> + </base-MRelation> + <direction>1</direction> + </MDependency> + </instance> + </target> + </handle> + </item> + <item> + <handle> + <uid>{89d5f886-1913-4bb7-be32-cdd5cb61eebc}</uid> + <target> + <instance type="MDependency"> + <MDependency> + <base-MRelation> + <MRelation> + <base-MElement> + <MElement> + <uid>{89d5f886-1913-4bb7-be32-cdd5cb61eebc}</uid> + </MElement> + </base-MElement> + <name>notify</name> + <a>{3f1676be-d3a4-4751-8bcb-400b11c88ada}</a> + <b>{00b8f12d-e08b-426a-83b8-83fea8907fab}</b> + </MRelation> + </base-MRelation> + </MDependency> + </instance> + </target> + </handle> + </item> + <item> + <handle> + <uid>{eef542f5-e2cf-40a8-92c9-9892f3d06e1f}</uid> + <target> + <instance type="MDependency"> + <MDependency> + <base-MRelation> + <MRelation> + <base-MElement> + <MElement> + <uid>{eef542f5-e2cf-40a8-92c9-9892f3d06e1f}</uid> + </MElement> + </base-MElement> + <name>notify</name> + <a>{3f1676be-d3a4-4751-8bcb-400b11c88ada}</a> + <b>{00b8f12d-e08b-426a-83b8-83fea8907fab}</b> + </MRelation> + </base-MRelation> + </MDependency> + </instance> + </target> + </handle> + </item> + <item> + <handle> + <uid>{963ad9f9-ecad-430f-8233-b7897fa630bd}</uid> + <target> + <instance type="MDependency"> + <MDependency> + <base-MRelation> + <MRelation> + <base-MElement> + <MElement> + <uid>{963ad9f9-ecad-430f-8233-b7897fa630bd}</uid> + </MElement> + </base-MElement> + <name>push notification</name> + <a>{3f1676be-d3a4-4751-8bcb-400b11c88ada}</a> + <b>{5a7b90ea-801e-43ea-a0b5-edaa59761b5b}</b> + </MRelation> + </base-MRelation> + <direction>1</direction> + </MDependency> + </instance> + </target> + </handle> + </item> + </qlist> + </handles> + </handles> + </relations> + </MObject> + </base-MObject> + </MItem> + </instance> + </target> + </handle> + </item> + <item> + <handle> + <uid>{5a7b90ea-801e-43ea-a0b5-edaa59761b5b}</uid> + <target> + <instance type="MItem"> + <MItem> + <base-MObject> + <MObject> + <base-MElement> + <MElement> + <uid>{5a7b90ea-801e-43ea-a0b5-edaa59761b5b}</uid> + </MElement> + </base-MElement> + <name>Firebase Cloud Messaging </name> + <relations> + <handles> + <handles> + <qlist> + <item> + <handle> + <uid>{560fb941-261e-4f45-8909-2106283fdb3e}</uid> + <target> + <instance type="MDependency"> + <MDependency> + <base-MRelation> + <MRelation> + <base-MElement> + <MElement> + <uid>{560fb941-261e-4f45-8909-2106283fdb3e}</uid> + </MElement> + </base-MElement> + <a>{5a7b90ea-801e-43ea-a0b5-edaa59761b5b}</a> + <b>{13c69399-5587-4169-a012-8d86216139fd}</b> + </MRelation> + </base-MRelation> + </MDependency> + </instance> + </target> + </handle> + </item> + </qlist> + </handles> + </handles> + </relations> + </MObject> + </base-MObject> + </MItem> + </instance> + </target> + </handle> + </item> + <item> + <handle> + <uid>{13d79379-1727-46a3-947c-e3f2f6eb3a87}</uid> + <target> + <instance type="MItem"> + <MItem> + <base-MObject> + <MObject> + <base-MElement> + <MElement> + <uid>{13d79379-1727-46a3-947c-e3f2f6eb3a87}</uid> + </MElement> + </base-MElement> + <name>Push Application Server</name> + <relations> + <handles> + <handles> + <qlist> + <item> + <handle> + <uid>{94241d64-4e88-4855-8e78-365be237108b}</uid> + <target> + <instance type="MDependency"> + <MDependency> + <base-MRelation> + <MRelation> + <base-MElement> + <MElement> + <uid>{94241d64-4e88-4855-8e78-365be237108b}</uid> + </MElement> + </base-MElement> + <name>push notification</name> + <a>{13d79379-1727-46a3-947c-e3f2f6eb3a87}</a> + <b>{5a7b90ea-801e-43ea-a0b5-edaa59761b5b}</b> + </MRelation> + </base-MRelation> + </MDependency> + </instance> + </target> + </handle> + </item> + </qlist> + </handles> + </handles> + </relations> + </MObject> + </base-MObject> + </MItem> + </instance> + </target> + </handle> + </item> + <item> + <handle> + <uid>{00b8f12d-e08b-426a-83b8-83fea8907fab}</uid> + <target> + <instance type="MItem"> + <MItem> + <base-MObject> + <MObject> + <base-MElement> + <MElement> + <uid>{00b8f12d-e08b-426a-83b8-83fea8907fab}</uid> + </MElement> + </base-MElement> + <name>User</name> + <relations> + <handles> + <handles> + <qlist> + <item> + <handle> + <uid>{6d0ce78f-28e1-4a82-a443-59f4efcb8e66}</uid> + <target> + <instance type="MDependency"> + <MDependency> + <base-MRelation> + <MRelation> + <base-MElement> + <MElement> + <uid>{6d0ce78f-28e1-4a82-a443-59f4efcb8e66}</uid> + </MElement> + </base-MElement> + <name>subscribe</name> + <a>{00b8f12d-e08b-426a-83b8-83fea8907fab}</a> + <b>{121189af-36df-4efa-b451-3f1f85ef339f}</b> + </MRelation> + </base-MRelation> + </MDependency> + </instance> + </target> + </handle> + </item> + </qlist> + </handles> + </handles> + </relations> + </MObject> + </base-MObject> + <variety-editable>false</variety-editable> + <variety>actor</variety> + </MItem> + </instance> + </target> + </handle> + </item> + </qlist> + </handles> + </handles> + </children> + </MObject> + </base-MObject> + </MPackage> + </instance> + </root-package> + </project> +</qmt> diff --git a/examples/webenginewidgets/push-notifications/main.cpp b/examples/webenginewidgets/push-notifications/main.cpp new file mode 100644 index 000000000..18a862182 --- /dev/null +++ b/examples/webenginewidgets/push-notifications/main.cpp @@ -0,0 +1,41 @@ +// Copyright (C) 2019 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +#include "notificationpopup.h" + +#include <QApplication> +#include <QWebEngineProfile> +#include <QWebEnginePage> +#include <QWebEngineView> + +int main(int argc, char *argv[]) +{ + QCoreApplication::setOrganizationName("QtExamples"); + QApplication app(argc, argv); + + const QString name = + QString::fromLatin1("push-notifications.%1").arg(qWebEngineChromiumVersion()); + + QScopedPointer<QWebEngineProfile> profile(new QWebEngineProfile(name)); + QWebEngineView view(profile.data()); + auto popup = new NotificationPopup(&view); + + QObject::connect(view.page(), &QWebEnginePage::featurePermissionRequested, + [&](const QUrl &origin, QWebEnginePage::Feature feature) { + if (feature != QWebEnginePage::Notifications) + return; + + view.page()->setFeaturePermission(origin, feature, + QWebEnginePage::PermissionGrantedByUser); + }); + + profile->setPushServiceEnabled(true); + profile->setNotificationPresenter([&](std::unique_ptr<QWebEngineNotification> notification) { + popup->present(notification); + }); + + view.resize(640, 480); + view.setUrl(QUrl("http://localhost:5000")); + view.show(); + return app.exec(); +} diff --git a/examples/webenginewidgets/push-notifications/notificationpopup.h b/examples/webenginewidgets/push-notifications/notificationpopup.h new file mode 100644 index 000000000..cf53ded45 --- /dev/null +++ b/examples/webenginewidgets/push-notifications/notificationpopup.h @@ -0,0 +1,91 @@ +// Copyright (C) 2019 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +#pragma once + +#include <QHBoxLayout> +#include <QLabel> +#include <QMouseEvent> +#include <QPushButton> +#include <QSpacerItem> +#include <QTimer> +#include <QVBoxLayout> +#include <QWebEngineNotification> + +#include <memory> + +class NotificationPopup : public QWidget +{ + Q_OBJECT + + QLabel m_icon, m_title, m_message; + std::unique_ptr<QWebEngineNotification> notification; + +public: + NotificationPopup(QWidget *parent) : QWidget(parent) + { + setWindowFlags(Qt::ToolTip); + auto rootLayout = new QHBoxLayout(this); + + rootLayout->addWidget(&m_icon); + + auto bodyLayout = new QVBoxLayout; + rootLayout->addLayout(bodyLayout); + + auto titleLayout = new QHBoxLayout; + bodyLayout->addLayout(titleLayout); + + titleLayout->addWidget(&m_title); + titleLayout->addItem(new QSpacerItem(0, 0, QSizePolicy::Expanding)); + + auto close = new QPushButton(tr("Close")); + titleLayout->addWidget(close); + connect(close, &QPushButton::clicked, this, &NotificationPopup::onClosed); + + bodyLayout->addWidget(&m_message); + adjustSize(); + } + + void present(std::unique_ptr<QWebEngineNotification> &newNotification) + { + if (notification) { + notification->close(); + notification.reset(); + } + + notification.swap(newNotification); + + m_title.setText("<b>" + notification->title() + "</b>"); + m_message.setText(notification->message()); + m_icon.setPixmap(QPixmap(":/icon.png").scaledToHeight(m_icon.height())); + + show(); + notification->show(); + + connect(notification.get(), &QWebEngineNotification::closed, this, + &NotificationPopup::onClosed); + QTimer::singleShot(10000, notification.get(), [&]() { onClosed(); }); + + // position our popup in the right corner of its parent widget + move(parentWidget()->mapToGlobal(parentWidget()->rect().bottomRight() + - QPoint(width() + 10, height() + 10))); + } + +protected slots: + void onClosed() + { + hide(); + notification->close(); + notification.reset(); + } + +protected: + void mouseReleaseEvent(QMouseEvent *event) override + { + QWidget::mouseReleaseEvent(event); + if (notification && event->button() == Qt::LeftButton) { + notification->click(); + onClosed(); + } + } +}; diff --git a/examples/webenginewidgets/push-notifications/push-notifications.pro b/examples/webenginewidgets/push-notifications/push-notifications.pro new file mode 100644 index 000000000..5ffb85fd7 --- /dev/null +++ b/examples/webenginewidgets/push-notifications/push-notifications.pro @@ -0,0 +1,10 @@ +QT += webenginewidgets + +HEADERS = notificationpopup.h + +SOURCES = main.cpp + +RESOURCES = data/data.qrc + +target.path = $$[QT_INSTALL_EXAMPLES]/webenginewidgets/push-notifications +INSTALLS += target diff --git a/examples/webenginewidgets/push-notifications/server.js b/examples/webenginewidgets/push-notifications/server.js new file mode 100644 index 000000000..fc7deb08a --- /dev/null +++ b/examples/webenginewidgets/push-notifications/server.js @@ -0,0 +1,65 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +const express = require('express'); +const webpush = require('web-push'); + +// setup server +const port = 5000; +const server = express(); +server.use(express.json()); +server.use(express.static('content')); + +// we support only one subscription at the time +var subscription = null; + +// setup vapid keys +const vapidKeys = { + publicKey : + "BNO4fIv439RpvbReeABNlDNiiBD2Maykn7EVnwsPseH7-P5hjnzZLEfnejXVP7Zt6MFoKqKeHm4nV9BHvbgoRPg", + privateKey : "HqhrzsRfG5-SB3j45lyUmV7cYZuy-71r2Bb0tgaOefk" +}; + +// set vapid keys for webpush libs +webpush.setVapidDetails('mailto:push@qt.io', vapidKeys.publicKey, vapidKeys.privateKey); + +// add subscribe route +server.post('/subscribe', (req, res) => { + + // subscription request + subscription = req.body; + const delay = req.headers['ping-time']; + console.log('Got subscription with endpoint: ' + subscription.endpoint); + console.log('Ping delay is at: ' + delay); + + // confirm resource created + res.status(201).json({}); + + // schedule notification + setTimeout(() => { sendNotification(delay) }, delay * 1000); +}); + +// add unsubscribe route +server.post('/unsubscribe', (req, res) => { + console.log('Got unsubscribe with endpoint: ' + req.body.endpoint); + subscription = null; + res.status(201).json({}); +}); + +function sendNotification(delay) +{ + if (!subscription) + return; + + // create payload text + const payload = JSON.stringify({ title : 'Ping !', text : 'Visit qt.io', url : 'www.qt.io' }); + + // send notification + console.log('Sending notification !'); + webpush.sendNotification(subscription, payload).catch(err => console.error(err)); + + // schedule next notification + setTimeout(() => { sendNotification(delay) }, delay * 1000); +} + +server.listen(port, () => console.log(`Push server started at port ${port}`)); diff --git a/examples/webenginewidgets/recipebrowser/CMakeLists.txt b/examples/webenginewidgets/recipebrowser/CMakeLists.txt new file mode 100644 index 000000000..d10409c09 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/CMakeLists.txt @@ -0,0 +1,71 @@ +# Copyright (C) 2023 The Qt Company Ltd. +# SPDX-License-Identifier: BSD-3-Clause + +cmake_minimum_required(VERSION 3.16) +project(recipebrowser LANGUAGES CXX) + +set(CMAKE_AUTOMOC ON) +set(CMAKE_AUTOUIC ON) + +if(NOT DEFINED INSTALL_EXAMPLESDIR) + set(INSTALL_EXAMPLESDIR "examples") +endif() + +set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/webenginewidgets/recipebrowser") + +find_package(Qt6 REQUIRED COMPONENTS Core Gui WebEngineWidgets) + +qt_add_executable(recipebrowser + main.cpp + mainwindow.cpp mainwindow.h mainwindow.ui + stylesheetdialog.cpp stylesheetdialog.h stylesheetdialog.ui + document.cpp document.h +) + +set_target_properties(recipebrowser PROPERTIES + WIN32_EXECUTABLE TRUE + MACOSX_BUNDLE TRUE +) + +target_link_libraries(recipebrowser PUBLIC + Qt::Core + Qt::Gui + Qt::WebEngineWidgets +) + +# Resources: +set(recipebrowser_resource_files + "assets/3rdparty/markdown.css" + "assets/3rdparty/marked.js" + "assets/custom.css" + "assets/custom.js" + "assets/pages/burger.html" + "assets/pages/cupcakes.html" + "assets/pages/images/burger.jpg" + "assets/pages/images/cupcakes.jpg" + "assets/pages/images/pasta.jpg" + "assets/pages/images/pizza.jpg" + "assets/pages/images/skewers.jpg" + "assets/pages/images/soup.jpg" + "assets/pages/images/steak.jpg" + "assets/pages/pasta.html" + "assets/pages/pizza.html" + "assets/pages/skewers.html" + "assets/pages/soup.html" + "assets/pages/steak.html" +) + +qt_add_resources(recipebrowser "recipebrowser" + PREFIX + "/" + BASE + "assets" + FILES + ${recipebrowser_resource_files} +) + +install(TARGETS recipebrowser + RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}" + BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}" + LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}" +) diff --git a/examples/webenginewidgets/markdowneditor/resources/3rdparty/MARKDOWN-LICENSE.txt b/examples/webenginewidgets/recipebrowser/assets/3rdparty/MARKDOWN-LICENSE.txt index 23c52cc43..23c52cc43 100644 --- a/examples/webenginewidgets/markdowneditor/resources/3rdparty/MARKDOWN-LICENSE.txt +++ b/examples/webenginewidgets/recipebrowser/assets/3rdparty/MARKDOWN-LICENSE.txt diff --git a/examples/webenginewidgets/markdowneditor/resources/3rdparty/MARKED-LICENSE.txt b/examples/webenginewidgets/recipebrowser/assets/3rdparty/MARKED-LICENSE.txt index 8e3ba0e0a..8e3ba0e0a 100644 --- a/examples/webenginewidgets/markdowneditor/resources/3rdparty/MARKED-LICENSE.txt +++ b/examples/webenginewidgets/recipebrowser/assets/3rdparty/MARKED-LICENSE.txt diff --git a/examples/webenginewidgets/markdowneditor/resources/3rdparty/markdown.css b/examples/webenginewidgets/recipebrowser/assets/3rdparty/markdown.css index 24fc2ffe2..24fc2ffe2 100644 --- a/examples/webenginewidgets/markdowneditor/resources/3rdparty/markdown.css +++ b/examples/webenginewidgets/recipebrowser/assets/3rdparty/markdown.css diff --git a/examples/webenginewidgets/markdowneditor/resources/3rdparty/marked.js b/examples/webenginewidgets/recipebrowser/assets/3rdparty/marked.js index 33c02d9cf..33c02d9cf 100644 --- a/examples/webenginewidgets/markdowneditor/resources/3rdparty/marked.js +++ b/examples/webenginewidgets/recipebrowser/assets/3rdparty/marked.js diff --git a/examples/webenginewidgets/recipebrowser/assets/3rdparty/qt_attribution.json b/examples/webenginewidgets/recipebrowser/assets/3rdparty/qt_attribution.json new file mode 100644 index 000000000..f8b0fd023 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/3rdparty/qt_attribution.json @@ -0,0 +1,34 @@ +[ + { + "Id" : "recipebrowser-marked", + "Name" : "Marked (WebEngine Recipe Browser example)", + "QDocModule" : "qtwebengine", + "QtUsage" : "Marked is used in the WebEngine Recipe Browser example", + "QtParts" : ["examples"], + "Files" : "marked.js", + "Description" : + "A full-featured markdown parser and compiler, written in JavaScript. Built for speed.", + "Homepage" : "https://github.com/chjj/marked", + "Version" : "0.4.0", + "DownloadLocation" : "https://github.com/markedjs/marked/blob/0.4.0/lib/marked.js", + "Copyright" : "Copyright (c) 2011-2018, Christopher Jeffrey", + "License" : "MIT License", + "LicenseId" : "MIT", + "LicenseFile" : "MARKED-LICENSE.txt" + }, + { + "Id" : "recipebrowser-markdowncss", + "Name" : "Markdown.css (WebEngine Recipe Browser example)", + "QDocModule" : "qtwebengine", + "QtUsage" : "markdown.css is used in the WebEngine Recipe Browser example", + "QtParts" : ["examples"], + "Files" : "markdown.css", + "Description" : "Markdown.css is better default styling for your Markdown files.", + "Version" : "188530e4b5d020d7e237fc6b26be13ebf4a8def3", + "DownloadLocation" : "https://bitbucket.org/kevinburke/markdowncss/src/188530e4b5d020d7e237fc6b26be13ebf4a8def3/markdown.css", + "Copyright" : "Copyright 2011 Kevin Burke Copyright Twitter Inc.", + "License" : "Apache License 2.0", + "LicenseId" : "Apache-2.0", + "LicenseFile" : "MARKDOWN-LICENSE.txt" + } + ] diff --git a/examples/webenginewidgets/recipebrowser/assets/custom.css b/examples/webenginewidgets/recipebrowser/assets/custom.css new file mode 100644 index 000000000..cc1106af3 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/custom.css @@ -0,0 +1,28 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +body { + padding-top: 0; + margin-top: 0; +} + +#content { + display: none; +} + +img { + width: 100%; + height: 100%; +} + +li { + margin-left: 25px; +} + +ol li { + margin-bottom: 10px; +} + +* { + max-width: 960px !important; +} diff --git a/examples/webenginewidgets/recipebrowser/assets/custom.js b/examples/webenginewidgets/recipebrowser/assets/custom.js new file mode 100644 index 000000000..34470164e --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/custom.js @@ -0,0 +1,13 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +marked.setOptions({ + renderer : new marked.Renderer(), + gfm : true, + tables : true, + breaks : false, + pedantic : false, + sanitize : false, + smartLists : true, + smartypants : false +}); diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/burger.html b/examples/webenginewidgets/recipebrowser/assets/pages/burger.html new file mode 100644 index 000000000..99497959f --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/burger.html @@ -0,0 +1,96 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Insanity Burger</title> + <link rel="stylesheet" type="text/css" href="../3rdparty/markdown.css"> + <link rel="stylesheet" type="text/css" href="../custom.css"> + <script src="../3rdparty/marked.js"></script> + <script src="../custom.js"></script> + <script src="qrc:/qtwebchannel/qwebchannel.js"></script> +</head> +<body> + <div id="placeholder"></div> + <div id="content"> + +<img src="images/burger.jpg" alt="Insanity Burger" title="Insanity Burger" /> + +Insanity burger +=============== + +### Ingredients + +* 800 g minced chuck steak +* olive oil +* 1 large red onion +* 1 splash of white wine vinegar +* 2 large gherkins +* 4 sesame-topped brioche burger buns +* 4-8 rashers of smoked streaky bacon +* 4 teaspoons American mustard +* Tabasco Chipotle sauce +* 4 thin slices of Red Leicester cheese +* 4 teaspoons tomato ketchup + +#### For the burger sauce +* ¼ of an iceberg lettuce +* 2 heaped tablespoons mayonnaise +* 1 heaped tablespoon tomato ketchup +* 1 teaspoon Tabasco Chipotle sauce +* 1 teaspoon Worcestershire sauce +* 1 teaspoon brandy, or bourbon (optional) + +### Instructions +For the best burger, go to your butcher’s and ask them to mince 800g of chuck steak for you. +This cut has a really good balance of fat and flavoursome meat. Divide it into 4 and, with wet +hands, roll each piece into a ball, then press into flat patties roughly 12cm wide and about 2cm +wider than your buns. Place on an oiled plate and chill in the fridge. Next, finely slice the red +onion, then dress in a bowl with the vinegar and a pinch of sea salt. Slice the gherkins and halve +the buns. Finely chop the lettuce and mix with the rest of the burger sauce ingredients in a bowl, +then season to taste. + +I like to only cook 2 burgers at a time to achieve perfection, so get two pans on the go – a large +non-stick pan on a high heat for your burgers and another on a medium heat for the bacon. Pat your +burgers with oil and season them with salt and pepper. Put 2 burgers into the first pan, pressing +down on them with a fish slice, then put half the bacon into the other pan. After 1 minute, flip +the burgers and brush each cooked side with ½ a teaspoon of mustard and a dash of Tabasco. After +another minute, flip onto the mustard side and brush again with another ½ teaspoon of mustard and +a second dash of Tabasco on the other side. Cook for one more minute, by which point you can place +some crispy bacon on top of each burger with a slice of cheese. Add a tiny splash of water to the +pan and place a heatproof bowl over the burgers to melt the cheese – 30 seconds should do it. At the +same time, toast 2 split buns in the bacon fat in the other pan until lightly golden. Repeat with +the remaining two burgers. + +To build each burger, add a quarter of the burger sauce to the bun base, then top with a cheesy +bacon burger, a quarter of the onions and gherkins. Rub the bun top with a teaspoon of ketchup, +then gently press together. As the burger rests, juices will soak into the bun, so serve right +away, which is great, or for an extra filthy experience, wrap each one in greaseproof paper, then +give it a minute to go gorgeous and sloppy. + +**Enjoy!** + + </div><!--End of content--> + + <script> + 'use strict'; + + var jsContent = document.getElementById('content'); + var placeholder = document.getElementById('placeholder'); + + var updateText = function(text) { + placeholder.innerHTML = marked.parse(text); + } + + new QWebChannel(qt.webChannelTransport, + function(channel) { + var content = channel.objects.content; + content.setInitialText(jsContent.innerHTML); + content.textChanged.connect(updateText); + } + ); + </script> +</body> +</html> + + + diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/cupcakes.html b/examples/webenginewidgets/recipebrowser/assets/pages/cupcakes.html new file mode 100644 index 000000000..e8e14a9b6 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/cupcakes.html @@ -0,0 +1,75 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Cupcakes</title> + <link rel="stylesheet" type="text/css" href="../3rdparty/markdown.css"> + <link rel="stylesheet" type="text/css" href="../custom.css"> + <script src="../3rdparty/marked.js"></script> + <script src="../custom.js"></script> + <script src="qrc:/qtwebchannel/qwebchannel.js"></script> +</head> +<body> + <div id="placeholder"></div> + <div id="content"> + +<img src="images/cupcakes.jpg" alt="Cupcakes" title="Cupcakes" /> + +Cupcakes +============= + +### Ingredients + +* 300 g caster sugar +* 150 ml sunflower oil +* 1 teaspoon vanilla extract +* 500 g dairy-free soya yoghurt +* 2 teaspoons cider vinegar +* 350 g plain flour +* 1 teaspoon bicarbonate of soda +* 1½ teaspoons baking powder + +#### For the vegan vanilla icing +* 200 g dairy-free soya spread , chilled +* 660 g icing sugar +* ½ teaspoon vanilla extract + +### Instructions +1. Preheat the oven to 170°C fan/375°F/gas 5. +2. Place the sugar, oil and vanilla extract in a large bowl, then beat with an electric mixer for 1 to 2 minutes, until well combined. +3. Mix the yoghurt and vinegar together in a bowl, then add to the mixture and beat for 1 to 2 minutes. +4. Add the remaining cupcake ingredients and 1 teaspoon of fine sea salt, then whisk until smooth and just combined. +5. Fill the paper cases two-thirds full with mixture, but don’t bother to smooth it out. +6. Bake for 20 minutes, or until they spring back when touched. Leave to cool, transferring to a wire cooling rack after 5 minutes. +7. Meanwhile, make the icing. Beat the soya spread with an electric mixer for 1 to 2 minutes, or until smooth. +8. Sift the icing sugar into a large bowl, then add to the soya spread in two stages, beating well between each. +9. Add the vanilla extract and a small splash of water, then whisk for a further few minutes, or until silky smooth – if it’s too stiff, add a splash more water to loosen. +10. Once the cupcakes are cool, decorate them with the icing and add a few sprinkles too if you like – whatever takes your fancy – then enjoy. + +**Enjoy!** + + </div><!--End of content--> + + <script> + 'use strict'; + + var jsContent = document.getElementById('content'); + var placeholder = document.getElementById('placeholder'); + + var updateText = function(text) { + placeholder.innerHTML = marked.parse(text); + } + + new QWebChannel(qt.webChannelTransport, + function(channel) { + var content = channel.objects.content; + content.setInitialText(jsContent.innerHTML); + content.textChanged.connect(updateText); + } + ); + </script> +</body> +</html> + + + diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/images/burger.jpg b/examples/webenginewidgets/recipebrowser/assets/pages/images/burger.jpg Binary files differnew file mode 100644 index 000000000..edc0c65de --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/images/burger.jpg diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/images/cupcakes.jpg b/examples/webenginewidgets/recipebrowser/assets/pages/images/cupcakes.jpg Binary files differnew file mode 100644 index 000000000..cce52ba23 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/images/cupcakes.jpg diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/images/pasta.jpg b/examples/webenginewidgets/recipebrowser/assets/pages/images/pasta.jpg Binary files differnew file mode 100644 index 000000000..7ac924b79 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/images/pasta.jpg diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/images/pizza.jpg b/examples/webenginewidgets/recipebrowser/assets/pages/images/pizza.jpg Binary files differnew file mode 100644 index 000000000..8d8f756af --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/images/pizza.jpg diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/images/skewers.jpg b/examples/webenginewidgets/recipebrowser/assets/pages/images/skewers.jpg Binary files differnew file mode 100644 index 000000000..6bb2f1172 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/images/skewers.jpg diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/images/soup.jpg b/examples/webenginewidgets/recipebrowser/assets/pages/images/soup.jpg Binary files differnew file mode 100644 index 000000000..fc9dff906 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/images/soup.jpg diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/images/steak.jpg b/examples/webenginewidgets/recipebrowser/assets/pages/images/steak.jpg Binary files differnew file mode 100644 index 000000000..240b72eb4 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/images/steak.jpg diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/pasta.html b/examples/webenginewidgets/recipebrowser/assets/pages/pasta.html new file mode 100644 index 000000000..c2b3d840a --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/pasta.html @@ -0,0 +1,78 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Pasta</title> + <link rel="stylesheet" type="text/css" href="../3rdparty/markdown.css"> + <link rel="stylesheet" type="text/css" href="../custom.css"> + <script src="../3rdparty/marked.js"></script> + <script src="../custom.js"></script> + <script src="qrc:/qtwebchannel/qwebchannel.js"></script> +</head> +<body> + <div id="placeholder"></div> + <div id="content"> + +<img src="images/pasta.jpg" alt="Pasta" title="Pasta" /> + +Pasta +============= + +### Ingredients + +* 2 red peppers , deseeded and sliced +* 2 yellow peppers , deseeded and sliced +* extra virgin olive oil +* sea salt +* freshly ground black pepper +* 2 red onions , peeled and finely sliced +* 2 cloves garlic , peeled and grated +* 2 handfuls fresh flat-leaf parsley , leaves finely chopped, stalks reserved +* 2 tablespoons red wine vinegar or balsamic vinegar +* 2 handfuls Parmesan cheese , grated +* 2 heaped tablespoons mascarpone cheese or crème fraîche , optional +* 455 g rigatoni, penne or spaghetti + + +### Instructions +1. Put all the peppers in a large frying pan over a medium heat with a little olive oil and a pinch of salt and pepper. +2. Place a lid on, and cook slowly for 15 minutes until softened. Don't rush this too much, as cooking the peppers slowly like this really helps to bring out the flavour. +3. Add the onion and cook for a further 20 minutes. +4. Then add the garlic and parsley stalks and toss around, keeping everything moving in the pan. +5. Cook for about 3 minutes most. Have a little taste, and season with a bit more salt and pepper. +5. Add the vinegar - it will sizzle away, so give everything a good toss. +6. Then add one handful of the grated Parmesan and the mascarpone or crème fraîche if you are using it and turn the heat down to minimum while you cook the pasta. +7. Meanwhile put a large pot of salted water on to boil. +8. Add the pasta to the boiling water and cook according to the packet instructions. +9. When cooked, drain in a colander, reserving some of the cooking water. +10. Put the peppers, pasta and parsley leaves into a large warmed bowl. +11. Give them a good toss together, then add a little of the pasta cooking water and a few good lugs of extra virgin olive oil to coat the pasta nicely. +12. Serve straight away sprinkled with the rest of the Parmesan. + +**Enjoy!** + + </div><!--End of content--> + + <script> + 'use strict'; + + var jsContent = document.getElementById('content'); + var placeholder = document.getElementById('placeholder'); + + var updateText = function(text) { + placeholder.innerHTML = marked.parse(text); + } + + new QWebChannel(qt.webChannelTransport, + function(channel) { + var content = channel.objects.content; + content.setInitialText(jsContent.innerHTML); + content.textChanged.connect(updateText); + } + ); + </script> +</body> +</html> + + + diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/pizza.html b/examples/webenginewidgets/recipebrowser/assets/pages/pizza.html new file mode 100644 index 000000000..7e390a373 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/pizza.html @@ -0,0 +1,69 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Pizza Diavola</title> + <link rel="stylesheet" type="text/css" href="../3rdparty/markdown.css"> + <link rel="stylesheet" type="text/css" href="../custom.css"> + <script src="../3rdparty/marked.js"></script> + <script src="../custom.js"></script> + <script src="qrc:/qtwebchannel/qwebchannel.js"></script> +</head> +<body> + <div id="placeholder"></div> + <div id="content"> + +<img src="images/pizza.jpg" alt="Pizza Diavola" title="Pizza Diavola" /> + +Pizza Diavola +============= + +### Ingredients + +* 2 pizza dough balls +* 100g Mozzarella +* 400g Passata +* 200 g Spicy Salami +* 2 fresh chillies +* Extra virgin olive oil +* Salt + +### Instructions +1. Preheat oven to 210 oc. +2. Get your pizza dough balls ( depending on how many you are making) and roll them out to about 12 inches diameter using your hands in a circular stretching technique or using a rolling pin. +3. With the dough prepared now get our sauce ready by mixing the passata with three tbsp of the olive oil and a good pinch of salt. +4. Now slice up your salami into thin-ish slices and also finely chop the fresh chillies. +5. Next, slice or dice your mozzarella and we are ready to dress the pizza. +6. Add half the tomato sauce to each base and spread evenly leaving a half inch perimeter. +7. Add the mozzarella, salami and finish with the chillies. +8. Finally drizzle with some more olive oil and your are ready to cook your pizza diavola. +9. Place in the oven for ten minutes or until golden. +10. Remove from the oven, slice, and enjoy your pizza diavola. + +**Enjoy!** + + </div><!--End of content--> + + <script> + 'use strict'; + + var jsContent = document.getElementById('content'); + var placeholder = document.getElementById('placeholder'); + + var updateText = function(text) { + placeholder.innerHTML = marked.parse(text); + } + + new QWebChannel(qt.webChannelTransport, + function(channel) { + var content = channel.objects.content; + content.setInitialText(jsContent.innerHTML); + content.textChanged.connect(updateText); + } + ); + </script> +</body> +</html> + + + diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/skewers.html b/examples/webenginewidgets/recipebrowser/assets/pages/skewers.html new file mode 100644 index 000000000..db2df5472 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/skewers.html @@ -0,0 +1,74 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Grilled skewers</title> + <link rel="stylesheet" type="text/css" href="../3rdparty/markdown.css"> + <link rel="stylesheet" type="text/css" href="../custom.css"> + <script src="../3rdparty/marked.js"></script> + <script src="../custom.js"></script> + <script src="qrc:/qtwebchannel/qwebchannel.js"></script> +</head> +<body> + <div id="placeholder"></div> + <div id="content"> + +<img src="images/skewers.jpg" alt="Grilled skewers" title="Grilled skewers" /> + +Grilled skewers +====================== + +### Ingredients + +* 3 cloves of garlic +* 200g kefalotyri cheese +* 2 medium aubergine +* 1 iceberg lettuce +* 1 tablespoon coriander seeds +* 2 teaspoons dried oregano +* 2 lemons +* 4 tablespoons olive oil +* 600g lamb neck fillet , in 2cm chunks +* 12 fresh bay leaves + +### Instructions +1. Peel and crush the garlic. +2. Chop the cheese into bite-sized pieces, trim and chop the aubergines into 2cm chunks, and trim and finely slice the lettuce. +3. Finely crush the coriander seeds in a pestle and mortar and add to a large bowl with the oregano and garlic. Finely grate in the lemon zest (reserve the zested lemons) and stir in the oil. +4. Season, then add the cheese, lamb, aubergines and bay leaves. Leave to marinate for at least an hour, or overnight if you can. +5. Meanwhile, pickle your cabbage. Trim, core and finely slice the cabbage, then place in a colander in the sink or over a bowl and toss with 2 teaspoons of sea salt. Cover and set aside for at least 2 hours, then rinse. +6. Peel and finely slice the onions, then transfer to a bowl along with the cabbage. +7. Put the remaining ingredients in a pan and bring to a boil. Simmer for 10 minutes, then pour over the cabbage and onions. Transfer to sterilised jars – this will keep for up to 1 month. +8. For the flatbreads, put the flour, baking powder, buttermilk and half of the sesame seeds in a bowl and mix until everything is combined. +9. Tip onto a lightly floured surface and knead briefly. Divide into six, using a rolling pin to roll them into 1 to 2mm rounds. +10. Scatter with the remaining sesame seeds and run the rolling pin over them. Pop the flatbreads onto the hot barbecue for 1 to 2 minutes on each side. +11. Load 12 skewers with the cheese, lamb, aubergines and bay leaves, then place on the barbecue (not directly over the coals) for 20 to 25 minutes, turning often, until the lamb is medium-rare and the aubergines are cooked. +12. Serve the lamb with the flatbreads, cabbage, lettuce and lemon wedges. + +**Enjoy!** + + </div><!--End of content--> + + <script> + 'use strict'; + + var jsContent = document.getElementById('content'); + var placeholder = document.getElementById('placeholder'); + + var updateText = function(text) { + placeholder.innerHTML = marked.parse(text); + } + + new QWebChannel(qt.webChannelTransport, + function(channel) { + var content = channel.objects.content; + content.setInitialText(jsContent.innerHTML); + content.textChanged.connect(updateText); + } + ); + </script> +</body> +</html> + + + diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/soup.html b/examples/webenginewidgets/recipebrowser/assets/pages/soup.html new file mode 100644 index 000000000..ea51fc8a5 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/soup.html @@ -0,0 +1,63 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Soup</title> + <link rel="stylesheet" type="text/css" href="../3rdparty/markdown.css"> + <link rel="stylesheet" type="text/css" href="../custom.css"> + <script src="../3rdparty/marked.js"></script> + <script src="../custom.js"></script> + <script src="qrc:/qtwebchannel/qwebchannel.js"></script> +</head> +<body> + <div id="placeholder"></div> + <div id="content"> + +<img src="images/soup.jpg" alt="Soup" title="Soup" /> + +Soup +============= + +### Ingredients + +* 2 potatoes +* 2 onions +* 2 cloves of garlic +* olive oil +* 400 ml organic stock +* 3 bunches of watercress + +### Instructions +* Peel and roughly chop the potatoes, onions and garlic. +* In a large saucepan, heat a little olive oil, then sauté the potato, onion and garlic until the onions are translucent. +* Add the stock and simmer until the potato is soft. Chop and add the watercress and simmer for a further 3 to 4 minutes. +* Using a hand blender, liquidise the soup until smooth. +* Serve with a swirl of crème fraîche and some Fortt’s Bath Oliver biscuits, if you like. + +**Enjoy!** + + </div><!--End of content--> + + <script> + 'use strict'; + + var jsContent = document.getElementById('content'); + var placeholder = document.getElementById('placeholder'); + + var updateText = function(text) { + placeholder.innerHTML = marked.parse(text); + } + + new QWebChannel(qt.webChannelTransport, + function(channel) { + var content = channel.objects.content; + content.setInitialText(jsContent.innerHTML); + content.textChanged.connect(updateText); + } + ); + </script> +</body> +</html> + + + diff --git a/examples/webenginewidgets/recipebrowser/assets/pages/steak.html b/examples/webenginewidgets/recipebrowser/assets/pages/steak.html new file mode 100644 index 000000000..26391b409 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/assets/pages/steak.html @@ -0,0 +1,88 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Grilled steak and rice</title> + <link rel="stylesheet" type="text/css" href="../3rdparty/markdown.css"> + <link rel="stylesheet" type="text/css" href="../custom.css"> + <script src="../3rdparty/marked.js"></script> + <script src="../custom.js"></script> + <script src="qrc:/qtwebchannel/qwebchannel.js"></script> +</head> +<body> + <div id="placeholder"></div> + <div id="content"> + +<img src="images/steak.jpg" alt="Grilled steak and rice" title="Grilled steak and rice" /> + +Grilled steak and rice +====================== + +### Ingredients + +#### For the ratatouille +* courgette +* 1 small aubergine +* 2 mixed-color peppers +* 1 red onion +* 1 heaped teaspoon harissa +* 2 anchovy fillets +* 2-4 cloves of garlic +* 700 g passata +* 1 tablespoon balsamic vinegar +* ½ bunch fresh basil +* 2 tablespoons fat-free natural yoghurt + +#### For the rice +* 1 mug (300g) 10-minute wholegrain or basmati rice +* 1 good pinch saffron +* ½ lemon + +#### For the steak +* 2 x 250 g quality sirloin steaks, fat removed +* 1 teaspoon sweet paprika olive oil +* ½ bunch fresh flat-leaf parsley +* 1 heaped teaspoon Dijon mustard +* 1 tablespoon extra virgin olive oil +* ½ lemon + +### Instructions +1. Halve the courgette lengthways, slice the aubergine 1cm thick and place both on the griddle pan, turning when charred. +2. Put 1 mug of rice, 2 mugs of boiling water, the saffron, lemon half and a pinch of salt into the small pan, cover and cook until fluffy, stirring occasionally. +3. Tear the seeds and stalks out of the peppers, then roughly chop with the peeled red onion and put into the casserole pan with the harissa, anchovies and 1 teaspoon of their oil. +4. Squash in the unpeeled garlic through a garlic crusher and stir regularly. +5. Remove the charred courgette and aubergine from the griddle pan, leaving it on the heat, and roughly chop them on a board. +6. Add them to the casserole pan along with the passata and vinegar, and boil with the lid on. +7. Rub the steaks with salt, the paprika and 1 teaspoon of olive oil and place on the hot griddle pan, turning every minute until cooked to your liking. +8. On a board, finely slice the parsley stalks and roughly chop the leaves. +9. Add the mustard and extra virgin olive oil, season with salt and pepper and squeeze over the lemon juice, then mix together and spread over the board. +10. When the steaks are done, transfer them to the board, turn in the dressing, then slice. +11. Tear the top leafy half of the basil into the ratatouille, season to taste, and serve with yoghurt and saffron rice. + +**Enjoy!** + + </div><!--End of content--> + + <script> + 'use strict'; + + var jsContent = document.getElementById('content'); + var placeholder = document.getElementById('placeholder'); + + var updateText = function(text) { + placeholder.innerHTML = marked.parse(text); + } + + new QWebChannel(qt.webChannelTransport, + function(channel) { + var content = channel.objects.content; + content.setInitialText(jsContent.innerHTML); + content.textChanged.connect(updateText); + } + ); + </script> +</body> +</html> + + + diff --git a/examples/webenginewidgets/recipebrowser/doc/images/recipebrowser.webp b/examples/webenginewidgets/recipebrowser/doc/images/recipebrowser.webp Binary files differnew file mode 100644 index 000000000..8446bcde3 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/doc/images/recipebrowser.webp diff --git a/examples/webenginewidgets/recipebrowser/doc/src/recipebrowser.qdoc b/examples/webenginewidgets/recipebrowser/doc/src/recipebrowser.qdoc new file mode 100644 index 000000000..dd701f1f2 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/doc/src/recipebrowser.qdoc @@ -0,0 +1,197 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only + +/*! + \example webenginewidgets/recipebrowser + \title Recipe Browser + \examplecategory {Application Examples} + \meta tag {widgets, webengine, webchannel, webenginescript} + \ingroup webengine-widgetexamples + \brief Injecting custom stylsheets into web pages and providing a rich text preview + tool for a custom markup language. + + \image recipebrowser.webp + + \e {Recipe Browser} is a small hybrid web browser application. It demonstrates how to + use the \l{Qt WebEngine Widgets C++ Classes} {Qt WebEngine C++ classes} to combine + C++ and JavaScript logic in the following ways. + + \list + \li Running arbitrary JavaScript code via \c QWebEnginePage::runJavaScript() to + inject custom CSS stylesheets + \li Using QWebEngineScript and QWebEngineScriptCollection to persist the JavaScript + code and inject it to every page + \li Using QWebChannel to interact with and provide a rich text preview for a custom + markup language + \endlist + + \l{http://daringfireball.net/projects/markdown/}{Markdown} is a lightweight + markup language with a plain text formatting syntax. + Some services, such as \l{http://github.com}{github}, acknowledge the + format, and render the content as rich text when viewed in a browser. + + The Recipe Browser main window is split into a navigation on the left and + a preview area on the right. The preview area on the right switches to an + editor when the user clicks the Edit button on the top left of the main window. + The editor supports the Markdown syntax and is implemented by using + QPlainTextEdit. The document is rendered as rich text in the preview area, + once the user clicks the View button,to which the Edit button transforms to. + This rendering is implemented by using QWebEngineView. To render the text, + a JavaScript library inside the web engine converts the Markdown text to HTML. + The preview is updated from the editor through QWebChannel. + + \include examples-run.qdocinc + + \section1 Exposing Document Text + + To render the current Markdown text it needs to be exposed to the web engine through + QWebChannel. To achieve this it has to be part of Qt metatype system. This is done + by using a dedicated \c Document class that exposes the document text as a + \c {Q_PROPERTY}: + + \quotefromfile webenginewidgets/recipebrowser/document.h + \skipto class Document + \printto #endif + + The \c Document class wraps a QString \c m_currentText to be set on the C++ + side with the \c setText() method and exposes it at runtime as a \c text + property with a \c textChanged signal. We define the \c setText method as + follows: + + \quotefromfile webenginewidgets/recipebrowser/document.cpp + \skipto Document::setText(const QString &text) + \printuntil /^\}/ + + Additionally, the \c Document class keeps track of the current recipe via + \c m_currentPage. We call the recipes pages here, because each recipe has + its distinct HTML document that contains the initial text content. + Furthermore, \c m_textCollection is a QMap<QString, QString> that contains + the key/value pairs \{page, text\}, so that changes made to the text content + of a page is persisted between navigation. Nevertheless, we do not write the + modified text contents to the drive, but instead we persist them between + application start and shutdown via QSettings. + + \section1 Creating the Main Window + + The \c MainWindow class inherits the QMainWindow class: + + \quotefromfile webenginewidgets/recipebrowser/mainwindow.h + \skipto class MainWindow : + \printto endif + + The class declares private slots that match the two buttons on the + top left, over the navigation list view. Additionally, helper + methods for custom CSS stylesheets are declared. + + The actual layout of the main window is specified in a \c .ui file. + The widgets and actions are available at runtime in the \c ui member + variable. + + \c m_isEditMode is a boolean that toggles between the editor and the + preview area. + \c m_content is an instance of the \c Document class. + + The actual setup of the different objects is done in the \c MainWindow + constructor: + + \quotefromfile webenginewidgets/recipebrowser/mainwindow.cpp + \skipto MainWindow::MainWindow + \printto connect + + The constructor first calls \c setupUi to construct the widgets and menu + actions according to the UI file. The text editor font is set to one + with a fixed character width, and the QWebEngineView widget is told not + to show a context menu. Furthermore, the editor is hidden away. + + \printto ui->recipes + + Here the \c clicked signals of QPushButton are connected to respective functions + that show the stylesheets dialog or toggle between edit and view mode, that is, + hide and show the editor and preview area respectively. + + \printto m_content.setTextEdit + + Here the navigation QListWidget on the left is setup with the 7 recipes. + Also, the currentItemChanged signal of QListWidget is connected to a lambda + that loads the new, current recipe page and updates the page in \c m_content. + + \printto connect + + Next, the pointer to the ui editor, a QPlainTextEdit, is passed to \c m_content to ensure that + calls to \c Document::setInitialText() work properly. + + \printto QSettings + + Here the \c textChanged signal of the editor is connected to a lambda that + updates the text in \c m_content. This object is then exposed to the JS side + by \c QWebChannel under the name \c{content}. + + \printto ui->recipes + + By using QSettings we persist stylesheets between application runs. If there + should be no stylesheets configured, for example, because the user deleted all of them + in a previous run, we load default ones. + + \printto } + + Finally, we set the currently selected list item to the first contained in the + navigation list widget. This triggers the previously mentioned + QListWidget::currentItemChanged signal and navigates to the page of the list item. + + \section1 Working With Stylesheets + + We use JavaScript to create and append CSS elements to the documents. + After declaring the script source, QWebEnginePage::runJavaScript() can run it + immediately and apply newly created styles on the current content of the web view. + Encapsulating the script into a QWebEngineScript and adding it to the script collection + of QWebEnginePage makes its effect permanent. + + \quotefromfile webenginewidgets/recipebrowser/mainwindow.cpp + \skipto MainWindow::insertStyleSheet + \printuntil /^\}/ + + Removing stylesheets can be done similarly: + + \quotefromfile webenginewidgets/recipebrowser/mainwindow.cpp + \skipto MainWindow::removeStyleSheet + \printuntil /^\}/ + + \section1 Creating a recipe file + + \quotefile webenginewidgets/recipebrowser/assets/pages/burger.html + + All the different recipe pages are set up the same way. + + In the \c <head> part they + include two CSS files: \c markdown.css, that styles the markdown, and + custom.css, that does some further styling but most importantly hides the + \c <div> with id \e content, as this \c <div> only contains the unmodified, + initial content text. Also, three JS scripts are included. \c marked.js + is responsible for parsing the markdown and transforming it into HTML. + \c custom.js does some configuration of \c marked.js, and \c qwebchannel.js + exposes the QWebChannel JavaScript API. + + In the body there are two \c <div> elements. The \c <div> with id \e placeholder + gets the markdown text injected that is rendered and visible. The \c <div> with id + \e content is hidden by \c custom.css and only contains the original, unmodified + text content of the recipe. + + Finally, on the bottom of each recipe HTML file is a script that is responsible for + the communication between the C++ and JavaScript side via QWebChannel. The original, + unmodified text content inside the \c <div> with id \e content is passed to the C++ + side and a callback is setup that is invoked when the \c textChanged signal of + \c m_content is emitted. The callback then updates the contents of the \c <div> + \e placeholder with the parsed markdown. + + \section1 Files and Attributions + + The example bundles the following code with third-party licenses: + \table + \row + \li \l{recipebrowser-marked}{Marked} + \li MIT License + \row + \li \l{recipebrowser-markdowncss}{Markdown.css} + \li Apache License 2.0 + \endtable +*/ diff --git a/examples/webenginewidgets/recipebrowser/document.cpp b/examples/webenginewidgets/recipebrowser/document.cpp new file mode 100644 index 000000000..c991e14f8 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/document.cpp @@ -0,0 +1,48 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +#include "document.h" + +#include <QSettings> + +Document::Document(QObject *parent) : QObject(parent) +{ + QSettings settings; + settings.beginGroup("textCollection"); + QStringList pageTexts = settings.allKeys(); + for (const QString &name : std::as_const(pageTexts)) { + QString pageText = settings.value(name).value<QString>(); + if (!pageText.isEmpty()) + m_textCollection.insert(name, pageText); + } + settings.endGroup(); +} + +void Document::setTextEdit(QPlainTextEdit *textEdit) +{ + m_textEdit = textEdit; +} + +void Document::setCurrentPage(const QString &page) +{ + m_currentPage = page; +} + +void Document::setInitialText(const QString &text) +{ + m_textEdit->setPlainText(m_textCollection.value(m_currentPage, text)); +} + +void Document::setText(const QString &text) +{ + if (text == m_currentText) + return; + m_currentText = text; + emit textChanged(m_currentText); + + QSettings settings; + settings.beginGroup("textCollection"); + settings.setValue(m_currentPage, text); + m_textCollection.insert(m_currentPage, text); + settings.endGroup(); +} diff --git a/examples/webenginewidgets/recipebrowser/document.h b/examples/webenginewidgets/recipebrowser/document.h new file mode 100644 index 000000000..f6b537eb8 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/document.h @@ -0,0 +1,36 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +#ifndef DOCUMENT_H +#define DOCUMENT_H + +#include <QObject> +#include <QString> +#include <QPlainTextEdit> + +class Document : public QObject +{ + Q_OBJECT + Q_PROPERTY(QString text MEMBER m_currentText NOTIFY textChanged FINAL) +public: + explicit Document(QObject *parent = nullptr); + + void setTextEdit(QPlainTextEdit *textEdit); + void setCurrentPage(const QString &page); + +public slots: + void setInitialText(const QString &text); + void setText(const QString &text); + +signals: + void textChanged(const QString &text); + +private: + QPlainTextEdit *m_textEdit; + + QString m_currentText; + QString m_currentPage; + QMap<QString, QString> m_textCollection; +}; + +#endif // DOCUMENT_H diff --git a/examples/webenginewidgets/stylesheetbrowser/main.cpp b/examples/webenginewidgets/recipebrowser/main.cpp index cf1e5f718..b0b42d16b 100644 --- a/examples/webenginewidgets/stylesheetbrowser/main.cpp +++ b/examples/webenginewidgets/recipebrowser/main.cpp @@ -1,4 +1,4 @@ -// Copyright (C) 2017 The Qt Company Ltd. +// Copyright (C) 2023 The Qt Company Ltd. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause #include "mainwindow.h" @@ -12,7 +12,7 @@ int main(int argc, char *argv[]) QCoreApplication::setOrganizationName("QtExamples"); QApplication a(argc, argv); - MainWindow w(QUrl("http://qt.io")); + MainWindow w; w.show(); return a.exec(); } diff --git a/examples/webenginewidgets/recipebrowser/mainwindow.cpp b/examples/webenginewidgets/recipebrowser/mainwindow.cpp new file mode 100644 index 000000000..7288fe4ce --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/mainwindow.cpp @@ -0,0 +1,153 @@ +// Copyright (C) 2023 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause + +#include "mainwindow.h" +#include "stylesheetdialog.h" +#include "ui_mainwindow.h" + +#include <QWebChannel> + +static QMap<QString, QString> defaultStyleSheets = { + { "Upside down", "body { -webkit-transform: rotate(180deg); }" }, + { "Darkmode", + "body { color: #FFF; background-color: #000 }" + "h1, h2, h3, h4, h5 { color: #FFF }" } +}; + +MainWindow::MainWindow(QWidget *parent) + : QMainWindow(parent), ui(new Ui::MainWindow), m_isEditMode(false) +{ + ui->setupUi(this); + ui->textEdit->setFont(QFontDatabase::systemFont(QFontDatabase::FixedFont)); + ui->textEdit->hide(); + ui->webEngineView->setContextMenuPolicy(Qt::NoContextMenu); + + connect(ui->stylesheetsButton, &QPushButton::clicked, this, &MainWindow::showStyleSheetsDialog); + connect(ui->editViewButton, &QPushButton::clicked, this, &MainWindow::toggleEditView); + + ui->recipes->insertItem(0, "Burger"); + ui->recipes->insertItem(1, "Cupcakes"); + ui->recipes->insertItem(2, "Pasta"); + ui->recipes->insertItem(3, "Pizza"); + ui->recipes->insertItem(4, "Skewers"); + ui->recipes->insertItem(5, "Soup"); + ui->recipes->insertItem(6, "Steak"); + connect(ui->recipes, &QListWidget::currentItemChanged, this, + [this](QListWidgetItem *current, QListWidgetItem * /* previous */) { + const QString page = current->text().toLower(); + const QString url = QStringLiteral("qrc:/pages/") + page + QStringLiteral(".html"); + ui->webEngineView->setUrl(QUrl(url)); + m_content.setCurrentPage(page); + }); + + m_content.setTextEdit(ui->textEdit); + + connect(ui->textEdit, &QPlainTextEdit::textChanged, this, + [this]() { m_content.setText(ui->textEdit->toPlainText()); }); + + QWebChannel *channel = new QWebChannel(this); + channel->registerObject(QStringLiteral("content"), &m_content); + ui->webEngineView->page()->setWebChannel(channel); + + QSettings settings; + settings.beginGroup("styleSheets"); + QStringList styleSheets = settings.allKeys(); + if (styleSheets.empty()) { + // Add back default style sheets if the user cleared them out + loadDefaultStyleSheets(); + } else { + for (const auto &name : std::as_const(styleSheets)) { + StyleSheet styleSheet = settings.value(name).value<StyleSheet>(); + if (styleSheet.second) + insertStyleSheet(name, styleSheet.first, false); + } + } + settings.endGroup(); + + ui->recipes->setCurrentItem(ui->recipes->item(0)); +} + +MainWindow::~MainWindow() +{ + delete ui; +} + +void MainWindow::insertStyleSheet(const QString &name, const QString &source, bool immediately) +{ + QWebEngineScript script; + QString s = QString::fromLatin1("(function() {" + " css = document.createElement('style');" + " css.type = 'text/css';" + " css.id = '%1';" + " document.head.appendChild(css);" + " css.innerText = '%2';" + "})()") + .arg(name, source.simplified()); + if (immediately) + ui->webEngineView->page()->runJavaScript(s, QWebEngineScript::ApplicationWorld); + + script.setName(name); + script.setSourceCode(s); + script.setInjectionPoint(QWebEngineScript::DocumentReady); + script.setRunsOnSubFrames(true); + script.setWorldId(QWebEngineScript::ApplicationWorld); + ui->webEngineView->page()->scripts().insert(script); +} + +void MainWindow::removeStyleSheet(const QString &name, bool immediately) +{ + QString s = QString::fromLatin1("(function() {" + " var element = document.getElementById('%1');" + " element.outerHTML = '';" + " delete element;" + "})()") + .arg(name); + if (immediately) + ui->webEngineView->page()->runJavaScript(s, QWebEngineScript::ApplicationWorld); + + const QList<QWebEngineScript> scripts = ui->webEngineView->page()->scripts().find(name); + if (!scripts.isEmpty()) + ui->webEngineView->page()->scripts().remove(scripts.first()); +} + +bool MainWindow::hasStyleSheet(const QString &name) +{ + const QList<QWebEngineScript> scripts = ui->webEngineView->page()->scripts().find(name); + return !scripts.isEmpty(); +} + +void MainWindow::loadDefaultStyleSheets() +{ + QSettings settings; + settings.beginGroup("styleSheets"); + + for (auto it = defaultStyleSheets.constBegin(); it != defaultStyleSheets.constEnd(); ++it) { + settings.setValue(it.key(), QVariant::fromValue(qMakePair(it.value(), true))); + insertStyleSheet(it.key(), it.value(), false); + } + + settings.endGroup(); +} + +void MainWindow::showStyleSheetsDialog() +{ + StylesheetDialog *dialog = new StylesheetDialog(this); + dialog->show(); +} + +void MainWindow::toggleEditView() +{ + m_isEditMode = !m_isEditMode; + + if (m_isEditMode) { + ui->webEngineView->hide(); + ui->textEdit->show(); + + ui->editViewButton->setText(QStringLiteral("View")); + } else { + ui->textEdit->hide(); + ui->webEngineView->show(); + + ui->editViewButton->setText(QStringLiteral("Edit")); + } +} diff --git a/examples/webenginewidgets/stylesheetbrowser/mainwindow.h b/examples/webenginewidgets/recipebrowser/mainwindow.h index 92d6d02fe..959c82af8 100644 --- a/examples/webenginewidgets/stylesheetbrowser/mainwindow.h +++ b/examples/webenginewidgets/recipebrowser/mainwindow.h @@ -1,12 +1,15 @@ -// Copyright (C) 2017 The Qt Company Ltd. +// Copyright (C) 2023 The Qt Company Ltd. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause #ifndef MAINWINDOW_H #define MAINWINDOW_H +#include "document.h" #include <QMainWindow> #include <QSettings> #include <QWebEngineScriptCollection> +#include <QWebEngineView> +#include <QPlainTextEdit> QT_BEGIN_NAMESPACE namespace Ui { @@ -19,7 +22,7 @@ class MainWindow : public QMainWindow Q_OBJECT public: - explicit MainWindow(const QUrl &url); + explicit MainWindow(QWidget *parent = nullptr); ~MainWindow(); void insertStyleSheet(const QString &name, const QString &source, bool immediately); @@ -28,13 +31,14 @@ public: void loadDefaultStyleSheets(); private slots: - void urlEntered(); - void urlChanged(const QUrl &url); void showStyleSheetsDialog(); - void reloadRequested(); + void toggleEditView(); private: Ui::MainWindow *ui; + + bool m_isEditMode; + Document m_content; }; #endif // MAINWINDOW_H diff --git a/examples/webenginewidgets/recipebrowser/mainwindow.ui b/examples/webenginewidgets/recipebrowser/mainwindow.ui new file mode 100644 index 000000000..b7c29f1b8 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/mainwindow.ui @@ -0,0 +1,106 @@ +<?xml version="1.0" encoding="UTF-8"?> +<ui version="4.0"> + <class>MainWindow</class> + <widget class="QMainWindow" name="MainWindow"> + <property name="geometry"> + <rect> + <x>0</x> + <y>0</y> + <width>713</width> + <height>455</height> + </rect> + </property> + <property name="windowTitle"> + <string>Recipe Browser</string> + </property> + <property name="unifiedTitleAndToolBarOnMac"> + <bool>false</bool> + </property> + <widget class="QWidget" name="centralWidget"> + <layout class="QGridLayout" name="gridLayout"> + <item row="0" column="0"> + <layout class="QHBoxLayout" name="horizontalLayout"> + <item> + <layout class="QVBoxLayout" name="navigation"> + <item> + <layout class="QHBoxLayout" name="navigationBar"> + <item> + <widget class="QLabel" name="label"> + <property name="sizePolicy"> + <sizepolicy hsizetype="Preferred" vsizetype="Fixed"> + <horstretch>0</horstretch> + <verstretch>0</verstretch> + </sizepolicy> + </property> + <property name="text"> + <string>Recipes</string> + </property> + <property name="alignment"> + <set>Qt::AlignCenter</set> + </property> + </widget> + </item> + <item> + <widget class="QPushButton" name="editViewButton"> + <property name="text"> + <string>Edit</string> + </property> + </widget> + </item> + <item> + <widget class="QPushButton" name="stylesheetsButton"> + <property name="sizePolicy"> + <sizepolicy hsizetype="Fixed" vsizetype="Fixed"> + <horstretch>0</horstretch> + <verstretch>0</verstretch> + </sizepolicy> + </property> + <property name="text"> + <string>Stylesheets</string> + </property> + </widget> + </item> + </layout> + </item> + <item> + <widget class="QListWidget" name="recipes"> + <property name="sizePolicy"> + <sizepolicy hsizetype="Preferred" vsizetype="Expanding"> + <horstretch>0</horstretch> + <verstretch>0</verstretch> + </sizepolicy> + </property> + </widget> + </item> + </layout> + </item> + <item> + <widget class="QWebEngineView" name="webEngineView" native="true"> + <property name="sizePolicy"> + <sizepolicy hsizetype="Expanding" vsizetype="Expanding"> + <horstretch>0</horstretch> + <verstretch>0</verstretch> + </sizepolicy> + </property> + </widget> + </item> + <item> + <widget class="QPlainTextEdit" name="textEdit"/> + </item> + </layout> + </item> + </layout> + </widget> + </widget> + <layoutdefault spacing="6" margin="11"/> + <customwidgets> + <customwidget> + <class>QWebEngineView</class> + <extends>QWidget</extends> + <header>qwebengineview.h</header> + <container>1</container> + </customwidget> + </customwidgets> + <resources/> + <connections/> +</ui> diff --git a/examples/webenginewidgets/stylesheetbrowser/stylesheetbrowser.pro b/examples/webenginewidgets/recipebrowser/recipebrowser.pro index a9ff54400..8f8895b52 100644 --- a/examples/webenginewidgets/stylesheetbrowser/stylesheetbrowser.pro +++ b/examples/webenginewidgets/recipebrowser/recipebrowser.pro @@ -1,22 +1,24 @@ TEMPLATE = app -TARGET = stylesheetbrowser +TARGET = recipebrowser QT += webenginewidgets HEADERS += \ mainwindow.h \ - stylesheetdialog.h + stylesheetdialog.h \ + document.h SOURCES += \ main.cpp \ mainwindow.cpp \ - stylesheetdialog.cpp + stylesheetdialog.cpp \ + document.cpp FORMS += \ mainwindow.ui \ stylesheetdialog.ui -RESOURCES += stylesheetbrowser.qrc +RESOURCES += recipebrowser.qrc # install -target.path = $$[QT_INSTALL_EXAMPLES]/webenginewidgets/stylesheetbrowser +target.path = $$[QT_INSTALL_EXAMPLES]/webenginewidgets/recipebrowser INSTALLS += target diff --git a/examples/webenginewidgets/recipebrowser/recipebrowser.qrc b/examples/webenginewidgets/recipebrowser/recipebrowser.qrc new file mode 100644 index 000000000..2dc003f30 --- /dev/null +++ b/examples/webenginewidgets/recipebrowser/recipebrowser.qrc @@ -0,0 +1,15 @@ +<RCC> + <qresource prefix="/"> + <file>assets/3rdparty/markdown.css</file> + <file>assets/3rdparty/marked.js</file> + <file>assets/custom.js</file> + <file>assets/custom.css</file> + <file>assets/pages/burger.html</file> + <file>assets/pages/cupcakes.html</file> + <file>assets/pages/pasta.html</file> + <file>assets/pages/pizza.html</file> + <file>assets/pages/skewers.html</file> + <file>assets/pages/soup.html</file> + <file>assets/pages/steak.html</file> + </qresource> +</RCC> diff --git a/examples/webenginewidgets/stylesheetbrowser/stylesheetdialog.cpp b/examples/webenginewidgets/recipebrowser/stylesheetdialog.cpp index 30409f107..2137617c3 100644 --- a/examples/webenginewidgets/stylesheetbrowser/stylesheetdialog.cpp +++ b/examples/webenginewidgets/recipebrowser/stylesheetdialog.cpp @@ -1,18 +1,18 @@ -// Copyright (C) 2017 The Qt Company Ltd. +// Copyright (C) 2023 The Qt Company Ltd. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause #include "mainwindow.h" #include "stylesheetdialog.h" #include "ui_stylesheetdialog.h" -StylesheetDialog::StylesheetDialog(QWidget *parent) : - QDialog(parent), - ui(new Ui::StylesheetDialog) +StylesheetDialog::StylesheetDialog(QWidget *parent) : QDialog(parent), ui(new Ui::StylesheetDialog) { ui->setupUi(this); - connect(ui->styleSheetList, &QListWidget::currentItemChanged, this, &StylesheetDialog::currentStyleSheetChanged); - connect(ui->styleSheetList, &QListWidget::itemClicked, this, &StylesheetDialog::listItemClicked); + connect(ui->styleSheetList, &QListWidget::currentItemChanged, this, + &StylesheetDialog::currentStyleSheetChanged); + connect(ui->styleSheetList, &QListWidget::itemClicked, this, + &StylesheetDialog::listItemClicked); connect(ui->fileNameEdit, &QLineEdit::textChanged, this, &StylesheetDialog::fileNameChanged); connect(ui->addButton, &QPushButton::clicked, this, &StylesheetDialog::addButtonClicked); @@ -20,8 +20,8 @@ StylesheetDialog::StylesheetDialog(QWidget *parent) : QSettings settings; settings.beginGroup("styleSheets"); - for (auto name : settings.allKeys()) { - QListWidgetItem *listItem = new QListWidgetItem(name, ui->styleSheetList); + for (const auto &name : settings.allKeys()) { + QListWidgetItem *listItem = new QListWidgetItem(name, ui->styleSheetList); listItem->setFlags(listItem->flags() | Qt::ItemIsUserCheckable); bool checked = settings.value(name).value<StyleSheet>().second; listItem->setCheckState(checked ? Qt::Checked : Qt::Unchecked); @@ -59,9 +59,8 @@ void StylesheetDialog::listItemClicked(QListWidgetItem *item) { MainWindow *window = static_cast<MainWindow *>(parent()); const QString name = item->text(); - bool checkedStateChanged = - (item->checkState() == Qt::Checked && !window->hasStyleSheet(name)) || - (item->checkState() == Qt::Unchecked && window->hasStyleSheet(name)); + bool checkedStateChanged = (item->checkState() == Qt::Checked && !window->hasStyleSheet(name)) + || (item->checkState() == Qt::Unchecked && window->hasStyleSheet(name)); if (!checkedStateChanged) return; @@ -96,7 +95,7 @@ void StylesheetDialog::addButtonClicked() if (name.isEmpty() || source.isEmpty()) return; - QListWidgetItem *listItem = new QListWidgetItem(ui->fileNameEdit->text(), ui->styleSheetList); + QListWidgetItem *listItem = new QListWidgetItem(ui->fileNameEdit->text(), ui->styleSheetList); listItem->setFlags(listItem->flags() | Qt::ItemIsUserCheckable); listItem->setCheckState(Qt::Checked); diff --git a/examples/webenginewidgets/stylesheetbrowser/stylesheetdialog.h b/examples/webenginewidgets/recipebrowser/stylesheetdialog.h index 7bebff74f..ca1b4ae99 100644 --- a/examples/webenginewidgets/stylesheetbrowser/stylesheetdialog.h +++ b/examples/webenginewidgets/recipebrowser/stylesheetdialog.h @@ -1,4 +1,4 @@ -// Copyright (C) 2017 The Qt Company Ltd. +// Copyright (C) 2023 The Qt Company Ltd. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause #ifndef STYLESHEETDIALOG_H diff --git a/examples/webenginewidgets/stylesheetbrowser/stylesheetdialog.ui b/examples/webenginewidgets/recipebrowser/stylesheetdialog.ui index 19db267e8..19db267e8 100644 --- a/examples/webenginewidgets/stylesheetbrowser/stylesheetdialog.ui +++ b/examples/webenginewidgets/recipebrowser/stylesheetdialog.ui diff --git a/examples/webenginewidgets/simplebrowser/CMakeLists.txt b/examples/webenginewidgets/simplebrowser/CMakeLists.txt index f23bce709..2dd4fd57a 100644 --- a/examples/webenginewidgets/simplebrowser/CMakeLists.txt +++ b/examples/webenginewidgets/simplebrowser/CMakeLists.txt @@ -1,3 +1,6 @@ +# Copyright (C) 2022 The Qt Company Ltd. +# SPDX-License-Identifier: BSD-3-Clause + cmake_minimum_required(VERSION 3.16) project(simplebrowser LANGUAGES CXX) diff --git a/examples/webenginewidgets/simplebrowser/browserwindow.cpp b/examples/webenginewidgets/simplebrowser/browserwindow.cpp index 0458cd1f4..d5b097b22 100644 --- a/examples/webenginewidgets/simplebrowser/browserwindow.cpp +++ b/examples/webenginewidgets/simplebrowser/browserwindow.cpp @@ -25,14 +25,6 @@ BrowserWindow::BrowserWindow(Browser *browser, QWebEngineProfile *profile, bool : m_browser(browser) , m_profile(profile) , m_tabWidget(new TabWidget(profile, this)) - , m_progressBar(nullptr) - , m_historyBackAction(nullptr) - , m_historyForwardAction(nullptr) - , m_stopAction(nullptr) - , m_reloadAction(nullptr) - , m_stopReloadAction(nullptr) - , m_urlLineEdit(nullptr) - , m_favAction(nullptr) { setAttribute(Qt::WA_DeleteOnClose, true); setFocusPolicy(Qt::ClickFocus); @@ -58,7 +50,8 @@ BrowserWindow::BrowserWindow(Browser *browser, QWebEngineProfile *profile, bool m_progressBar->setMaximumHeight(1); m_progressBar->setTextVisible(false); - m_progressBar->setStyleSheet(QStringLiteral("QProgressBar {border: 0px} QProgressBar::chunk {background-color: #da4453}")); + m_progressBar->setStyleSheet(QStringLiteral( + "QProgressBar {border: 0px} QProgressBar::chunk {background-color: #da4453}")); layout->addWidget(m_progressBar); } @@ -266,11 +259,19 @@ QMenu *BrowserWindow::createWindowMenu(TabWidget *tabWidget) previousTabAction->setShortcuts(shortcuts); connect(previousTabAction, &QAction::triggered, tabWidget, &TabWidget::previousTab); - connect(menu, &QMenu::aboutToShow, [this, menu, nextTabAction, previousTabAction]() { + QAction *inspectorAction = new QAction(tr("Open inspector in new window"), this); + shortcuts.clear(); + shortcuts.append(QKeySequence(Qt::CTRL | Qt::SHIFT | Qt::Key_I)); + inspectorAction->setShortcuts(shortcuts); + connect(inspectorAction, &QAction::triggered, [this]() { emit currentTab()->devToolsRequested(currentTab()->page()); }); + + connect(menu, &QMenu::aboutToShow, [this, menu, nextTabAction, previousTabAction, inspectorAction]() { menu->clear(); menu->addAction(nextTabAction); menu->addAction(previousTabAction); menu->addSeparator(); + menu->addAction(inspectorAction); + menu->addSeparator(); QList<BrowserWindow*> windows = m_browser->windows(); int index(-1); @@ -292,6 +293,20 @@ QMenu *BrowserWindow::createHelpMenu() return helpMenu; } +static bool isBackspace(const QKeySequence &k) +{ + return (k[0].key() & Qt::Key_unknown) == Qt::Key_Backspace; +} + +// Chromium already handles navigate on backspace when appropriate. +static QList<QKeySequence> removeBackspace(QList<QKeySequence> keys) +{ + const auto it = std::find_if(keys.begin(), keys.end(), isBackspace); + if (it != keys.end()) + keys.erase(it); + return keys; +} + QToolBar *BrowserWindow::createToolBar() { QToolBar *navigationBar = new QToolBar(tr("Navigation")); @@ -299,14 +314,7 @@ QToolBar *BrowserWindow::createToolBar() navigationBar->toggleViewAction()->setEnabled(false); m_historyBackAction = new QAction(this); - QList<QKeySequence> backShortcuts = QKeySequence::keyBindings(QKeySequence::Back); - for (auto it = backShortcuts.begin(); it != backShortcuts.end();) { - // Chromium already handles navigate on backspace when appropriate. - if ((*it)[0].key() == Qt::Key_Backspace) - it = backShortcuts.erase(it); - else - ++it; - } + auto backShortcuts = removeBackspace(QKeySequence::keyBindings(QKeySequence::Back)); // For some reason Qt doesn't bind the dedicated Back key to Back. backShortcuts.append(QKeySequence(Qt::Key_Back)); m_historyBackAction->setShortcuts(backShortcuts); @@ -319,13 +327,7 @@ QToolBar *BrowserWindow::createToolBar() navigationBar->addAction(m_historyBackAction); m_historyForwardAction = new QAction(this); - QList<QKeySequence> fwdShortcuts = QKeySequence::keyBindings(QKeySequence::Forward); - for (auto it = fwdShortcuts.begin(); it != fwdShortcuts.end();) { - if (((*it)[0].key() & Qt::Key_unknown) == Qt::Key_Backspace) - it = fwdShortcuts.erase(it); - else - ++it; - } + auto fwdShortcuts = removeBackspace(QKeySequence::keyBindings(QKeySequence::Forward)); fwdShortcuts.append(QKeySequence(Qt::Key_Forward)); m_historyForwardAction->setShortcuts(fwdShortcuts); m_historyForwardAction->setIconVisibleInMenu(false); @@ -352,9 +354,8 @@ QToolBar *BrowserWindow::createToolBar() downloadsAction->setIcon(QIcon(QStringLiteral(":go-bottom.png"))); downloadsAction->setToolTip(tr("Show downloads")); navigationBar->addAction(downloadsAction); - connect(downloadsAction, &QAction::triggered, [this]() { - m_browser->downloadManagerWidget().show(); - }); + connect(downloadsAction, &QAction::triggered, + &m_browser->downloadManagerWidget(), &QWidget::show); return navigationBar; } diff --git a/examples/webenginewidgets/simplebrowser/browserwindow.h b/examples/webenginewidgets/simplebrowser/browserwindow.h index 47fdf6314..55eeb46c2 100644 --- a/examples/webenginewidgets/simplebrowser/browserwindow.h +++ b/examples/webenginewidgets/simplebrowser/browserwindow.h @@ -22,7 +22,8 @@ class BrowserWindow : public QMainWindow Q_OBJECT public: - BrowserWindow(Browser *browser, QWebEngineProfile *profile, bool forDevTools = false); + explicit BrowserWindow(Browser *browser, QWebEngineProfile *profile, + bool forDevTools = false); QSize sizeHint() const override; TabWidget *tabWidget() const; WebView *currentTab() const; @@ -55,14 +56,14 @@ private: Browser *m_browser; QWebEngineProfile *m_profile; TabWidget *m_tabWidget; - QProgressBar *m_progressBar; - QAction *m_historyBackAction; - QAction *m_historyForwardAction; - QAction *m_stopAction; - QAction *m_reloadAction; - QAction *m_stopReloadAction; - QLineEdit *m_urlLineEdit; - QAction *m_favAction; + QProgressBar *m_progressBar = nullptr; + QAction *m_historyBackAction = nullptr; + QAction *m_historyForwardAction = nullptr; + QAction *m_stopAction = nullptr; + QAction *m_reloadAction = nullptr; + QAction *m_stopReloadAction = nullptr; + QLineEdit *m_urlLineEdit = nullptr; + QAction *m_favAction = nullptr; QString m_lastSearch; }; diff --git a/examples/webenginewidgets/simplebrowser/downloadmanagerwidget.cpp b/examples/webenginewidgets/simplebrowser/downloadmanagerwidget.cpp index bfb857cd8..fdddc4fb0 100644 --- a/examples/webenginewidgets/simplebrowser/downloadmanagerwidget.cpp +++ b/examples/webenginewidgets/simplebrowser/downloadmanagerwidget.cpp @@ -13,7 +13,6 @@ DownloadManagerWidget::DownloadManagerWidget(QWidget *parent) : QWidget(parent) - , m_numDownloads(0) { setupUi(this); } diff --git a/examples/webenginewidgets/simplebrowser/downloadmanagerwidget.h b/examples/webenginewidgets/simplebrowser/downloadmanagerwidget.h index b9d5e9bd7..67df492b9 100644 --- a/examples/webenginewidgets/simplebrowser/downloadmanagerwidget.h +++ b/examples/webenginewidgets/simplebrowser/downloadmanagerwidget.h @@ -30,7 +30,7 @@ private: void add(DownloadWidget *downloadWidget); void remove(DownloadWidget *downloadWidget); - int m_numDownloads; + int m_numDownloads = 0; }; #endif // DOWNLOADMANAGERWIDGET_H diff --git a/examples/webenginewidgets/simplebrowser/downloadwidget.cpp b/examples/webenginewidgets/simplebrowser/downloadwidget.cpp index d4998853e..f8b96c6e6 100644 --- a/examples/webenginewidgets/simplebrowser/downloadwidget.cpp +++ b/examples/webenginewidgets/simplebrowser/downloadwidget.cpp @@ -38,12 +38,11 @@ inline QString DownloadWidget::withUnit(qreal bytes) { if (bytes < (1 << 10)) return tr("%L1 B").arg(bytes); - else if (bytes < (1 << 20)) + if (bytes < (1 << 20)) return tr("%L1 KiB").arg(bytes / (1 << 10), 0, 'f', 2); - else if (bytes < (1 << 30)) + if (bytes < (1 << 30)) return tr("%L1 MiB").arg(bytes / (1 << 20), 0, 'f', 2); - else - return tr("%L1 GiB").arg(bytes / (1 << 30), 0, 'f', 2); + return tr("%L1 GiB").arg(bytes / (1 << 30), 0, 'f', 2); } void DownloadWidget::updateWidget() @@ -63,16 +62,14 @@ void DownloadWidget::updateWidget() m_progressBar->setDisabled(false); m_progressBar->setFormat( tr("%p% - %1 of %2 downloaded - %3/s") - .arg(withUnit(receivedBytes)) - .arg(withUnit(totalBytes)) - .arg(withUnit(bytesPerSecond))); + .arg(withUnit(receivedBytes), withUnit(totalBytes), + withUnit(bytesPerSecond))); } else { m_progressBar->setValue(0); m_progressBar->setDisabled(false); m_progressBar->setFormat( tr("unknown size - %1 downloaded - %2/s") - .arg(withUnit(receivedBytes)) - .arg(withUnit(bytesPerSecond))); + .arg(withUnit(receivedBytes), withUnit(bytesPerSecond))); } break; case QWebEngineDownloadRequest::DownloadCompleted: @@ -80,16 +77,14 @@ void DownloadWidget::updateWidget() m_progressBar->setDisabled(true); m_progressBar->setFormat( tr("completed - %1 downloaded - %2/s") - .arg(withUnit(receivedBytes)) - .arg(withUnit(bytesPerSecond))); + .arg(withUnit(receivedBytes), withUnit(bytesPerSecond))); break; case QWebEngineDownloadRequest::DownloadCancelled: m_progressBar->setValue(0); m_progressBar->setDisabled(true); m_progressBar->setFormat( tr("cancelled - %1 downloaded - %2/s") - .arg(withUnit(receivedBytes)) - .arg(withUnit(bytesPerSecond))); + .arg(withUnit(receivedBytes), withUnit(bytesPerSecond))); break; case QWebEngineDownloadRequest::DownloadInterrupted: m_progressBar->setValue(0); diff --git a/examples/webenginewidgets/simplebrowser/main.cpp b/examples/webenginewidgets/simplebrowser/main.cpp index 477a8171b..b945ef27e 100644 --- a/examples/webenginewidgets/simplebrowser/main.cpp +++ b/examples/webenginewidgets/simplebrowser/main.cpp @@ -5,6 +5,7 @@ #include "browserwindow.h" #include "tabwidget.h" #include <QApplication> +#include <QLoggingCategory> #include <QWebEngineProfile> #include <QWebEngineSettings> @@ -24,6 +25,7 @@ int main(int argc, char **argv) QApplication app(argc, argv); app.setWindowIcon(QIcon(QStringLiteral(":AppLogoColor.png"))); + QLoggingCategory::setFilterRules(QStringLiteral("qt.webenginecontext.debug=true")); QWebEngineProfile::defaultProfile()->settings()->setAttribute(QWebEngineSettings::PluginsEnabled, true); QWebEngineProfile::defaultProfile()->settings()->setAttribute(QWebEngineSettings::DnsPrefetchEnabled, true); diff --git a/examples/webenginewidgets/simplebrowser/tabwidget.cpp b/examples/webenginewidgets/simplebrowser/tabwidget.cpp index 9e19cf782..e4e204ce9 100644 --- a/examples/webenginewidgets/simplebrowser/tabwidget.cpp +++ b/examples/webenginewidgets/simplebrowser/tabwidget.cpp @@ -34,8 +34,8 @@ TabWidget::TabWidget(QWebEngineProfile *profile, QWidget *parent) QLabel *icon = new QLabel(this); QPixmap pixmap(QStringLiteral(":ninja.png")); icon->setPixmap(pixmap.scaledToHeight(tabBar->height())); - setStyleSheet(QStringLiteral("QTabWidget::tab-bar { left: %1px; }"). - arg(icon->pixmap().width())); + setStyleSheet( + QStringLiteral("QTabWidget::tab-bar { left: %1px; }").arg(icon->pixmap().width())); } } diff --git a/examples/webenginewidgets/simplebrowser/tabwidget.h b/examples/webenginewidgets/simplebrowser/tabwidget.h index 08caab52c..a1a893b62 100644 --- a/examples/webenginewidgets/simplebrowser/tabwidget.h +++ b/examples/webenginewidgets/simplebrowser/tabwidget.h @@ -19,7 +19,7 @@ class TabWidget : public QTabWidget Q_OBJECT public: - TabWidget(QWebEngineProfile *profile, QWidget *parent = nullptr); + explicit TabWidget(QWebEngineProfile *profile, QWidget *parent = nullptr); WebView *currentWebView() const; diff --git a/examples/webenginewidgets/simplebrowser/webpage.cpp b/examples/webenginewidgets/simplebrowser/webpage.cpp index 66de5d6d9..699e3d2ed 100644 --- a/examples/webenginewidgets/simplebrowser/webpage.cpp +++ b/examples/webenginewidgets/simplebrowser/webpage.cpp @@ -22,29 +22,6 @@ void WebPage::handleCertificateError(QWebEngineCertificateError error) [this, error]() mutable { emit createCertificateErrorDialog(error); }); } -inline QString questionForFeature(QWebEnginePage::Feature feature) -{ - switch (feature) { - case QWebEnginePage::Geolocation: - return WebPage::tr("Allow %1 to access your location information?"); - case QWebEnginePage::MediaAudioCapture: - return WebPage::tr("Allow %1 to access your microphone?"); - case QWebEnginePage::MediaVideoCapture: - return WebPage::tr("Allow %1 to access your webcam?"); - case QWebEnginePage::MediaAudioVideoCapture: - return WebPage::tr("Allow %1 to access your microphone and webcam?"); - case QWebEnginePage::MouseLock: - return WebPage::tr("Allow %1 to lock your mouse cursor?"); - case QWebEnginePage::DesktopVideoCapture: - return WebPage::tr("Allow %1 to capture video of your desktop?"); - case QWebEnginePage::DesktopAudioVideoCapture: - return WebPage::tr("Allow %1 to capture audio and video of your desktop?"); - case QWebEnginePage::Notifications: - return WebPage::tr("Allow %1 to show notification on your desktop?"); - } - return QString(); -} - void WebPage::handleSelectClientCertificate(QWebEngineClientCertificateSelection selection) { // Just select one. diff --git a/examples/webenginewidgets/simplebrowser/webpage.h b/examples/webenginewidgets/simplebrowser/webpage.h index 7fa2be335..83a4e833f 100644 --- a/examples/webenginewidgets/simplebrowser/webpage.h +++ b/examples/webenginewidgets/simplebrowser/webpage.h @@ -13,7 +13,7 @@ class WebPage : public QWebEnginePage Q_OBJECT public: - WebPage(QWebEngineProfile *profile, QObject *parent = nullptr); + explicit WebPage(QWebEngineProfile *profile, QObject *parent = nullptr); signals: void createCertificateErrorDialog(QWebEngineCertificateError error); diff --git a/examples/webenginewidgets/simplebrowser/webpopupwindow.h b/examples/webenginewidgets/simplebrowser/webpopupwindow.h index d13f5f183..0726bf0c2 100644 --- a/examples/webenginewidgets/simplebrowser/webpopupwindow.h +++ b/examples/webenginewidgets/simplebrowser/webpopupwindow.h @@ -19,7 +19,7 @@ class WebPopupWindow : public QWidget Q_OBJECT public: - WebPopupWindow(QWebEngineProfile *profile); + explicit WebPopupWindow(QWebEngineProfile *profile); WebView *view() const; private slots: diff --git a/examples/webenginewidgets/simplebrowser/webview.cpp b/examples/webenginewidgets/simplebrowser/webview.cpp index 16a58ce6c..e41d4334e 100644 --- a/examples/webenginewidgets/simplebrowser/webview.cpp +++ b/examples/webenginewidgets/simplebrowser/webview.cpp @@ -19,7 +19,6 @@ WebView::WebView(QWidget *parent) : QWebEngineView(parent) - , m_loadProgress(100) { connect(this, &QWebEngineView::loadStarted, [this]() { m_loadProgress = 0; @@ -57,7 +56,7 @@ WebView::WebView(QWidget *parent) tr("Render process exited with code: %1\n" "Do you want to reload the page ?").arg(statusCode)); if (btn == QMessageBox::Yes) - QTimer::singleShot(0, [this] { reload(); }); + QTimer::singleShot(0, this, &WebView::reload); }); } @@ -149,13 +148,15 @@ QIcon WebView::favIcon() const if (m_loadProgress < 0) { static QIcon errorIcon(QStringLiteral(":dialog-error.png")); return errorIcon; - } else if (m_loadProgress < 100) { + } + + if (m_loadProgress < 100) { static QIcon loadingIcon(QStringLiteral(":view-refresh.png")); return loadingIcon; - } else { - static QIcon defaultIcon(QStringLiteral(":text-html.png")); - return defaultIcon; } + + static QIcon defaultIcon(":text-html.png"); + return defaultIcon; } QWebEngineView *WebView::createWindow(QWebEnginePage::WebWindowType type) @@ -193,12 +194,8 @@ void WebView::contextMenuEvent(QContextMenuEvent *event) if (viewSource == actions.cend()) menu->addSeparator(); - QAction *action = new QAction(menu); - action->setText("Open inspector in new window"); + QAction *action = menu->addAction("Open inspector in new window"); connect(action, &QAction::triggered, [this]() { emit devToolsRequested(page()); }); - - QAction *before(inspectElement == actions.cend() ? nullptr : *inspectElement); - menu->insertAction(before, action); } else { (*inspectElement)->setText(tr("Inspect element")); } @@ -239,8 +236,8 @@ void WebView::handleAuthenticationRequired(const QUrl &requestUrl, QAuthenticato passwordDialog.m_iconLabel->setPixmap(icon.pixmap(32, 32)); QString introMessage(tr("Enter username and password for \"%1\" at %2") - .arg(auth->realm()) - .arg(requestUrl.toString().toHtmlEscaped())); + .arg(auth->realm(), + requestUrl.toString().toHtmlEscaped())); passwordDialog.m_infoLabel->setText(introMessage); passwordDialog.m_infoLabel->setWordWrap(true); diff --git a/examples/webenginewidgets/simplebrowser/webview.h b/examples/webenginewidgets/simplebrowser/webview.h index 63f82c3c9..41bc04ac0 100644 --- a/examples/webenginewidgets/simplebrowser/webview.h +++ b/examples/webenginewidgets/simplebrowser/webview.h @@ -20,7 +20,7 @@ class WebView : public QWebEngineView Q_OBJECT public: - WebView(QWidget *parent = nullptr); + explicit WebView(QWidget *parent = nullptr); void setPage(WebPage *page); int loadProgress() const; @@ -51,7 +51,7 @@ private: void createWebActionTrigger(QWebEnginePage *page, QWebEnginePage::WebAction); private: - int m_loadProgress; + int m_loadProgress = 100; }; #endif diff --git a/examples/webenginewidgets/spellchecker/CMakeLists.txt b/examples/webenginewidgets/spellchecker/CMakeLists.txt index d76881c65..74cb626e1 100644 --- a/examples/webenginewidgets/spellchecker/CMakeLists.txt +++ b/examples/webenginewidgets/spellchecker/CMakeLists.txt @@ -1,3 +1,6 @@ +# Copyright (C) 2022 The Qt Company Ltd. +# SPDX-License-Identifier: BSD-3-Clause + cmake_minimum_required(VERSION 3.16) project(spellchecker LANGUAGES CXX) diff --git a/examples/webenginewidgets/stylesheetbrowser/3rdparty/COPYING b/examples/webenginewidgets/stylesheetbrowser/3rdparty/COPYING deleted file mode 100644 index 220881da6..000000000 --- a/examples/webenginewidgets/stylesheetbrowser/3rdparty/COPYING +++ /dev/null @@ -1 +0,0 @@ -The icons in this repository are herefore released into the Public Domain. diff --git a/examples/webenginewidgets/stylesheetbrowser/3rdparty/qt_attribution.json b/examples/webenginewidgets/stylesheetbrowser/3rdparty/qt_attribution.json deleted file mode 100644 index f779da7e2..000000000 --- a/examples/webenginewidgets/stylesheetbrowser/3rdparty/qt_attribution.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "Id": "stylesheetbrowser-tango", - "Name": "Tango Icon Library", - "QDocModule": "qtwebengine", - "QtUsage": "Used in WebEngine StyleSheet Browser example.", - - "QtParts": [ "examples" ], - "Description": "Selected icons from the Tango Icon Library", - "Homepage": "http://tango.freedesktop.org/Tango_Icon_Library", - "Version": "0.8.90", - "DownloadLocation": "http://tango.freedesktop.org/releases/tango-icon-theme-0.8.90.tar.gz", - "LicenseId": "urn:dje:license:public-domain", - "License": "Public Domain", - "LicenseFile": "COPYING", - "Copyright": "Ulisse Perusin <uli.peru@gmail.com> -Steven Garrity <sgarrity@silverorange.com> -Lapo Calamandrei <calamandrei@gmail.com> -Ryan Collier <rcollier@novell.com> -Rodney Dawes <dobey@novell.com> -Andreas Nilsson <nisses.mail@home.se> -Tuomas Kuosmanen <tigert@tigert.com> -Garrett LeSage <garrett@novell.com> -Jakub Steiner <jimmac@novell.com>" -} diff --git a/examples/webenginewidgets/stylesheetbrowser/3rdparty/view-refresh.png b/examples/webenginewidgets/stylesheetbrowser/3rdparty/view-refresh.png Binary files differdeleted file mode 100644 index cab4d02c7..000000000 --- a/examples/webenginewidgets/stylesheetbrowser/3rdparty/view-refresh.png +++ /dev/null diff --git a/examples/webenginewidgets/stylesheetbrowser/CMakeLists.txt b/examples/webenginewidgets/stylesheetbrowser/CMakeLists.txt deleted file mode 100644 index 55bd6715e..000000000 --- a/examples/webenginewidgets/stylesheetbrowser/CMakeLists.txt +++ /dev/null @@ -1,50 +0,0 @@ -cmake_minimum_required(VERSION 3.16) -project(stylesheetbrowser LANGUAGES CXX) - -set(CMAKE_AUTOMOC ON) -set(CMAKE_AUTOUIC ON) - -if(NOT DEFINED INSTALL_EXAMPLESDIR) - set(INSTALL_EXAMPLESDIR "examples") -endif() - -set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/webenginewidgets/stylesheetbrowser") - -find_package(Qt6 REQUIRED COMPONENTS Core Gui WebEngineWidgets) - -qt_add_executable(stylesheetbrowser - main.cpp - mainwindow.cpp mainwindow.h mainwindow.ui - stylesheetdialog.cpp stylesheetdialog.h stylesheetdialog.ui -) - -set_target_properties(stylesheetbrowser PROPERTIES - WIN32_EXECUTABLE TRUE - MACOSX_BUNDLE TRUE -) - -target_link_libraries(stylesheetbrowser PUBLIC - Qt::Core - Qt::Gui - Qt::WebEngineWidgets -) - -# Resources: -set(stylesheetbrowser_resource_files - "3rdparty/view-refresh.png" -) - -qt_add_resources(stylesheetbrowser "stylesheetbrowser" - PREFIX - "/" - BASE - "3rdparty" - FILES - ${stylesheetbrowser_resource_files} -) - -install(TARGETS stylesheetbrowser - RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}" - BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}" - LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}" -) diff --git a/examples/webenginewidgets/stylesheetbrowser/doc/images/stylesheetbrowser.png b/examples/webenginewidgets/stylesheetbrowser/doc/images/stylesheetbrowser.png Binary files differdeleted file mode 100644 index 32c7c43ed..000000000 --- a/examples/webenginewidgets/stylesheetbrowser/doc/images/stylesheetbrowser.png +++ /dev/null diff --git a/examples/webenginewidgets/stylesheetbrowser/doc/src/stylesheetbrowser.qdoc b/examples/webenginewidgets/stylesheetbrowser/doc/src/stylesheetbrowser.qdoc deleted file mode 100644 index 80f333323..000000000 --- a/examples/webenginewidgets/stylesheetbrowser/doc/src/stylesheetbrowser.qdoc +++ /dev/null @@ -1,44 +0,0 @@ -// Copyright (C) 2017 The Qt Company Ltd. -// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only - -/*! - \example webenginewidgets/stylesheetbrowser - \title WebEngine StyleSheet Browser Example - \ingroup webengine-widgetexamples - \brief Demonstrates how to inject CSS into web pages using user scripts. - - \image stylesheetbrowser.png - - \e {StyleSheet Browser} demonstrates how to use the \l{Qt WebEngine Widgets C++ Classes} - {Qt WebEngine C++ classes} to inject user stylesheets into web pages. - - \include examples-run.qdocinc - - \section1 Working With Stylesheets - - We use JavaScript to create and append CSS elements to the documents. - After declaring the script source, QWebEnginePage::runJavaScript() can run it - immediately and apply newly created styles on the current content of the web view. - Encapsulating the script into a QWebEngineScript and adding it to the script collection - of QWebEnginePage makes its effect permanent. - - \quotefromfile webenginewidgets/stylesheetbrowser/mainwindow.cpp - \skipto MainWindow::insertStyleSheet - \printuntil /^\}/ - - Removing stylesheets can be done similarly: - - \quotefromfile webenginewidgets/stylesheetbrowser/mainwindow.cpp - \skipto MainWindow::removeStyleSheet - \printuntil /^\}/ - - \section1 Files and Attributions - - The example uses icons from the Tango Icon Library: - - \table - \row - \li \l{stylesheetbrowser-tango}{Tango Icon Library} - \li Public Domain - \endtable -*/ diff --git a/examples/webenginewidgets/stylesheetbrowser/mainwindow.cpp b/examples/webenginewidgets/stylesheetbrowser/mainwindow.cpp deleted file mode 100644 index ab786d5c9..000000000 --- a/examples/webenginewidgets/stylesheetbrowser/mainwindow.cpp +++ /dev/null @@ -1,122 +0,0 @@ -// Copyright (C) 2017 The Qt Company Ltd. -// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause - -#include "mainwindow.h" -#include "stylesheetdialog.h" -#include "ui_mainwindow.h" - -static QMap<QString, QString> defaultStyleSheets = { - {"Upside down", "body { -webkit-transform: rotate(180deg); }"} -}; - -MainWindow::MainWindow(const QUrl &url) : - QMainWindow(), - ui(new Ui::MainWindow) -{ - ui->setupUi(this); - - connect(ui->urlBar, &QLineEdit::returnPressed, this, &MainWindow::urlEntered); - connect(ui->webEngineView, &QWebEngineView::urlChanged, this, &MainWindow::urlChanged); - connect(ui->settingsButton, &QPushButton::clicked, this, &MainWindow::showStyleSheetsDialog); - connect(ui->reloadButton, &QPushButton::clicked, this, &MainWindow::reloadRequested); - - QSettings settings; - settings.beginGroup("styleSheets"); - QStringList styleSheets = settings.allKeys(); - if (styleSheets.empty()) { - // Add back default style sheets if the user cleared them out - loadDefaultStyleSheets(); - } else { - for (auto name : std::as_const(styleSheets)) { - StyleSheet styleSheet = settings.value(name).value<StyleSheet>(); - if (styleSheet.second) - insertStyleSheet(name, styleSheet.first, false); - } - } - settings.endGroup(); - - ui->webEngineView->setUrl(url); -} - -MainWindow::~MainWindow() -{ - delete ui; -} - -void MainWindow::insertStyleSheet(const QString &name, const QString &source, bool immediately) -{ - QWebEngineScript script; - QString s = QString::fromLatin1("(function() {"\ - " css = document.createElement('style');"\ - " css.type = 'text/css';"\ - " css.id = '%1';"\ - " document.head.appendChild(css);"\ - " css.innerText = '%2';"\ - "})()").arg(name).arg(source.simplified()); - if (immediately) - ui->webEngineView->page()->runJavaScript(s, QWebEngineScript::ApplicationWorld); - - script.setName(name); - script.setSourceCode(s); - script.setInjectionPoint(QWebEngineScript::DocumentReady); - script.setRunsOnSubFrames(true); - script.setWorldId(QWebEngineScript::ApplicationWorld); - ui->webEngineView->page()->scripts().insert(script); -} - -void MainWindow::removeStyleSheet(const QString &name, bool immediately) -{ - QString s = QString::fromLatin1("(function() {"\ - " var element = document.getElementById('%1');"\ - " element.outerHTML = '';"\ - " delete element;"\ - "})()").arg(name); - if (immediately) - ui->webEngineView->page()->runJavaScript(s, QWebEngineScript::ApplicationWorld); - - const QList<QWebEngineScript> scripts = ui->webEngineView->page()->scripts().find(name); - if (!scripts.isEmpty()) - ui->webEngineView->page()->scripts().remove(scripts.first()); -} - -bool MainWindow::hasStyleSheet(const QString &name) -{ - const QList<QWebEngineScript> scripts = ui->webEngineView->page()->scripts().find(name); - return !scripts.isEmpty(); -} - -void MainWindow::loadDefaultStyleSheets() -{ - QSettings settings; - settings.beginGroup("styleSheets"); - - auto it = defaultStyleSheets.constBegin(); - while (it != defaultStyleSheets.constEnd()) { - settings.setValue(it.key(), QVariant::fromValue(qMakePair(it.value(), true))); - insertStyleSheet(it.key(), it.value(), false); - ++it; - } - - settings.endGroup(); -} - -void MainWindow::urlEntered() -{ - ui->webEngineView->setUrl(QUrl::fromUserInput(ui->urlBar->text())); -} - -void MainWindow::urlChanged(const QUrl &url) -{ - ui->urlBar->setText(url.toString()); -} - -void MainWindow::showStyleSheetsDialog() -{ - StylesheetDialog *dialog = new StylesheetDialog(this); - dialog->show(); -} - -void MainWindow::reloadRequested() -{ - ui->webEngineView->reload(); -} diff --git a/examples/webenginewidgets/stylesheetbrowser/mainwindow.ui b/examples/webenginewidgets/stylesheetbrowser/mainwindow.ui deleted file mode 100644 index bc68c16bb..000000000 --- a/examples/webenginewidgets/stylesheetbrowser/mainwindow.ui +++ /dev/null @@ -1,133 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<ui version="4.0"> - <class>MainWindow</class> - <widget class="QMainWindow" name="MainWindow"> - <property name="geometry"> - <rect> - <x>0</x> - <y>0</y> - <width>713</width> - <height>455</height> - </rect> - </property> - <property name="windowTitle"> - <string>StyleSheet Browser</string> - </property> - <property name="unifiedTitleAndToolBarOnMac"> - <bool>false</bool> - </property> - <widget class="QWidget" name="centralWidget"> - <layout class="QHBoxLayout" name="horizontalLayout"> - <property name="spacing"> - <number>0</number> - </property> - <property name="leftMargin"> - <number>0</number> - </property> - <property name="topMargin"> - <number>0</number> - </property> - <property name="rightMargin"> - <number>0</number> - </property> - <property name="bottomMargin"> - <number>0</number> - </property> - <item> - <widget class="QWidget" name="webContentsWidget" native="true"> - <layout class="QVBoxLayout" name="verticalLayout_3"> - <property name="spacing"> - <number>0</number> - </property> - <property name="leftMargin"> - <number>0</number> - </property> - <property name="topMargin"> - <number>0</number> - </property> - <property name="rightMargin"> - <number>0</number> - </property> - <property name="bottomMargin"> - <number>0</number> - </property> - <item> - <widget class="QWidget" name="urlBarWidget" native="true"> - <property name="sizePolicy"> - <sizepolicy hsizetype="Preferred" vsizetype="Fixed"> - <horstretch>0</horstretch> - <verstretch>0</verstretch> - </sizepolicy> - </property> - <layout class="QHBoxLayout" name="horizontalLayout_2"> - <item> - <widget class="QLineEdit" name="urlBar"/> - </item> - <item> - <widget class="QPushButton" name="reloadButton"> - <property name="text"> - <string/> - </property> - <property name="icon"> - <iconset resource="stylesheetbrowser.qrc"> - <normaloff>:/view-refresh.png</normaloff>:/view-refresh.png</iconset> - </property> - <property name="shortcut"> - <string>Ctrl+R</string> - </property> - </widget> - </item> - <item> - <widget class="QPushButton" name="settingsButton"> - <property name="text"> - <string>Settings</string> - </property> - </widget> - </item> - </layout> - </widget> - </item> - <item> - <widget class="QWebEngineView" name="webEngineView" native="true"> - <property name="sizePolicy"> - <sizepolicy hsizetype="Preferred" vsizetype="Preferred"> - <horstretch>0</horstretch> - <verstretch>0</verstretch> - </sizepolicy> - </property> - <property name="url" stdset="0"> - <url> - <string>about:blank</string> - </url> - </property> - </widget> - </item> - </layout> - </widget> - </item> - </layout> - </widget> - <widget class="QMenuBar" name="menuBar"> - <property name="geometry"> - <rect> - <x>0</x> - <y>0</y> - <width>713</width> - <height>20</height> - </rect> - </property> - </widget> - </widget> - <layoutdefault spacing="6" margin="11"/> - <customwidgets> - <customwidget> - <class>QWebEngineView</class> - <extends>QWidget</extends> - <header location="global">QtWebEngineWidgets/QWebEngineView</header> - </customwidget> - </customwidgets> - <resources> - <include location="stylesheetbrowser.qrc"/> - </resources> - <connections/> -</ui> diff --git a/examples/webenginewidgets/stylesheetbrowser/stylesheetbrowser.qrc b/examples/webenginewidgets/stylesheetbrowser/stylesheetbrowser.qrc deleted file mode 100644 index a1cebd6a7..000000000 --- a/examples/webenginewidgets/stylesheetbrowser/stylesheetbrowser.qrc +++ /dev/null @@ -1,5 +0,0 @@ -<RCC> - <qresource prefix="/"> - <file alias="view-refresh.png">3rdparty/view-refresh.png</file> - </qresource> -</RCC> diff --git a/examples/webenginewidgets/videoplayer/CMakeLists.txt b/examples/webenginewidgets/videoplayer/CMakeLists.txt index 4e3e3cc2c..87ec9b086 100644 --- a/examples/webenginewidgets/videoplayer/CMakeLists.txt +++ b/examples/webenginewidgets/videoplayer/CMakeLists.txt @@ -1,3 +1,6 @@ +# Copyright (C) 2022 The Qt Company Ltd. +# SPDX-License-Identifier: BSD-3-Clause + cmake_minimum_required(VERSION 3.16) project(videoplayer LANGUAGES CXX) diff --git a/examples/webenginewidgets/webenginewidgets.pro b/examples/webenginewidgets/webenginewidgets.pro index b99dd5f74..0d65d6b95 100644 --- a/examples/webenginewidgets/webenginewidgets.pro +++ b/examples/webenginewidgets/webenginewidgets.pro @@ -3,17 +3,15 @@ QT_FOR_CONFIG += webenginecore webenginecore-private network-private TEMPLATE=subdirs SUBDIRS += \ - minimal \ contentmanipulation \ cookiebrowser \ notifications \ simplebrowser \ - stylesheetbrowser \ - videoplayer \ - webui + push-notifications \ + videoplayer qtConfig(webengine-geolocation): SUBDIRS += maps -qtConfig(webengine-webchannel): SUBDIRS += markdowneditor +qtConfig(webengine-webchannel): SUBDIRS += recipebrowser qtConfig(webengine-printing-and-pdf) { SUBDIRS += printme html2pdf diff --git a/examples/webenginewidgets/webui/about.html b/examples/webenginewidgets/webui/about.html deleted file mode 100644 index 7b5a58969..000000000 --- a/examples/webenginewidgets/webui/about.html +++ /dev/null @@ -1,129 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <title>Qt WebEngine WebUI Example</title> - <style> - html { - background: #f0f0f0; - color: #303030; - font: 16px system-ui; - height: 100%; - } - - body { - margin: 0; - padding: 0; - height: 100%; - display: flex; - flex-direction: column; - align-items: stretch; - } - - body > * { - padding-left: 20px; - padding-right: 20px; - } - - header { - flex: none; - display: flex; - align-items: center; - background: #f0fff0; - border-bottom: 1px solid #e0e0e0; - padding-top: 20px; - padding-bottom: 20px; - } - - header > h1 { - font: bold 20px system-ui; - margin-left: 18px; - } - - main { - flex: auto; - } - - footer { - flex: none; - display: flex; - justify-content: center; - padding-bottom: 20px; - } - - button { - background: #41cd52; - color: #f0f0f0; - font: 16px system-ui; - border: 0; - box-shadow: 0px 1px 3px rgb(0,0,0,0.5); - cursor: pointer; - margin: 0 0 1px; - padding: 10px 24px; - } - - button:hover { - background: #50dc61; - } - - button:active { - background: #50dc61; - box-shadow: 0px 1px 2px rgb(0,0,0,0.5); - margin: 1px 0 0; - } - - button:focus { - outline: 0; - } - - </style> - </head> - <body> - <header> - <img width="48px" height="48px" - src="qrc:/qt-project.org/qmessagebox/images/qtlogo-64.png"> - <h1>WebEngine Widgets<br>WebUI Example</h1> - </header> - <main> - <p> - Aside from the built-in schemes, such as <code>http</code> and - <code>qrc</code>, Qt WebEngine may be extended with <em>custom - schemes</em> by creating <em>custom scheme handlers</em>. - </p> - - <p> - This is a simple HTML page loaded from a custom scheme and - displayed by a <code>QWebEngineView</code>. Even the Quit button - below is a standard HTML <code><button></code> element. - </p> - - <p> - Read the documentation to find out - </p> - <ul> - <li> - <p> - How to create a custom scheme handler which serves HTML - and handles HTML form submissions. - </p> - </li> - <li> - <p> - How to prevent ordinary web content from accessing the - custom scheme. - </p> - </li> - <li> - <p> - How to prevent any other scheme from submitting HTML - form data. - </p> - </li> - </ul> - </main> - <footer> - <form action="" method="post"> - <button name="quit">Quit</button> - </form> - </footer> - </body> -</html> diff --git a/examples/webenginewidgets/webui/doc/images/webui-example.png b/examples/webenginewidgets/webui/doc/images/webui-example.png Binary files differdeleted file mode 100644 index 84e2c7fc3..000000000 --- a/examples/webenginewidgets/webui/doc/images/webui-example.png +++ /dev/null diff --git a/examples/webenginewidgets/webui/doc/src/webui.qdoc b/examples/webenginewidgets/webui/doc/src/webui.qdoc deleted file mode 100644 index c8ab43ea8..000000000 --- a/examples/webenginewidgets/webui/doc/src/webui.qdoc +++ /dev/null @@ -1,141 +0,0 @@ -// Copyright (C) 2018 The Qt Company Ltd. -// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only - -/*! - \example webenginewidgets/webui - \title WebEngine Widgets WebUI Example - \ingroup webengine-widgetexamples - \brief Displays HTML over a custom scheme. - - \image webui-example.png - - \e {WebUI} demonstrates how to implement a custom scheme in a secure way. - - Aside from the built-in URL schemes, such as \c {http} and \c {qrc}, - \QWE may be extended with \e {custom schemes} by creating \e {custom - scheme handlers}. This example shows: - - \list - \li How to create a custom scheme handler which serves HTML and handles - HTML form submissions. - \li How to prevent ordinary web content from accessing the custom scheme. - \li How to prevent any other scheme from submitting HTML form data. - \endlist - - \include examples-run.qdocinc - - \section1 Overview - - The example program consists of a single \l {QWebEngineView} showing a - simple HTML page loaded from the URL \c {webui:about}, over our custom - scheme. Pressing the button at the bottom of the page will trigger an HTML - form submission via POST to the same URL, at which point our custom scheme - handler will cause the application to exit. - - The program is divided into two parts, the \c {main} function for setting - everything up, and the \c {WebUiHandler} class for implementing our custom - scheme handler. The \c {main} function is quite short: - - \quotefromfile webenginewidgets/webui/main.cpp - \skipto int main - \printuntil /^\}/ - - Aside from the relatively standard setup of widgets, two points are - noteworthy. First, we call the static method \c - {WebUiHandler::registerUrlScheme()} to register our custom scheme with the - web engine. Second, we create and install our custom scheme handler \c - {WebUiHandler} using \l - {QWebEngineProfile::installUrlSchemeHandler()}{installUrlSchemeHandler()}. - The following sections describe these aspects in more detail. - - \section1 Registering the Scheme - - As custom schemes are integrated directly into the web engine, they do not - necessarily need to follow the standard security rules which apply to - ordinary web content. Depending on the chosen configuration, content served - over a custom scheme may be given access to local resources, be set to - ignore Content-Security-Policy rules, or conversely, be denied access to any - other content entirely. - - In order to take advantage of these possibilities, the custom scheme must - first be registered. This means creating and configuring a \l - {QWebEngineUrlScheme} object and then handing it over to \l - {QWebEngineUrlScheme::registerScheme()}. The example program does exactly this in - the static method \c {WebUiHandler::registerUrlScheme()}: - - \quotefromfile webenginewidgets/webui/webuihandler.cpp - \skipto void WebUiHandler::registerUrlScheme - \printuntil /^\}/ - - A custom scheme needs a name, which can be set by passing it to - the constructor of \c {QWebEngineUrlScheme} or by calling \l - {QWebEngineUrlScheme::setName}. In the above, the name \c {webui} is set - through the constructor. Additionally, we activate the flags \l - {QWebEngineUrlScheme::SecureScheme}{SecureScheme}, \l - {QWebEngineUrlScheme::LocalScheme}{LocalScheme} and \l - {QWebEngineUrlScheme::LocalAccessAllowed}{LocalAccessAllowed}. Since our - custom scheme handler will not deliver resources received from insecure - network connections, we can safely mark it as a \c {SecureScheme}. The \c {LocalScheme} - flag prevents content from non-local schemes (such as \c {http}) from - interacting with our custom scheme. Without this flag it would be possible, - for example, to embed the \c {webui:about} page in an \c <iframe> element on - a remotely loaded HTML page, perhaps to attempt a phishing attack. We also - need the \c {LocalAccessAllowed} flag without which we would not be able to - access the \c {webui} scheme from our \c {webui:about} page. - - Earlier we saw that the call to \c {WebUiHandler::registerUrlScheme()} is - made already at the top of the \c {main} function. This is so because custom - schemes need to be registered as early as possible so that that they can be - passed to all subprocesses. Specifically, custom schemes need to be registered - before any other \QWE classes are instantiated by the application. - - \section1 Handling Requests - - A custom scheme handler is, broadly speaking, similar to a web application - served over HTTP. However, because custom schemes are integrated directly - into the web engine, they have the advantage in terms of efficiency: there's - no need for generating and parsing HTTP messages or for transferring data - over sockets. - - Implementing a handler means creating a subclass of \l - {QWebEngineUrlSchemeHandler}, which is just what is done by the \c - {WebUiHandler} class of the example program: - - \quotefromfile webenginewidgets/webui/webuihandler.h - \skipto class WebUiHandler - \printuntil /^\}/ - - For each request to a \c {webui} URL, the \c - {WebUiHandler::requestStarted()} method will be called: - - \quotefromfile webenginewidgets/webui/webuihandler.cpp - \skipto void WebUiHandler::requestStarted - \printuntil /^\}/ - - The \l {QWebEngineUrlRequestJob} object \c {job} contains the request's - attributes and provides methods for replying to the request with a response. - Responses are generated asynchronously by reading them from the \l - {QIODevice} that the application passes to \l - {QWebEngineUrlRequestJob::reply()}{reply()}. - - \warning The \c requestStarted() method is not called from the main thread, - but from the web engine's IO thread. Care must be taken to synchronize - access to any resources on the main thread. - - Aside from the usual fare of \l - {QWebEngineUrlRequestJob::requestMethod()}{requestMethod} and \l - {QWebEngineUrlRequestJob::requestUrl()}{requestUrl}, there is also the \l - {QWebEngineUrlRequestJob::initiator()}{initiator}, holding the origin of the - content which initiated the request. An empty \c initiator means the request - was initiated directly by the application (via \l - {QWebEnginePage::setUrl()}, for example). The special value \c "null" - corresponds to an opaque origin (a sandboxed \c {<iframe>} element, for - example). Otherwise, the \c initiator will contain the URL scheme, hostname, - and port of the content which initiated the request. - - In this example, the \c initiator is used to ensure that \c {POST} requests - to \c {webui:about} will only trigger the application's exit if they - originate from the \c {webui} scheme. This prevents content loaded over - other schemes from triggering the application's exit. - -*/ diff --git a/examples/webenginewidgets/webui/main.cpp b/examples/webenginewidgets/webui/main.cpp deleted file mode 100644 index cbbb9ad25..000000000 --- a/examples/webenginewidgets/webui/main.cpp +++ /dev/null @@ -1,33 +0,0 @@ -// Copyright (C) 2018 The Qt Company Ltd. -// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause - -#include "webuihandler.h" - -#include <QApplication> -#include <QWebEnginePage> -#include <QWebEngineProfile> -#include <QWebEngineView> - -int main(int argc, char *argv[]) -{ - QCoreApplication::setOrganizationName("QtExamples"); - - WebUiHandler::registerUrlScheme(); - - QApplication app(argc, argv); - - QWebEngineProfile profile; - - WebUiHandler handler; - profile.installUrlSchemeHandler(WebUiHandler::schemeName, &handler); - - QWebEnginePage page(&profile); - QWebEngineView view; - view.setPage(&page); - page.load(WebUiHandler::aboutUrl); - view.setContextMenuPolicy(Qt::NoContextMenu); - view.resize(500, 600); - view.show(); - - return app.exec(); -} diff --git a/examples/webenginewidgets/webui/webui.pro b/examples/webenginewidgets/webui/webui.pro deleted file mode 100644 index 714833587..000000000 --- a/examples/webenginewidgets/webui/webui.pro +++ /dev/null @@ -1,16 +0,0 @@ -TEMPLATE = app - -QT += webenginewidgets - -HEADERS += \ - webuihandler.h - -SOURCES += \ - main.cpp \ - webuihandler.cpp - -RESOURCES += \ - webui.qrc - -target.path = $$[QT_INSTALL_EXAMPLES]/webenginewidgets/webui -INSTALLS += target diff --git a/examples/webenginewidgets/webui/webuihandler.cpp b/examples/webenginewidgets/webui/webuihandler.cpp deleted file mode 100644 index 932d622e5..000000000 --- a/examples/webenginewidgets/webui/webuihandler.cpp +++ /dev/null @@ -1,51 +0,0 @@ -// Copyright (C) 2018 The Qt Company Ltd. -// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause - -#include "webuihandler.h" - -#include <QApplication> -#include <QFile> -#include <QWebEngineUrlRequestJob> -#include <QWebEngineUrlScheme> - -#define SCHEMENAME "webui" - -const QByteArray WebUiHandler::schemeName = QByteArrayLiteral(SCHEMENAME); -const QUrl WebUiHandler::aboutUrl = QUrl(QStringLiteral(SCHEMENAME ":about")); - -WebUiHandler::WebUiHandler(QObject *parent) - : QWebEngineUrlSchemeHandler(parent) -{ -} - -void WebUiHandler::requestStarted(QWebEngineUrlRequestJob *job) -{ - static const QUrl webUiOrigin(QStringLiteral(SCHEMENAME ":")); - static const QByteArray GET(QByteArrayLiteral("GET")); - static const QByteArray POST(QByteArrayLiteral("POST")); - - QByteArray method = job->requestMethod(); - QUrl url = job->requestUrl(); - QUrl initiator = job->initiator(); - - if (method == GET && url == aboutUrl) { - QFile *file = new QFile(QStringLiteral(":/about.html"), job); - file->open(QIODevice::ReadOnly); - job->reply(QByteArrayLiteral("text/html"), file); - } else if (method == POST && url == aboutUrl && initiator == webUiOrigin) { - job->fail(QWebEngineUrlRequestJob::RequestAborted); - QApplication::exit(); - } else { - job->fail(QWebEngineUrlRequestJob::UrlNotFound); - } -} - -// static -void WebUiHandler::registerUrlScheme() -{ - QWebEngineUrlScheme webUiScheme(schemeName); - webUiScheme.setFlags(QWebEngineUrlScheme::SecureScheme | - QWebEngineUrlScheme::LocalScheme | - QWebEngineUrlScheme::LocalAccessAllowed); - QWebEngineUrlScheme::registerScheme(webUiScheme); -} diff --git a/examples/webenginewidgets/webui/webuihandler.h b/examples/webenginewidgets/webui/webuihandler.h deleted file mode 100644 index 072c0809c..000000000 --- a/examples/webenginewidgets/webui/webuihandler.h +++ /dev/null @@ -1,23 +0,0 @@ -// Copyright (C) 2018 The Qt Company Ltd. -// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause - -#ifndef WEBUIHANDLER_H -#define WEBUIHANDLER_H - -#include <QWebEngineUrlSchemeHandler> - -class WebUiHandler : public QWebEngineUrlSchemeHandler -{ - Q_OBJECT -public: - explicit WebUiHandler(QObject *parent = nullptr); - - void requestStarted(QWebEngineUrlRequestJob *job) override; - - static void registerUrlScheme(); - - const static QByteArray schemeName; - const static QUrl aboutUrl; -}; - -#endif // !WEBUIHANDLER_H |
