Auszeichnungssprachen erleichtern die UI-Entwicklung
Ein GUI für alle Plattformen
Mit dem »Qt«-Softwareframework für die Entwicklung von Benutzerschnittstellen und Anwendungen mit plattformübergreifender Funktion können Entwickler Bedienoberflächen für Embedded Systeme schneller realisieren. Auszeichnungssprachen sind ein wichtiges Hilfsmittel, um das Prototyping zu beschleunigen und eine reibungslose Interaktion innerhalb der gesamten Anwendung sicherzustellen.
Benutzerschnittstellen (User Interfaces, UIs) für Embedded Systeme sollten nicht nur einfach zu bedienen sein, sondern auch nahtlos mit der zugrunde liegenden Anwendung interagieren. Die bevorzugten Ansätze der UI-Entwickler und die verwende-ten Techniken der Softwareentwickler sind historisch bedingt jedoch wenig aufeinander abgestimmt.
Hardwarenahe Embedded-Software erfordert meist strikte Low-Level-C-Programmierung, wohingegen UI-Entwickler, die sich auf die Benutzerfreundlichkeit und Übersichtlichkeit einer Anwendung konzentrieren, mit einer Auszeichnungssprache (Markup-Language) auf hoher Abstraktionsebene arbeiten. Diese Art von Sprache ermöglicht einen reibungslosen Übergang von einem visuellen Konzept zu einem ausführbaren Softwarecode. Das Zusammenführen dieser beiden Ansätze und darüber hinaus deren Kombination, um ein tragfähiges Ergebnis zu erhalten, erweist sich als schwierig.
Als ob ein reibungsloser und integrierter Workflow für UI-Entwickler nicht schon schwer genug wäre, sind auch noch Rahmenbedingungen wie begrenzte Leistungsressourcen sowie möglicherweise sehr strenge Echtzeit-anforderungen zu beachten. Damit sind zusätzliche hardwarespezifische Leistungsoptimierungen für die Software erforderlich. Ist dann noch die Unterstützung mehrerer Betriebs-systemplattformen gefordert, wird es noch komplizierter: dann müsste der Entwickler das UI für den Einsatz in verschiedenen Kontexten unterschiedlich optimieren, zum Beispiel für das Auto oder für ein Mobilgerät.
Endanwender erwarten auf unterschiedlichen Geräten möglichst ähnliche Benutzerschnittstellen. Sie bevorzugen den Komfort der Vertrautheit und akzeptieren schrittweise Verbesserungen, die sie leicht verstehen und nutzen können. Dies spiegelt sich in der Entwicklung neuer Designelemente wider, die zunehmend auf vielen verschiedenen
Geräten gemeinsam anzutreffen sind. Beispiele sind Tasten, Schiebe-regler (Slider) und seit neuestem auch Akkordeon-Menüs, um verschiedene Optionen auf einem kleinen Bildschirm besser darstellen zu können. Mit Auszeichnungssprachen können Entwickler grafischer UIs, wiederverwendbare Script-Codes oder Markups erstellen, mit denen sich UI-Funktionen schnell importieren und konfigurieren lassen.
»QML« ist die Markup-Language des »Qt«-Entwicklungsframeworks. Sie ermöglicht die Deklaration von Objekthierarchien und zustandsbasierter Applikationslogik und lässt sich auch in anderen Anwendungsdomänen jenseits des UI-Designs verwenden. QML schließt die Lücke zwischen UI- und Applikations-Entwicklern: Ein Plug-in ermöglicht den Export von QML-Dateien von gängigen grafischen Design-Tools wie Adobe Photoshop oder dem Open-Source-Programm GIMP (Gnu Image Manipulation Program).
Das Qt-Framework ist zum Erstellen plattformübergreifender Anwendungen und UIs für C++ ausgelegt. Dadurch können Anwendungen auf verschiedenen Geräten wie Desktops, Tablets oder Handhelds mit gängigen Betriebssystemen nativ laufen. Durch integrierten Support für das Zielsystem ermöglicht Qt optimierte Ergebnisse - und das schneller als bei der herkömmlichen Portierung des Designs auf mehrere Plattformen.
Vor kurzem wurde »Qt Quick« (Qt UI Creation Kit) veröffentlicht, das mit einem schnelleren und flexibleren Framework den Anforderungen des Embedded- und Mobilgeräte-Markts gerecht wird. Qt Quick trennt das deklarative UI-Design und die imperative Programmierlogik. Die Präsentationsebene des UIs wird mit QML erstellt, behält aber ein C++-Backend für das Rendering und den direkten Zugriff auf Plattformdienste von der QML-Präsentationsebene. Damit lässt sich QML auch um Grafiken wie in C++ geschriebene OpenGL-3-D-Objekte erweitern.
Qt Quick ist in viele Entwicklungsumgebungen von Drittanbietern integriert. QML-Dateien lassen sich mit jedem Texteditor erstellen. Die Syntax und Struktur von QML-Dokumenten ist anders als bei vielen anderen Auszeichnungssprachen sehr entwicklerfreundlich. Alternativ bietet Qt Quick die Entwicklungsumgebung »Qt Creator«, mit deren Editier-Tools zur Umsetzung von Formen und Texten und für deren Anreicherung mit Farben und Animationen sich neue UI-Designs schnell kodieren lassen. Über die Qt-Toolbar können Entwickler verschiedene Optionen auswählen und automatisch den entsprechenden QML-Code generieren. Ab Version 2.1 unterstützt Qt Creator auch einen speziellen Modus, der eine schnelle visuelle Bestätigung liefert, ob das UI wie gefordert entwickelt wird. Ein Mausklick genügt, um zwischen Design- und Vorschaumodus hin und her zu schalten. Qt Creator bietet zudem Zugriff auf eine On-Screen-Referenz-Dokumentation, indem der Mauszeiger über dem ausgewählten Code-Element im Dokument gehalten wird. Damit stehen nützliche Informationen zur Konfiguration verschiedener Aspekte des Elements wie zum Beispiel Animationen zur Verfügung.
Da QML nur grundlegende UI-Steuerelemente wie Rechteck, Bild, Text, MouseArea und BorderImage enthält, können Nutzer ihre eigenen zusammengesetzten Elemente erstellen, um das gewünschte Look & Feel zu erhalten. Mit QML ist dies einfach, und zusammengesetzte Elemente lassen sich innerhalb des UIs als auch in verschiedenen Projekten wiederverwenden. Neue zusammengesetzte UI-Elemente werden hierarchisch erstellt, damit sich das erneute Schreiben und der spätere Aufbau des UIs bei der nächsten Verbesserung vereinfachen. Dies ermöglicht einen agilen und inkrementellen Prozess beim Erstellen eines UI durch Rapid Prototyping.
Schnelle Optimierung
Mit den plattformübergreifenden Funktionen von Qt können Entwickler das Prototyping und die Entwicklungsarbeit auf einem Desktop-PC durchführen, ohne die Embedded-Zielhardware vor Ort haben zu müssen. Die Umsetzung auf die Zielhardware kann später unabhängig erfolgen, sobald diese bereitsteht.
Meist ist die einzige Anforderung bei platt-formübergreifenden An-wen-dungen, dass sich das UI auf verschiedene Bildschirmgrößen unterschiedlicher Geräte und Plattformen skalieren lässt. Qt führt diese Skalierung standardmäßig durch. In einigen Fällen kann jedoch die gleiche Anwendung auf verschiedenen Bildschirmen und Umgebungen laufen. Dann möchten Entwickler gerne das UI-Layout für jedes Gerät neu optimieren, um beispielsweise den unterschiedlichen Anwendungsszenarien Mobilgerät, In-Car oder Desktop gerecht zu werden.
Generell wäre ein UI-Layout für einen Desktop-Bildschirm nicht für ein Mobiltelefon geeignet und umgekehrt. Durch die Trennung des deklarativen UI-Designs von der Code-Logik bietet Qt Quick die Flexibilität, nur die schmale in QML geschriebene Präsentationsebene zu ändern. Das C++-Backend enthält die meisten Funktionen und lässt sich vollständig wiederverwenden. Da QML eine produktive High-Level-Markup-Language ist, gestaltet sich das erneute Schreiben der übersichtlichen UI-Ebene für ein anderes Layout einfach und lässt sich wie bereits erwähnt auch inkrementell, also Stück für Stück erledigen.
QML-Prototyping-Workflow
Die meisten Entwickler verwenden beim Schreiben mit QML einen »Trial & Error«-Ansatz, um sich dem gewünschten Design schrittweise zu nähern. Dennoch sind zu Beginn des Projekts einige Überlegungen zu treffen, um einen geeigneten UI-Ansatz zu finden und ein entsprechendes Framework zu erstellen. Dies geschieht nicht automatisch, da QML nur grundlegende UI-Steuerelemente und Layout-Manager enthält. Zu berücksichtigen ist dabei, ob das UI verschiedene Ansichten oder eine Stack-basierte Navigation aufweist, ob statische Teile wie ein Tab-Navigator und eine Statuszeile vorhanden sind, oder ob es eine einfache Hauptansicht mit Pop-up-Dialogen enthält.
Eine Möglichkeit, mit der QML-Entwicklung einer Benutzerschnittstelle zu beginnen, ist der Einsatz eines grundlegenden Elements wie ein Rechteck, um Platzhalter zu positionieren. Diese lassen sich dann schrittweise durch die richtigen Formen und Texte ersetzen. Komplexere Funktionen wie Grafiken lassen sich später hinzufügen. Dies gibt den Entwicklungsteams die Flexibilität, mit der Arbeit an den tatsächlichen Prototypen früh zu beginnen und ein klares Verständnis über die Funktion des UIs zu erhalten, bevor die Entwickler das Grafikdesign abgeschlossen haben.
Durch die plattformübergreifende Funktion des Qt-Frameworks kann das UI schnell auf mehreren Geräten eingesetzt werden. Damit lassen sich Nutzungstests für alle Zielprodukte und Zielmärkte ausführen. Auf Basis der Rückmeldungen von Endanwendern können Entwickler Änderungen am Host-Desktop durchzuführen, um eine neue Version zu erstellen. Die QML-Dateien lassen sich sofort dynamisch ersetzen, ohne die eigentliche Software erneut kompilieren und installieren zu müssen. Im Kasten auf der gegenüberliegenden Seite ist ein typischer Entwicklungszyklus einer Benutzerschnittstelle auf Basis von QML schrittweise dargestellt.
Über den Autor:
Tuukka Ahoniemi ist Technical Product Marketing Manager bei Digia.
Jobangebote+ passend zum Thema
Praxisbeispiel: Entwicklung einer Benutzerschnittstelle mit QML
Das folgende Beispiel aus der Praxis zeigt einen typischen Entwicklungszyklus einer Benutzerschnittstelle (User Interface, UI) auf Basis der Qt-Auszeichnungssprache QML.
1. Schritt: Zunächst erstellt der Entwickler ein erstes UI-Erscheinungsbild mit QML-Rechtecken und Layoutmanagern, die als Platzhalter für die eigentlichen Elemente dienen.
2. Schritt: Beim zweiten Durchlauf implementiert der Entwickler ein kundenspezifisches Slider-Element. Dies geht sehr schnell, da hierfür nur Rechtecke und keine Grafiken zum Einsatz kommen. Darüber hinaus weist er eine Funktion zu, die zum Testen des UIs dient, und integriert einige Grafiken. Da der Zweck der Anwendung das Rotieren eines 3-D-Elements (Globus) ist, würden die Schieberegler (Slider) zu diesem Zeitpunkt nur das blaue Rechteck rotieren lassen.
3. Schritt: Das 3-D-Element wird im dritten Durchlauf implementiert. Jetzt zeigen Tests, dass zwei Dimensionen ausreichen, um den Globus rotieren zu lassen. Daher entfernt der Entwickler den dritten Slider und platziert die verbleibenden Regler an den entsprechenden Außenrändern des Globus, um eine intuitivere Bedienung zu ermöglichen. Schließlich implementiert er das Menü.
4. Schritt: Bevor die Anwendung fertiggestellt wird, sorgen Tests dafür, dass die Slider vollständig entfallen können - der Anwender kann jetzt den Globus an sich bewegen. Die Schiebefunktion (Drag) lässt sich schnell implementieren, und der Entwickler entfernt die Slider komplett. Die Benutzerschnittstelle vereinfacht sich damit, und eine natürliche Interaktion kann erfolgen. Ohne diesen inkrementellen Ansatz oder technologisch getrennte UI-Entwicklungsstadien würde der letzte Vorgang zuerst implementiert werden - und anschließend erst das Design erfolgen. Dies führt dann zum Durchgang Nummer 2.
