Mit QML und Qt Creator haben Sie in Minuten einen ersten Entwurf für eine Programmoberfläche erstellt.

Seit Nokia Anfang 2011 die Toolkit-Erweiterung Qt Quick veröffentlicht hat, ist QML in aller Munde. Auf dem Weg zu KDE Framework 5 planen die Entwickler, sämtliche KDE-Oberflächen nach und nach mit der Markup-Sprache umzusetzen. Grund genug, sich die neue Technologie anzuschauen.

Die Suche nach detaillierten Informationen zu QML und Qt Quick verläuft am ergiebigsten bei Nokia selbst: Das Unternehmen hat Qt Quick einen eigenen Webauftritt [1] spendiert, der neben vielen Videos zusätzlich Tutorials zu beiden Technologien bereithält ([2],[3]). Dort finden Sie zudem Hinweis zum Herunterladen und Installieren des SDKs inklusive Qt Creator für alle relevanten Systeme (Linux, Windows und Mac OS X) in der 32- sowie der 64-Bit-Variante.

Brandaktuell ist die Qt-Version 5.02 vom April diesen Jahres. Die bei den meisten Linux-Distributionen derzeit aktuell eingesetzte KDE-Version 4.10 basiert jedoch auf Qt 4.8. Der KDE-seitige Umstieg auf Qt 5 wird, wie eingangs angedeutet, größere Umstrukturierungsmaßnahmen in KDE Framework 5 nach sich ziehen.

Als Linux-Anwender haben Sie es sehr einfach: Sie installieren den Qt Creator mit dem von Ihnen bevorzugten Paketmanager, der dann automatisch die benötigten Qt-Komponenten und Entwicklungswerkzeuge nachzieht. In der sehr umfangreichen Online-Hilfe von Qt Creator finden Sie auch ein sehr ausführliches QML-Tutorial.

Einstieg

Eine Oberfläche in QML zu programmieren gelingt mit dem Qt Creator relativ leicht. Allerdings ist das nur die halbe Miete: Sie brauchen zusätzlich ein Programmlogik, die die eigentlichen Aufgaben übernimmt, und die in einer “echten” Programmiersprache geschrieben ist. Im Kontext von Qt eignen sich dazu C++, Python oder Javascript.

Mit Datei | Neu starten Sie ein neues QML-Projekt. Markieren Sie dann im Dialog Neu bei Projekte den Eintrag Qt Quick Projekt und wählen rechts davon Neue Qt Quick-Anwendung. Die Software bietet auch die Möglichkeit, ein reines UI-Projekt zu beginnen. Ein Klick auf Auswählen startet den Projekt-Assistenten.

Im nächsten Schritt geben Sie zunächst Name und Pfad zur gewünschten Projektdatei an. Im folgenden Schritt belassen Sie die Voreinstellung bei Nur eingebaute Elemente (Alle Plattformen). Fortgeschrittene Nutzer können an dieser Stelle vorgefertigte Komponenten einbinden, wie etwa Schaltflächen. Das klappt aber momentan nur für die Plattformen Symbian oder Meego/Harmattan. Möchten Sie dagegen eine Oberfläche für ein Plasma-Widget bauen, gilt es sämtliche Elemente vorerst noch von Grund auf neu erzeugen. Alternativ haben laden Sie eine bereits vorhandene QML-Datei.

Im nächsten Schritt Ziel einrichten geht es um die Frage, auf welcher Plattform Sie die App später testen möchten. Hier steht in diesem einfachen Beispiel nur Desktop bereit. Nach einem Klick auf Details haben Sie außerdem die Möglichkeit, die Build-Konfiguration zu beeinflussen. Der Schritt Projektverwaltung dient dazu, die Projektdaten unter eine Versionsverwaltung wie Git zu stellen oder das aktuelle Projekt zu einem Unterprojekt eines existierenden Projektes zu machen.

Mit einem Klick auf Abschließen legt Qt Creator das neue Projekt an und zeigt im Haupt-Arbeitsbereich den Editor mit dem Quellcode der Datei main.qml. Die tut nicht viel mehr, als den Text “Hello World” in einem rechteckigen Fenster anzuzeigen, wovon Sie sich mit einem Klick auf die Schaltfläche Design leicht überzeugen (Abbildung 1).

Abbildung 1: Im Qt Designer bauen Sie Ihre QML-Oberflächen rein visuell.

Im Editor-Modus finden Sie links vom Editor-Fenster die Baumstruktur mit den Projektdaten. Im Order Quelldateien liegt unter anderem die Datei main.cpp. Sie enthält den umgebenden Code in C++, während der Ordner QML die Datei main.qml beherbergt.

Das obere der beiden grünen Dreieck-Symbole im unteren Teil der Navigation dient dazu, die neu entworfene Anwendung zu kompilieren und und auszuführen, das untere ermöglicht das Debuggen. Mit dem Computer-Icon direkt über dem Kompilieren-Symbol wählen Sie dagegen die Test-Plattform aus (Abbildung 2).

Abbildung 2: Die Werkzeugleiste zum Kompilieren und Ausführen des Codes.

Code-Basis

Der Designer ist der grafische Editor für Ihre QML-Oberfläche. Da Sie im Beispiel für eine KDE-Desktop-App keine Zugriff auf die QtComponents haben, bietet dieser nicht besonders viele Elemente zum Platzieren an. Zum Verständnis der Syntax des bisher Erreichten ist es nützlich, wenn Sie sich den im Hello-World-Beispiel generierten QML-Code näher ansehen (Listing 1).

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
Rectangle {
  width: 360
  height: 360
  Text {
    text: qsTr("Hello World")
    anchors.centerIn: parent
  }
  MouseArea {
    anchors.fill: parent
    onClicked: {
      Qt.quit();
    }
  }
}

Mit der zweiten Zeile laden Sie die benötigten Bibliotheken in die QML-Datei. Wie an der ersten auskommentierten Zeile zu erkennen, könnten Sie hier auch die Komponenten für Symbian S60 5th Edition oder Maemo laden. Dass in diesem Fall nur Qt Quick 1.0 statt 1.1 zum Einsatz käme, liegt daran, dass Letzteres in Meego nicht unterstützt würde.

Nach dem Laden der Module folgt mit Rectangle das wichtigste QML-Element: ein Rechteck. Es bildet bei nahezu jedem QML-Projekt als Hintergrund die Basis für andere Objekte wie Knöpfe oder Schalter. Außer Rectangle bietet Qt Quick noch viele weitere Elemente, wie der Blick in die Online-Hilfe des Creators zeigt.

Die auch in anderen Programmiersprachen gebräuchlichen geschweiften Klammern kennzeichnen Anfang und Ende eines Objekts, wobei sämtliche Elemente, die dem obersten folgen, diesem untergeordnet sind. Im Beispiel gehören also sämtliche weiteren Elemente zum Rectangle-Element, das selbst erst mit der letzten geschweiften Klammer endet.

Das Syntax-Highlighting hilft auch beim Orientieren: So erscheinen sämtliche Elemente in der Farbe Violett. Nach dem Öffnen des Rectangle-Elements folgen die beiden Attribute width und height, welche die Dimensionen des Objekts beschreiben, als solche aber zu den “Properties” (Eigenschaften) des Objektes gehören. Der Editor kennzeichnet sie mit brauner Farbe.

Zur besseren Übersicht stehen die Eigenschaften des Elements meist untereinander. Sie dürften sie aber auch durch ein Semikolon getrennt auf eine Zeile schreiben. Außer Breite und Höhe gibt es noch eine Reihe weiterer Properties wie border.color, border.width, color, gradient oder radius. Die möglichen Eigenschaften für den jeweiligen Element-Typ finden Sie in der Online-Hilfe von Qt Creator.

Der Qt Creator macht das Experimentieren leicht. Probieren Sie Variationen bei color oder border.color im Editor aus, um ein Gefühl für die Syntax von QML zu entwickeln, und führen Sie jeweils einen Testlauf aus. Wahlweise setzen Sie für die Farben Codes ein, wie Sie auch in HTML zum Einsatz kommen. Über Transparenz erzeugen Sie bei Bedarf ein unsichtbares Rechteck. So etwas kommt häufig im Zusammenhang mit dem Element MouseArea zum Zuge.

Viel beeindruckender ist das Ergebnis, wenn Sie jetzt zum Designer wechseln: Hier bietet die Software die Möglichkeit, sämtliche Properties des gewählten Elements je nach Art der Eigenschaft mit Checkboxen, Reglern und anderen GUI-Elementen zu ändern. Verändern Sie etwa den Radius-Wert mit dem Schieberegler, erhalten Sie abgerundete Ecken (Abbildung 3).

Abbildung 3: Abgerundete Ecken per Mausklick.

Möchten Sie jetzt die Größe und Farbe des Texts “Hello World” ändern, markieren Sie einfach im Navigator des Designers das dem Rectangle-Element untergeordnete Element und bestimmen nach Belieben die gewünschten Text-Eigenschaften Farbe, Text und Zeichensatz. Ein anschließender Wechsel zum Editor illustriert die benötigten Elemente viel schneller, als es jedes Howto könnte (Listing 2).

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
Rectangle {
  width: 360
  height: 360
  color:"red"
  radius: 72
  Text {
    color: "#3040b7"
    text: qsTr("Hello World")
    font.family: "Ubuntu"
    font.pointSize: 21
    anchors.centerIn: parent
  }
  MouseArea {
    anchors.fill: parent
    onClicked: {
      Qt.quit();
    }
  }
}

Dabei sehen Sie unter anderem, dass auch sämtliche Eigenschaften des Text-Elements innerhalb geschweifter Klammern stehen und das gesamte Element dem Rectangle-Element untergeordnet ist. Sie können übrigens die von Qt Creator generierte Schreibweise text: qsTr("Hello World") problemlos durch text: "Hello World" vereinfachen.

Im Designer sieht man nicht auf dem ersten Blick, dass Sie mit der Zeile anchors.centerIn: parent Elemente verankern, also fest positionieren. Der Typ ist hier centerIn, was für “zentriert” steht. Nach dem Doppelpunkt folgt der Bezug beziehungsweise das Ziel für den Anker: In diesem Fall ist es mit parent das übergeordnete Element Rectangle.

Mit diesem Wissen finden Sie wiederum im Designer sehr schnell heraus, dass es noch weitere Typen von Ankern gibt. Sobald Sie im Navigator das Textelement markieren und per Rechtsklick im Kontextmenü den Eintrag Anker | Zurücksetzen wählen, wandert “Hello World” nach links oben. Sie haben aber die Möglichkeit, das Element im Designer nach Belieben per Drag & Drop zu positionieren.

Achten Sie darauf, dass die transparente MouseArea wie bei einer ebenenbasierten Bildbearbeitung ganz vorn liegt. Die Anordnung des Stapels bestimmen Sie ebenfalls im Kontextmenü des Textelements bei Stapel | Nach vorn. Das Kontextmenü steht sowohl im Navigator als auch beim markierten Element im Hauptfenster bereit.

Der QML-Code für einen Anker rechts lautet übrigens anchors.left: parent.right. Alternativ positionieren Sie Elemente schlicht über X/Y-Koordinaten im Editor.

Maus-Events

Nach dem Schließen des Textelements, das nach den letzten Ergänzungen im Designer jetzt mit der schließenden geschweiften Klammer erfolgt, folgt das Element MouseArea, das Sie im Editor wieder an der violetten Farbe erkennen. Ein solches Element benötigen Sie immer dann, wenn Sie eine Eingabe vom Nutzer via Zeigegerät erwarten. Bei Smartphone oder Tablet gilt das analog fürs Tippen mit dem Finger.

Nach den Positionsangaben folgen in den Eigenschaften wieder eine Reihe von Anker-Elementen, allesamt Resultate der Drag & Drop-Aktion des zurückliegenden Beispiels. In der Standardvorlage des Qt Creators genügt der Anker anchors.fill: parent, um das gesamte übergeordnete Rectangle-Element mit der Fläche zu füllen.

Wirklich entscheidend für das Element MouseArea ist die Eigenschaft onClicked: Hier legen Sie fest, was passiert, sobald der Anwender in die Fläche klickt. Alternativ legen Sie mit onReleased fest, was beim Loslassen der Maustaste passiert. In diesem Beispiel macht onReleased nicht mehr, als ein simples Qt.quit();, beendet also das Programm.

Ein ebenfalls einfaches Beispiel mit einer visuellen Rückmeldung könnte darin bestehen, dass Sie bei einem Mausklick mit parent.color = "yellow" die Farbe der umgebenden App ändern (Abbildung 4). In der Praxis gehören Mausereignisse freilich zu genau jenen Dingen, bei denen Sie sich vom Designer zum Programmierer wandeln und auf echten C++Code verweisen.

Abbildung 4: Das Resultat eines Mausklicks: Die Farbe des Elternelements ändert sich nach Gelb.

Fazit

Diese Einführung in die Konzepte von Qt Quick sowie das wichtigste Werkzeug, den Qt Creator, sollte Sie befähigen, einen der vielen guten QML-Workshops im Netz nachzuvollziehen. Neben den Tutorien von Nokia wäre der Einsteiger-Workshop von Peter Bouda [4] erwähnenswert. Bouda ist Qt/KDE-Entwickler, Trainer, Buch-Autor und entwickelt seit über 15 Jahren Software, allein die letzten 8 Jahre überwiegend auf Qt-Basis.

Möglicherweise macht die Auseinandersetzung mit QML aber auch Lust auf mehr, und Sie schlagen die Brücke zu C++, Python oder Javascript. Insbesondere bei Letzterem erleichtern Ähnlichkeiten in der Syntax zu QML den Einstieg.