Linking QML to C++ - or should I?

Question

I'm creating my first program with Qt (as was recommended by SO members in an earlier question). In its documentation, the Qt community encourages the use of QML as a markup language and JavaScript to handle logic. Sounds promising, but the docs lack a good beginner's explanation of how and when those two would tie in with C++.

From the Qt 5 docs:

While it is possible to use C++ to access and manipulate QML objects deep into the object tree, we recommend that you do not take this approach outside of application testing and prototyping.

Say we have a QtQuick2ApplicationViewer object as our main view, as generated by the default Qt Creator template. At first, I'd like to show a welcome screen for which I've created welcome.qml. When the user clicks a button, the main program runs, i.e. app.qml. From what I've gathered my main function should thus look like this:

QGuiApplication app(argc, argv);

QtQuick2ApplicationViewer view; // Class generated by the default template.
view.setSource(QUrl("welcome.qml")); // Load QML.
view.showExpanded();

return app.exec();

Works like a charm. According to the docs I should now have a welcome.js file that handles closing the welcome screen. Now I'm confused though - how will the JavaScript communicate back to the view that app.qml is to be loaded? More importantly: should it?

Answer 1

Generally speaking, the location of the line depends on where you draw it :) Most applications can be divided into a core models, some viewmodels, and some views. The viewmodels adapt the model's data for display/editing.

If you were to implement a QWidget-based GUI for your application, you might find that some viewmodel functionality could be shared between the Qt Quick 2 GUI and the Qt Widgets GUI. This does not mean that viewmodel implementation needs to be in C++, not at all.

QML is completely GUI-agnostic. You can code in QML and still use QWidgets to actually show stuff. Note that Qt Quick 2 is just a set of components that you can use from QML, but QML itself is an underlying platform that doesn't know anything about GUIs at all. It can be used in a text-only or even server-only application

If you factor some viewmodel functionality out into GUI-agnostic QML, you can certainly hook it up from both Qt Quick 2 and Qt Widgets - even if it's done in Javascript.

Answer 2

Hi Robbert,

If I am correct, you want to know how to navigate from one screen to another. Example: from welcome.qml to app.qml.

Now coming to your question... how will the JavaScript communicate back to the view that app.qml is to be loaded? More importantly: should it?

From QML side, you can communicate with the C++ native side and make 'view' load app.qml. Perfectly possible.

More importantly: should it? : Not necessary. You can load different qml files without communicating 'view' You need to tweak your code a bit. Instead of doing this..

 view.setSource(QUrl("welcome.qml"));

You must do this..

view.setSource(QUrl("main.qml"));

Here main.qml is a qml file responsible for loading different qml files. To start with, it will load 'welcome.qml' You need to use QML Loader in your main.qml for loading different qml files.

The idea is to have *welcome.qml * emit a signal, say showAppPage() on receiving which main.qml will load app.qml. The following is a simple example which does the same.

//Main.qml
import QtQuick 2.1
Item {
    width: 360
    height: 360
    Loader{
        id:pageLoader
        source: "welcome.qml"
    }
    Connections{
        target: pageLoader.item
        onShowAppPage:{
            pageLoader.source = "app.qml"
        }
    }
}

Welcome page

//welcome.qml
import QtQuick 2.1

Rectangle {
    width: 360
    height: 360
    color:"blue"
    signal showAppPage;
    MouseArea{
        anchors.fill: parent
        onClicked: showAppPage()
    }
}

App page

//app.qml
import QtQuick 2.1

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

You can also load welcome.qml and app.qml from main.qml without using Loader and using Qt.createComponent method. But QML Loader serves the purpose in your case. I hope this answers your question.