OutSystems UI-Komponenten richtig einsetzen

OutSystems UI-Komponenten richtig einsetzen

 

Der richtige Einsatz der OutSystems UI-Komponenten kann für Entwickler, die den UI-Entwicklungsprozess rationalisieren möchten, einen entscheidenden Unterschied machen.

Anstatt UI-Elemente von Grund auf neu zu erstellen, bietet OutSystems eine breite Palette vorgefertigter Komponenten, die flexibel, anpassbar und einfach zu verwenden sind. In diesem Artikel werden wir einige Best Practices für die Verwendung von OutSystems UI-Komponenten untersuchen, um sicherzustellen, dass Sie das Beste aus diesem leistungsstarken Tool herausholen.

Anpassung und Anpassungsfähigkeit mit OutSystems UI-Komponenten

Einer der größten Vorteile der Verwendung von OutSystems UI-Komponenten ist das hohe Maß an Flexibilität und Anpassbarkeit, das sie bieten. Die Plattform bietet eine große Auswahl an vorgefertigten UI-Elementen, wie z.B. Schaltflächen, Formulare, Tabellen und Diagramme. Diese UI-Komponenten sind so konzipiert, dass sie nahtlos zusammenarbeiten und sich leicht an spezifische Designanforderungen anpassen lassen.

Um die Anpassung weiter zu erleichtern, bietet die OutSystems-Plattform einen visuellen Editor, mit dem Entwickler UI-Komponenten per Drag & Drop auf einen Bildschirm ziehen können. Damit entfällt die Notwendigkeit, Code zu schreiben, und die Erstellung komplexer Layouts wird einfacher.

Trotz der Einfachheit von Drag-and-Drop vermischen sich einige Konzepte immer noch mit traditionellen Codekonzepten. Ein einfaches Beispiel, das bei Anfängern häufig anzutreffen ist, ist die übermäßige Verwendung von Prozentwerten und/oder Pixeln anstelle des responsiven Rasters von OutSystems für Layout-Anpassungen.

Anstatt zum Beispiel einen Container mit 50% der Gesamtgröße zu definieren:

Der richtige Weg ist, einen Container mit 6 Spalten zu definieren:

Die visuelle Ausgabe im Browser ist auf den ersten Blick die gleiche, aber der große Unterschied ist, dass sie standardmäßig responsiv und optimiert ist. Verschiedene Dinge verhalten sich anders, wenn wir die Plattform so nutzen, wie sie es sollte.

Werfen wir einen Blick auf einen der Unterschiede bei der Verwendung von Prozentsätzen und/oder anderen Kennzahlen im Vergleich zur Verwendung der responsiven Rasterspalten von OutSystems:

• Bei Prozentsätzen sehen wir, dass nur der Prozentsatz hinzugefügt wird, wenn wir das Element inspizieren.

• Bei der Verwendung der responsiven Grid-Spalten (1 Spalte, 2 Spalten, 3 Spalten usw.) kommen weitere Mechanismen zum Tragen, die dafür sorgen, dass Sie als Entwickler nicht an alles denken müssen, denn OutSystems hat bereits an vieles gedacht.

Wie bereits erwähnt, hat das responsive Raster standardmäßig 12 Spalten, aber Sie können es direkt im Thema Ihrer Anwendung anpassen:

Die gesamte OutSystems UI-Bibliothek ist veröffentlicht unter Outsystemsui.outsystems.com. Es ist wichtig, die Komponenten zu kennen, da es sehr häufig vorkommt, dass Anfänger damit beginnen, Dinge nachzubauen, die bereits existieren.

Eine wichtige Ergänzung für das Studium und auch für den Alltag eines OutSystems-Entwicklers ist das CheatSheet.

Das CheatSheet ist ein Index der OutSystems UI-Bibliothek, in dem Sie Muster, Farben, Komponenten und alle anderen in der Bibliothek definierten Elemente leicht identifizieren können:

Outsystemsui.outsystems.com/OutSystemsUIWebsite/CheatSheet

Reaktionsfähiges Design

OutSystems bietet mehrere Klassen, die Entwickler verwenden können, um responsive Designs zu erstellen, z. B. ".desktop", ".phone" und ".tablet". Mit diesen Klassen können Entwickler unterschiedliche Stile für verschiedene Bildschirmgrößen festlegen, ohne dass Media-Queries erforderlich sind. Die Verwendung dieser Klassen kann den Umfang des CSS-Codes, der für die Erstellung von responsiven Designs benötigt wird, erheblich reduzieren und macht es einfacher und schneller, UI-Elemente zu erstellen, die auf verschiedenen Geräten funktionieren.

Angenommen, Sie möchten einem Container mit der Klasse "my-element" auf verschiedenen Bildschirmgrößen einen anderen Stil zuweisen. In CSS wäre der beste Ansatz die Verwendung des Medienabfragen:

OutSystems verfügt bereits über mehrere Mechanismen, um das gleiche Ziel zu erreichen, und da es sich um eine Abstraktion handelt, geht es sogar noch weiter. Sehen Sie sich die Klassen an, die wir in OutSystems-Anwendungen zur Verfügung haben:

Gerät: .desktop, .tablet, .phone, .iphonex

Ausrichtung: .landscape, .portrait

Browser: .chrome, .firefox, .edge, .safari, etc.

Betriebssystem: .windows, .osx, .ios, .android, etc.

Erkennung von Touch-Geräten: .is--touch

Die oben genannten Klassen sind in jeder Anwendung, die Sie auf der Plattform erstellen, standardmäßig verfügbar. Wir können unseren Code noch einfacher gestalten, um das gleiche Problem zu lösen, das wir zuvor gelöst haben:

Weitere Einzelheiten zu anderen Einrichtungen/Beschleunigern, die die Plattform bietet, finden Sie unter:Responsive UI

Zugänglichkeit

Barrierefreiheit ist ein wichtiger Aspekt bei der Erstellung von UI-Elementen für Webanwendungen. Glücklicherweise sind die UI-Komponenten von OutSystems so konzipiert, dass sie zugänglich sind und den WCAG 2.1-Standards entsprechen. Diese Standards definieren Richtlinien für die Erstellung barrierefreier Webinhalte für Menschen mit Behinderungen, einschließlich Menschen mit visuellen, auditiven, motorischen und kognitiven Einschränkungen.

Die UI-Komponenten von OutSystems sind so konzipiert, dass sie unabhängig von dem Gerät oder der Software, mit der Sie auf die Anwendung zugreifen, einfach zu navigieren und zu verwenden sind. Dazu gehören eindeutige Beschriftungen und Beschreibungen für Eingabefelder, die Möglichkeit, mit der Tastatur durch die Elemente der Benutzeroberfläche zu navigieren, Unterstützung für Bildschirmlesegeräte und vieles mehr.

Fazit

Nun, wir sind am Ende dieses Artikels über die Verwendung von OutSystems UI-Komponenten angelangt. Ich hoffe, es hat Ihnen genauso viel Spaß gemacht, ihn zu lesen, wie mir, ihn zu schreiben!

Wie wir gesehen haben, kann die Verwendung vorgefertigter Komponenten eine großartige Möglichkeit sein, den Entwicklungsprozess zu beschleunigen und den Entwicklern das Leben zu erleichtern, insbesondere denjenigen, die neu im UI-Design sind. Und die OutSystems-Plattform bietet eine unglaubliche Vielfalt an UI-Komponenten, die sich mit einem visuellen Editor leicht anpassen lassen. Das bedeutet, dass Sie komplexe Layouts erstellen können, ohne eine einzige Zeile Code zu schreiben!

Aber natürlich ist es wichtig, sich daran zu erinnern, dass trotz der Einfachheit der Verwendung dieser Komponenten ein gewisses technisches Wissen erforderlich ist, um sie bestmöglich zu nutzen. Denn manchmal können wir vor lauter Praktikabilität wichtige Konzepte vergessen, wie z.B. die richtige Verwendung von responsiven Rastern.

Ich hoffe jedenfalls, dass dieser Artikel für Sie nützlich war und dass er Ihnen helfen kann, mit den UI-Komponenten der OutSystems-Plattform tolle Projekte zu erstellen! Hier ist ein kostenloser Link, um es auszuprobieren!

Besuchen Sie mein OutSystems Journal