Qml and qlist c++

andre07

HI all,
I have a question about passing data between QML and C++.
I've a class cpp with a QList of multiple data, is possible to pass it to a qml file and use it as an array??

thanks

messi

Hi andre07

yes it is possible.
It depends now if you use QtQuick1.x or QtQuick2.0

Can you tell us what do you use? Qt4 or Qt5

andre07

I use qt 4.8 with QtQuick 1.1 and in some cases qt 5 with QtQuick 2.0.

you have an example of each?

thanks!!! ;-)

andre07

Up, Can someone help me?

Thanks

hpollak

I think this doc can help you:

"QT5 - Doc":http://qt-project.org/doc/qt-5.0/qtqml/qtqml-cppintegration-data.html

and this

"QT4.8":http://qt-project.org/doc/qt-4.8/qdeclarativemodels.html

andre07

ok thanks!
but i've a class named Device, with a list of funcions. Usually i use it like QList <Device> State and i load a datalist from a Db connection.
Can i connect this list with qml?

thanks

andre07

up
thanks

melghawi

Hi andre07.

Can you post some code.

What exactly are you trying to do.

andre07

ok...
this is the class used on the list..

#ifndef STATEDEVICE_H
#define STATEDEVICE_H
#include "DBConnect.h" //class connection DB
#include "DbDao.h" //class with function for loading data from DB

class StateDevice {
protected:
QString ValueTemp_S1;//1
QString ValueTemp_S2;//2
QString ValueTemp_S3;//3
...
public:
StateDevice (QString ValueTemp_S1,
QString ValueTemp_S2,
QString ValueTemp_S3):
ValueTemp_S1(ValueTemp_S1),
ValueTemp_S2(ValueTemp_S2),
ValueTemp_S3(ValueTemp_S3)....{}
StateDevice ():
ValueTemp_S1(""),
ValueTemp_S2(""),
ValueTemp_S3("")...{}
QString getValueTemp_S1() {
return ValueTemp_S1;
}
QString getValueTemp_S2() {
return ValueTemp_S2;
}
QString getValueTemp_S3() {
return ValueTemp_S3;
}
......
};
#endif // STATEDEVICE_H

then i ve this class in DbDao.cpp, for the filling of the list..

QList<StateDevice> DbDAO::getStateDevice(int Adr) {
QString sql = "";
sql = "SELECT * FROM CurrentStatus_1 WHERE Address=:Address;";
QList<StateDevice> DeviceList;
sqlite3_stmt stmt=NULL;
int rc = 0;
sqlite3_exec(DBConnect::getInstance()->dbFun, "BEGIN IMMEDIATE TRANSACTION", 0, 0, 0);
if ((rc = sqlite3_prepare_v2(DBConnect::getInstance()->dbFun, sql.toUtf8(), -1, &stmt, 0)) != SQLITE_OK)
goto CLEANUP;
sqlite3_bind_int(stmt, sqlite3_bind_parameter_index(stmt, ":Address"),Adr);
rc = sqlite3_step(stmt);
if (rc != SQLITE_DONE && rc != SQLITE_ROW) goto CLEANUP;
DeviceList.append(StateDevice(
sqlite3_column_int(stmt,0),
(const char) sqlite3_column_text(stmt,1),
sqlite3_column_int(stmt,2)
.....
));
CLEANUP:
if (stmt) {
sqlite3_finalize(stmt);
//qDebug() << "Fine lettura dati StateDevice DbDao";
}
sqlite3_exec(DBConnect::getInstance()->dbFun, "END TRANSACTION", 0, 0, 0);
return DeviceList;
}

and at the end, i usually fill the list with this call :

QList<StateDevice>DeviceList = DBConnect::getInstance()->getDbDao()->getStateDevice(1);

I'm trying to read this list from qml, but i've no idea..

melghawi

Ok so you want to pass a list of StateDevice objects from c++ to qml. Have you looked at the "QQmlListProperty":http://qt-project.org/doc/qt-5.0/qtqml/qqmllistproperty.html class?

You can do something like this:

@
class TestClass : public QQuickItem
{
Q_OBJECT
Q_PROPERTY(QQmlListProperty<StateDevice> stateDeviceList READ stateDeviceList)

public:
QQmlListProperty<StateDevice> stateDeviceList()
{
QList<StateDevice>DeviceList = DBConnect::getInstance()->getDbDao()->getStateDevice(1);
return QQmlListProperty<StateDevice>(this, DeviceList);
}
};
@

andre07

Ok thanks!! How can i use it in qml? How can i call and use the list in qml ?

thanks

Ah, the example give me an error :

error: expected primary-expression before 'listProperty'§
error: expected ';' before 'listProperty'
error: no match for call to '(QQmlListProperty<StateDevice>) (CurrentStatus* const, StateDevice&)'

melghawi

Any class you wish to use in qml must be registered with Qt's meta-object system. So you can use the "qmlRegisterType":http://qt-project.org/doc/qt-5.0/qtqml/qqmlengine.html#qmlRegisterType static function to that. Or you might want to use "qmlRegisterSingletonType":http://qt-project.org/doc/qt-5.0/qtqml/qqmlengine.html#qmlRegisterSingletonType for singleton objects which would be more suitable for your specific needs.

Eg:

Define a static callback that passes your list to qml.

@
static QJSValue stateDeviceListProvider(QQmlEngine *engine, QJSEngine *scriptEngine)
{
Q_UNUSED(engine)

// Get the list of StateDevice pointers. I would recommend using a list of pointers instead of a list of objects.    
QList<StateDevice*>DeviceList = DBConnect::getInstance()->getDbDao()->getStateDevice(1);

// Now create a new Qt/JavaScript value.
QJSValue jsValueArray = scriptEngine->newArray(DeviceList.count());

// Copy the pointers in the QList to the QJSValue array.
for(int i = 0; i < DeviceList.count(); ++i)
{
    array.setProperty(i, scriptEngine->newQObject(DeviceList[i]));
}

return jsValueArray

}
@

Don't forget to register this callback with Qt's meta-object system.

@qmlRegisterSingletonType("MyModule", 1, 0, "StateDeviceList", stateDeviceListProvider);@

Then in qml you can do this:

@
import QtQuick 2.0
import MyModule 1.0
Item {
id: root
property variant stateDeviceList: StateDeviceList
}
@

andre07

ok, but can i use this example without test class?
Can you write the complete class of c++?

melghawi

Ok so I tried it without the test class using the qmlRegisterSingletonType and it didn't work which is odd but I have successfully been able to expose a list of QObjects from c++ to qml. I will update this post with code examples when I have more time.

andre07

Ok thanks ;-)

melghawi

Ok so this is what I've come up with. I'm sure there is a much better way of doing this without the overhead.

StateDeviceListProvider.h

@
#ifndef STATEDEVICELISTPROVIDER_H
#define STATEDEVICELISTPROVIDER_H

#include <QObject>
#include <QQmlListProperty>

// Forward declarations.
class StateDevice;

class StateDeviceListProvider : public QObject
{
Q_OBJECT
Q_PROPERTY(QQmlListProperty<StateDevice> stateDeviceList READ stateDeviceList)

public:
static StateDeviceListProvider* instance();
QQmlListProperty<StateDevice> stateDeviceList();

private:
StateDeviceListProvider(QObject *parent = NULL);

private:
static StateDeviceListProvider mInstance;
QList<StateDevice> mStateDeviceList;
};

#endif // STATEDEVICELISTPROVIDER_H
@

StateDeviceListProvider.cpp

@
#include "statedevicelistprovider.h"
#include "statedevice.h"

StateDeviceListProvider* StateDeviceListProvider::mInstance = NULL;

StateDeviceListProvider::StateDeviceListProvider(QObject *parent) :
QObject(parent)
{

// This is just to test this code. You will use your real list.
mStateDeviceList << new StateDevice;
mStateDeviceList << new StateDevice;
mStateDeviceList << new StateDevice;

}

StateDeviceListProvider* StateDeviceListProvider::instance()
{
if(mInstance == NULL)
{
mInstance = new StateDeviceListProvider;
}
return mInstance;
}

QQmlListProperty<StateDevice> StateDeviceListProvider::stateDeviceList()
{

// Here you would retrieve your real list and return it.
return QQmlListProperty<StateDevice>(this, mStateDeviceList);

}
@

main.cpp

@
#include <qqml.h>
#include <QtGui/QGuiApplication>
#include "qtquick2applicationviewer.h"
#include "statedevicelistprovider.h"
#include "statedevice.h"

static QObject* StaticDeviceListProviderCallback(QQmlEngine *engine, QJSEngine *scriptEngine)
{
Q_UNUSED(engine)
Q_UNUSED(scriptEngine)

return StateDeviceListProvider::instance();

}

int main(int argc, char *argv[])
{
qmlRegisterType<StateDevice>();
qmlRegisterSingletonType<StateDeviceListProvider>(
"MyModule", 1, 0, "StateDeviceListProvider", StaticDeviceListProviderCallback);

QGuiApplication app(argc, argv);

QtQuick2ApplicationViewer viewer;
viewer.setMainQmlFile&#40;QStringLiteral("qml/untitled/main.qml"&#41;);
viewer.showExpanded();

return app.exec();

}
@

main.qml

@
import QtQuick 2.0
import MyModule 1.0

Rectangle {
width: 360
height: 360

// Now you have your list exposed to qml.
property variant list: StateDeviceListProvider.stateDeviceList

Component.onCompleted:
{
    // Just testing here.
    var el0 = list[0];
    console.log(el0.number())
}

}
@

andre07

thanks!! Do you have a solution for qt 4.8?

melghawi

It should be near enough to the same thing with some minor modifications (class name changes). Pre Qt5 does not support qmlRegisterSingletonType so there needs to be some modification there as well. I will give it a go and post my results when I have more time. Did my first example work for you then?

andre07

yes it works!! Great!! Thanks;-))

melghawi

Ok here's an example that works with QQuick 1.0. Again, If anyone has a better way of doing this then please share.

StateDeviceListProvider.h

@
#ifndef STATEDEVICELISTPROVIDER_H
#define STATEDEVICELISTPROVIDER_H

#include <QObject>
#include <QDeclarativeListProperty>

class StateDevice;

class StateDeviceListProvider : public QObject
{
Q_OBJECT
Q_PROPERTY(QDeclarativeListProperty<StateDevice> stateDeviceList READ stateDeviceList CONSTANT)

public:
static StateDeviceListProvider* instance();
QDeclarativeListProperty<StateDevice> stateDeviceList();

private:
StateDeviceListProvider(QObject *parent = NULL);

private:
static StateDeviceListProvider mInstance;
QList<StateDevice> mStateDeviceList;
};

#endif // STATEDEVICELISTPROVIDER_H
@

StateDeviceListProvider.cpp

@
#include "statedevicelistprovider.h"
#include "statedevice.h"

StateDeviceListProvider* StateDeviceListProvider::mInstance = NULL;

StateDeviceListProvider::StateDeviceListProvider(QObject *parent) :
QObject(parent)
{

// This is just to test this code. You will use your real list.
mStateDeviceList << new StateDevice;
mStateDeviceList << new StateDevice;
mStateDeviceList << new StateDevice;

}

StateDeviceListProvider* StateDeviceListProvider::instance()
{
if(mInstance == NULL)
{
mInstance = new StateDeviceListProvider;
}
return mInstance;
}

QDeclarativeListProperty<StateDevice> StateDeviceListProvider::stateDeviceList()
{

// Here you would retrieve your real list and return it.
return QDeclarativeListProperty<StateDevice>(this, mStateDeviceList);

}
@

main.cpp

@
#include <QApplication>
#include <qdeclarative.h>
#include <QDeclarativeContext>
#include "qmlapplicationviewer.h"
#include "statedevicelistprovider.h"
#include "statedevice.h"

Q_DECL_EXPORT int main(int argc, char *argv[])
{
qmlRegisterType<StateDevice>();

QScopedPointer<QApplication> app(createApplication(argc, argv));

QmlApplicationViewer viewer;

// Pre Qt5 does not support qmlRegisterSingletonType. So this is a work-around.
viewer.rootContext()->setContextProperty("StateDeviceListProvider", StateDeviceListProvider::instance());

viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
viewer.setMainQmlFile&#40;QLatin1String("qml/untitledQQuick1/main.qml"&#41;);
viewer.showExpanded();

return app->exec&#40;&#41;;

}
@

main.qml

@
import QtQuick 1.1

Rectangle {
width: 360
height: 360

// Now you have your list exposed to qml.
property variant list: StateDeviceListProvider.stateDeviceList

Component.onCompleted:
{
    // Just testing here.
    var el0 = list[0];
    console.log(el0.number)
}

}
@