FireMonkey vorgestellt

User-Interfaces für alle Plattformen entwerfen mit FireMonkey
Keine Kommentare

Der Wunsch nach dem bestmöglichen Grafikframework, mit dem man möglichst alle Plattformen in nativer Qualität bedient, wird wohl immer unerfüllbar bleiben. Jedes System hat seine individuellen Vor- und Nachteile. Bekannte Vertreter sind zum Beispiel Swing, JavaFX, OpenGL usw. Mit FireMonkey steht seit längerem ein Framework aus dem Hause Embarcadero zur Verfügung, das alle wichtigen Systeme adressiert. Dazu gehören Windows, macOS, Linux, Android und iOS. Lesen Sie hier, wie Sie mit FireMonkey und RAD Studio Anwendungen erstellen, die auf einer Vielzahl von Geräten und Plattformen laufen.

Bei der Entwicklung von Software, die auf unterschiedlichen Geräten und Plattformen ausgeführt werden soll (geräte- und plattformübergreifende Applikationen), besteht eine besondere Herausforderung darin, die grafische Benutzeroberfläche umzusetzen. In diesem Punkt unterscheiden sich die Systeme am meisten und jeder Hersteller eines Betriebssystems sieht eine andere Programmierschnittstelle (API) vor. Hinzu kommt der Umstand, dass sich auf Seiten der Hardware sehr unterschiedliche Voraussetzungen bieten. Die Bildschirmgrößen der zu unterstützenden Geräte und die Auflösungen sind meist sehr heterogen. Aus Sicht der Programmentwicklung ist es daher effektiv, wenn man ein universelles Grafikframework einsetzen kann, das für die notwendige Abstraktion der Hard- und Systemsoftware sorgt und für die Entwicklung einer Applikation eine einheitliche Schnittstelle bietet.

Es gibt eine Reihe von Frameworks, die das Ziel der Systemabstraktion verfolgen. Ein bekanntes Framework auf Ebene der Systemhardware ist zum Beispiel OpenGL. Es handelt sich um eine Spezifikation in Form einer plattform- und programmiersprachenübergreifenden Programmierschnittstelle (API) zur Entwicklung von 2D- und 3D-Grafikanwendungen. Der OpenGL-Standard beschreibt etwa 250 Befehle, die die Darstellung komplexer 3D-Szenen in Echtzeit erlauben. Die Implementierung des OpenGL-API erfolgt in der Regel durch Systembibliotheken, auf einigen Betriebssystemen auch als Teil der Grafikkarten-Treiber, was dann wiederum sehr performant ist. Blickt man auf die Anwendungsebene, dann gehören beispielsweise Java Swing und JavaFX zu den plattformübergreifenden Grafikbibliotheken. Deren Ziel besteht darin, eine einheitliche und universell verwendbare Programmierschnittstelle für ein Java-Programm bereitzustellen. Die Umsetzung auf Ebene des Zielsystems wird dann durch die Grafikbibliothek übernommen.

Dieser Artikel stellt Ihnen FireMonkey als modernes und leistungsfähiges Grafikframework vor. FireMonkey ist eine geräte- und plattformübergreifende Programmierschnittstelle.

FireMonkey im Überblick

FireMonkey unterstützt eine Reihe von Systemen, konkret handelt es sich um:

  • Windows 32- und 64-Bit
  • macOS mit 64-Bit-Kernel
  • iOS-Geräte 32- und 64-Bit
  • iOS-Simulator
  • Android-Geräte

Über die Bibliothek FMXLinux, deren Lizenz von einem Drittanbieter separat erworben werden kann, können FireMonkey-Applikationen auch auf Linux-Distributionen ausgeführt werden. An der Aufzählung erkennt man, dass es sich bei den unterstützen Systemen sowohl um Desktopsysteme als auch um mobile Geräte handelt. FireMonkey wurde für die integrierten Entwicklungsumgebungen Delphi und C++-Builder entwickelt, um auf sehr einfache Art und Weise native Applikationen für unterschiedliche Systeme aus einem Quellcode zu erstellen. Die Funktionsweise von FireMonkey kann man sich anhand von Abbildung 1 (Architektur) verdeutlichen.

Abb. 1: Die Architektur des Grafikframeworks FireMonkey. Quelle: Embarcadero

Abb. 1: Die Architektur des Grafikframeworks FireMonkey. Quelle: Embarcadero

Auf Ebene der Hardware (Geräte) kann man in Desktop- und mobile Systeme unterteilen. Diese Unterteilung ist allein aus den erheblichen Unterschieden in der Hardware zu begründen. Desktop-Rechner, hierunter zählen bei dieser Form der Systematisierung auch Notebooks, verfügen über größere Bildschirme und weisen teilweise eine sehr hohe Auflösung auf. Sehr oft ist eine leistungsfähige Grafikkarte mit eigenem Prozessor und Speicher vorhanden. Mobile Geräte haben deutlich kleinere Bildschirme. Auch wenn die Pixeldichte in den letzten Jahren erheblich gestiegen ist, ist sie doch oft geringer als im nicht-mobilen Bereich. Ebenso ist die Leistungsfähigkeit der mobilen Hardware nicht mit derjenigen von Desktop- und Notebook-PCs zu vergleichen. Unmittelbar über der Hardware sind die Systembibliotheken für eine Kommunikation zwischen den Anwendungen und der Grafikhardware angeordnet. Diese Systembibliotheken werden direkt durch das jeweilige Betriebssystem bereitgestellt und stellen damit eine universelle Schnittstelle für die Programme dar. Die Systembibliotheken kapseln die unterschiedlichen Hardwarevoraussetzungen auf den Zielgeräten. Mit anderen Worten: Aus Sicht der Software spielt der konkrete Typ der Grafikkarte keine Rolle, es bietet sich eine genormte Programmierschnittstelle innerhalb eines Betriebssystems bzw. Geräteklasse.

Um jedoch geräte- und plattformübergreifende Applikationen zu erstellen ist eine weitere Abstraktionsschicht notwendig. Diese kommuniziert mit den jeweiligen Grafik-APIs und standardisiert die Programmierschnittstelle nun sogar über Geräte- und Plattformgrenzen hinweg. Eine solche Abstraktionsschicht stellt das hier vorgestellte Grafikframework FireMonkey dar. Es ermöglicht grafische Applikationen für die o.g. Betriebssystem und Geräte und sorgt dafür, dass die Oberflächen nativ für das Zielsystem gerendert werden (Abbildung 2).

Abb. 2: Natives Rendering für die Zielplattformen. Quelle:Embarcadero

Abb. 2: Natives Rendering für die Zielplattformen. Quelle: Embarcadero

Funktionen von FireMonkey

FireMonkey bietet u.a. die folgenden Funktionen:

  • plattformübergreifende Abstraktionsschicht für Betriebssystemfunktionen, wie Fenster, Menüs und Dialogfelder
  • 2D- und 3D-Grafiken darstellen
  • die Darstellung beruht auf einer Vektor-Engine, d. h. es sind verlustfreie Skalierungen und die korrekte Anzeige auf unterschiedlichen Geräten und Bildschirmen möglich
  • Anzeige von Farbübergängen
  • grundlegende Formen für 2D-Grafiken mit einem integrierten Satz von Pinseln, Stiften, Geometrien und Transformationen
  • Basisobjekte und Funktionen für Darstellungen in 3D
  • Lese- und Schreibunterstützung für die Formate JPEG, PNG, TIFF und GIF
  • im Hintergrund-Thread berechnete Animationen mit minimaler CPU-Nutzung und automatischer Bildfrequenzkorrektur
  • flexible Layouts für relative Positionierung der Oberflächenelemente
  • umfassender und vollständiger Designer, der sich nahtlos in die integrierte Entwicklungsumgebung einfügt

Damit stellt FireMonkey alle wichtigen Funktionen bereit, um Applikationen mit grafischer Benutzeroberfläche zu erstellen, welche auf den unterschiedlichsten Geräten und Systemen ausgeführt werden können. Ein besonderes Feature ist der Designer, der das Erstellen der Oberfläche zu nahezu 100% in einem visuellen Prozess erlaubt. Diese Vorgehensweise wird im kommenden Abschnitt vorgestellt.

Anwendungserstellung mit FireMonkey und RAD Studio

FireMonkey-Applikationen erstellt man direkt mit Hilfe von Delphi oder C++-Builder. Beide Produkte werden zu RAD Studio zusammengefasst, wo man dann zwischen den beiden Programmiersprachen wählen kann. Um eine Anwendung zu entwickeln, die auf mehreren Plattformen läuft, müssen Sie die Projektvorlage Geräteübergreifende Anwendung aus dem Menü Datei | Neues Projekt auswählen (Abbildung 3).

Abb. 3: Es stehen unterschiedliche Optionen für eine geräteübergreifende Anwendung zur Verfügung.

Abb. 3: Es stehen unterschiedliche Optionen für eine geräteübergreifende Anwendung zur Verfügung.

Mit Hilfe des Assistenten konfigurieren Sie den Applikationsrahmen und erstellen eine so genannte FireMonkey-Applikation. Danach gelangen Sie direkt in den grafischen Designer der Entwicklungsumgebung. Ein Hauptformular ist bereits angelegt und man kann direkt mit dem Design der Benutzeroberfläche starten. Dieses geschieht durch das Platzieren von visuellen Komponenten, die man aus der Toolpalette auswählt und sie auf dem Formular platziert (Abbildung 4).

Abb. 4: Die Tool-Palette zeigt eine große Auswahl an Komponenten zur Gestaltung des User Interfaces.

Abb. 4: Die Tool-Palette zeigt eine große Auswahl an Komponenten zur Gestaltung des User Interfaces.

Über den Eigenschafteneditor werden die Komponenten wunschgemäß konfiguriert. Ein Unterschied von RAD Studio gegenüber vielen grafischen Designern anderer integrierter Entwicklungsumgebungen besteht darin, dass die Arbeit im Designer abschließend ist. Es ist nicht vorgesehen und vor allem auch nicht notwendig, dass man den generierten Quellcode zur Definition des User Interfaces manuell nachbearbeitet, wie man es beispielsweise von Visual Studio (XAML) oder Android (XML) kennt. Diese Leistungsfähigkeit des Designers ist ein besonderes Feature von FireMonkey in Verbindung mit RAD Studio. Es führt zu einer starken Beschleunigung des oft sehr zeitaufwändigen Prozesses zur Gestaltung der Benutzeroberflächen.

Geräteübergreifende Programme müssen mit unterschiedlichsten Auflösungen und Bildschirmgrößen umgehen können. FireMonkey setzt hierbei auf eine relative Positionierung der Komponenten mit Hilfe von Layout-Containern. Mit deren Hilfe werden die untergeordneten Komponenten beispielsweise in einem Raster (Grid-Layout) oder nacheinander in der Erstellungsreihenfolge erst von links nach rechts und dann von oben nach unten (Flow-Layout) angeordnet. Mit Hilfe dieser Container kann das User Interface so gestaltet werden, dass es sich an die gegebenen Platzverhältnisse automatisch anpasst. Nicht alle Komponenten zur Gestaltung des User Interfaces sind auf allen Zielplattformen verfügbar. Bereits während der Designzeit werden die unterstützten Plattformen angezeigt. So gibt es auf allen Plattformen einen Button, dagegen gibt es ein Menü-Control nur auf den Desktop-Systemen, da ein klassisches Anwendungsmenü auf mobilen Systemen keinen Sinn ergeben würde. Hierin liegt auch eine der Schwierigkeiten der geräteübergreifenden Programmentwicklung, d. h. eine Benutzerschnittstelle zu entwerfen, die gleichermaßen auf einem 27 Zoll großen Desktop- und auf einem 5 Zoll großen Smartphone-Bildschirm bedient werden kann. Das ist weniger ein technisches, sondern mehr ein konzeptionelles Problem. Zur Lösung dieses Problems und zur Gestaltung geräteübergreifender Benutzeroberflächen bietet der User-Interface-Designer unterschiedliche Ansichten. Die Masteransicht dient dazu, das grundsätzliche Design einer Geräteklasse festzulegen, zum Beispiel für iOS oder Windows. Spezifische Ansichten zum Beispiel für das iPhone oder iPad bzw. für den Desktop oder das Surface Pro vermitteln einen Eindruck von der endgültigen Darstellung auf dem jeweiligen Zielgerät. Auch eine gemeinsame geräteübergreifende Vorschau ist möglich (Abbildung 5).

Abb. 5: Geräteübergreifende Vorschau für eine auf FireMonkey basierende Applikation in RAD Studio.

Abb. 5: Geräteübergreifende Vorschau für eine auf FireMonkey basierende Applikation in RAD Studio.

Das endgültige Erstellen der laufähigen Anwendungen bzw. App-Packages nimmt man direkt aus dem Projektmappen-Explorer vor. Hier kann man die gewünschte Zielplattform aktivieren und das Projekt dafür erstellen.

Features

Ein erwähnenswertes Feature ist zum Beispiel das so genannte Live-Binding. Damit ist es möglich, Eigenschaften der visuellen Komponenten an Datenstrukturen oder Eigenschaften von anderen Komponenten zu binden. Auf diese Weise können Datenflüsse zum User Interface auf dem Wege der Konfiguration umgesetzt werden, d. h. es ist nicht notwendig, dafür Programmcode zu schreiben. Mit Hilfe des Bindungs-Experten kann man Quelle und Ziel einer solchen visuellen Datenverbindung schnell auswählen und entsprechend konfigurieren. Der Entwicklungsprozess wird vereinfacht, erheblich beschleunigt, für sich wiederholende Aufgaben standardisiert und weniger fehleranfällig. Es lohnt sich bei der Anbindung des User Interfaces an die Datenwelt zu prüfen, ob man viele Aufgaben mit Hilfe der Live Bindings umsetzen kann. Der Quellcodeumfang schrumpft damit erheblich.

Die in der Palette standardmäßig verfügbaren Komponenten dürften in den meisten Fällen genügen, um die Anforderungen an Benutzeroberflächen umzusetzen. Trotzdem gibt es die Möglichkeit, zusätzlich externe Komponenten zu installieren und zu verwenden. Erste Anlaufstelle ist der interne Package-Manager GetIt in der Entwicklungsumgebung, der eine Vielzahl von Erweiterungen kommerzieller und nicht kommerzieller Art zur Verfügung stellt.

Über vordefinierte Styles kann man das Aussehen der Applikation auf der Basis von FireMonkey schnell an das gewünschte Design anpassen. Dabei können Sie zwischen Jet, Sterling, Diamond, Emerald Crystal, Emerald Dark, Coral Crystal und Coral Dark auswählen, die für die Anwendungsentwicklung der Systeme iOS, Android, Windows und macOS optimiert sind. In Abbildung 6 bekommen Sie einen Eindruck vermittelt.

Abb. 6: Vordefinierte Styles für FireMonkey geben einer Applikation ein angepasstes Aussehen. Quelle: Embarcadero (Fotomontage).

Abb. 6: Vordefinierte Styles für FireMonkey geben einer Applikation ein angepasstes Aussehen. Quelle: Embarcadero (Fotomontage).

Für klassische Anwendungen wird i.d.R. eine 2D-Darstellung verwendet. Um multimediale Präsentationen und Anwendungen zu erstellen, beherrscht FireMonkey auch die 3D-Darstellung. Dabei können 3D-Objekte in einem herkömmlichen 2D-Formular angezeigt werden oder alternativ können 3D-Formulare erstellt werden. FireMonkey stellt mehrere Arten von 3D-Objekten bereit. FireMonkey stellt das gesamte Spektrum der modernen 3D-Grafikprogrammierung wie Positionierung im Raum, Bestimmung der Kameraposition, Bildschirmprojektionen, Licht und Materialien zur Verfügung. Ebenso können 3D-Modelle aus anderen Applikationen importiert und verarbeitet werden. Dabei kann der Entwickler oder der Designer auf die bekannte Arbeitsweise, d.h. den Einsatz von vordefinierten Komponenten, die Platzierung über den Designer und das Einstellen von Eigenschaften über den Editor zurückgreifen. Applikationen mit einer 3D-Benutzeroberfläche können damit ebenso effektiv und zeitsparend realisiert werden.

Fazit

Dieser Artikel hat das geräte- und plattformübergreifende Grafikframework FireMonkey vorgestellt. FireMonkey ist integriert in die Entwicklungsumgebungen Delphi, C++-Builder und RAD Studio. Es erlaubt auf effektive Art und Weise das Erstellen von Benutzeroberflächen mit Hilfe eines grafischen Designers. Der Entwickler kann die Oberfläche komplett zur Designzeit in einem visuellen und intuitiven Prozess gestalten. Über den Eigenschafteneditor können spezifische Anpassungen der Komponenten vorgenommen werden. FireMonkey basiert auf Vektorgrafiken. Um eine automatische Anpassung der Formulare und deren Komponenten an die unterschiedlichen Bildschirmgrößen und -auflösungen vorzunehmen, verwendet man i.d.R. relative Layoutcontainer. FireMonkey ersetzt im Build-Prozess die während der Designzeit ausgewählten und konfigurierten Steuerelemente gegen ihre nativen Entsprechungen der jeweiligen Zielplattform. Auf diese Weise entstehen native Anwendungen, ohne mehrfach angepassten Quellcode schreiben zu müssen. Das Aussehen und die Bedienung der Anwendungen entsprechen in allen Facetten den Vorgaben der Zielsysteme.

Um das Erstellen von geräte- und plattformübergreifenden Anwendungen mit Hilfe des Grafikframeworks FireMonkey auszuprobieren, kann man sich gratis eine Testversion von Delphi oder C++-Builder von https://www.embarcadero.com/de/products oder die Community-Edition mit einer begrenzten kommerziellen Lizenz von https://www.embarcadero.com/de/free-tools herunterladen.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -