What's supported so far when embedding QML into Qt Widgets?

David.G

Hello DevNet,

I've progressed very nicely on my app and recently I thought that the addition of QML would be great, mostly used as a presentation to bring a more rich experience in terms of visuals. Things I got so far:

Use QQuickView and QWidget::...WindowContainer
Using QtQuick.Controls/Dialogs/etc

This part I got it down and embedded it, although I've been pondering what would be the best way to let QML master element (rectangle, etc) adapt itself and resize as it see fit as the main application resizes. I'm not sure how to go around this.

My doubts right now, hopefully you guys can shut them down:

Communication between C++ / Qt Quick? Signal/Slots would be great so I can keep the QML ui updated with information. Do I just connect (signal/slots) them after the container (QWidget) is created? My doubt stems from this documentation here where you can load the QML file and do the interactions you need. But in my case I'm embedding QML into my QtWidgets project, so I'm not sure how to proceed in terms of Signals/Slots as I want to alert the presentation side when items get added in the database.
I remember reading something about adding the qml to a graphics proxy (graphics scene) for best performance (I'll be doing plenty transitions). I might be wrong, but is this doable, plausible, or did I read wrong? I'm sorry for the lack of details, I'm having trouble recalling.
Stylesheets for a uniform look should be easier in QML? sorry for silly question, I had a bit of struggle with QtWidgets.

Cheer, and well I'm still learning the ropes so apologies in advance.

p3c0

Hi @David.G

According to your explanation it seems you are using QtQuick 2.x but still I see you have referred graphics scene etc.. which actually is related to QtQuick 1.x.
I'll try to cover your points in reference to QtQuick 2.x which is usually recommended.

QQuickView is used to load a QML scene by passing to it a QML file and QWidget::createWindowContainer is an old way to embed QML scenes into QWidgets. The new recommended way is to use QQuickWidget.

... although I've been pondering what would be the best way to let QML master element (rectangle, etc) adapt itself and resize as it see fit as the main application resizes.
If you use a QQuickWidget then all you have to do is to set resizeMode to QQuickView::SizeRootObjectToView. If you drag-drop QQuickWidget from widgets area in QtCreator you can see that it has been set by default.

Now coming to your main points:

Communication between C++ / Qt Quick? Signal/Slots would be great so I can keep the QML ui updated with information. Do I just connect (signal/slots) them after the container (QWidget) is created?

Yes that is possible. And yes it has to be done after the QML has been loading in QQuickWidget. The reason being that you need to find that exact Item from QML or if root object is needed then no need to find. Then once you get hold of that QQuickItem from C++ side you can just connect to its signals or v.v. Connecting signals is as usual that you do for QWidgets.
So for eg. using QQuickWidget

//C++ 
ui->quickWidget->setSource(QUrl("qrc:/Rect.qml")); // QQuickWidget added from QtCreator
QQuickItem *itm = ui->quickWidget->rootObject(); // get the root object
if(itm) {
   qDebug() << itm; // yay.. red Rectangle
}
// then do the connection stuff

//Rect.qml
import QtQuick 2.5

Rectangle {
    width: 300
    height: 300
    color: "red"
}

More info here:
http://doc.qt.io/qt-5/qtqml-cppintegration-interactqmlfromcpp.html
http://doc.qt.io/qt-5/qtqml-cppintegration-topic.html
http://doc.qt.io/qt-5/qquickwidget.html

I remember reading something about adding the qml to a graphics proxy (graphics scene) for best performance (I'll be doing plenty transitions). I might be wrong, but is this doable, plausible, or did I read wrong? I'm sorry for the lack of details, I'm having trouble recalling.

That is QtQuick 1.x stuff. Use recommended QQuickWidget for QtQuick 2.x instead. Animations and transitions would come in QML.

Stylesheets for a uniform look should be easier in QML? sorry for silly question, I had a bit of struggle with QtWidgets.

Well QML doesnot support css type stylesheets. But there are way to style Controls in QML. You can find more info here:
http://doc.qt.io/qt-5/qtquickcontrolsstyles-index.html
http://doc.qt.io/qt-5/qtquick-usecase-styling.html

David.G

Awesome, thanks for the reply!

I'll get started right away.