How to Bind a QML Property to a C++ Function: Difference between revisions
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
[[Category:HowTo]] | [[Category:HowTo]] | ||
[[Category:Developing_with_Qt::General]] | |||
[[Category:Tutorial]] | |||
[toc align_right= | [toc align_right="yes" depth="2"] | ||
= Binding a QML property to a C++ function = | = 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 | 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 | 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 == | ||
Line 17: | Line 19: | ||
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. | 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 | 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> | |||
#include <QtGui> | |||
#include <QtDeclarative> | |||
class Object : public QObject | class Object : public QObject | ||
{ | |||
Q_OBJECT | |||
Q_PROPERTY(QString theChange READ getTheChange NOTIFY changeOfStatus) | |||
public: | public: | ||
Object() | |||
{ | |||
changeMe = false; | |||
myTimer = new QTimer(this); | |||
myTimer->start(5000); | |||
connect(myTimer, SIGNAL (timeout()), this, SLOT (testSlot())); | |||
} | |||
QString getTheChange() | QString getTheChange() | ||
{ | |||
return | if (theValue 0) | ||
{ | |||
if (theValue 1) | return "The text changed"; | ||
} | |||
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) { | |||
theValue = 0; | theValue = 0; | ||
} | |||
if (i 1) { | if (i 1) { | ||
theValue = 1; | |||
} | |||
emit changeOfStatus(i); | emit changeOfStatus(i); | ||
} | |||
signals: | signals: | ||
void changeOfStatus(int i) ; | |||
public slots: | |||
void testSlot() | |||
{ | |||
if (changeMe) | |||
{ | |||
someFunction(0); | |||
} else { | |||
someFunction(1); | |||
} | |||
changeMe = !changeMe; | |||
} | |||
private: | 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(); | |||
} | } | ||
Line 53: | Line 105: | ||
== The QML implementation == | == The QML implementation == | ||
In the QML code below we create a | 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 | main.qml | ||
</code> | </code> | ||
import QtQuick 1.0 | |||
Rectangle { | Rectangle { | ||
width: 440; height: 150 | |||
Column { | Column { | ||
anchors.fill: parent; spacing: 20 | |||
Text { | Text { | ||
text: rootItem.theChange | |||
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. |
Revision as of 09:07, 25 February 2015
[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 "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
- 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":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.