How to set QWebEngineView on QQuickView
I am porting from QGraphicsView to QQuickView.
Like we load QGraphicsWebView on QGraphicsView, how to load QWebEngineView on QQuickView.
currently I am setting it like below but it's not getting loaded.
Code:
QuickViewReader::QuickViewReader(QWindow *parent): QQuickView(parent)
{
WebView = new WebEngineView();
root = new QQmlContext(engine.rootContext());
qmlRegisterType<WebEngineView>("WebView", 1,0, "WebEngineView");
/* Setting the current object into context of QML source */
root->setContextProperty("rw", this);
this->rootContext()->setContextProperty("rw", this);
/* Setting the webview object into context of QML source */
root->setContextProperty("webView",this->WebView);
QQmlComponent component(&engine);
component.
loadUrl(QUrl("qrc:/ReaderView.qml"));
object = component.create(root);
setSource
(QUrl("qrc:/ReaderView.qml"));
setResizeMode(QQuickView::SizeRootObjectToView);
}
The page is blank.
When I explicitly call WebView.show(), the page is displayed.
How to overlay QWebEngineView on QQuickView
Re: How to set QWebEngineView on QQuickView
What is this WebEngineView class?
Re: How to set QWebEngineView on QQuickView
I find that QQuickView is QWindow type and QWebEngineView is QWidget type.
QQuickView , I am making use of extensively to enable the QML functionalities.
To display the page alone, QWebEngineView I am using and also for actions made on that page like highlight, annotation, search, mouseWheelRoll etc.
Added after 14 minutes:
Also found that, there is QQuickWidget which is of QWidget type.
So I will have to use QQuickWidget only?? or I can proceed with using QQuickView.
Basically I use this QQuickView for QML functionality only.
Re: How to set QWebEngineView on QQuickView
You didn't answer my question.
Re: How to set QWebEngineView on QQuickView
its inherited class from QWebEngineView
Re: How to set QWebEngineView on QQuickView
No need to register anything, QtWebEngine has a QML module:
http://doc.qt.io/qt-5/qtwebengine-index.html
Cheers,
_
Re: How to set QWebEngineView on QQuickView
Actually I am porting from QDeclarativeView to QWebEngineView, So QGraphicsWebView is placed inside QDeclarativeView. I wanted to implement a similar thing.
I have modified QDeclarativeView to QQuickWidget and QGraphicsWebView to QWebEngine.
QDeclarativeView has toolbar , next/prev button to navigate and pageslider bar. QGraphicsWebView is to display the page and capture events on the page and do related functionality like Highlight,Annnotations.....
How to implement a similar in QQuickWidget and QWebEngineView.
Re: How to set QWebEngineView on QQuickView
Quote:
Originally Posted by
anda_skoa
In the example provided in the link,
Code:
import QtQuick 2.1
import QtQuick.Controls 1.1
import QtWebEngine 1.0
ApplicationWindow {
width: 1280
height: 720
visible: true
WebEngineView {
id: webview
url: "http://www.qt-project.org"
anchors.fill: parent
}
}
How is this accessed in WebEngineView.cpp (inherited from QWebEngineView)
or How to set these elements from WebEngineView onto QML
Re: How to set QWebEngineView on QQuickView
Quote:
Originally Posted by
ejoshva
How to implement a similar in QQuickWidget and QWebEngineView.
It will be extremely difficult to do that. However you can start with what anda_skoa suggested -- instead of registering your own custom web engine view, use the one that is already available.
Quote:
How is this accessed in WebEngineView.cpp (inherited from QWebEngineView)
"This"? As in "current object"?
Quote:
or How to set these elements from WebEngineView onto QML
"These" elements? What elements?
Re: How to set QWebEngineView on QQuickView
Quote:
Originally Posted by
ejoshva
How to set these elements from WebEngineView onto QML
The example is QML code, there no need to set any element.
The WebEngineView element is provided by the QtWebEngine module without any effort needed on the application developer's side.
Just use it as any other QtQuick item.
Cheers,
_
Re: How to set QWebEngineView on QQuickView
Thanks for your replies @ anda_skoa and @ wysota
Let me try implement your suggestions.
Re: How to set QWebEngineView on QQuickView
I have done as below and I am able to invoke.
Code:
Main.qml
ApplicationWindow {
title: qsTr("diacritech")
width: 1200
height: 800
visible: true
WebEngineView {
id: webview
url: "http://www.google.co.in"
anchors.fill: parent
}
}
WebEngineView.cpp
WebEngineView::WebEngineView()
{
QQmlEngine engine;
QQmlContext *objectContext = new QQmlContext(engine.rootContext());
objectContext->setContextProperty("we",this);
QQmlComponent component(&engine);
component.
loadUrl(QUrl("qrc:/main.qml"));
QObject *object
= component.
create(objectContext
);
}
main.cpp
int main(int argc, char *argv[])
{
WebEngineView *weView = new WebEngineView();
weView->show();
return app.exec();
}
Here I get 2 windows, 1. WebEngienView() 2. QML -> WebEngineView
When I comment the webengineview.show() in main.cpp, I am getting only one window.
Is this the way, this is to be done?
Also I am including another components of another QML file (ReaderToolBar.qml). The tool bar is displayed but I am not able to capture the mouseclick events
Main.qml (included below component)
Code:
ReaderToolBar {
id: tb
width: parent.width
height: 50
anchors.top: parent.top
color: "transparent"
}
Is there something I am missing, which enables to capture the mouse click events?
Re: How to set QWebEngineView on QQuickView
What is it exactly that you are trying to achieve?
Re: How to set QWebEngineView on QQuickView
How about you start with the basic setup and then extend it once it works.
So on C++ side just
Code:
int main(int argc, char **argv)
{
QQuickView view;
view.
setSource(QUrl("qrc:/main.qml");
view.show();
return app.exec();
}
And you can set your toolbar directly as the ApplicationWindow's toolBar property
Code:
ApplicationWindow {
toolBar: ReaderToolBar { ... }
}
Cheers,
_
Re: How to set QWebEngineView on QQuickView
I am porting from QGraphicsView to QWebEngineView. Already there are QMLs written for tool bar and other related functions like highlight list, annotations list, searchilist etc
Now I have to include those QML components in the WebEngineView QML.
Re: How to set QWebEngineView on QQuickView
Quote:
Originally Posted by
ejoshva
I am porting from QGraphicsView to QWebEngineView.
Yes, we already know that. And that's actually the only thing we know. But what are you porting?
Quote:
Now I have to include those QML components in the WebEngineView QML.
What do you mean that you have to include them in WebEngineView? Did you implement them in HTML? What do you use QML for?
Re: How to set QWebEngineView on QQuickView
What I am porting is actually a e-book reader (where in each page will be html/xhtml).
The page is displayed with WebEngineView, tool bar is super imposed on the WebEngineView.
The images for each functions like highlights, annotations, library etc are images on the tool bar. Onclick of the image, the onlick event is captured in corresponding QML component and respective functions in CPP file is called to process them.
Re: How to set QWebEngineView on QQuickView
I still fail to see what you are using QML for.
Re: How to set QWebEngineView on QQuickView
QML is used to display tool bar , list box etc which will be superimposed on the QWebEngineView.
QML basically acts like an intermediate between the user input( like mouse onlick event) and the QWebEngineView.
Code:
WebEngineView::WebEngineView()
{
QQmlEngine engine;
QQmlContext *objectContext = new QQmlContext(engine.rootContext());
objectContext->setContextProperty("we",this);
QQmlComponent component(&engine);
component.
loadUrl(QUrl("qrc:/ToolBar.qml"));
QObject *object
= component.
create(objectContext
);
this
->setUrl
(QUrl("http://www.google.co.in"));
}
In the above code, I have set the Url for the QWebEngineView.
I want to display the toolbar using the QML (QML component) over this QWebEngineView page. (just like adding layers in photoshop)
Re: How to set QWebEngineView on QQuickView
Your above code makes no sense, you create a local qml engine that immediately goes out of scope.
If you want to super-impose two qml objects then position them in the same area:
Code:
Item {
WebEngineView {
anchors.fill: parent
}
ReaderToolBar {
anchors: { left: parent.left; right: parent.right; top: parent.top }
}
}