Widgets: Die UI-Bausteine
In einem früheren Artikelhabe ich die 3 Komponenten des Domänenmodells und den Aufbau der Grundlage einer App durchgegangen. Jetzt werde ich mich auf die Bausteine der Benutzeroberfläche konzentrieren. Die Benutzeroberfläche besteht aus Seiten, innerhalb derer Benutzer navigieren. Anwendungsseiten sind mit CSS gestaltet und mit auf JavaScript basierenden Widgets modelliert.
Die meisten Widgets in unserem App Store, wie Datenraster, Eingabetext und Dropdown-Menüs, sind standardmäßig enthalten. In meinem ersten Artikel habe ich einige meiner Lieblings-Widgets vorgestellt. Heute werden wir uns die wichtigsten Widgets genauer ansehen, die zu einer großartigen Benutzeroberfläche beitragen, und zeigen, wie einfach es ist, mit ihnen zu arbeiten.
Die Beispiele, die ich in diesem Beitrag verwende, stammen aus unserem App Store Mitarbeiterverzeichnis-App.
Datenansicht und Datenraster
Die Datenansicht und das Datenraster sind ein Mendix Das A und O eines jeden Entwicklers. Sie bilden die Grundlage für die Anzeige dynamischer Daten für Endbenutzer. Die Datenansicht zeigt ein einzelnes Objekt in der Datenbank, während das Datenraster eine Liste von Objekten in der Datenbank anzeigt.
Überlegen Sie, welche Übersichtsseiten Sie benötigen. Übersichtsseiten lassen sich am einfachsten erstellen, indem Sie einer Seite ein Datenraster hinzufügen und die Entität auswählen, die Sie anzeigen möchten. Von dort aus fülle ich die restlichen Seiten immer automatisch aus und generiere sie automatisch. Nachdem ich die Hauptseiten erstellt habe, zeige ich nur die für die Benutzer relevanten Daten an und korrigiere die Benutzeroberfläche, indem ich Container, Gruppenfelder oder Registerkarten hinzufüge.
Als Mendix Entwickler, wenn Sie zur Seite „Desktop_Employee_Directory“ gehen, können Sie die Verwendung von Groupbox und einer Datenansicht zusammen mit dem Listening Grid sehen. Ich fordere Sie auf, mit allen Tools und Widgets zu experimentieren!
Abbildung 1: Beispiel einer Seite mit GroupBox und Datenansicht
Abbildung 2: Beispiel dessen, was der Endbenutzer sieht
Eingang
Eingabe-Widgets zeigen die Attribute innerhalb einer Entität. Sie können je nach Datentyp unterschiedliche Eingabefelder haben. Im folgenden Beispiel gibt es drei Arten von Eingabe-Widgets.
- Das Texteingabe-Widget wird für Zeichenfolgen und andere alphanumerische Datentypen verwendet.
- Der Datumsdatentyp zeigt das Datum an, an dem der Mitarbeiterdatensatz erstellt wurde. Das gleiche Datumseingabe-Widget wird auch zum Anzeigen des Geburtsdatums verwendet.
- Die Optionsfeldliste wird verwendet, um das Geschlecht des Mitarbeiters anzuzeigen. Wir hätten auch das Dropdown-Eingabe-Widget verwenden können, aber die Optionsfeldliste aus dem App Store bietet eine ansprechendere Benutzeroberfläche.
Abbildung 3: Beispiel für Eingabe-Widgets – zeigt das Desktop_EmployeeSnippet
Abbildung 4: Beispiel dessen, was der Endbenutzer sehen wird
Snippets
Snippets sind die größte Ergänzung in Mendix 5+ und eines meiner Lieblingstools. Das Snippets-Widget ist hilfreich, wenn Sie Seiten oder Layoutkomponenten wiederverwenden möchten.
In der Mitarbeiterverzeichnis-App sind die Mitarbeiterinformationen ein Snippet, das auf zwei verschiedenen Seiten verwendet wird (siehe unten).
Abbildung 5: Anzahl der Aufrufe der Mitarbeiterinformationen – in den Mitarbeiterdetails und beim Anlegen neuer Mitarbeiter
Anstatt dieselben Informationen auf mehreren Seiten zu generieren, können Sie ein Snippet einmal erstellen und es so oft aufrufen, wie Sie möchten! Durch die Verwendung der Snippets müssen Sie die Datenansicht oder die Datenrasterinformationen nur an einer Stelle ändern, was die Arbeit effizienter macht. Darüber hinaus werden die Seiten schneller geladen!
Ich habe kürzlich Snippets in einem Projekt verwendet und fand sie unglaublich nützlich. Weitere Informationen zur Verwendung von Snippets finden Sie unter fehlen uns die Worte. hilfreicher Artikel! Sehen Sie sich die Mitarbeiterverzeichnis-App und weitere Anwendungsbeispiele in unserem App Store.
Mendix Entwickler sehen, was die Benutzer sehen
Wenn es an der Zeit ist, die Benutzeroberfläche zu erstellen, sind Widgets ein Muss. Sie machen die UI-Entwicklung viel einfacher, weil sie intuitiv sind. Als Mendix Entwickler, Sie sehen mehr oder weniger das, was der Benutzer sieht. Und während die Mendix Der App Store verfügt über zahlreiche vorgefertigte Widgets und Komponenten und die Community ist stets dazu ermutigt, weitere Ideen beizutragen.




