QtWebEngineQuick is a set of components provided by the Qt framework for embedding web content in Qt Quick applications. They are implemented by integrating the web engine provided by the Chromium project. The web engine is a software component for loading and rendering web content, QtWebEngineQuick integrates it into the Qt framework to use web content in Qt Quick applications.
Underlying architecture:
QtWebEngineQuick consists of multiple classes, the most important of which are QQuickWebEngineView and QQuickWebEngineProfile. QQuickWebEngineView is a QQuickItem that can embed web content in a Qt Quick application. QQuickWebEngineProfile is responsible for managing the communication between the web content process and QQuickWebEngineView. The underlying architecture of QQuickWebEngineProfile is based on the web engine of the Chromium project, which uses a multi-process architecture to load and render web content.
The communication between QQuickWebEngineView and the web content process is through IPC. When QQuickWebEngineView loads a web page, QQuickWebEngineProfile sends the page's URL to the web content process. The web content process is responsible for loading the page and sending the rendered image data back to QQuickWebEngineProfile. QQuickWebEngineProfile converts this image data into a format that can be displayed by QQuickItem and displays it in QQuickWebEngineView.
Realize the architecture diagram:
+-----------------+ +------------------------+
| | | |
| QQuickWebEngine | | QQuickWebEngineProfile |
| View | | |
| | +-----------+------------+
+--------+--------+ |
| |
| IPC |
+-------------------------------------+
|
|
+--------v---------+
| |
| Web Content |
| Process |
| |
+------------------+
The communication between QQuickWebEngineView and QQuickWebEngineProfile is realized through Qt's signal slot mechanism. For example, when QQuickWebEngineProfile loads a web page, it will emit the loadFinished() signal, and QQuickWebEngineView will capture the signal and perform corresponding operations.
Principle detailed operation description:
The use of QQuickWebEngineView is very simple, just create an instance and add it to the interface of the Qt Quick application. For example, the following code creates a QQuickWebEngineView and adds it to a QML file:
import QtQuick 2.0
import QtWebEngine 1.0
Item {
width: 400
height: 400
QQuickWebEngineView {
id: view
anchors.fill: parent
url: "http://www.example.com"
}
}
In the above code, the constructor of QQuickWebEngineView creates a new QQuickWebEngineProfile and sets it as the default profile for the view. The url attribute is used to load the specified URL.
The use of QQuickWebEngineProfile is a little more complicated. First, you need to create an instance of QQuickWebEngineProfile and set it as the configuration of QQuickWebEngineView. For example, the following code creates a QQuickWebEngineProfile instance and sets it as the QQuickWebEngineView's configuration:
import QtQuick 2.0
import QtWebEngine 1.0
Item {
width: 400
height: 400
QQuickWebEngineProfile {
id: profile
}
QQuickWebEngineView {
id: view
anchors.fill: parent
profile: profile
url: "http://www.example.com"
}
}
In the above code, QQuickWebEngineProfile is used to manage the communication between the web content process and QQuickWebEngineView. The profile property is used to set the QQuickWebEngineProfile instance as the configuration of QQuickWebEngineView.
Once a QQuickWebEngineProfile instance has been set as the configuration of the QQuickWebEngineView, it can be used to load web pages. For example, the following code loads a URL using QQuickWebEngineProfile:
profile.loadUrl("http://www.example.com")
In the above code, the loadUrl() function is used to load the specified URL.
The class below is a detailed description of some commonly used functions of QQuickWebEngineView and QQuickWebEngineProfile:
QQuickWebEngineView:
- url: Used to set or get the URL displayed in the view.
- title: Used to get the title of the current page.
- icon: Used to get the icon of the current page.
- load(): Used to reload the current page.
- back(): Used to return to the previous page.
- forward(): used to advance to the next page.
- stop(): used to stop the loading of the current page.
Here is a simple QML example demonstrating how to use QQuickWebEngineView:
import QtQuick 2.0
import QtWebEngine 1.0
Item {
width: 400
height: 400
QQuickWebEngineView {
id: view
anchors.fill: parent
url: "http://www.example.com"
}
Text {
text: view.title
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
onClicked: {
view.load()
}
}
}
In the above example, QQuickWebEngineView is used to display a web page. The Text element is used to display the title of the current page. The MouseArea element is used to reload the current page.
QQuickWebEngineProfile:
- loadUrl(): Used to load the specified URL.
- clearHttpCache(): Used to clear the HTTP cache.
- clearCookies(): Used to clear all cookies.
- setHttpUserAgent(): Used to set the HTTP user agent string.
- setPersistentCookiesEnabled(): Used to enable or disable persistent cookies.
- setSpellCheckEnabled(): Used to enable or disable spell checking.
Here is a simple QML example demonstrating how to use QQuickWebEngineProfile:
import QtQuick 2.0
import QtWebEngine 1.0
Item {
width: 400
height: 400
QQuickWebEngineProfile {
id: profile
}
QQuickWebEngineView {
id: view
anchors.fill: parent
profile: profile
url: "http://www.example.com"
}
MouseArea {
anchors.fill: parent
onClicked: {
profile.clearHttpCache()
profile.clearCookies()
profile.setHttpUserAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36")
profile.setPersistentCookiesEnabled(false)
profile.setSpellCheckEnabled(false)
}
}
}
In the above example, QQuickWebEngineProfile is used to manage the communication between the web content process and QQuickWebEngineView. The MouseArea element is used to demonstrate how to use some functions of QQuickWebEngineProfile.