QML

QML (Qt Modeling Language) ist eine deklarative Programmiersprache, die als Bestandteil von Qt, einer Bibliothek zur Erstellung von Benutzeroberflächen in C++, entwickelt wurde. Zweck der Sprache ist die Entwicklung von Benutzeroberflächen, in erster Linie (jedoch nicht zwangsläufig) für Desktop- und Mobil-Systeme. QML ist syntaktisch an JSON und CSS angelehnt. Durch ihre deklarative Grundstruktur und die nahtlose Einbindung von JavaScript vereint sie deklarative und imperative Ansätze in einer Programmiersprache. QML ist Bestandteil des Qt User Interface Creation Kit (Qt Quick) und kann (inklusive seiner JavaScript-Anteile) durch den Qt Quick Compiler in natives C++ kompiliert werden.

QML
Paradigmen:	deklarativ, reaktiv, Skriptsprache
Erscheinungsjahr:	2009
Entwickler:	Qt Project
Aktuelle Version	6.4
Typisierung:	stark, dynamisch
Beeinflusst von:	JavaScript, Qt
Beeinflusste:	Qt
doc.qt.io/qt-5/qmlapplications.html

Syntax

Im Zentrum von QML steht die deklarative Beschreibung von GUI-Elementen. Die Beschreibung eines einzelnen Elementes kann beispielsweise so aussehen:

Rectangle { color: "green" x: 5; y: 10 width: 50 height: 2 * width } 

Zu Beginn steht der Typ des Elementes, gefolgt von geschweiften Klammern. In den geschweiften Klammern werden die Eigenschaften des Elements in der Form „Name der Eigenschaft: Wert“ beschrieben. Der Wert kann dabei entweder ein einfaches Literal oder eine vollständige JavaScript-Anweisung, wie im oberen Beispiel bei der Definition der Höhe, sein. Diese Definition mittels einer JavaScript-Anweisung ist jedoch keine Zuweisung nach dem Prinzip imperativer Programmiersprachen, sondern vielmehr eine Definition im mathematischen Sinne. Das heißt im Falle des oberen Beispiels, dass die Höhe immer das Doppelte der Breite ist, auch wenn sich der Wert der Breite ändert. Die tatsächliche Höhe wird dann neu berechnet.

Elemente können geschachtelt werden. Dazu wird die Beschreibung des Kindelements in die Beschreibung des Elternelements hineingeschrieben:

Rectangle { //... Text { id: label color: "red" text: "Hello World!" anchors.centerIn: parent } } 

Das Kindelement kann sein Elternelement nun über die Variable parent referenzieren, z. B. um sich über die Eigenschaft („Property“) anchors.centerIn: parent in seinem Elternelement zu zentrieren. Zudem können Elemente prinzipiell, falls definiert, über ihre ID referenziert werden. Die ID wird über die property id definiert.

Ein wichtiger Bestandteil der Sprache ist auch das „Signal-Slot-Prinzip“. Signale werden beispielsweise als Konsequenz von Eingaben ausgelöst, wie z. B. das clicked()-Signal des Elementtyps MouseArea. Auf ein Signal kann reagiert werden, indem man im entsprechenden Element einen „Slot“ definiert, dazu definiert man die Property on<Signalname> mit der auszuführenden JavaScript-Anweisung bzw. dem auszuführenden JavaScript-Block, die bzw. der dann imperativ ausgeführt wird. Für das Beispiel mit der MouseArea könnte das dann wie folgt aussehen:

MouseArea { //... onClicked: { console.log("Hello World"); label.text = "Guten Abend!"; } } 

Alternativ kann man Properties und Signale auch selbst definieren oder manuell auslösen:

Item { //... property bool enabled: true signal clicked; // Dies ist die Definition des Signals MouseArea { anchors.fill: parent onClicked: if (enabled) { parent.clicked(); // Hiermit wird das Signal ausgelöst } } } 

Vorteile gegenüber anderen Ansätzen

QWidgets

Traditionell wurden Qt-basierte Oberflächen mithilfe des QWidget-Systems mittels C++ entwickelt. Der Vorteil von QML liegt zum einen in der deklarativen Programmierung, die einen Vorteil in der Übersichtlichkeit des Programmcodes bringt. Vor allem Animationen sind mittels QML leichter umzusetzen. Zum anderen werden QML-Oberflächen ab Version 5.0 von einem OpenGL-basierten Szenengraphen gezeichnet. Dies bringt höhere Ausführungsgeschwindigkeit und verringert die Gefahr von Darstellungsfehlern.

HTML

Im Umfeld von Mobilanwendungen gewinnt HTML zunehmend an Bedeutung. Die bedeutenden Stärken von QML bzw. Qt Quick im Vergleich zu HTML als Grundlage für Benutzeroberflächen sind:

Rectangle {  id: rect1  color: "green"  width: 100  height: 100 } Rectangle {  id: rect2  color: "red"  width: 20  height: 20  anchors.horizontalCenter: rect1.right  anchors.verticalCenter: rect1.verticalCenter } 

Der wichtigste Vorteil von HTML ist die größere Verbreitung und größere Bekanntheit der Sprache.

Weblinks

• QML Reference Documentation
• Introduction to the QML language
• QML-Beispiele and Demos
• QML-Tutorial

Einzelnachweise

1. Volker Hilsheimer: Qt 6.4 Released. 29. September 2022.
2. Rainald Menge-Sonnentag: Cross-Plattform-Framework Qt 6.3 kompiliert QML nach C++. In: heise.de. Abgerufen am 5. Januar 2023.