How to Bind a QML Property to a C++ Function

[toc align_right="yes" depth="2"]

Binding a QML property to a C++ function

At the moment Qt Quick does not provide an implementation for linking a QML property to the result of a C++ function. There exists a suggestion for adding support for this "here":https://bugreports.qt.nokia.com//browse/QTBUG-17323 though.

In this article we will show how to make binding of properties to C++ functions work using "Q_PROPERTY":http://doc.qt.nokia.com/latest/qobject.html#Q_PROPERTY with a "NOTIFY":http://doc.qt.nokia.com/latest/properties.html#qt-s-property-system signal that is emitted whenever the value of the property changes.

The C++ implementation

In the Object class in the example below we create a Q_PROPERTY that is used to set and update the text in the QML code and that has a changeOfStatus() signal which is emitted whenever the status of the C++ function someFunction() changes:

Q_PROPERTY(QString theChange READ getTheChange NOTIFY changeOfStatus)<code>

The Object::getTheChange() function sets the text of the QML item depending on the result of Object::someFunction(). The result is set as the value of the text property in the QML code.

Object::someFunction() is callable from QML as it uses &quot;Q_INVOKABLE&amp;quot;:http://doc.qt.nokia.com/latest/qobject.html#Q_INVOKABLE. It simply changes the status of a member variable and is called every 5 seconds using a &quot;QTimer&amp;quot;:http://doc.qt.nokia.com/latest/qtimer.html to illustrate how the QML property is able to react to the changes of this function. It can also be called from the QML code when clicking the text. At the end it emits the changeOfStatus() signal which triggers Object::getTheChange() to be called and the text to be reevaluated.

main.cpp<br />

#include <QtGui&gt;
#include <QtDeclarative&gt;

class Object : public QObject
{
Q_OBJECT
Q_PROPERTY(QString theChange READ getTheChange NOTIFY changeOfStatus)

public:
Object()
{
changeMe = false;
myTimer = new QTimer(this);
myTimer->start(5000);
connect(myTimer, SIGNAL (timeout()), this, SLOT (testSlot()));
}

QString getTheChange()
{
if (theValue 0)

 {
  return "The text changed";
 }
 if (theValue  1)
 {
 return "New text change";
 }
 return "nothing has happened yet";

}

Q_INVOKABLE void someFunction(int i)
{
if ( i 0) &#123;

  theValue = 0;
 }
 if (i  1) {
 theValue = 1;
 }

emit changeOfStatus(i);
}

signals:
void changeOfStatus(int i) ;
public slots:
void testSlot()
{
if (changeMe)
{
someFunction(0);
} else {
someFunction(1);
}
changeMe = !changeMe;
}

private:
bool changeMe;
int theValue;
QTimer myTimer;
};
#include "main.moc&quot;
int main(int argc, char* argv)
{
QApplication app(argc, argv);
Object myObj;
QDeclarativeView view;
view.rootContext()->setContextProperty("rootItem&quot;, (QObject *)&myObj);
view.setSource(QUrl::fromLocalFile&amp;#40;"main.qml&quot;&#41;);
view.show();
return app.exec&amp;#40;&#41;;

}

== The QML implementation ==

In the QML code below we create a "Rectangle":http://doc.qt.nokia.com/latest/qml-rectangle.html that reacts to mouse clicks. The text is set to the the result of the Object::theChange() function.

main.qml

import QtQuick 1.0

Rectangle {
width: 440; height: 150

Column {
anchors.fill: parent; spacing: 20

Text {
text: rootItem.theChange
font.pointSize: 25; anchors.horizontalCenter: parent.horizontalCenter

}
}
}

So, using the approach in the example above, we get a way for QML properties to react to changes that happen internally in the C++ code.