How to Bind a QML Property to a C++ Function: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
(convert {{doclinkanchor}} to the improved {{doclink}})
 
(6 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:HowTo]]
[[Category:HowTo]]
[[Category:Developing_with_Qt::General]]
__NOEDITSECTION__
[[Category:Tutorial]]
__NOTOC__


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


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


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 {{DocLink|QObject|Q_PROPERTY}} with a <tt>[http://doc.qt.io/qt-5/properties.html NOTIFY]</tt> signal that is emitted whenever the value of the property changes.


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 ==


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


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:
<code>
Q_PROPERTY ( QString theChange READ getTheChange NOTIFY changeOfStatus )
</code>


<code>Q_PROPERTY(QString theChange READ getTheChange NOTIFY changeOfStatus)<code>
The <tt>Object::getTheChange()</tt> function sets the text of the QML item depending on the result of <tt>Object::someFunction()</tt>. The result is set as the value of the text property in the QML 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.
<tt>Object::someFunction()</tt> is callable from QML as it uses {{DocLink|QObject|Q_INVOKABLE}}. It simply changes the status of a member variable and is called every 5 seconds using a {{DocLink|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 <tt>changeOfStatus()</tt> signal which triggers <tt>Object::getTheChange()</tt> to be called and the text to be reevaluated.


Object::someFunction() is callable from QML as it uses "Q_INVOKABLE":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 "QTimer":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'''


main.cpp
<code>
</code>
#include <QtGui>
#include <QtGui>
#include <QtDeclarative>
#include <QtDeclarative>
Line 29: Line 30:
{
{
  Q_OBJECT
  Q_OBJECT
  Q_PROPERTY(QString theChange READ getTheChange NOTIFY changeOfStatus)
  Q_PROPERTY( QString theChange READ getTheChange NOTIFY changeOfStatus )


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


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


Q_INVOKABLE void someFunction(int i)
  Q_INVOKABLE void someFunction(int i) {
  {
  if ( i 0) {
if ( i  0) {
    theValue = 0;
  theValue = 0;
  }
  if (i  1) {
    theValue = 1;
  }
  emit changeOfStatus(i);
   }
   }
  if (i  1) {
theValue = 1;
}


emit changeOfStatus(i);
  signals:
}
  void changeOfStatus(int i) ;


signals:
  public slots:
void changeOfStatus(int i) ;
  void testSlot() {
public slots:
    if (changeMe) {
void testSlot()
    someFunction(0);
{
    } else {
if (changeMe)
    someFunction(1);
{
    }
someFunction(0);
    changeMe = !changeMe;
} else {
  }
someFunction(1);
}
changeMe = !changeMe;
}
 
private:
bool changeMe;
int theValue;
QTimer '''myTimer;


  private:
  bool changeMe;
  int theValue;
  QTimer *myTimer;
};
};


#include "main.moc"
#include "main.moc"


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


== The QML implementation ==
== 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.
In the QML code below we create a <tt>Rectangle</tt> that reacts to mouse clicks. The text is set to the the result of the <tt>Object::theChange()</tt> function.


main.qml
'''main.qml'''


</code>
<code>
import QtQuick 1.0
import QtQuick 1.0


Line 115: Line 104:
  width: 440; height: 150
  width: 440; height: 150


Column {
Column {
anchors.fill: parent; spacing: 20
  anchors.fill: parent; spacing: 20
 
  Text {
Text {
  text: rootItem.theChange
text: rootItem.theChange
  font.pointSize: 25; anchors.horizontalCenter: parent.horizontalCenter
font.pointSize: 25; anchors.horizontalCenter: parent.horizontalCenter
  }
 
}
  }
  }
}
}
 
</code>
<code>


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

Latest revision as of 09:30, 23 October 2015



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.