QML Script Console: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
[[Category:Developing_with_Qt::Qt_Quick]]<br />[[Category:Developing_with_Qt::Qt_Quick::QML]]<br />[[Category:Developing_with_Qt::QtScript]]<br />[[Category:Developing_with_Qt::QtScriptConsole]] | |||
= Inspecting Qt Quick Applications using a custom made QML Script Console component. = | |||
[[Image:https://raw.github.com/frankencode/qmlscriptconsole/master/screenshot.png|qmlviewer + qmlscriptconsole]] | |||
The QML Script Console provides a "ScriptConsole&quot; component. For each instance of a ScriptConsole inside your Qt Quick application a script editor window will be opened which allows you to inject code into the running application. Thereby you can test expression in the running application context. | |||
To get started, download and build the plugin:<br /><code><br />curl -L https://github.com/frankencode/qmlscriptconsole/archive/master.zip > qmlscriptconsole.zip && unzip qmlscriptconsole.zip<br />cd qmlscriptconsole-master<br />qmake-qt4 && make -j2<br /></code> | |||
Once your build is complete, try to open the 'test.qml' shipped with the console.<br /><code><br />qmlviewer -I $PWD test.qml<br /># You need the Qt4 qmlviewer here!, e.g. try: dpkg -L qt4-qmlviewer|grep bin/qmlviewer<br /></code> | |||
Now try to modify the application state by entering something like:<br /><code><br />parent.text = "Hey, JavaScript!"<br /></code> | |||
The 'test.qml' contains the following:<br /><code><br />import QtQuick 1.0<br />import com.nokia.ScriptConsole 1.0 | |||
Text {<br /> text: "Hello, ECMAScript!"<br /> ScriptConsole { title: "Inside the text component&quot; }<br />}<br /></code> | |||
As the | As you can see, the script console is just another component. You can use the standard 'print()' function to inspect the QML object tree. For instance the following prints all attributes and methods which are exposed to the script environment:<br /><code><br />for (var n in parent) print(n, typeof(n))<br /></code> | ||
== | Especially when you are building more complex expressions you may want to try them out first. For instance, the following displays the current time using the "builtin Date object&quot;:https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date:<br /><code><br />var now = new Date(); parent.text = now.getHours().toPrecision(2) + ":" + now.getMinutes().toPrecision(2)<br /></code> | ||
As the 'ScriptConsole' itself is also a QML component, it is not protected against dynamic modification:<br /><code><br />title = "Cool terminal!"<br /></code> | |||
Revision as of 09:56, 24 February 2015
Inspecting Qt Quick Applications using a custom made QML Script Console component.
The QML Script Console provides a "ScriptConsole" component. For each instance of a ScriptConsole inside your Qt Quick application a script editor window will be opened which allows you to inject code into the running application. Thereby you can test expression in the running application context.
To get started, download and build the plugin:
<br />curl -L https://github.com/frankencode/qmlscriptconsole/archive/master.zip > qmlscriptconsole.zip && unzip qmlscriptconsole.zip<br />cd qmlscriptconsole-master<br />qmake-qt4 && make -j2<br />
Once your build is complete, try to open the 'test.qml' shipped with the console.
<br />qmlviewer -I $PWD test.qml<br /># You need the Qt4 qmlviewer here!, e.g. try: dpkg -L qt4-qmlviewer|grep bin/qmlviewer<br />
Now try to modify the application state by entering something like:
<br />parent.text = "Hey, JavaScript!"<br />
The 'test.qml' contains the following:
<br />import QtQuick 1.0<br />import com.nokia.ScriptConsole 1.0
Text {<br /> text: "Hello, ECMAScript!"<br /> ScriptConsole { title: "Inside the text component&quot; }<br />}<br />
As you can see, the script console is just another component. You can use the standard 'print()' function to inspect the QML object tree. For instance the following prints all attributes and methods which are exposed to the script environment:
<br />for (var n in parent) print(n, typeof(n))<br />
Especially when you are building more complex expressions you may want to try them out first. For instance, the following displays the current time using the "builtin Date object":https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date:
<br />var now = new Date(); parent.text = now.getHours().toPrecision(2) + ":" + now.getMinutes().toPrecision(2)<br />
As the 'ScriptConsole' itself is also a QML component, it is not protected against dynamic modification:
<br />title = "Cool terminal!"<br />