© nopporn suntornpasert, 123RF

Warum in die Ferne schweifen? Linux-Magazin-Autor Ekke Gentz hat seine plattformübergreifende Qtcon-App mit dem altgedienten Qt Creator programmiert. Was er dazu brauchte, beschreibt er in diesem Artikel.

Qt gibt es bereits seit mehr als 20 Jahren. In dieser Zeit entstanden für Entwickler gleich mehrere Wege, um grafische Oberflächen zu entwickeln. Konkret lassen sich Qt Widgets [1], Qt Quick [2] und Qt Quick Controls 2 [3] nennen. Qt-Einsteiger, die mobile, plattformübergreifende Apps bauen möchten, verwirrt diese Vielfalt womöglich, zumal alle Technologien weiterhin im Einsatz sind.

Die Vielfalt ist schnell erklärt: Qt läuft auf unterschiedlichen Plattformen: Desktop, Embedded und Mobil. Für Desktop-Anwendungen (OS X, Windows, Linux) greift der Entwickler eher zu Qt Widgets, das native Kontrollelemente für Benutzerschnittstellen anbietet. Qt Quick will dagegen die UI-Steuerelemente besser abstrahieren, mit ihm setzen Entwickler Qt plattformübergreifend ein. Es basiert auf einer Open-GL-Implementierung, doch sehen mobile Apps mit Qt Quick weder sehr nativ aus, noch sind sie besonders performant.

Das hat Qt 5.7 geändert. Seit dieser Version gibt es die leichtgewichtigen Qt Quick Controls 2. Der Name täuscht ein wenig, denn die Qt Quick Controls 2 sind kein Neuaufguss von Qt Quick, sondern eine komplette Neuentwicklung.

Mobile Kontrollelemente

Die bringt nicht nur viele zusätzliche Steuerelemente mit, sondern auch neue Container, die das Entwickeln vereinfachen. Navigationselemente, heute Standard in mobilen Anwendungen, sind ebenfalls mit an Bord. Tabelle 1 zeigt eine Übersicht der Elemente, die Qt Quick Controls 2 Entwicklern bietet.

Die Steuerelemente gibt es derzeit in drei Stilrichtungen: Google Material, Windows Universal und Default – ein spezieller I-OS-Stil soll folgen. Ein dunkles und helles Theme kennt Qt ebenfalls.

Erzeuger

Wer mehr als zehn Jahre ausschließlich mit Eclipse gearbeitet hat, dem fällt der Umstieg auf Qt Creator [4] nicht unbedingt leicht. Doch die Software eignet sich gut, um mobile Apps zu bauen. Sie hilft dabei, mit C++ die Businesslogik zu programmieren und mit QML die Oberfläche zu gestalten, unterstützt aber auch den Deployment-Prozess auf Plattformen wie Android, I-OS und Windows 10. Entwickler testen aus dem Qt Creator heraus mobile Apps auf Simulatoren oder echten Geräten und bauen Releases für die App Stores.

Qt Creator unterstützt den kompletten Android-Buildprozess mit Support für einen Android Manifest Editor (Abbildung 1), Signaturen und Icons. Der funktioniert also auch ohne Android Studio, jedoch muss der Entwickler im Vorfeld ein SDK und das NDK installieren.

Abbildung 1: Der Android Manifest Editor im Qt Creator.

Ein Xcode-Projekt für I-OS erzeugt er, indem er »Project | Archive« aufruft, um die App dann in den Store zu laden. Wer Xcode nutzen möchte, braucht aber einen Apple-Rechner. Der Weg in den Windows App Store führt indes über Visual Studio Project.

Einer für alle

Schön an Qt ist, dass es mit demselben Quellcode unterschiedliche Plattformen bedient. Zusätzlich gibt es Schnittstellen, um auch nativen Code für Android oder I-OS zu ergänzen.

Für meine Qtcon-Konferenz-App [5] wollte ich zunächst herausfinden, was mit einer reinen Qt-Version möglich ist. Das Ergebnis steht unter [6] auf Github, Interessierte finden es zudem in Googles Play Store oder Apples App Store.

Erweiterbar

Die bereits erwähnten UI-Kontrollelemente eigneten sich als solide Basis, da ich sie leicht anpassen konnte. So fehlten mir nur ein Date- und Time-Picker im Google-Material-Stil. Diese programmierte ich innerhalb von ein paar Stunden, nun stehen sie über das Github-Repository für die Allgemeinheit bereit. Auch Buttons fand ich vor, aber nicht jene FAB (Floating Action Button), die moderne Apps in Google-Material-Manier benötigen. Listing 1 zeigt den Code, um aus einem Button einen FAB zu machen.

01 Button {
02     id: button
03     // image should be 24x24
04     property alias imageSource: contentImage.source
05     // default: primaryColor
06     property alias backgroundColor: buttonBackground.color
07     property bool showShadow: true
08     contentItem:
09         Item {
10         implicitHeight: 24
11         implicitWidth: 24
12         Image {
13             id: contentImage
14             anchors.centerIn: parent
15         }
16     }
17     background:
18         Rectangle {
19         id: buttonBackground
20         implicitWidth: 56
21         implicitHeight: 56
22         color: primaryColor
23         radius: width / 2
24         opacity: button.pressed ? 0.75 : 1.0
25         layer.enabled: button.showShadow
26         layer.effect: DropShadow {
27             verticalOffset: 3
28             horizontalOffset: 1
29             color: dropShadow
30             samples: button.pressed ? 20 : 10
31             spread: 0.5
32         }
33     }
34 }

Der Aufruf im Hauptprogramm ist dann recht simpel, ihn zeigt Listing 2.

01 FloatingActionButton {
02     imageSource: "qrc:/images/"+iconOnPrimaryLightFolder+"/person.png"
03     backgroundColor: primaryLightColor
04 }
05 FloatingActionButton {
06     imageSource: "qrc:/images/"+iconOnPrimaryFolder+"/person.png"
07 }

Navigation, Daten und Struktur

In der Konferenz-App sind die wichtigsten Navigationselemente im Einsatz. Der »Drawer« mit dem so genannten Hamburger-Menü (Abbildung 2) erlaubt den Zugriff auf sämtliche Programmbereiche. Über eine Navigation-Bar im unteren Bereich erreicht ein Nutzer schnell die wichtigsten Ziele.

Abbildung 2: Der »Drawer« oben links erlaubt den Zugriff auf alle Programmbereiche.

Der Konferenz-Zeitplan verwendet die Elemente »SwipeView« und »TabBar« , mit deren Hilfe der User fix mit Wischgesten oder über Tabs zwischen den Konferenztagen wechselt. Über »StackViews« hangelt er sich durch die verschiedenen Ebenen und lässt sich kontextbezogene Details anzeigen (Abbildung 3), etwa über Sessions, Details, Sprecher, Talks und Räume.

Abbildung 3: Die kontextbezogenen Details lassen sich als »Page« mit einer »StackView« gestalten.

Alle Navigationselemente kann der Entwickler einfach kombinieren – somit stellen auch sehr komplexe Apps kein Problem für Qt dar. Indem Komponenten und Loader die Kontrollelemente und Pages dynamisch erzeugen, bleibt die Speichernutzung überschaubar und die App insgesamt performant.

Daten legt die Anwendung wie üblich in Form von Json-Dateien im Dateisystem ab oder verstaut sie dauerhaft in einer SQlite-Datenbank. Listing 3 enthält den Code, um eine Liste als Json-Array zu speichern. Eine typische Anwendungsstruktur zeigt schematisch Abbildung 4.

01 void DataManager::writeToCache(const QString& fileName, QVariantList& data)
02 {
03     QString cacheFilePath = dataPath(fileName);
04     QJsonDocument jda = QJsonDocument::fromVariant(data);
05     QFile saveFile(cacheFilePath);
06     saveFile.write(jda.toJson(QJsonDocument::Compact:QJsonDocumen));
07 }

Fazit

Seit Version 5.7 eignet sich Qt dank der Qt Quick Controls 2 aus meiner Sicht auch hervorragend dafür, gut aussehende und performante mobile Apps zu entwickeln. Der Vorteil: Sie braucht nur eine Codebasis für alle Plattformen.

Als etwas schwierig erweist es sich, in der Dokumentation immer die passenden Seiten zu finden, da es Qt nicht nur für Mobilgeräte, sondern auch für den Desktop und Embedded Devices gibt. Das Blog [7] gibt dem Entwickler in dieser Angelegenheit ein wenig Hilfestellung.

Abbildung 4: Die komplette App-Struktur mit Qt 5.7.

Qt ist Open Source, aber auch mit kommerzieller Lizenz zu haben. Unabhängige Entwickler und Startups brauchen eine Lizenz, die ab 72 Euro pro Monat zu haben ist, denn für Apps in Apples Store eignet sich die LGPL unglücklicherweise nicht. Wer Fragen zu den Lizenzen haben sollte, schaut sich am besten das Video unter [8] an, das die rechtliche Situation ein wenig genauer beleuchtet.