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

Introduction

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 though.

In this article we will show how to make binding of properties to C++ functions work using Q_PROPERTY with a NOTIFY 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 has a changeOfStatus() signal which is emitted whenever the status of the C++ function someFunction() changes:

Q_PROPERTY ( QString theChange READ getTheChange NOTIFY changeOfStatus )

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 Q_INVOKABLE. It simply changes the status of a member variable and is called every 5 seconds using a QTimer 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

#include <QtGui>
#include <QtDeclarative>

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) {
    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"

int main(int argc, char* argv[])
{
 QApplication app(argc, argv);
 Object myObj;
 QDeclarativeView view;
 view.rootContext()->setContextProperty("rootItem", (QObject *)&myObj);
 view.setSource(QUrl::fromLocalFile("main.qml"));
 view.show();
 return app.exec();
}

The QML implementation

In the QML code below we create a Rectangle 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.