QML

aus Wikipedia, der freien Enzyklopädie
Wechseln zu: Navigation, Suche
QML
Paradigmen: deklarativ, reaktiv, Skriptsprache
Erscheinungsjahr: 2009
Entwickler: Qt Project
Aktuelle Version: 5.0.0  (2012)
Typisierung: stark, dynamisch
Beeinflusst von: JavaScript, Qt
Beeinflusste: Qt

QML (Qt Meta Language oder 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. Syntaktisch basiert die Sprache auf JSON, ist jedoch nicht kompatibel. 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).

Syntax[Bearbeiten]

Im Zentrum der Sprache 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 komplette JavaScript-Anweisung, wie im oberen Beispiel bei der Definition der Höhe, sein. Diese Definition mithilfe 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 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, ein elementares Leistungsmerkmal von Qt. 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/der dann imperativ ausgeführt wird. Für das Beispiel mit dem 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 und/oder manuell emittieren:

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 emittiert
        }
    }
}

Vorteile gegenüber anderen Technologien[Bearbeiten]

QWidgets[Bearbeiten]

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 seit Version 5.0 von einem OpenGL-basierten Szenengraphen gezeichnet. Dies bringt Performance-Verbesserungen und verringert die Gefahr von Darstellungsfehlern.

HTML[Bearbeiten]

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:

Property-Bindings
Verschiedene Elemente in Benutzeroberflächen sind oft, besonders in Bezug auf die Form, voneinander abhängig, z. B. wenn ein Element eine variable Breite hat, ein Geschwisterelement jedoch stets den restlichen verbleibenden horizontalen Platz im Elternelement nutzen soll. Was in HTML mit CSS wenn überhaupt nur über Tricks möglich ist, ist in QML mit der einfachen Property-Definition „width: parent.width - otherElement.width“ möglich.
Positionierungen
Die Positionierung von Elementen ist in QtQuick über drei verschiedene Wege möglich: Absolute Positionierung bezogen auf das Elternelement, Layouts und sog. Anker. Während Layouts bereits etwas sind, das es in HTML in dieser Form nicht gibt, wodurch Layouts für sich schon eine Stärke von QML sind, kommt bei Ankern die Mächtigkeit von QML erst richtig zum Tragen. Jedes grafische QML-Element besitzt mehrere Anker, nämlich top, bottom, left, right, verticalCenter und horizontalCenter. Jedem dieser Anker kann als Wert ein beliebiger Anker eines anderen Elementes per Property-Binding zugewiesen werden (horizontale Anker natürlich nur anderen horizontalen Ankern, vertikale Anker nur anderen vertikalen Ankern). So kann z.B. die Mitte eines Elementes an der rechten Kante eines anderen Objektes vertikal zentral ausgerichtet werden:
Das Ergebnis
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
}
Objektorientierung
Neben den Standard-Elementtypen ist es in QML möglich, eigene Elementtypen, sog. Komponenten, zu definieren. Dies funktioniert, indem man eine gewöhnliche QML-Datei mit dem Namen der Komponente erstellt und in einer anderen QML-Datei einfach ein Element mit dem Namen der Komponente als Elementtyp erstellt (die Dateien müssen im selben Verzeichnis liegen). Das Element ist jetzt programmtechnisch transparent eine Instanz des Codes, der in der entsprechenden Komponenten-QML-Datei steht. Dadurch können nach dem Prinzip der Objektorientierung mehrfach verwendete Code-Segmente ausgelagert und wiederverwendet werden.

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

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]