Expose C++ Submodel to QML

PavloPonomarov

@fcarney
Not only get the list but also use it to bind via Qml delegate item models to other components. In my case I guess wrapper model is not an option because any model item can have subitems and if I'll have to reference submodel inside my model (like @Bob64 mentioned) then each item of my model will have subitems. Guess I should try to subclass QStandardItem.

GrecKo

@PavloPonomarov said in Expose C++ Submodel to QML:

Guess I should try to subclass QStandardItem.

Don't, you will regret it. Implement your own QAbstractListModel instead.
QStandardItem* is only good for the most basic of use-case, and even then I won't recommend it because its API is awkward to use.

PavloPonomarov

This post is deleted!

PavloPonomarov

@GrecKo Is there any good example of how to expose QAbstractListModel items from C++ to QML?

GrecKo

https://doc.qt.io/qt-5/qtquick-modelviewsdata-cppmodels.html

PavloPonomarov

@GrecKo This article in documentation returns me to the same question I had at the beginning - having QAbstractListModel subclass how do I add subitems to items and expose them to QML? I found only one good example, that additionally to subclassing QAbstractListModel also creates a custom class for items. That means that I'll have to rewrite my whole QStandardItemModel subclass just because QML developers haven't added a better support for multi-level models. Is there no easier way than this?

fcarney

@PavloPonomarov Sometimes, when a method is running into brick walls, you have to start over. That is often the fast route. I ran into similar issues with a Python app I wrote. It worked fine for years, but as I tried to add/modify things the ecosystem around my app degraded. It got to the point where it was a roll of the dice to build an exe properly. At that point I realized for longevity I need to rewrite the app in a different development ecosystem. I am now rewriting that app in Qt and C++. It is the faster route, though at first it looks like the long road.

For another app I am writing I have restructured the data models at least 4 or 5 times. I keep running into brick walls. Mostly due to my lack of understanding of the objects being used. You will not doubt discover some really neat approaches by reworking your models. You may even find better ways to approach the problem. In essence that is what programmers do. They figure out how to solve problems. They don't code, they don't use pretty apis that always do what we want them to do. We use duct tape, welding equipment, and super glue to make things do what we want. Sometimes the fumes make us sick, but we muddle through.

Take a hard look at the problem you are trying to solve. Is your mind making this more complex than it is? I always have to take time to rethink approaches. For instance, I was designing a set of classes to handle displaying a tank map on the screen. I was having trouble contemplating how to sync the data with the database. I realized I needed to make the database primary store and have everything else get fed by events from the database. When I did that I realized I can build all my "sub models" as ListModels in QML. I will expose my database as a QML object (QObject) with methods for adding/removing/changing entries in the database. Everything else will flow to the ListModels through signals. I scrapped about 10 C++ classes as a result.

Take a hard look at what classes are in QML and C++ inside Qt. Problems we are having are often already solved by knowing the tools in the toolbox. I don't know how many times I go to look for something and Qt already has a version of it I can use.

GrecKo

having QAbstractListModel subclass how do I add subitems to items and expose them to QML?

Return a list of your subitems in one of your base model role, I don't see the issue here.
Depending on your needs you could return a simple list like a QVariantList or QList<QObject*>, or a proper QAbstractListModel.

Dylan Deng

@fcarney This video shows how to using C++ models with Qt Quick views.
https://doc.qt.io/qt-5/qtquick-modelviewsdata-cppmodels.html

KroMignon

@PavloPonomarov said in Expose C++ Submodel to QML:

How can I expose a submodel to QML?

I never used QStandardItemModel, so my reply is about the title of the topic "Expose C++ submodel to QML".

I use since many years now a template class create by Thomas Boutrou which creates an QAbstractListModel by introspection of the base QObject.
Take a look at Qt QML Models and Qt SuperMacros.

Perhaps this could help you

PavloPonomarov

@GrecKo Same as for QAbstractListModel I could add such QVariantMap as additional role to QStandardItemModel. I had to create a slot that updates this role on dataChanged signal. Then I was able to get this map in QML. The issue here is that when I return this map from C++ it loses its connection to model and won't be updated in QML when the model is changed

PavloPonomarov

@KroMignon said in Expose C++ Submodel to QML:

I use since many years now a template class create by Thomas Boutrou which creates an QAbstractListModel by introspection of the base QObject.

Thank you. But I think those templates won't help in my case. I haven't found any possibility to build a multi-level model from the template

GrecKo

@PavloPonomarov said in Expose C++ Submodel to QML:

The issue here is that when I return this map from C++ it loses its connection to model and won't be updated in QML when the model is changed

Maybe you did something wrong there. Not sure about what you said about the slot and dataChanged signal, if that is done in QML, that's definitely not the correct way to do things. Anyway, using QStandardItemModel is fine for very basic PoC, if you need something more, it will get in the way and be more complicated than implementing your own model.

@PavloPonomarov said in Expose C++ Submodel to QML:

Thank you. But I think those templates won't help in my case. I haven't found any possibility to build a multi-level model from the template

If you have a QQmlObjectListModel of A and the class A has a property of type QQmlObjectListModel, you know have a multi-level model. I've done this multiple times.

I can't really help you more than that if you don't post a small self-sufficient code reproducing the problems you met.

PavloPonomarov

@GrecKo said in Expose C++ Submodel to QML:

Not sure about what you said about the slot and dataChanged signal

I've added a new role for the QVariantMap into my model, but to keep it up-to-date with model changes I had to create a slot connected to dataChanged of the model. It looks like this:

void MyModel::updateMap(const QModelIndex &topLeft, const QModelIndex &bottomRight, const QVector<int> &roles)
    bool changed = false;
    if(roles[0] == ItemObject) return; //ItemObject is a role
    QVariantMap item = topLeft.data(ItemObject).toMap();
    item[roleNames[roles[0]]] = topLeft.data(roles[0]); //roleNames[roles[0]] to get string representation
    itemFromIndex(topLeft)->setData(item, ItemObject);
}

Then I wrote an invokable function to get this map:

QVariant MyModel::getItem(const QModelIndex &index){
    return index.data(ItemObject);
}

And this is where the issue appears. I can call this function from QML, but is will return only current state of the map, without any binding.

@GrecKo said in Expose C++ Submodel to QML:

I can't really help you more than that if you don't post a small self-sufficient code reproducing the problems you met.

I will try to write a small example to my problem

PavloPonomarov

Here is the example:

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "mymodel.h"

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    QQmlContext *context = engine.rootContext();
    myModel *model = new myModel();
    context->setContextProperty("myModel", model);
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

mymodel.h

#ifndef MYMODEL_H
#define MYMODEL_H

#include <QStandardItemModel>
#include <QObject>
#include <QDebug>

#define ROWS 10
#define NESTED 3
#define SUBITEMS 8

class myModel : public QStandardItemModel
{
    Q_OBJECT
public:
    myModel();
    void fillModel();

    QVariantMap getObject(const QModelIndex &index);
    QVariantMap getObject(QStandardItem *item);
    Q_INVOKABLE QVariant getQMLObject(const QModelIndex &index);
    Q_INVOKABLE void setValue(const QModelIndex &index, int value);
    enum Roles{
        Name=Qt::UserRole+1,
        Value,
        Description,
        QMLObject
    };
public slots:
    void updateObject(const QModelIndex &left, const QModelIndex &right, const QVector<int> &roles);
private:
     QHash<int, QByteArray> roleNames;
     QHash<int,QVector<QPersistentModelIndex>> m_Objects;
};

#endif // MYMODEL_H

mymodel.cpp

#include "mymodel.h"

myModel::myModel()
{
    roleNames[Name] = "name";
    roleNames[Value] = "value";
    roleNames[Description] = "description";
    roleNames[QMLObject] = "qmlObject";
    setItemRoleNames(roleNames);
    fillModel();
    connect(this, &QAbstractItemModel::dataChanged, this, &myModel::updateObject);
}

void myModel::fillModel()
{
    for(int i = 0; i < 3; i++){
        QStandardItem *item = new QStandardItem();
        item->setData("TreeParameter"+QString::number(i+1), Name);
        item->setData(i, Value);
        item->setData("Tree item"+QString::number(i+1), Description);
        item->setData(getObject(item), QMLObject);
        for(int j = 0; j < 8; j++){
            QStandardItem *subItem = new QStandardItem();
            subItem->setData("SubItem"+QString::number(j+1), Name);
            subItem->setData(j, Value);
            subItem->setData("Nested item"+QString::number(j+1), Description);
            subItem->setData(getObject(subItem), QMLObject);
            item->appendRow(subItem);
        }
        this->appendRow(item);
    }
    for(int i = 3; i < 10; i++){
        QStandardItem *item = new QStandardItem();
        item->setData("Parameter"+QString::number(i+1), Name);
        item->setData(i, Value);
        item->setData("Usual item"+QString::number(i+1), Description);
        item->setData(getObject(item), QMLObject);
        this->appendRow(item);
    }
}

QVariantMap myModel::getObject(const QModelIndex &index)
{
    return getObject(itemFromIndex(index));
}

QVariantMap myModel::getObject(QStandardItem *item)
{
    QVariantMap result;
    result[roleNames[Name]] = item->data(Name);
    result[roleNames[Value]] = item->data(Value);
    result[roleNames[Description]] = item->data(Description);
    return result;
}

QVariant myModel::getQMLObject(const QModelIndex &index)
{
    return index.data(QMLObject);
}

void myModel::setValue(const QModelIndex &index, int value)
{
    setData(index, value, Value);
}

void myModel::updateObject(const QModelIndex &left, const QModelIndex &right, const QVector<int> &roles)
{
    if(roles[0] == QMLObject) return;
    QVariantMap obj = left.data(QMLObject).toMap();
    obj[roleNames[roles[0]]] = left.data(roles[0]);
    setData(left, obj, QMLObject);
}

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 1.4 as QC1
import QtQuick.Controls 2.12
import QtQml.Models 2.11

Window {
    width: 640
    height: 280
    visible: true
    title: qsTr("Hello World")
    RowLayout{
        anchors.fill: parent
        QC1.TreeView{
            id: tree
            Layout.fillWidth: true;
            Layout.fillHeight: true;
            model: myModel
            selection: ItemSelectionModel{
                id:mySelectionModel
                model: myModel
            }
            itemDelegate: ItemDelegate{
                Text{
                    text: styleData.value
                }
                MouseArea{
                    anchors.fill: parent
                    onClicked:{
                        tree.selection.setCurrentIndex(styleData.index,ItemSelectionModel.SelectCurrent);
                        target.modelItem = myModel.getQMLObject(styleData.index);
                        target.modelIndex = styleData.index;
                    }
                }
            }
            QC1.TableViewColumn{
                width: 150
                title: "Name"
                role: "name"
            }
            QC1.TableViewColumn{
                width: 50
                title: "Value"
                role: "value"
                delegate: TextEdit{
                    text: styleData ? styleData.value : "";
                    Keys.onReturnPressed: {
                        focus = false;
                        myModel.setValue(styleData.index, text);
                    }
                }
            }
            QC1.TableViewColumn{
                width: 150
                title: "Description"
                role: "description"
            }
        }
        RowLayout{
            id: target
            Layout.fillWidth: true;
            property var modelIndex: false
            property var modelItem: false
            Rectangle{
                implicitHeight: 20
                implicitWidth: 65
                border.color: "black";
                border.width: 1
                TextEdit{
                    id: targetValue
                    anchors.fill: parent
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    text: target.modelItem ? target.modelItem.value : "NaN"
                    Keys.onReturnPressed: {
                        targetValue.focus = false;
                        if(target.modelIndex) myModel.setValue(target.modelIndex, targetValue.text);
                    }
                }
            }
            TextArea{
                id: targetText
                readOnly: true
                implicitWidth: 130
                wrapMode: Text.Wrap
                text: target.modelItem ? target.modelItem.name : "Nothing yet"
            }
        }
    }
}

Guess I'll have to explain it a little bit. When I click an item of the model in TreeView its QMLObject role is sent to target component, where Value is given to TextEdit and Name is given to TextArea along with the QModelIndex of selected item. So when I change the value inside of TextEdit it updates the value in model. The issue here is that if I change the value inside TreeView it won't be updated in TextEdit, because target receives only a copy of QMLObject role through return index.data(QMLObject);. I know about possibility to pass QQmlDMAbstractItemModelData from TreeView to the taget, but I'm trying to bind model item to target directly, this TreeView is only to make this example more clear. Sorry, couldn't think of something smaller, guess I'm too deep in this topic to keep it simple