Der Mendix UI Framework ist buchstäblich der Blickfang in unserem kürzlich angekündigten Mendix DX-Release (erhältlich ab 3. August)rd). Dieses neue Framework bietet einen umfassenden Satz an UI-Mustern, Themen, Navigationslayouts und Seitenvorlagen, mit denen Entwickler einfacher ansprechende und reaktionsfähige Anwendungen erstellen können.
Interessanterweise begann das UI Framework als Projekt für unsere R&D Research Days. Mendix, wir planen diese Tage regelmäßig, um an innovativen Ideen zu arbeiten, die Ihrer Meinung nach interessant wären, um sie zu erkunden oder zur Plattform beizutragen. Am Ende des Tages werden Konzepte oder Prototypen präsentiert und die Kandidaten mit den meisten Stimmen werden in Produkte umgesetzt. Nun, diese Idee wurde mit großer Begeisterung aufgenommen.
Wie unsere Kunden und Partner wollten wir die Möglichkeit haben, das Erscheinungsbild eines wachsenden Portfolios an Mendix Anwendungen. Falls Sie es nicht wussten, wir bauen intern viel auf Mendix, einschließlich Dev Center, Cloud Portal, App Store und zahlreichen internen Anwendungen.
Mit dem UI-Framework haben wir jetzt mehr Flexibilität, um das gewünschte Erscheinungsbild dieser Anwendungen auf mehreren Ebenen beizubehalten. Durch einfaches Aktualisieren einer Bibliothek können wir alle Anwendungen auf einmal aktualisieren oder einzelne auswählen. Darüber hinaus macht es das Framework einfach, jeder Anwendung ihr eigenes benutzerdefiniertes Styling zu geben. Wenn unser Marketingteam die Mendix Im App Store könnten wir beispielsweise einen benutzerdefinierten Ordner erstellen, der einen Satz benutzerdefinierter Variablen für diese bestimmte Anwendung enthält.
Der Mendix UI Framework
Wir haben das geschaffen Mendix UI-Framework, das es Entwicklern ohne umfassende technische und gestalterische Kenntnisse ermöglicht, ansprechende, reaktionsfähige Multi-Device-Anwendungen zu erstellen. Das Framework ermöglicht es Ihnen, das Erscheinungsbild Ihrer Anwendung auf mehreren Ebenen zu definieren, einschließlich Themen, Navigationslayouts, Seitenvorlagen, Designelementen und einem leistungsstarken CSS/Sass-Framework. Lassen Sie uns jeden dieser Aspekte genauer untersuchen.
Themen
Wenn Sie eine neue Anwendung erstellen, können Sie zwischen einer Vielzahl von Themen wählen, die alle auf dem Mendix UI-Framework. Wie Sie in der folgenden Präsentation sehen können, können die Themes gleich aussehen, aber auch völlig unterschiedlich sein. Ohne großen Aufwand können Sie Ihre Anwendungen schnell im gewünschten Look and Feel gestalten. Jedes Theme ist selbstverständlich responsiv und geräteübergreifend.
Navigationslayouts
Um schnell eine konsistente Navigation in Ihrer gesamten Anwendung zu erstellen, führen wir Navigationslayouts ein. Die Layouts steuern, wie Sie durch Ihre App navigieren, mit Haupt- und Untermenüs in der oberen oder seitlichen Leiste. Ein Satz Navigationslayouts für jeden Gerätetyp (Telefon, Tablet oder Desktop) ist im Lieferumfang der Designs enthalten.
Page Templates
Wir haben in unseren internen Projekten festgestellt, dass man sehr viel Zeit damit verbringen kann, das richtige Seitenlayout und die richtige Interaktion zu entwerfen. Und ehrlich gesagt, ohne die Einbeziehung eines UI-Experten ist das Ergebnis normalerweise nicht so toll. Ich könnte die Größe meines UX-Teams problemlos verdoppeln und stünde trotzdem vor der Herausforderung, den Bedarf an UI-Experten zu decken.
Also haben wir uns UI-Muster angesehen und beschlossen, diese in Produkte umzusetzen, indem wir Seitenvorlagen anbieten. Dabei handelt es sich um vordefinierte Vorlagen für eine umfangreiche Reihe von Seitentypen wie Übersicht, Master-Detail, Dashboard, Standort und Assistent, um nur einige zu nennen. Alle sind responsiv und für jeden Gerätetyp optimiert.
Design-Elemente
Zu guter Letzt die Mendix UI Framework verfügt über einen kompletten Satz von Designelementen. Durch die Verwendung von Designelementen wird der Standard Mendix Widgets können schnell an Ihre Vorlieben in Bezug auf Stil, Farbe, Größe und Ausrichtung angepasst werden. Für jedes Designelement haben wir eine große Auswahl an Variationen erstellt, mit denen Sie in der gesamten Anwendung ein unterschiedliches Erscheinungsbild erstellen können, ohne jede Komponente manuell gestalten zu müssen. Beispielsweise kann das Designelement „Tabs“ auf sieben verschiedene Arten verwendet werden, indem einfach die in der Mendix UI-Framework.
Technologie hinter dem Framework
Werfen wir einen Blick hinter die Kulissen und sehen, wie wir das Framework erstellt haben und wie Mendix Community-Mitglieder können es nutzen oder sogar erweitern.
Das Framework besteht aus CSS und dem Präprozessor Sass (optional, aber sehr empfehlenswert). Sie kennen sich vielleicht mit CSS aus und wissen, dass es ziemlich einfach ist, das Erscheinungsbild einer Anwendung zu ändern. CSS allein kann Spaß machen, aber Stylesheets werden immer größer, komplexer und schwieriger zu pflegen. Hier kann ein Präprozessor wie Sass helfen. Sass ermöglicht Ihnen die Verwendung von Funktionen, die in CSS nicht vorhanden sind, wie Variablen, Inline-Import, Verschachtelung und vieles mehr. Mit Sass können wir richtige Ordner und Dokumentationen erstellen. Sobald Sie anfangen, mit Sass herumzubasteln, wird Ihre vorverarbeitete Sass-Datei als normale CSS-Datei exportiert, die Sie in Ihrer Anwendung verwenden können.
Bootstrap-Integration
Mendix führte die Verwendung von Bootstrap mit der Veröffentlichung von ein Mendix 5.0. In dem Mendix UI Framework haben wir darauf geachtet, die Bootstrap-Standards einzuhalten und zusätzliche Verbesserungen im Business Modeler vorzunehmen. Eine große Verbesserung mit dem Mendix DX Release besteht darin, dass wir einige neue Widgets für den Modeler erstellt haben, darunter:
Layoutraster
Wir haben das Widget „Layout Grid“ in den Modeler integriert, damit unsere Entwickler problemlos Rastersysteme erstellen können, die zu 100 % in Bootstrap integriert sind. Layout Grids werden zum Erstellen von Seitenlayouts durch eine Reihe von Zeilen und Spalten verwendet, die Ihren Inhalt enthalten.
Formulargruppen (horizontal / vertikal)
Dieses Widget sieht vielleicht minimalistisch aus, aber es ist eine große Veränderung im Vergleich zur traditionellen Widget-Entwicklung. Es ist nicht mehr nötig, separate Beschriftungen oder Eingaben in Formulare einzufügen. Die Formulargruppe macht es extrem einfach, richtige Formulare mit Integration von Bootstrap zu erstellen. Wählen Sie mit nur einem Mausklick, ob Sie Ihre Beschriftungen und Eingaben vertikal oder horizontal platzieren möchten.
Glyphicons
Glyphicons sind nun Teil des Modelers und können für eine Vielzahl von Widgets verwendet werden. Weitere Informationen finden Sie in diesem Blog-Post.
Anpassen
Erstellen Sie Ihr eigenes benutzerdefiniertes Design basierend auf dem Mendix UI Framework oder sogar zum Framework beitragen auf GithubWir haben eine detaillierte, aber einfache Anleitung um Ihnen den Einstieg in die Erstellung Ihres eigenen Designs zu erleichtern.
Helfen Sie uns gerne, das Framework zu verbessern, und geben Sie uns Feedback, um sicherzustellen, dass wir als Mendix Community verfügt über alle notwendigen Werkzeuge, um unsere Arbeit zu erledigen.
Was kommt als nächstes für die Mendix UI-Framework?
Diese Version ist nur der Anfang! In Zukunft werden wir Bootstrap noch enger in den Business Modeler integrieren. Darüber hinaus werden Zugänglichkeit, Webstandards und WYSIWYG weiterhin eine wichtige Rolle spielen, damit wir Entwicklern helfen können, noch schneller großartige Anwendungen bereitzustellen.
Der Mendix DX Release erscheint am 3. Augustrd, also bleiben Sie dran. In der Zwischenzeit freuen wir uns über Ihr Feedback!