Flexibles App-UI-Design mit mehrschichtigen Stylesheets

Die Verwendung eines plattformübergreifenden Frameworks für die mobile Entwicklung, wie beispielsweise MobileTogether, ist eine ausgezeichnete Wahl für die Entwicklung nativer Anwendungen, da die Entwicklungsumgebung dafür sorgt, dass die Benutzeroberfläche der App korrekt dargestellt wird und dabei das native Aussehen jedes Betriebssystems berücksichtigt. Sie müssen lediglich ein Design erstellen.

Dies ermöglicht App-Entwicklern, hochentwickelte, datenzentrierte Anwendungen für alle Nutzer sehr schnell zu erstellen. Um dies zu unterstützen, setzt MobileTogether einen RMAD-Ansatz (Rapid Mobile Application Development) ein und bietet flexible Optionen für die Gestaltung einer ansprechenden Benutzererfahrung. Um insbesondere diesen letzten Punkt zu unterstützen, werden mehrstufige Stylesheets verwendet, mit denen Sie Stile einfach anpassen und anwenden können – entweder statisch oder dynamisch – auf verschiedenen Ebenen des App-Benutzeroberflächen-Designs, und das mit nur wenigen Klicks.

Entwerfen Sie eine ansprechende Benutzeroberfläche

Die mehrstufigen Stylesheets, die erstmals in der Version 3.0 von MobileTogether eingeführt wurden, ermöglichen es App-Entwicklern, globale Stile zu definieren, die auf Projektebene, Seitenebene, Tabellenebene und Kontrollebene angewendet werden können. Dies bietet eine zentrale Sammlung von Stilen, die Sie auf verschiedenen Ebenen innerhalb des gesamten App-Entwicklungsprojekts verwenden können.

Warum sollte man Designs anpassen? Zunächst möchte ich betonen, dass dies optional ist. MobileTogether wendet automatisch die Standarddesigns, Button-Aussehen und ähnliches für jedes Betriebssystem (iOS, Android, Windows usw.) an, sodass Sie eine übersichtliche und funktionale Benutzeroberfläche erstellen können, ohne Änderungen vornehmen zu müssen. Manchmal sind jedoch benutzerdefinierte Designs erforderlich, um sich an Unternehmensrichtlinien, speziellen Funktionen oder kreativen Anforderungen anzupassen. Die neuen, mehrstufigen Stylesheets von MobileTogether sollen dies einfacher und schneller machen.

Um zu beginnen, öffnen Sie den Dialog für Stilvorlagen über das Projektmenü. Damit können Sie zwei Arten von Stilvorlagen erstellen: Projektbezogene und benutzerdefinierte.

Die Projekt-Stylesheets dienen dazu, grundlegende Anpassungen vorzunehmen. Die hier definierten Stile werden automatisch im gesamten Projekt angewendet. Dies ist ideal, wenn Sie projektweit Änderungen am Aussehen und der Funktionalität aller Schaltflächen vornehmen möchten, die Schriftgröße für alle Textelemente festlegen oder Hintergrundfarben im gesamten Projekt steuern wollen.

Der zweite Typ sind benutzerdefinierte Stylesheets, die vom Entwickler benannt werden und bei Bedarf auf einzelne Seiten, Tabellen und Steuerelemente angewendet werden können. Anders ausgedrückt: Diese Styles werden nicht projektweit angewendet. Im folgenden Screenshot ist ein benutzerdefiniertes Stylesheet namens "MeineStyles" zu sehen, das einige Stile für Schaltflächen, Diagramme und Beschriftungen definiert.

Beim Definieren von Stilen im rechten Bereich des Dialogfensters "Stylesheets" können Sie einen statischen Wert für eine Eigenschaft auswählen oder eingeben, oder Sie können einen XPath-Ausdruck eingeben, der einen Eigenschaftswert berechnet. Ein Beispiel für eine dynamische Zuweisung wäre, einen Eigenschaftswert von einem bestimmten Kriterium abhängig zu machen, beispielsweise von der Bildschirmbreite des mobilen Endgeräts des Benutzers, oder von Benutzereinstellungen. So könnte beispielsweise der Benutzer die Schriftgröße in einer Einstellungsseite Ihrer App anpassen, und diese Schriftgröße würde dann auf alle Textelemente angewendet.

In der folgenden MyStyles-Formatvorlage habe ich XPath verwendet, um die Höhe und Breite von Diagrammen dynamisch anzupassen, sodass sie optimal auf das aktuelle Gerät des Benutzers abgestimmt sind.

Sie können beliebig viele dieser vom Benutzer erstellten Stilvorlagen definieren, um Optionen für die Formatierung verschiedener Elemente bereitzustellen.

Während der App-Entwicklung ist es so einfach, eine vom Benutzer erstellte Stilvorlage auf ein Designelement anzuwenden: Wählen Sie einfach den Namen der Stilvorlage im Fenster "Stile und Eigenschaften" aus.

Sie können auch die Auswahl der Stylesheet-Datei dynamisch mithilfe von XPath festlegen, beispielsweise um die Auswahl des Stylesheets vom Typ des aktuellen mobilen Geräts abhängig zu machen. Ein großer Vorteil der Verwendung eines XPath-Ausdrucks zur Auswahl eines vom Benutzer erstellten Stylesheets besteht darin, dass die Auswahl von dynamischen Umgebungsbedingungen abhängig gemacht werden kann. Wenn Sie beispielsweise ein Stylesheet für iOS-Geräte und ein anderes für alle anderen Geräte festlegen möchten, könnten Sie den folgenden XPath-Ausdruck verwenden: "wenn ($MT_iOS=true()) dann 'iOSStyleSheet', andernfalls 'GeneralStyleSheet'".

Wenn Sie für eine bestimmte Seite oder ein bestimmtes Element eine benutzerdefinierte Stylesheet-Datei angegeben haben, überschreibt diese alle entsprechenden Werte in der Stylesheet-Datei des Projekts. Dadurch können Sie sowohl allgemeine als auch detaillierte Anpassungen vornehmen.

Mehrstufige Stylesheets sparen eine enorme Menge an Zeit und bieten eine unübertroffene Flexibilität bei der Anpassung des Aussehens und der Benutzerfreundlichkeit von Anwendungen auf allen Plattformen. Wie ich bereits in der Einleitung erwähnt habe, können Sie beispielsweise, wenn Sie möchten, dass alle Schaltflächen in Ihrer App auf iOS, Android und Windows einheitlich aussehen (also nicht die nativen Schaltflächendesigns verwenden), dies jetzt einmal pro Projekt (oder auf einer anderen Ebene, je nach Bedarf) definieren.

Testen Sie diese Funktionalität, indem Sie mit dem kostenlosen MobileTogether Designer eine App erstellen (Link zur Downloadseite).