10. Mit dem Multi Device Designer ("Fire UI") arbeiten (20.03.2015)

Wenn Sie unter Menü "Datei", Befehl "Neue Geräteübergreifende Anwendung" ein neues Projekt erstellt haben, können Sie direkt loslegen, Komponenten hinzufügen, deren Eigenschaften einstellen und Ereignis-Routinen für die Interaktion mit dem User schreiben. Wenn Sie ein Cross-Platform Projekt entwickeln, empfiehlt es sich meistens, direkt am Anfang schon die eine View für die MAC OS Platform hinzuzufügen und in relativ zeitnahen Abständen mal für Windows und mal für MAC zu kompilieren.

Sie sollten allerdings so viel wie möglich auf der Ansicht "Master" arbeiten und die anderen Ansichten nur verwenden, um für das jeweilige Betriebssystem spezifische Einstellungen vorzunehmen.

Mit der linken Dropdownliste können Sie auch die MasterView mit verschiedenen Stilen ansehen.

Sie können in den verschiedenen Ansichten (OS X, Windows, etc.) zwar Komponenten hinzufügen und deren Eigenschaften verändern, aber dort nicht mehr löschen. Wenn Sie eine Komponente wieder entfernen wollen, müssen Sie dazu die Master-Ansicht aktivieren und dann die Komponente entfernen. Logischerweise ist sie dann auch aus den anderen Ansichten entfernt. Das gleiche gilt übrigens für den Namen der Komponente: Auch den können Sie - weil er ja eindeutig sein muss - nur in der Masterview verändern.

Die Verwendung des Multi-Device-Designer erleichtert die Entwicklung von Crosscompile-Anwendungen enorm. Beispielsweise werden unter Windows die Schalter in Dialogen unten links angeordnet, unter MAC OS unten rechts. Außerdem haben Schalter unter MAC OS normalerweise keine Grafiken.

Hier also die Ansicht eines Dialogs aus meinem Rechnungsprogramm, das für Windows und MAC OS X erhältlich ist:

Unten links also die Schalter mit den Grafiken. Nun zu der MAC OS X-Ansicht:

Hier wurden also Plattform gerecht die Schalter auf die rechte Seite verschoben und die Grafiken im Objektinspektor auf Visible=false gesetzt. Die Checkbox wurde auf die linke Seite verschoben.

Das schöne daran ist, dass Sie hier einfach den Designer verwenden können und hier nicht zur Laufezeit des Programmes irgendwelche programmgesteuerten Umgestaltungen des Dialogs vornehmen müssen, wenn das Programm feststellt, dass es auf einer ganz bestimmten Plattform läuft. Das war nämlich bislang die gängige und ziemlich aufwändige Methode.

Formularvererbung mit dem Multi-Device Designer

Auch ist es eine Platz sparende Methode, da Delphi für jede Ansicht ein eigenes Formular anlegt und nur dieses wird für die entsprechende Plattform eingebunden. Wenn man sich die erstellten Dateien einmal in einem Dateimanager ansieht, dann sieht das wie folgt aus:

FMandant.fmx ist die Master-Formular-Datei. Diese Datei dient als Ausgang für die jeweilig erzeugte Plattform. Wenn wir also nur dieses Masterformular hätten und für MAC OS X das Programm erzeugen, dann wird auch nur dieses Master-Formular verwendet.

Da wir hier aber sowohl ein Windows-Programm als auch eines für MAC OS X erzeugen wollen, haben wir hier "OS X Desktop" in dem Dropdown-Menü "Ansichten" gewählt, so dass Delphi dann hier auch ein Formular für diese Plattform erzeugt, das ist die Datei "FMandant.Macintosh.fmx".

Die spezifischen Plattform-Formulare funktionieren auf dem Prinzip der Formular-Vererbung (so ähnlich wie bei dem "TFrame"). Wenn wir mal das MAC-Formular im Texteditor öffnen, dann sieht das so aus:

Während die Master-Formular-Datei aus ca. 250 Zeilen besteht, hat die abgeleitete MAC-Formular-Datei nur 42 Zeilen. Es werden hier nämlich nur die Änderungen im Verhältnis zum Masterformular erfasst. Der Schalter, der statt links nun rechts steht, hat eine andere horizontale Position, daher ist dieser Wert (hier grün unterlegt) erfasst. Das Grafik-Symbol im Button soll unter Windows sichtbar sein, unter MAC OS X aber nicht, auch das ist hier entsprechend vermerkt (bläulich unterlegt).

Sie können also ganz einfach die Position, die Farbe, die Ausmaße oder den Inhalt (z.B. Texte von Labels, Buttons) für die jeweilige Plattform ändern.

Geerbte Einstellungen wiederherstellen

Wenn Sie Änderungen an einem Control auf einer anderen Plattform-Ansicht vorgenommen haben, können Sie diese teilweise oder vollständig wieder so herstellen lassen, wie in der Master-Ansicht. Beispiel:

Hier wurde der Button in der MAC-Ansicht nach rechts verschoben und der Text in "MAC" geändert.

Wollen Sie alle Einstellungen des Buttons wieder in den Ausgangszustand wiederherstellen, klicken Sie mit der rechten Maustaste auf den Button und wählen den Befehl "Geerbte Einstellungen wiederherstellen":

Der Button steht danach auch in der MAC-Ansicht wieder auf der linken Seite und hat als Beschriftung "Button1".

Wollen Sie z.B. nur den Original-Text des Buttons wiederherstellen, klicken Sie einmal auf den Button mit der linken Maustaste, um ihn auszuwählen. Dann klicken Sie im Objektinspektor mit der rechten Maustaste auf den Schriftzug "Text" (also linke Seite und nicht in das Editierfeld) und wählen den den Befehl "Geerbte Einstellungen wiederherstellen.

Der Button bleibt auf der rechten Seite, aber seine Beschriftung wurde von "MAC" in "Button1" verändert.

So kann man also bei Bedarf auch nur einzelne Eigenschaften wieder auf den Ausgangszustand zurückführen.

Plattformspezifische Ereignis-Prozeduren mit dem Multi Device-Designer anlegen

Der Multi Device Designer bietet Ihnen aber noch einer weitere Vereinfachung: Bislang haben Sie z.B. bei einem OnClick-Event den Source-Code i.d.R. auch dann in einer Event-Prozedur verarbeitet, wenn Sie unterschiedliche Plattformen bedienen. I.d.R. verwenden Sie dann verschiedene IFDEF -Funktionen, um Source-Code entweder für Windows oder für den MAC kompilieren zu lassen. Dieses bietet sich auch nach wie vor an, wenn Sie nur wenige unterschiedliche plattformspezifische Anteile im Code haben. Ist dieser jedoch sehr unterschiedlich, haben Sie viel Text in der Ereignisprozedur und die Sache wird schnell unübersichtlich. Hier bietet es sich an, direkt eine eigene Ereignisprozedur für die MAC-Plattform anzulegen. Wenn Sie also schon im Master ein OnClick-Event angelegt haben, wechseln Sie zur Ansicht MAC OS X.

Wählen Sie dann den Button aus und fügen im OnClick-Ereignis einfach den Text "Mac" wie im Bild sichtbar ein und drücken die Entertaste. Schon legt Delphi eine neue leere Ereignis-Prozedur an, die Sie mit Ihrem MAC spezifischen Source-Code befüllen können.

Kleiner Wermutstropfen: Wenn der Source-Code Plattformspezifische Aufrufe enthält, müssen Sie dennoch wieder mit IFDEF arbeiten, allerdings nur einmal, indem Sie den ganzen inneren Rahmen einmal mit {$IFDEF MACOS} ... {$ENDIF} versehen.

Insgesamt ist es hier immer Sache des Einzelfalls, welche Vorgehensweise die bessere darstellt.

Noch ein kleiner Tipp an dieser Stelle: Denken Sie daran, wenn Sie in der Master-Ansicht für einzelne Schalter noch kein Event belegt haben und Sie belegen dann zum ersten mal ein Event in einer der spezifischen Plattform-Ansichten, dann ist diese Event-Belegung auch nur für diese Plattform erfolgt. Wundern Sie sich also nicht, wenn Sie in der MAC-Ansicht ein Event belegen und in der gerade kompilierten Zielplattform, z.B. Windows, beim Klick auf den Button nichts passiert.

Übrigens gibt es noch eine weitere Neuerung in XE7: Bei einer Reihe von Komponenten können Sie für bestimmte Eigenschaften, z.B. statt "Top" oder "Bottom" bei der TTabPosition eines TabControls die Eigenschaft "PlatformDefault" default wählen.

Selbst wenn Sie also nur eine Masterview haben und keine Plattformspezifische View erzeugen, würde mit der Einstellung "PlatformDefault" auf der jeweiligen Plattform alles an seinem richtigen Platz sein.

Die hier im Beispiel erwähnte Funktionalität wäre aber eher für iOS und Android relevant, da dort die Tabs standardmäßig unten bzw. oben sein sollen.