Ist ein erfahrener Senior UI Entwickler bei Objectivity, der sich auf Low-Code-Plattformen und Lösungen spezialisiert hat. Er bringt seinen Kollegen der Rapid Development Abteilung bei, wie man Layouts erstellt und in den richtigen Stilen schreibt. Er beteiligt sich an der Erstellung von Widgets und Erweiterungen auf Low-Code-Plattformen und teilt sein Wissen auf verschiedenen Konferenzen und Meetups mit anderen.
Teilen
Inhaltsverzeichnis
- Verwenden Sie nicht das Stil-Feld in den Eigenschaften
- Verwenden Sie nicht die !important-Regel
- Erstellen von Vorlagen und Bausteinen
- Erstellen Sie ein UI-Themenmodul
- Verwenden Sie die integrierten CSS-Klassen
- Kopieren Sie die CSS-Stile
- Nutzen Sie die CSS-Stile
- Seien Sie konsequent
- Nutzen Sie vorgefertigte Lösungen
- Achten Sie auf die User-Experience
- Zusammenfassung
Wenn es um die Erstellung einer Benutzeroberfläche (UI) geht, hat jeder Entwickler seine eigenen Vorgehensweisen und verlässt sich häufig auf etablierte firmeninterne Muster. In diesem Artikel möchte ich die wertvollen Erkenntnisse teilen, die ich während meiner fünfjährigen Erfahrung in der Erstellung von Anwendungen auf der Mendix-Plattform gewonnen habe. Ich hoffe, dass die Konfrontation mit den folgenden Tipps und Best Practices Ihnen dabei helfen wird, Ihren UI-Erstellungsprozess zu verbessern. Außerdem möchte ich vermitteln, wie Sie wichtige Aspekte zur Priorisierung entdecken können.
Verwenden Sie nicht das Stil-Feld in den Eigenschaften
Es gilt als bewährte Vorgehensweise, nicht das Feld „Stil/Style“ im Eigenschaftenfenster zu verwenden. Jeder hinzugefügte CSS-Style fügt dem HTML-Element in der DOM-Struktur einen Inline-Style hinzu.
Die Verwendung von Inline-Styles wird aufgrund ihrer hohen CSS-Spezifität nicht empfohlen, sodass es praktisch unmöglich ist, sie mit CSS-Styles zu überschreiben, die von Entwicklern in SCSS/CSS-Dateien geschrieben wurden (ohne die !important-Regel zu verwenden).
TIPP: Erstellen Sie stattdessen Ihre eigene CSS-Klasse und fügen Sie sie dem Klassen-Feld im Eigenschafts-Panel hinzu oder verwenden Sie eine integrierte Klasse aus dem Atlas-UI-Framework.
Ich empfehle Ihnen, sich mit den CSS-Besonderheiten vertraut zu machen und die Reihenfolge zu überprüfen, in der die Stile vom Browser verwendet werden. Dies wird Ihnen helfen, in Zukunft Probleme beim Überschreiben von CSS-Styles zu vermeiden.
Verwenden Sie nicht die !important-Regel
Versuchen Sie, die Regel !important nicht in Ihrem CSS-Code zu verwenden. Stattdessen sollten Sie zunächst verstehen, warum der von Ihnen geschriebene Code nicht funktioniert. Ziehen Sie alternative Lösungen in Betracht, bevor Sie auf !important zurückgreifen. Überprüfen Sie die CSS-Spezifität des CSS-Selektors, den Sie überschreiben möchten und schreiben Sie Ihren eigenen Selektor mit demselben Wert – Sie können dafür einen Online-Rechner verwenden. Die Verwendung von !important löst keine Probleme im Code und wird nicht empfohlen, da es das Überschreiben und Beibehalten von CSS-Stilen erschwert.
In Situationen, in denen Sie externe Bibliotheken/Widgets verwenden, haben Sie keinen Einfluss auf den Code des Autors und es kann Ausnahmefälle geben, in denen die Verwendung von !important gerechtfertigt ist.
TIPP: In Mendix verwenden Hilfsklassen standardmäßig !important. Wenn Sie dies ändern möchten, navigieren Sie zur Datei _custom-variables.scss und setzen Sie die Variablen $important-flex, $important-spacing und !important-helpers auf false.
Erstellen von Vorlagen und Bausteinen
Wenn Ihr Designteam Ihnen Modelle oder Entwürfe Ihrer zukünftigen Anwendung zur Verfügung stellt, können Sie die Erstellung der Benutzeroberfläche mithilfe von Vorlagen und Bausteinen planen. Werfen Sie einen allgemeinen Blick auf die gesamte Anwendung und Sie werden sicherlich die sich wiederholenden Elemente identifizieren können. Erstellen Sie für gemeinsame Teile der Seiten Vorlagen. Erstellen Sie Bausteine für kleinere Layouts, Komponenten und Abschnitte.
Der Einsatz von Vorlagen und Bausteinen beschleunigt die Entwicklung Ihrer Anwendung erheblich und ist hilfreich, wenn mehrere Entwickler beteiligt sind.
TIPP: Das Erstellen von Mustern ist von entscheidender Bedeutung, wenn mehrere Personen an der Anwendung arbeiten. Jeder Entwickler kann unterschiedliche CSS-Klassen, Designeigenschaften und Layoutanordnungen für die Elemente auf der Seite verwenden. Die unterschiedlichen Ansätze der Entwickler können zu inkonsistenten Ergebnissen führen, wenn sich zwei scheinbar identische Seiten voneinander unterscheiden.
Erstellen Sie ein UI-Themenmodul
Eine weitere gute Vorgehensweise besteht darin, ein separates Modul zu erstellen. Speichern Sie in dem Modul Ihre Layouts, Vorlagen, Bausteine, Grafiken und CSS-Stile. Sie können ein solches Modul später exportieren und beim Erstellen einer anderen Anwendung weiter verwenden.
Es ist eine gute Idee zu Beginn eine Vorlage zu erstellen, die universell genug ist – anwendbar für jede Anwendung. Dadurch sparen Sie viel Zeit.
TIPP 1: Erstellen Sie zu Beginn der Anwendungsentwicklung ein UI-Modul und kopieren Sie Ihre ausgewählten Layouts aus der Atlas-Benutzeroberfläche (verfügbar in Marketplace-Modulen). Verwenden Sie nur Layouts aus Ihrem Modul. Auf diese Weise schützen Sie Ihre Layouts vor dem Überschreiben bei Aktualisierungen des Atlas UI-Frameworks und stellen sicher, dass Ihre Änderungen unberührt bleiben.
TIPP 2: Es wird empfohlen Stile im selben Modul zu speichern. Somit haben Sie alles gut organisiert und können gleichzeitig den Export für die zukünftige Verwendung in anderen Anwendungen vereinfachen.
TIPP 3: Legen Sie Ihr Modul als UI-Ressourcenmodul fest, indem Sie die Option „Als UI-Ressourcenmodul markieren“ auswählen, wenn Sie in Mendix Studio Pro auf den Modulnamen klicken.
Verwenden Sie die integrierten CSS-Klassen
Das Atlas-UI-Framework enthält integrierte sogenannte Helper-Classes für Flex, Abstand usw. Sie können für Widgets und zum Erstellen der Benutzeroberfläche aus in Mendix verfügbaren Elementen verwendet werden. Während die meisten Helper-Classes in den Designeigenschaften ausgewählt werden können, gibt es im Code des Atlas-UI-Frameworks zusätzliche Klassen. Es ist ratsam, diese integrierten Klassen zu nutzen, anstatt neue zu erstellen.
TIPP: Überprüfen Sie vor dem Erstellen einer neuen Klasse Atlas-Benutzeroberfläche. Vielleicht ist die gewünschte Klasse bereits vorhanden. Sie können sich auf die offizielle Dokumentation beziehen oder den Atlas-UI-Quellcode erkunden (Widgets haben ein separates Hilfsverzeichnis in Atlas Core und es lohnt sich, die Dateien _helper-classes.scss, _flex.scss und _spacing.scss zu überprüfen). Mit jedem neuen Projekt erweitern sich Ihre Kenntnisse über die integrierten Klassen.
Kopieren Sie die CSS-Stile
In neueren Versionen von Mendix Studio Pro ist es möglich, Stile zu kopieren. Sie können die ausgewählten Designeigenschaften und den Klassennamen von einem Widget in ein anderes kopieren.
TIPP: Um einen Stil zu kopieren, klicken Sie einfach mit der rechten Maustaste auf das ausgewählte Widget und wählen Sie im Menü „Stil kopieren“. Führen Sie dann auf dem Ziel-Widget, in das Sie die Stileinstellungen übertragen möchten, den gleichen Vorgang aus, wählen Sie jedoch „Stil einfügen“ aus dem Menü.
Nutzen Sie die CSS-Stile
Der Ansatz, den Sie bei der Arbeit mit CSS-Stilen wählen, ist entscheidend. Zunächst sollten Sie die sogenannten benutzerdefinierten Variablen ändern und integrierte Hilfsklassen verwenden. Nur wenn die erforderlichen Variablen oder Klassen nicht vorhanden sind, sollten Sie mit der Erstellung einer neuen CSS-Klasse fortfahren, um die gewünschten Änderungen am Widget oder Layout zu ermöglichen.
TIPP 1: Ändern Sie nichts an den Atlas-UI-Framework-Stilen (Atlas Core, Atlas Web Content). Das Ändern dieser Stile kann zu Konflikten beim Aktualisieren des Frameworks führen und möglicherweise Ihre Änderungen überschreiben. Selbst mit Backups wird es schwierig sein, die betroffenen Bereiche zu identifizieren. Es ist am besten, CSS-Stile in einem separaten Modul zusammen mit Ihren Variablen aufzubewahren und sie nur in das Hauptverzeichnis zu importieren.
TIPP 2: Ändern Sie zunächst die gemeinsamen Teile für das ausgewählte Widget und erstellen Sie dann bei Bedarf eine benutzerdefinierte CSS-Klasse, die Ihr Modifikator ist und die Basisstile für das angegebene Widget überschreibt.
TIPP 3: Es empfiehlt sich, Ihren Code in kleinere Dateien und Verzeichnisse mit passenden Namen aufzuteilen. Auf diese Weise können Sie den Code, den Sie ändern möchten, leicht finden und Ordnung halten. Ich empfehle Ihnen, sich mit der 7-1-Architektur vertraut zu machen.
TIPP 4: Verwenden Sie CSS-Code-Formatierer und Linters, um sicherzustellen, dass Ihr Code fehlerfrei und korrekt formatiert ist. Tools wie Prettier und die Stylelint-Erweiterung in VSCode können in dieser Hinsicht wertvoll sein.
Seien Sie konsequent
Sorgen Sie für Einheitlichkeit in Ihrer gesamten Anwendung, indem Sie besonders auf Abstände, Schriftgrößen, Schaltflächenfarben und das Layout der Elemente auf der Seite achten. Überprüfen Sie, ob alle Seiten in Ihrer Anwendung gleich aussehen, mit übereinstimmenden Komponentenabständen, einheitlichen Seitentitelüberschriften und mehr. Beständigkeit ist ein grundlegender Aspekte und wird das Erscheinungsbild der gesamten Anwendung erheblich verbessern.
TIPP 1: Bevor Sie Ihre Arbeit zum Testen einreichen, prüfen Sie, ob Ihre Webseite mit den bereits vorhandenen identisch ist.
TIPP 2: Es lohnt sich, vor Beginn der Arbeit Muster festzulegen, die im gesamten Entwicklungsprozess verwendet werden.
TIPP 3: Halten Sie sich an ein Design für Überschriften und Seitentitel und beachten Sie ein einheitliches Muster. Wenn Sie sich beispielsweise für die Verwendung von Camel Case entscheiden, wenden Sie diese Notation auf alle Instanzen an.
Nutzen Sie vorgefertigte Lösungen
Wenn Sie kein Experte für die Erstellung von Benutzeroberflächen und das Schreiben von CSS-Stilen sind, sollten Sie über die Verwendung einer vorgefertigten Vorlage nachdenken, die Sie bei Mendix Marketplace herunterladen können.
Ein solches Modul ist das Globus-Themenmodul, das ein universelles Design und eine Sammlung von Komponenten bietet, die Sie bei der Erstellung Ihrer Anwendung unterstützen. Es ist auch einfach, sich an das Branding Ihres Kunden anzupassen, indem Sie die Werte der SCSS-Variablen anpassen.
Um mehr über das Globus-Themenmodul zu erfahren, besuchen Sie die offizielle Globus-Webseite.
Achten Sie auf die User-Experience
Ein weiterer wichtiger Aspekt ist die Benutzererfahrung (User Experience, UX). Hier ist von entscheidender Bedeutung die Aufrechterhaltung konsistenter Muster und Verhaltensweisen auf allen Seiten einer Anwendung.
BEISPIEL: Wenn Sie ein Modul mit den Schaltflächen „Speichern“ und „Abbrechen“ verwenden, stellen Sie sicher, dass diese auf allen Seiten in denselben Farben und in derselben Reihenfolge angezeigt werden. Dies ermöglicht es den Benutzern, sich auf vertraute Muster von vorherigen Seiten zu verlassen.
Zusammenfassung
Die oben beschriebenen Vorgehensweisen und Tipps sind wesentliche Überlegungen beim Erstellen einer Benutzeroberfläche in Mendix. Durch Befolgen dieser Richtlinien können Sie eine konsistente und optisch ansprechende Benutzeroberfläche erstellen. Denken Sie daran, integrierte Klassen zu nutzen, Stilfunktionen zum Kopieren und Einfügen zu verwenden und auf Designelemente zu achten. Erwägen Sie außerdem die Verwendung vorgefertigter Vorlagen aus dem Mendix Marketplace und legen Sie Wert auf ein nahtloses Benutzererlebnis.
Ich hoffe, dass sich diese Best Practices und Tipps als wertvoll erweisen und Ihnen dabei helfen, qualitativ hochwertige Anwendungen bereitzustellen.
Viel Glück mit Ihren Projekten!
Ist ein erfahrener Senior UI Entwickler bei Objectivity, der sich auf Low-Code-Plattformen und Lösungen spezialisiert hat. Er bringt seinen Kollegen der Rapid Development Abteilung bei, wie man Layouts erstellt und in den richtigen Stilen schreibt. Er beteiligt sich an der Erstellung von Widgets und Erweiterungen auf Low-Code-Plattformen und teilt sein Wissen auf verschiedenen Konferenzen und Meetups mit anderen.
