AA_structure_andrewatla_sxc_862608.jpg

© Andrewatla, sxc.hu

Einfache Strukturen

Oberflächen gestalten mit QML und Qt Creator

13.05.2013
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).

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).

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.

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 6 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

LinuxCommunity kaufen

Einzelne Ausgabe
 
Abonnements
 

Ähnliche Artikel

Kommentare

Infos zur Publikation

LU 11/2014: VIDEOS BEARBEITEN

Digitale Ausgabe: Preis € 4,95
(inkl. 19% MwSt.)

Mit der Zeitschrift LinuxUser sind Sie als Power-User, Shell-Guru oder Administrator im kleinen Unternehmen monatlich auf dem aktuelle Stand in Sachen Linux und Open Source.

Sie sind sich nicht sicher, ob die Themen Ihnen liegen? Im Probeabo erhalten Sie drei Ausgaben zum reduzierten Preis. Einzelhefte, Abonnements sowie digitale Ausgaben erwerben Sie ganz einfach in unserem Online-Shop.

NEU: DIGITALE AUSGABEN FÜR TABLET & SMARTPHONE

HINWEIS ZU PAYPAL: Die Zahlung ist auch ohne eigenes Paypal-Konto ganz einfach per Kreditkarte oder Lastschrift möglich!       

Tipp der Woche

Schnell Multi-Boot-Medien mit MultiCD erstellen
Schnell Multi-Boot-Medien mit MultiCD erstellen
Tim Schürmann, 24.06.2014 12:40, 0 Kommentare

Wer mehrere nützliche Live-Systeme auf eine DVD brennen möchte, kommt mit den Startmedienerstellern der Distributionen nicht besonders weit: Diese ...

Aktuelle Fragen

Artikelsuche
Erwin Ruitenberg, 09.10.2014 07:51, 1 Antworten
Ich habe seit einige Jahre ein Dugisub LinuxUser. Dann weiß ich das irgendwann ein bestimmtes Art...
Windows 8 startet nur mit externer Festplatte
Anne La, 10.09.2014 17:25, 4 Antworten
Hallo Leute, also, ich bin auf folgendes Problem gestoßen: Ich habe Ubuntu 14.04 auf meiner...
Videoüberwachung mit Zoneminder
Heinz Becker, 10.08.2014 17:57, 0 Antworten
Hallo, ich habe den ZONEMINDER erfolgreich installiert. Das Bild erscheint jedoch nicht,...
internes Wlan und USB-Wlan-Srick
Gerhard Blobner, 04.08.2014 15:20, 2 Antworten
Hallo Linux-Forum: ich bin ein neuer Linux-User (ca. 25 Jahre Windows) und bin von WIN 8 auf Mint...
Server antwortet mit falschem Namen
oin notna, 21.07.2014 19:13, 1 Antworten
Hallo liebe Community, Ich habe mit Apache einen Server aufgesetzt. Soweit, so gut. Im Heimnet...