QML steht für Quick Modeling Language, es ist ein von Qt Company entwickeltes JavaScript Dialekt. Die Syntax ist leicht zu erlernen auch ohne JavaScript Kenntnisse, obwohl sie auf jeden Fall nicht schaden würden. In Qml beschreibst man das Aussehen der Elemente, die Möglichkeiten sind theoretisch unbegrenzt. Außerdem kann man auf die Signale bzw. Ereignisse zugreifen die Elemente bieten oder eigene definieren. Das werden wir im Detail noch besprechen.

Um mit dem Programmieren zu beginnen, lade dir erstmals den Qt Creator runter, unter: https://www.qt.io/download Um die Community Version zu bekommen musst du angeben, dass du Open Source Software entwickeln wirst. Zum experimentieren ist es erstmals egal.

QML wird ständig weiterentwickelt und verbessert. Manchmal funktionieren Elemente in einer Version anders als sie unter anderen Versionen funktionieren. Ich verwende die QML Version 5.7 und Qt Creator mit der Version 4.0.3. Ich werde diese Version auch im Tutorial verwenden.

Zum Starten lege dir ein neues Projekt an. Dazu gehe unter Datei→Neu→Anwendung→Qt Quick-Anwendung. Wähle einen passenden Namen wie Tutorial01. Auf der nächsten Seite wählst du die Qt 5.7 Version aus und wählst das Anlegen der ui.qml Datei ab. Dann den Compiler auswählen der installiert ist, die Versionsverwaltung brauchen wir nicht.

Auf der rechten Seite ist unsere Projektstruktur abgebildet. Die QML Datei mit der wir arbeiten werden findet sich unter Ressourcendateien→qml.qrc→/→main.qml.

import QtQuick 2.7
import QtQuick.Window 2.2
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }
    Text {
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }
}

Der folgende Quellcode wurde schon automatisch erstellt. So sieht das erste Programm aus. Zugegeben ein lauffähiges Programm könnte noch kleiner sein aber das ist für den Anfang auch nicht schlecht. Wir gehen jetzt das Programm Detail für Detail durch.

import QtQuick 2.7
import QtQuick.Window 2.2

Die Importanweisungen brauchen wir für jedes QML Programm. Damit werden alle benötigten Funktionen und Bibliotheken zur Verfügung gestellt. QtQuick wird immer gebraucht, andere Bibliotheken brauchen wir nur wenn wir bestimmte Elemente oder Funktionen brauchen.

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

Hier wird ein spezieller Element deklariert. Window, hat bestimmte Eigenschaften, auf die wir zugreifen und verändern können. Hier sagen wir ihm, mit visible, dass er sichtbar sein soll. Mit width und height legen wir die Breite und Höhe des Fensters fest. Mit title den Namen.

MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }

MouseArea ist ein Element der unsichtbar ist, mit dem wir aber eine Menge Aktionen ausführen können. Sinnvoll ist es wenn man ein Element hat das als Button dienen soll. MouseArea kann die Aktionen der Maus fangen und auswerten.

anchors.fill: parent

Mit anchors werden wir uns noch auseinander setzen. Die folgende Anweisung gibt aber an, dass die MouseArea das 'Eltern' bzw das übergeordnete Element komplett ausfüllen soll.

onClicked: {
            Qt.quit();
        }

onClicked ist ein Ereignis der MouseArea. Wie der Name schon sagt, wird es ausgelöst wenn wir auf die MouseArea mit der Maus klicken. Wichtig dabei ist, dass die MouseArea auf jeden Fall eine bestimmte Größe haben muss worin wir klicken können, wie wir es vorher angegeben haben. Die Anweisung Qt.quit() schließt die Anwendung dann.

Text {
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }

Hier wird ein Text Element deklariert mit dem Inhalt: „Hello World“. Anchors.centerIn bewirken, dass der Text in der Mitte des Fensters zentriert wird.

Zum starten und kompilieren der Anwendung, muss man das Dreieck auf der Seite links betätigen oder den Shortcut [STRG]+[R] benutzen.