UI Components

ChatGPT öffnen

In webforJ werden Anwendungen mit modularen Einheiten erstellt, die als Komponenten bekannt sind und eine schnelle und effiziente UI-Entwicklung ermöglichen. Das Framework bietet eine Reihe von grundlegenden Komponenten wie Schaltflächen, Eingabeelemente und Layout-Container. Nachdem Sie die Grundlagen gemeistert haben, können Sie die JavaDocs für eine detaillierte Übersicht über alle Komponenten und deren Funktionalitäten konsultieren.

Layouts

Layout-Komponenten bieten die Grundlage zur Strukturierung von Benutzeroberflächen und ermöglichen Entwicklern, Inhalte effizient zu organisieren. Diese Komponenten bieten verschiedene Möglichkeiten zur Steuerung der Anordnung von Kindkomponenten, sowohl für einfache als auch für komplexe Layouts.

Die folgenden Layout-Komponenten sind darauf ausgelegt, eine Vielzahl von Anwendungsfällen abzudecken, von responsive Design bis hin zu fortgeschrittener Inhaltsverwaltung.

AppLayout

Eine Container-Komponente, die ein strukturiertes Layout für die Navigation der Hauptanwendung und die Organisation von Inhalten bietet.

Toolbar

Eine horizontale Container-Komponente, die eine Reihe von Schaltflächen, Symbolen oder anderen Steuerelementen enthält, die typischerweise zur Ausführung von Aufgaben im aktuellen Kontext verwendet werden.

FlexLayout

Eine Layout-Komponente, die ihre Kinder gemäß den flexiblen Box-Regeln (Flexbox) für responsive Designs und Ausrichtungen anordnet.

ColumnsLayout

Eine Layout-Komponente, die ihre Kinder in mehrere vertikale Spalten anordnet und sich hervorragend für die Erstellung von Formularen und gitterähnlichen Strukturen eignet.

Splitter

Eine Layout-Komponente, die den verfügbaren Platz zwischen zwei Kindkomponenten aufteilt und es Benutzern ermöglicht, diese durch Ziehen der Trennerleiste zu ändern.

Drawer

Eine schiebende Panel-Komponente, die typischerweise für die Seitenavigation oder zur Unterbringung zusätzlicher Inhalte verwendet wird, die angezeigt oder ausgeblendet werden können.

Dialog

Eine modale Fenster-Komponente, die Inhalte überlagert, um wichtige Informationen anzuzeigen oder die Benutzerinteraktion zu fördern, wobei oft eine Benutzeraktion erforderlich ist, um sie zu schließen.

Login

Eine Komponente, die ein vorgefertigtes UI für die Benutzerauthentifizierung bereitstellt, typischerweise mit Feldern für Benutzername und Passwort sowie einem Absenden-Button.

TabbedPane

Eine Container-Komponente, die Inhalte in mehrere Registerkarten organisiert, sodass Benutzer zwischen verschiedenen Ansichten oder Abschnitten wechseln können.

Dateneingabe

Dateneingabe-Komponenten bieten wesentliche Werkzeuge zur Erfassung von Benutzereingaben und zur Verwaltung von Interaktionen innerhalb Ihrer Anwendung. Diese Komponenten sind vielseitig und ermöglichen den einfachen Aufbau interaktiver Formulare sowie die Erfassung verschiedener Datentypen.

TextField

Eine Eingabekomponente für die Eingabe und Bearbeitung von Textdaten in einer einzigen Zeile.

MaskedTextField

Eine Texteingabekomponente, die die Benutzereingabe auf ein bestimmtes Format oder Muster beschränkt, typischerweise für Felder wie Telefonnummern, Daten oder Kreditkartennummern verwendet.

NumberField

Eine Komponente, die ein standardmäßiges browserseitiges Eingabefeld für die Eingabe numerischer Werte bereitstellt, mit integrierten Steuerelementen zur Erhöhung oder Verminderung des Wertes.

MaskedNumberField

Eine numerische Eingabekomponente, die die Benutzereingabe auf ein bestimmtes numerisches Format oder Muster beschränkt und die Eingabe gültiger Zahlen wie Währungen, Prozentsätze oder andere formatierte Zahlen sicherstellt.

PasswordField

Eine Eingabekomponente in einer einzigen Zeile zur sicheren Eingabe und Maskierung von Passwortdaten.

DateField

Eine Komponente, die einen standardmäßigen browserseitigen Datumsauswähler bietet, um ein Datum über ein Eingabefeld auszuwählen.

MaskedDateField

Eine Datumseingabekomponente, die ein bestimmtes Datumsformat oder Muster durchsetzt, um sicherzustellen, dass der Benutzer ein gültiges Datum gemäß der definierten Maske eingibt.

TimeField

Eine Komponente, die einen standardmäßigen browserseitigen Zeitauswähler bietet, um einen Zeitwert über ein Eingabefeld auszuwählen.

MaskedTimeField

Eine Zeiteingabekomponente, die ein bestimmtes Zeitformat oder Muster durchsetzt, um sicherzustellen, dass der Benutzer eine gültige Zeit gemäß der definierten Maske eingibt.

DateTimeField

Eine Komponente, die einen standardmäßigen browserseitigen Datum- und Uhrzeitauswähler bietet, um sowohl Datum als auch Uhrzeit über ein einzelnes Eingabefeld auszuwählen.

ColorField

Eine Komponente, die einen standardmäßigen browserseitigen Farbauswähler bereitstellt und es Benutzern ermöglicht, eine Farbe aus einem Eingabefeld auszuwählen.

TextArea

Eine mehrzeilige Texteingabekomponente, die es Benutzern ermöglicht, größere Textblöcke einzugeben oder zu bearbeiten.

CheckBox

Eine Komponente, die eine binäre Option darstellt und es Benutzern ermöglicht, zwischen einem aktivierten (wahr) oder deaktivierten (falsch) Zustand umzuschalten.

RadioButton

Eine Komponente, die es Benutzern ermöglicht, eine einzelne Option aus einer Gruppe von sich gegenseitig ausschließenden Auswahlmöglichkeiten auszuwählen.

Switch

Eine Toggle-Komponente, die es Benutzern ermöglicht, zwischen zwei Zuständen, wie ein/aus oder wahr/falsch, mit einer Gleitbewegung zu wechseln.

ChoiceBox

Eine Komponente, die eine Dropdown-Liste von vordefinierten Optionen bietet und es Benutzern ermöglicht, eine Option aus der Liste auszuwählen.

ComboBox

Eine Komponente, die eine Dropdown-Liste mit einer bearbeitbaren Texteingabe kombiniert, sodass Benutzer entweder eine Option aus der Liste auswählen oder einen benutzerdefinierten Wert eingeben können.

ListBox

Eine Komponente, die eine scrollbarere Liste von Optionen anzeigt und es Benutzern ermöglicht, ein oder mehrere Elemente aus der Liste auszuwählen.

Optionsdialoge

Optionsdialoge bieten eine Möglichkeit, Benutzern Entscheidungen zu präsentieren oder sie um Bestätigung zu bitten, bevor sie mit einer Aktion fortfahren. Diese Komponenten sind entscheidend für die Erstellung interaktiver, entscheidungsbasierter Workflows, die es Benutzern ermöglichen, aus verschiedenen Optionen klar und strukturiert zu bestätigen, abzubrechen oder auszuwählen.

MessageDialog

Eine Dialogkomponente, die verwendet wird, um dem Benutzer Informationsnachrichten oder Warnungen anzuzeigen, typischerweise mit einer einzelnen OK-Schaltfläche zur Bestätigung der Nachricht.

ConfirmDialog

Eine Dialogkomponente, die den Benutzer auffordert, eine Aktion zu bestätigen oder abzubrechen, typischerweise mit Ja und Nein oder OK und Abbrechen-Schaltflächen.

InputDialog

Eine Dialogkomponente, die den Benutzer auffordert, Text oder Daten einzugeben und typischerweise ein Eingabefeld sowie Aktionsschaltflächen wie OK und Abbrechen bereitstellt.

FileChooserDialog

Eine Dialogkomponente, die es Benutzern ermöglicht, Dateien vom Server-Dateisystem zu durchsuchen und auszuwählen.

FileUploadDialog

Eine Dialogkomponente, die es Benutzern ermöglicht, Dateien von ihrem lokalen Dateisystem in die Anwendung hochzuladen.

FileSaveDialog

Eine Dialogkomponente, die es Benutzern ermöglicht, eine Datei an einem bestimmten Ort im Server-Dateisystem zu speichern.

Interaktion und Anzeige

Diese Kategorie umfasst Komponenten, die Benutzerinteraktionen erleichtern und Daten oder Anwendungszustände visuell darstellen. Diese Komponenten helfen Benutzern, sich in der Anwendung zu navigieren, Aktionen auszulösen und den Fortschritt oder die Ergebnisse durch dynamische visuelle Elemente zu verstehen.

Table

Eine Komponente, die verwendet wird, um Daten in einem strukturierten, tabellarischen Format mit Zeilen und Spalten anzuzeigen, und Funktionen wie Sortierung und Pagination unterstützt.

GoogleCharts

Eine Komponente, die mit Google Charts integriert ist, um verschiedene Arten von Diagrammen und visuellen Datenrepräsentationen in der Anwendung darzustellen.

Button

Eine klickbare Komponente, die eine Aktion oder ein Ereignis auslöst, wenn sie gedrückt wird.

Toast

Eine leichte, nicht-blockierende Benachrichtigungskomponente, die kurz eine Nachricht für den Benutzer anzeigt, bevor sie automatisch verschwindet.

Alert

Eine Komponente, die wichtige Nachrichten oder Warnungen in einem auffälligen Format anzeigt, um die Aufmerksamkeit des Benutzers zu erlangen.

DesktopNotification

Eine Komponente, die die native Benachrichtigungs-API des Browsers nutzt, um Benutzern benutzerdefinierte Desktop-Benachrichtigungen anzuzeigen.

Navigator

Eine anpassbare Paginierungskomponente zur Navigation in Datensätzen, die Layouts mit Schaltflächen für zuerst, zuletzt, weiter, zurück und schnellen Sprungfeldern unterstützt.

ProgressBar

Eine Komponente, die den Fortschritt einer Aufgabe oder eines Prozesses visuell darstellt, typischerweise als horizontale Leiste, die sich füllt, während Fortschritte gemacht werden.

Slider

Eine Komponente, die es Benutzern ermöglicht, einen Wert aus einem definierten Bereich auszuwählen, indem sie einen Griff entlang einer Spur ziehen.

BusyIndicator

Ein anwendungsweites visuelles Signal, typischerweise ein Spinner, das anzeigt, dass ein globaler Prozess im Gange ist.

Loading

Ein Scoped-Ladeindikator, der innerhalb einer bestimmten übergeordneten Komponente angezeigt wird und anzeigt, dass Inhalte oder Daten in diesem Abschnitt geladen werden.

Spinner

Eine Komponente, die eine rotierende Animation anzeigt, die typischerweise verwendet wird, um anzuzeigen, dass ein Prozess oder eine Aktion im Gange ist.

AppNav

Eine Komponente, die ein Navigationsmenü für die Anwendung bereitstellt, das typischerweise verwendet wird, um Links oder Navigationselemente zum Wechseln zwischen verschiedenen Abschnitten oder Ansichten aufzulisten.

Icon

Eine Komponente, die ein grafisches Symbol oder Bild anzeigt, das häufig verwendet wird, um eine Aktion, einen Status oder eine Kategorie in der Benutzeroberfläche darzustellen.

Terminal

Eine Komponente, die eine Kommandozeilenoberfläche (CLI) innerhalb der Anwendung simuliert und es Benutzern ermöglicht, texteingabebasierte Befehle einzugeben und auszuführen.

InfiniteScroll

Eine Komponente, die beim Scrollen mehr Elemente lädt, einen Loader anzeigt und nachverfolgt, wann alle Inhalte abgerufen wurden.

Refresher

Eine Komponente, die eine Pull-to-Refresh-Interaktion innerhalb scrollbarer Container ermöglicht – ideal für das dynamische Laden von Daten.

Tree

Eine Komponente zur Anzeige hierarchischer Daten, die es Benutzern ermöglicht, verschachtelte Elemente zu erweitern, zu reduzieren und damit zu interagieren.