Stilvarianten auf unterschiedlichen Clients
Einige MobileTogether-Lösungen haben eventuell je nach Betriebssystem (Plattform) einen anderen Look, da die einzelnen Betriebssysteme einige Stileigenschaften unterschiedlich behandeln. (MobileTogether-Lösungen können auf den folgenden Plattformen ausgeführt werden: Android, iOS, Windows und Web.)
In diesem Kapitel:
•erfahren Sie, wie Sie einen einheitlichen plattformübergreifenden Look schaffen können und
•welche Stileigenschaften von bestimmten Plattformen unterschiedlich behandelt werden.
Schaffung eines einheitlichen Looks für alle Plattformen
Die beste Methode, um einen einheitlichen Look zu erzeugen, ist herauszufinden, welche Stileigenschaften auf verschiedenen Plattformen unterschiedlich behandelt werden und anschließend für jede dieser Eigenschaften mittels XPath-Ausdrucks, der unterschiedliche Werte für unterschiedliche Plattformen definiert, einen Wert festzulegen. Mit Hilfe statischer globaler Variablen, die die Plattforminformationen enthalten, können Sie im XPath-Ausdruck Bedingungsverzweigungen erstellen.
So kann etwa für die Stileigenschaft Abstände von Projektkomponenten der folgende XPath-Ausdruck definiert werden:
if (\$MT_Android=true()) then "0dp" else "1dp"
Mit dem obigen XPath-Ausdruck wird für Android-Geräte ein Abstandswert und für alle anderen Plattformen ein anderer definiert.
Diese Stileigenschaftsdefinitionen können an einer oder mehreren der folgenden Stellen definiert werden:
•Über das Designlayout: Für einzelne Steuerelement; für die Seite; in den Projekteinstellungen
•Über Stylesheets: Für alle Steuerelemente; für einen bestimmten Steuerelementtyp; für die Tabellen einer Seite; für eine Seite
Sie können den Kompatibilitätsmodus für die Benutzeroberfläche in den Eigenschaftseinstellungen des Projekts auf true setzen, damit die Standardwerte von Eigenschaften auf allen Plattformen gleich sind.
Plattformspezifische Behandlung bestimmter Stile
Im Folgenden sind die Stileigenschaften, die von mindestens einer Plattform deutlich anders behandelt werden, aufgelistet.
Allgemein
Die Standardfarben, -schriftarten und -größen sind auf allen Plattformen und auch auf verschiedenen Geräten einer einzigen Plattform oft unterschiedlich. Zusätzlich dazu sehen Steuerelemente je nach Gerät und Version eines einzigen Betriebssystems anders aus.
Ränder von Steuerelementen der obersten Ebene
Die Steuerelemente auf der obersten Ebene sind alle Steuerelemente, die sich direkt innerhalb des Seitencontainers befinden, d.h. Steuerelemente, die sich nicht in einer Tabelle befinden. Auf Android-Geräten ist für alle Steuerelemente der obersten Ebene ein Standardrand von 9px definiert (wobei das Steuerelement "Beschriftung" einen unteren Rand von 0px hat). Andere Plattformen haben andere Standardeinstellungen. Über die Eigenschaft "Ränder oberste Ebene" des Dialogfelds "Weitere Projekteinstellungen" können Sie für alle Plattformen einheitliche Ränder für alle Steuerelemente der obersten Ebene definieren.
Beschriftungssteuerelemente
Das Steuerelement "Beschriftung" hat auf Android-Geräten auf allen Seiten mit Ausnahme des unteren Rands, der eine Breite von 0px aufweist, einen Standardrand von 9px.
Abstände
•Alle Steuerelemente (mit Ausnahme des Steuerelements "Beschriftung") haben auf Windows-Geräten einen vordefinierten Abstand von 1px. Dieser wird außer Kraft gesetzt, wenn Sie für ein Steuerelement einen Abstand definieren (z.B. 0px).
•Auf iOS wird ein Standard-Tabellen-Abstand angewendet: 9px links und rechts und 5px oben und unten. Wenn für die Eigenschaft Abstände einzelner Tabellen Werte definiert wurden, wird dieser Abstandswert (oben, rechts, unten, links) zum entsprechenden iOS-Tabellenabstandswert hinzugefügt. Wenn der Standard-iOS-Tabellenabstand entfernt werden soll, setzen Sie den Eigenschaftswert Abstände in iOS-Tabellen (im Dialogfeld Weitere Projekteinstellungen eines Projekts) auf false.
Schaltflächen
•Android-Schaltflächen haben vordefinierte Abstände, selbst wenn 0px definiert ist.
•iOS-Schaltflächen haben keine Hintergrundfüllung. Stattdessen haben Sie eine "Farbtonfarbe".
•Windows-Schaltflächen sind im dunklen Design transparent.
Zurück-Schaltfläche
Auf iOS-Geräten gibt es keine vom Gerät bereitgestellte Zurück-Schaltfläche, die immer zur Verfügung steht. Sie müssen explizit eine Option (Schaltfläche oder andere Möglichkeit) hinzufügen, über die iOS-Benutzer die Lösung beenden können.
Auswahllistensteuerelemente
Mehrzeilige Auswahllisten werden auf iOS-Geräten nicht unterstützt.
Schalter-Steuerelemente
Schalter-Steuerelemente haben auf iOS-Geräten keinen Text.
Datums-/Uhrzeitsteuerelemente
Das Steuerelement "Datum/Uhrzeit" steht nur auf iOS-Geräten zur Verfügung.
Rich Text-Steuerelemente
Auf Windows-Geräten kann das Rich Text-Steuerelement auf einem PC (einem Web Client), nicht aber auf einem Windows Phone bearbeitet werden.
Max Browser-Breite, Browser-CSS-Klasse
Diese Seiteneigenschaften werden nur auf die Anzeige in einem Webbrowser angewendet.
Browser-Einstellungen des Projekts
Die Browser-Einstellungen des Projekts werden nur auf die Anzeige in einem Webbrowser angewendet.