Qt wiki will be updated on October 12th 2023 starting at 11:30 AM (EEST) and the maintenance will last around 2-3 hours. During the maintenance the site will be unavailable.
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]] | [[Category:Developing_with_Qt::Qt_Quick]] | ||
[[Category:Developing_with_Qt::Qt_Quick::QML]] | |||
[[Category:Developing_with_Qt::QtScript]] | |||
[[Category:Developing_with_Qt::QtScriptConsole]] | |||
= Inspecting Qt Quick Applications using a custom made QML Script Console component. = | = Inspecting Qt Quick Applications using a custom made QML Script Console component. = | ||
| Line 5: | Line 8: | ||
[[Image:https://raw.github.com/frankencode/qmlscriptconsole/master/screenshot.png|qmlviewer + qmlscriptconsole]] | [[Image:https://raw.github.com/frankencode/qmlscriptconsole/master/screenshot.png|qmlviewer + qmlscriptconsole]] | ||
The QML Script Console provides a | 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: | To get started, download and build the plugin: | ||
<code> | |||
curl -L https://github.com/frankencode/qmlscriptconsole/archive/master.zip > qmlscriptconsole.zip && unzip qmlscriptconsole.zip | |||
cd qmlscriptconsole-master | |||
qmake-qt4 && make -j2 | |||
</code> | |||
Once your build is complete, try to open the 'test.qml' shipped with the console. | Once your build is complete, try to open the 'test.qml' shipped with the console. | ||
<code> | |||
qmlviewer -I $PWD test.qml | |||
# You need the Qt4 qmlviewer here!, e.g. try: dpkg -L qt4-qmlviewer|grep bin/qmlviewer | |||
</code> | |||
Now try to modify the application state by entering something like: | Now try to modify the application state by entering something like: | ||
<code> | |||
parent.text = "Hey, JavaScript!" | |||
</code> | |||
The 'test.qml' contains the following: | The 'test.qml' contains the following: | ||
<code> | |||
import QtQuick 1.0 | |||
import com.nokia.ScriptConsole 1.0 | |||
Text { | Text { | ||
text: "Hello, ECMAScript!" | |||
ScriptConsole { title: "Inside the text component" } | |||
} | |||
</code> | |||
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: | 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: | ||
<code> | |||
for (var n in parent) print(n, typeof(n)) | |||
</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 | 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: | ||
<code> | |||
var now = new Date(); parent.text = now.getHours().toPrecision(2) + ":" + now.getMinutes().toPrecision(2) | |||
</code> | |||
As the 'ScriptConsole' itself is also a QML component, it is not protected against dynamic modification: | As the 'ScriptConsole' itself is also a QML component, it is not protected against dynamic modification: | ||
<code> | |||
title = "Cool terminal!" | |||
</code> | |||
Revision as of 10:16, 25 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:
curl -L https://github.com/frankencode/qmlscriptconsole/archive/master.zip > qmlscriptconsole.zip && unzip qmlscriptconsole.zip
cd qmlscriptconsole-master
qmake-qt4 && make -j2
Once your build is complete, try to open the 'test.qml' shipped with the console.
qmlviewer -I $PWD test.qml
# You need the Qt4 qmlviewer here!, e.g. try: dpkg -L qt4-qmlviewer|grep bin/qmlviewer
Now try to modify the application state by entering something like:
parent.text = "Hey, JavaScript!"
The 'test.qml' contains the following:
import QtQuick 1.0
import com.nokia.ScriptConsole 1.0
Text {
text: "Hello, ECMAScript!"
ScriptConsole { title: "Inside the text component" }
}
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:
for (var n in parent) print(n, typeof(n))
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:
var now = new Date(); parent.text = now.getHours().toPrecision(2) + ":" + now.getMinutes().toPrecision(2)
As the 'ScriptConsole' itself is also a QML component, it is not protected against dynamic modification:
title = "Cool terminal!"