https://wiki.qt.io/index.php?title=How_to_Bind_a_QML_Property_to_a_C%2B%2B_Function&feed=atom&action=history
How to Bind a QML Property to a C++ Function - Revision history
2024-03-29T12:10:00Z
Revision history for this page on the wiki
MediaWiki 1.39.4
https://wiki.qt.io/index.php?title=How_to_Bind_a_QML_Property_to_a_C%2B%2B_Function&diff=19740&oldid=prev
Waldyrious: convert {{doclinkanchor}} to the improved {{doclink}}
2015-10-23T09:30:05Z
<p>convert {{doclinkanchor}} to the improved {{doclink}}</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 09:30, 23 October 2015</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l7">Line 7:</td>
<td colspan="2" class="diff-lineno">Line 7:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>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.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>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.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>In this article we will show how to make binding of properties to C++ functions work using {{<del style="font-weight: bold; text-decoration: none;">DocLinkAnchor</del>|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.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>In this article we will show how to make binding of properties to C++ functions work using {{<ins style="font-weight: bold; text-decoration: none;">DocLink</ins>|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.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== The C++ Implementation ==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== The C++ Implementation ==</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l19">Line 19:</td>
<td colspan="2" class="diff-lineno">Line 19:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>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.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>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.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><tt>Object::someFunction()</tt> is callable from QML as it uses {{<del style="font-weight: bold; text-decoration: none;">DocLinkAnchor</del>|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.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><tt>Object::someFunction()</tt> is callable from QML as it uses {{<ins style="font-weight: bold; text-decoration: none;">DocLink</ins>|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.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''main.cpp'''</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''main.cpp'''</div></td></tr>
<!-- diff cache key heroku_app_db:diff::1.12:old-14393:rev-19740 -->
</table>
Waldyrious
https://wiki.qt.io/index.php?title=How_to_Bind_a_QML_Property_to_a_C%2B%2B_Function&diff=14393&oldid=prev
JKSH: JKSH moved page How to bind a QML Property to a C++ Function to How to Bind a QML Property to a C++ Function: Title format
2015-03-16T16:22:00Z
<p>JKSH moved page <a href="/How_to_bind_a_QML_Property_to_a_C%2B%2B_Function" class="mw-redirect" title="How to bind a QML Property to a C++ Function">How to bind a QML Property to a C++ Function</a> to <a href="/How_to_Bind_a_QML_Property_to_a_C%2B%2B_Function" title="How to Bind a QML Property to a C++ Function">How to Bind a QML Property to a C++ Function</a>: Title format</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 16:22, 16 March 2015</td>
</tr>
<!-- diff cache key heroku_app_db:diff::1.12:old-11331:rev-14393 -->
</table>
JKSH
https://wiki.qt.io/index.php?title=How_to_Bind_a_QML_Property_to_a_C%2B%2B_Function&diff=11331&oldid=prev
Simow at 09:24, 4 March 2015
2015-03-04T09:24:44Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 09:24, 4 March 2015</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l94">Line 94:</td>
<td colspan="2" class="diff-lineno">Line 94:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== The QML implementation ==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== The QML implementation ==</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>In the QML code below we create a <del style="font-weight: bold; text-decoration: none;">[http:/</del>/<del style="font-weight: bold; text-decoration: none;">doc.qt.nokia.com/latest/qml-rectangle.html Rectangle] </del>that reacts to mouse clicks. The text is set to the the result of the Object::theChange() function.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>In the QML code below we create a <ins style="font-weight: bold; text-decoration: none;"><tt>Rectangle<</ins>/<ins style="font-weight: bold; text-decoration: none;">tt> </ins>that reacts to mouse clicks. The text is set to the the result of the <ins style="font-weight: bold; text-decoration: none;"><tt></ins>Object::theChange()<ins style="font-weight: bold; text-decoration: none;"></tt> </ins>function.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''main.qml'''</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''main.qml'''</div></td></tr>
</table>
Simow
https://wiki.qt.io/index.php?title=How_to_Bind_a_QML_Property_to_a_C%2B%2B_Function&diff=11330&oldid=prev
Simow: Corrected Style
2015-03-04T09:23:37Z
<p>Corrected Style</p>
<a href="//wiki.qt.io/index.php?title=How_to_Bind_a_QML_Property_to_a_C%2B%2B_Function&diff=11330&oldid=11305">Show changes</a>
Simow
https://wiki.qt.io/index.php?title=How_to_Bind_a_QML_Property_to_a_C%2B%2B_Function&diff=11305&oldid=prev
AutoSpider: Convert ExpressionEngine links
2015-03-04T08:44:57Z
<p>Convert ExpressionEngine links</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 08:44, 4 March 2015</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l9">Line 9:</td>
<td colspan="2" class="diff-lineno">Line 9:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>= Binding a QML property to a C++ function =</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>= Binding a QML property to a C++ function =</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>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 <del style="font-weight: bold; text-decoration: none;">"here":</del>https://bugreports.qt.nokia.com//browse/QTBUG-17323 though.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>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 <ins style="font-weight: bold; text-decoration: none;">[</ins>https://bugreports.qt.nokia.com//browse/QTBUG-17323 <ins style="font-weight: bold; text-decoration: none;">here] </ins>though.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>In this article we will show how to make binding of properties to C++ functions work using <del style="font-weight: bold; text-decoration: none;">"Q_PROPERTY":</del>http://doc.qt.nokia.com/latest/qobject.html#Q_PROPERTY with a <del style="font-weight: bold; text-decoration: none;">"NOTIFY":</del>http://doc.qt.nokia.com/latest/properties.html#qt-s-property-system signal that is emitted whenever the value of the property changes.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>In this article we will show how to make binding of properties to C++ functions work using <ins style="font-weight: bold; text-decoration: none;">[</ins>http://doc.qt.nokia.com/latest/qobject.html#Q_PROPERTY <ins style="font-weight: bold; text-decoration: none;">Q_PROPERTY] </ins>with a <ins style="font-weight: bold; text-decoration: none;">[</ins>http://doc.qt.nokia.com/latest/properties.html#qt-s-property-system <ins style="font-weight: bold; text-decoration: none;">NOTIFY] </ins>signal that is emitted whenever the value of the property changes.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== The C++ implementation ==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== The C++ implementation ==</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l21">Line 21:</td>
<td colspan="2" class="diff-lineno">Line 21:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>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.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>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.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Object::someFunction() is callable from QML as it uses <del style="font-weight: bold; text-decoration: none;">"Q_INVOKABLE":</del>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 <del style="font-weight: bold; text-decoration: none;">"QTimer":</del>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.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Object::someFunction() is callable from QML as it uses <ins style="font-weight: bold; text-decoration: none;">[</ins>http://doc.qt.nokia.com/latest/qobject.html#Q_INVOKABLE <ins style="font-weight: bold; text-decoration: none;">Q_INVOKABLE]</ins>. It simply changes the status of a member variable and is called every 5 seconds using a <ins style="font-weight: bold; text-decoration: none;">[</ins>http://doc.qt.nokia.com/latest/qtimer.html <ins style="font-weight: bold; text-decoration: none;">QTimer] </ins>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.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>main.cpp</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>main.cpp</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l107">Line 107:</td>
<td colspan="2" class="diff-lineno">Line 107:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== The QML implementation ==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== The QML implementation ==</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>In the QML code below we create a <del style="font-weight: bold; text-decoration: none;">"Rectangle":</del>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.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>In the QML code below we create a <ins style="font-weight: bold; text-decoration: none;">[</ins>http://doc.qt.nokia.com/latest/qml-rectangle.html <ins style="font-weight: bold; text-decoration: none;">Rectangle] </ins>that reacts to mouse clicks. The text is set to the the result of the Object::theChange() function.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>main.qml</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>main.qml</div></td></tr>
</table>
AutoSpider
https://wiki.qt.io/index.php?title=How_to_Bind_a_QML_Property_to_a_C%2B%2B_Function&diff=9466&oldid=prev
AutoSpider: Add "cleanup" tag
2015-03-03T15:59:02Z
<p>Add "cleanup" tag</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 15:59, 3 March 2015</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Line 1:</td>
<td colspan="2" class="diff-lineno">Line 1:</td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">{{Cleanup | reason=Auto-imported from ExpressionEngine.}}</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Category:HowTo]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Category:HowTo]]</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Category:Developing_with_Qt::General]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[Category:Developing_with_Qt::General]]</div></td></tr>
</table>
AutoSpider
https://wiki.qt.io/index.php?title=How_to_Bind_a_QML_Property_to_a_C%2B%2B_Function&diff=8593&oldid=prev
Simow: Simow moved page How to bind a QML property to a CPlusPlus function to How to bind a QML Property to a C++ Function: Wording
2015-03-01T10:52:23Z
<p>Simow moved page <a href="/How_to_bind_a_QML_property_to_a_CPlusPlus_function" class="mw-redirect" title="How to bind a QML property to a CPlusPlus function">How to bind a QML property to a CPlusPlus function</a> to <a href="/How_to_bind_a_QML_Property_to_a_C%2B%2B_Function" class="mw-redirect" title="How to bind a QML Property to a C++ Function">How to bind a QML Property to a C++ Function</a>: Wording</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<tr class="diff-title" lang="en">
<td colspan="1" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="1" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 10:52, 1 March 2015</td>
</tr><tr><td colspan="2" class="diff-notice" lang="en"><div class="mw-diff-empty">(No difference)</div>
</td></tr></table>
Simow
https://wiki.qt.io/index.php?title=How_to_Bind_a_QML_Property_to_a_C%2B%2B_Function&diff=6543&oldid=prev
Maintenance script at 09:07, 25 February 2015
2015-02-25T09:07:27Z
<p></p>
<a href="//wiki.qt.io/index.php?title=How_to_Bind_a_QML_Property_to_a_C%2B%2B_Function&diff=6543&oldid=2980">Show changes</a>
Maintenance script
https://wiki.qt.io/index.php?title=How_to_Bind_a_QML_Property_to_a_C%2B%2B_Function&diff=2980&oldid=prev
Maintenance script at 14:44, 23 February 2015
2015-02-23T14:44:20Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 14:44, 23 February 2015</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Line 1:</td>
<td colspan="2" class="diff-lineno">Line 1:</td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">=Binding a </del><<del style="font-weight: bold; text-decoration: none;">span class="caps"</del>><del style="font-weight: bold; text-decoration: none;">QML</del></<del style="font-weight: bold; text-decoration: none;">span</del>> <del style="font-weight: bold; text-decoration: none;">property to a C++ function=</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[Category:HowTo]]</ins><<ins style="font-weight: bold; text-decoration: none;">br /</ins>><ins style="font-weight: bold; text-decoration: none;">[[Category:Developing_with_Qt::General]]</ins><<ins style="font-weight: bold; text-decoration: none;">br </ins>/><ins style="font-weight: bold; text-decoration: none;">[[Category:Tutorial]]</ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">At the moment Qt Quick does not provide an implementation for linking a <span class</del>=<del style="font-weight: bold; text-decoration: none;">"caps">QML</span> property to the result of a C++ function. There exists a suggestion for adding support for this [https://bugreports.qt.nokia.com//browse/QTBUG-17323 here] ''[bugreports.qt.nokia.com</del>]<del style="font-weight: bold; text-decoration: none;">'' though.</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[toc align_right</ins>=<ins style="font-weight: bold; text-decoration: none;">&quot;yes&amp;quot; depth=&quot;2&amp;quot;</ins>]</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">In this article we will show how to make binding of properties </del>to C++ <del style="font-weight: bold; text-decoration: none;">functions work using [http://doc.qt.nokia.com/latest/qobject.html#Q_PROPERTY Q_PROPERTY] ''[doc.qt.nokia.com]'' with a [http://doc.qt.nokia.com/latest/properties.html#qt-s-property-system <span class</del>=<del style="font-weight: bold; text-decoration: none;">"caps">NOTIFY</span>] ''[doc.qt.nokia.com]'' signal that is emitted whenever the value of the property changes.</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">= Binding a QML property </ins>to <ins style="font-weight: bold; text-decoration: none;">a </ins>C++ <ins style="font-weight: bold; text-decoration: none;">function </ins>=</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">==The </del>C++ <del style="font-weight: bold; text-decoration: none;">implementation==</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">At the moment Qt Quick does not provide an implementation for linking a QML property to the result of a </ins>C++ <ins style="font-weight: bold; text-decoration: none;">function. There exists a suggestion for adding support for this &quot;here&amp;quot;:https://bugreports.qt.nokia.com//browse/QTBUG-17323 though.</ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>In <del style="font-weight: bold; text-decoration: none;">the Object class in the example below </del>we <del style="font-weight: bold; text-decoration: none;">create a </del>Q_PROPERTY <del style="font-weight: bold; text-decoration: none;">that is used to set and update the text in the <span class="caps">QML<</del>/<del style="font-weight: bold; text-decoration: none;">span> code and that has </del>a <del style="font-weight: bold; text-decoration: none;">changeOfStatus() </del>signal <del style="font-weight: bold; text-decoration: none;">which </del>is emitted whenever the <del style="font-weight: bold; text-decoration: none;">status </del>of the <del style="font-weight: bold; text-decoration: none;">C++ function someFunction() </del>changes<del style="font-weight: bold; text-decoration: none;">:</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>In <ins style="font-weight: bold; text-decoration: none;">this article </ins>we <ins style="font-weight: bold; text-decoration: none;">will show how to make binding of properties to C++ functions work using &quot;</ins>Q_PROPERTY<ins style="font-weight: bold; text-decoration: none;">&amp;quot;:http://doc.qt.nokia.com/latest</ins>/<ins style="font-weight: bold; text-decoration: none;">qobject.html#Q_PROPERTY with </ins>a <ins style="font-weight: bold; text-decoration: none;">&quot;NOTIFY&amp;quot;:http://doc.qt.nokia.com/latest/properties.html#qt-s-property-system </ins>signal <ins style="font-weight: bold; text-decoration: none;">that </ins>is emitted whenever the <ins style="font-weight: bold; text-decoration: none;">value </ins>of the <ins style="font-weight: bold; text-decoration: none;">property </ins>changes<ins style="font-weight: bold; text-decoration: none;">.</ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>The <del style="font-weight: bold; text-decoration: none;">Object::getTheChange() function sets the text of the <span class</del>=<del style="font-weight: bold; text-decoration: none;">"caps">QML</span> item depending on the result of Object::someFunction(). The result is set as the value of the text property in the <span class</del>=<del style="font-weight: bold; text-decoration: none;">"caps">QML</span> code.</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">== </ins>The <ins style="font-weight: bold; text-decoration: none;">C++ implementation </ins>==</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Object<del style="font-weight: bold; text-decoration: none;">::someFunction() is callable from <span </del>class<del style="font-weight: bold; text-decoration: none;">="caps">QML</span> as it uses [http://doc.qt.nokia.com/latest/qobject.html#Q_INVOKABLE Q_INVOKABLE] ''[doc.qt.nokia.com]''. It simply changes </del>the <del style="font-weight: bold; text-decoration: none;">status of </del>a <del style="font-weight: bold; text-decoration: none;">member variable and </del>is <del style="font-weight: bold; text-decoration: none;">called every 5 seconds using a [http://doc.qt.nokia.com/latest/qtimer.html QTimer] ''[doc.qt.nokia.com]'' </del>to <del style="font-weight: bold; text-decoration: none;">illustrate how </del>the <del style="font-weight: bold; text-decoration: none;"><span class="caps">QML</span> property is able to react to the changes of this function. It can also be called from </del>the <del style="font-weight: bold; text-decoration: none;"><span class="caps"></del>QML<del style="font-weight: bold; text-decoration: none;"></span> </del>code <del style="font-weight: bold; text-decoration: none;">when clicking the text. At the end it emits the </del>changeOfStatus() signal which <del style="font-weight: bold; text-decoration: none;">triggers Object::getTheChange</del>() <del style="font-weight: bold; text-decoration: none;">to be called and the text to be reevaluated.</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">In the </ins>Object class <ins style="font-weight: bold; text-decoration: none;">in </ins>the <ins style="font-weight: bold; text-decoration: none;">example below we create </ins>a <ins style="font-weight: bold; text-decoration: none;">Q_PROPERTY that </ins>is <ins style="font-weight: bold; text-decoration: none;">used </ins>to <ins style="font-weight: bold; text-decoration: none;">set and update </ins>the <ins style="font-weight: bold; text-decoration: none;">text in </ins>the QML code <ins style="font-weight: bold; text-decoration: none;">and that has a </ins>changeOfStatus() signal which <ins style="font-weight: bold; text-decoration: none;">is emitted whenever the status of the C++ function someFunction</ins>() <ins style="font-weight: bold; text-decoration: none;">changes:</ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">main.cpp</del><<del style="font-weight: bold; text-decoration: none;">br /</del>></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><<ins style="font-weight: bold; text-decoration: none;">code>Q_PROPERTY(QString theChange READ getTheChange NOTIFY changeOfStatus)<code</ins>></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">==</del>The <del style="font-weight: bold; text-decoration: none;"><span class="caps"></del>QML<del style="font-weight: bold; text-decoration: none;"></span> implementation==</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>The <ins style="font-weight: bold; text-decoration: none;">Object::getTheChange() function sets the text of the </ins>QML <ins style="font-weight: bold; text-decoration: none;">item depending on the result of Object::someFunction(). The result is set as the value of the text property in the QML code.</ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">In </del>the <<del style="font-weight: bold; text-decoration: none;">span </del>class=<del style="font-weight: bold; text-decoration: none;">"caps"</del>><del style="font-weight: bold; text-decoration: none;">QML</del></<del style="font-weight: bold; text-decoration: none;">span</del>> code below we create a <del style="font-weight: bold; text-decoration: none;">[</del>http://doc.qt.nokia.com/latest/qml-rectangle.html <del style="font-weight: bold; text-decoration: none;">Rectangle] ''[doc.qt.nokia.com]'' </del>that reacts to mouse clicks. The text is set to the the result of the Object::theChange() function.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">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 </ins>the <ins style="font-weight: bold; text-decoration: none;">text to be reevaluated.</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">main.cpp<br /></code></ins><<ins style="font-weight: bold; text-decoration: none;">br />#include &lt;QtGui&amp;gt;<br />#include &lt;QtDeclarative&amp;gt;</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>class <ins style="font-weight: bold; text-decoration: none;">Object : public QObject<br />{<br /> Q_OBJECT<br /> Q_PROPERTY(QString theChange READ getTheChange NOTIFY changeOfStatus)</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">public:<br /> Object()<br /> {<br /> changeMe = false;<br /> myTimer = new QTimer(this);<br /> myTimer-&gt;start(5000);<br /> connect(myTimer, SIGNAL (timeout()), this, SLOT (testSlot()));<br /> }</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">QString getTheChange()<br /> {<br /> if (theValue 0) </ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> &amp;#123;</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> return &amp;quot;The text changed&amp;quot;;</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> &amp;#125;</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> if (theValue 1)<br /> {<br /> return &quot;New text change&amp;quot;;<br /> }<br /> return &quot;nothing has happened yet&amp;quot;;</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">}</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">Q_INVOKABLE void someFunction(int i)<br /> {<br /> if ( i 0) &amp;#123;</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> theValue = 0;</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> &amp;#125;</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> if (i 1) {<br /> theValue </ins>= <ins style="font-weight: bold; text-decoration: none;">1;<br /</ins>> <ins style="font-weight: bold; text-decoration: none;">}</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">emit changeOfStatus(i);<br /> }</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">signals:<br /> void changeOfStatus(int i) ;<br /> public slots:<br /> void testSlot()<br /> {<br /> if (changeMe)<br /> {<br /> someFunction(0);<br /> } else {<br /> someFunction(1);<br /> }<br /> changeMe = !changeMe;<br /> }</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">private:<br /> bool changeMe;<br /> int theValue;<br /> QTimer '''myTimer;</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><br />};</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><br />#include &quot;main.moc&amp;quot;</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><br />int main(int argc, char'''* argv)<br />{<br /> QApplication app(argc, argv);<br /> Object myObj;<br /> QDeclarativeView view;<br /> view.rootContext()-&gt;setContextProperty(&quot;rootItem&amp;quot;, (QObject *)&amp;myObj);<br /> view.setSource(QUrl::fromLocalFile&amp;amp;#40;&quot;main.qml&amp;quot;&amp;#41;);<br /> view.show();</ins><<ins style="font-weight: bold; text-decoration: none;">br </ins>/> <ins style="font-weight: bold; text-decoration: none;">return app.exec&amp;amp;#40;&amp;#41;;</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">}</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><code></ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">== The QML implementation ==</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">In the QML </ins>code below we create a <ins style="font-weight: bold; text-decoration: none;">&quot;Rectangle&amp;quot;:</ins>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.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>main.qml</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>main.qml</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">So, using the approach in the example above, we get a way for </del><<del style="font-weight: bold; text-decoration: none;">span class="caps"</del>><del style="font-weight: bold; text-decoration: none;">QML</del></<del style="font-weight: bold; text-decoration: none;">span</del>> <del style="font-weight: bold; text-decoration: none;">properties to react to changes that happen internally in the C++ code</del>.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><<ins style="font-weight: bold; text-decoration: none;">/code><br />import QtQuick 1.0</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">Rectangle {<br /> width: 440; height: 150</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">Column {<br /> anchors.fill: parent; spacing: 20</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">Text {<br /</ins>> <ins style="font-weight: bold; text-decoration: none;">text: rootItem.theChange</ins><<ins style="font-weight: bold; text-decoration: none;">br </ins>/> <ins style="font-weight: bold; text-decoration: none;">font.pointSize: 25; anchors.horizontalCenter: parent</ins>.<ins style="font-weight: bold; text-decoration: none;">horizontalCenter</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">}<br /> }<br />}</ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">===Categories:===</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><code></ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">* [[:Category:Developing with Qt|Developing_with_Qt]]</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">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.</ins></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">** [[:Category:Developing with Qt::General|General]]</del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">* [[:Category:HowTo|HowTo]]</del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">* [[:Category:Tutorial|Tutorial]]</del></div></td><td colspan="2" class="diff-side-added"></td></tr>
</table>
Maintenance script
https://wiki.qt.io/index.php?title=How_to_Bind_a_QML_Property_to_a_C%2B%2B_Function&diff=956&oldid=prev
Maintenance script at 15:41, 14 January 2015
2015-01-14T15:41:03Z
<p></p>
<p><b>New page</b></p><div>=Binding a <span class="caps">QML</span> property to a C++ function=<br />
<br />
At the moment Qt Quick does not provide an implementation for linking a <span class="caps">QML</span> property to the result of a C++ function. There exists a suggestion for adding support for this [https://bugreports.qt.nokia.com//browse/QTBUG-17323 here] ''[bugreports.qt.nokia.com]'' though.<br />
<br />
In this article we will show how to make binding of properties to C++ functions work using [http://doc.qt.nokia.com/latest/qobject.html#Q_PROPERTY Q_PROPERTY] ''[doc.qt.nokia.com]'' with a [http://doc.qt.nokia.com/latest/properties.html#qt-s-property-system <span class="caps">NOTIFY</span>] ''[doc.qt.nokia.com]'' signal that is emitted whenever the value of the property changes.<br />
<br />
==The C++ implementation==<br />
<br />
In the Object class in the example below we create a Q_PROPERTY that is used to set and update the text in the <span class="caps">QML</span> code and that has a changeOfStatus() signal which is emitted whenever the status of the C++ function someFunction() changes:<br />
<br />
The Object::getTheChange() function sets the text of the <span class="caps">QML</span> item depending on the result of Object::someFunction(). The result is set as the value of the text property in the <span class="caps">QML</span> code.<br />
<br />
Object::someFunction() is callable from <span class="caps">QML</span> as it uses [http://doc.qt.nokia.com/latest/qobject.html#Q_INVOKABLE Q_INVOKABLE] ''[doc.qt.nokia.com]''. It simply changes the status of a member variable and is called every 5 seconds using a [http://doc.qt.nokia.com/latest/qtimer.html QTimer] ''[doc.qt.nokia.com]'' to illustrate how the <span class="caps">QML</span> property is able to react to the changes of this function. It can also be called from the <span class="caps">QML</span> 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.<br />
<br />
main.cpp<br /><br />
<br />
==The <span class="caps">QML</span> implementation==<br />
<br />
In the <span class="caps">QML</span> code below we create a [http://doc.qt.nokia.com/latest/qml-rectangle.html Rectangle] ''[doc.qt.nokia.com]'' that reacts to mouse clicks. The text is set to the the result of the Object::theChange() function.<br />
<br />
main.qml<br />
<br />
So, using the approach in the example above, we get a way for <span class="caps">QML</span> properties to react to changes that happen internally in the C++ code.<br />
<br />
===Categories:===<br />
<br />
* [[:Category:Developing with Qt|Developing_with_Qt]]<br />
** [[:Category:Developing with Qt::General|General]]<br />
* [[:Category:HowTo|HowTo]]<br />
* [[:Category:Tutorial|Tutorial]]</div>
Maintenance script