Altova MobileTogether Designer

Stilvarianten auf unterschiedlichen Clients

Zur Startseite Zurück Nach oben Weiter

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.

 

© 2018-2024 Altova GmbH