UI Components

In ChatGPT öffnen

In webforJ werden Anwendungen mithilfe von modularen Einheiten erstellt, die als Komponenten bekannt sind und eine schnelle und effiziente Entwicklung von Benutzeroberflächen ermöglichen. Das Framework bietet eine Vielzahl wesentlicher Komponenten wie Schaltflächen, Eingabeelemente und Layout-Container. Nachdem Sie die Grundlagen beherrschen, können Sie die JavaDocs für einen detaillierten Überblick über alle Komponenten und deren Funktionalitäten konsultieren.

Layouts

Layout-Komponenten bilden die Grundlage für die Strukturierung von Benutzeroberflächen und ermöglichen es Entwicklern, Inhalte effizient zu organisieren. Diese Komponenten bieten verschiedene Möglichkeiten, die Anordnung von Kindkomponenten zu steuern, sei es für einfache oder komplexe Layouts.

Die folgenden Layout-Komponenten sind dafür konzipiert, eine Vielzahl von Anwendungsfällen zu behandeln, von responsive Designs bis hin zu fortgeschrittener Inhaltsverwaltung.

AppLayout

Eine Container-Komponente, die ein strukturiertes Layout für die Navigation und die Organisation von Inhalten auf der obersten Ebene bereitstellt.

Toolbar

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

FlexLayout

Eine Layout-Komponente, die ihre Kinder mithilfe von flexiblen Boxen (Flexbox) für responsives Design und Ausrichtung anordnet.

ColumnsLayout

Eine Layout-Komponente, die ihre Kinder in mehrere vertikale Spalten anordnet, nützlich zum Erstellen von Formularen und gitterähnlichen Strukturen.

Splitter

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

Drawer

Eine Gleitschrank-Komponente, die typischerweise für die seitliche Navigation oder zur Aufnahme zusätzlicher Inhalte verwendet wird, die ein- oder ausgeblendet werden können.

Dialog

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

Login

Eine Komponente, die eine vorgefertigte Benutzeroberfläche für die Benutzer-Authentifizierung bereitstellt, typischerweise mit Feldern für Benutzernamen und Passwort sowie einer Schaltfläche zum Senden.

Accordion

Eine vertikal gestapelte Reihe von zusammenklappbaren Panels, von denen jedes einen klickbaren Header hat, der die Sichtbarkeit des dazugehörigen Inhalts umschaltet.

TabbedPane

Eine Container-Komponente, die Inhalte in mehrere Tabs organisiert und es den Benutzern ermöglicht, zwischen verschiedenen Ansichten oder Abschnitten zu wechseln.

Dateneingabe

Dateneingabekomponenten bieten wichtige Werkzeuge zum Erfassen von Benutzereingaben und zum Verwalten von Interaktionen innerhalb Ihrer App. Diese Komponenten sind vielseitig und erleichtern das Erstellen interaktiver Formulare und das Sammeln verschiedener Arten von Daten.

TextField

Eine Eingabekomponente für eine Zeile zum Eingeben und Bearbeiten von Textdaten.

MaskedTextField

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

NumberField

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

MaskedNumberField

Eine numerische Eingabekomponente, die die Benutzereingabe auf ein bestimmtes numerisches Format oder Muster beschränkt, um die gültige Eingabe von Zahlen wie Währungen, Prozentsätzen oder anderen formatierten Zahlen sicherzustellen.

PasswordField

Eine Eingabekomponente für eine Zeile zum sicheren Eingeben und Maskieren von Passwortdaten.

DateField

Eine Komponente, die einen standardmäßigen browserbasierten Datumsauswähler für die Auswahl eines Datums über ein Eingabefeld bereitstellt.

MaskedDateField

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

TimeField

Eine Komponente, die einen standardmäßigen browserbasierten Zeitpicker für die Auswahl eines Zeitwerts über ein Eingabefeld bereitstellt.

MaskedTimeField

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

DateTimeField

Eine Komponente, die einen standardmäßigen browserbasierten Datum- und Zeitwähler für die Auswahl von Datum und Uhrzeit über ein einzelnes Eingabefeld bereitstellt.

ColorField

Eine Komponente, die einen standardmäßigen browserbasierten Farbwähler bereitstellt, mit dem Benutzer eine Farbe aus einem Eingabefeld auswählen können.

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 markierten (wahr) oder einem nicht markierten (falsch) Zustand zu wechseln.

RadioButton

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

Switch

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

ChoiceBox

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

ComboBox

Eine Komponente, die eine Dropdown-Liste mit einem bearbeitbaren Texteingabefeld kombiniert und es Benutzern ermöglicht, entweder eine Option aus der Liste auszuwählen oder einen benutzerdefinierten Wert einzugeben.

ListBox

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

Upload

Ein Inline-Dateiauswähler, der es Benutzern ermöglicht, eine oder mehrere Dateien von ihrem lokalen Computer auszuwählen und sie auf den Server hochzuladen, mit Drag-and-Drop, Filtern und Datei-spezifischem Event-Tracking.

Optionsdialoge

Optionsdialoge bieten eine Möglichkeit, Benutzern Entscheidungen zu präsentieren oder sie vor dem Fortfahren mit einer Aktion um Bestätigung zu bitten. Diese Komponenten sind entscheidend für die Erstellung interaktiver, entscheidungsorientierter Arbeitsabläufe, die es Benutzern ermöglichen, zu bestätigen, abzulehnen oder aus verschiedenen Optionen klar und strukturiert zu wählen.

MessageDialog

Eine Dialogkomponente, die verwendet wird, um Informationsnachrichten oder Warnungen an den Benutzer anzuzeigen, typischerweise mit einer einzigen OK-Schaltfläche, um die Nachricht anzuerkennen.

ConfirmDialog

Eine Dialogkomponente, die den Benutzer um Bestätigung oder Absage einer Aktion bittet, typischerweise mit Schaltflächen für Ja und Nein oder OK und Abbrechen.

InputDialog

Eine Dialogkomponente, die den Benutzer auffordert, Text oder Daten einzugeben, oft mit einem Eingabefeld sowie Aktionsschaltflächen wie OK und Abbrechen.

FileChooserDialog

Eine Dialogkomponente, die es Benutzern erlaubt, Dateien im Server-Dateisystem zu durchsuchen und auszuwählen.

FileUploadDialog

Eine Dialogkomponente, die es Benutzern ermöglicht, Dateien von ihrem lokalen Dateisystem in die App 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 Benutzereingaben erleichtern und Daten oder Anwendungszustände visuell anzeigen. Diese Komponenten helfen Benutzern, durch die App zu navigieren, Aktionen auszulösen und Fortschritte oder Ergebnisse durch dynamische visuelle Elemente zu verstehen.

Table

Eine Komponente, die Daten in einem strukturierten, tabellarischen Format mit Zeilen und Spalten anzeigt und Funktionen wie Sortierung und Seitenumbruch unterstützt.

GoogleCharts

Eine Komponente, die mit Google Charts integriert ist, um verschiedene Arten von Diagrammen und visuellen Daten darzustellen.

Button

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

Toast

Eine leichte, nicht-blockierende Benachrichtigungs-Komponente, die kurzzeitig eine Nachricht an 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 erregen.

Badge

Eine kleine Etikettenkomponente zur Anzeige von Zähler, Status oder kurzen Metadaten mit Unterstützung für Themen, Größen und Symbole.

DesktopNotification

Eine Komponente, die die native Notification-API des Browsers nutzt, um Benutzer mit benutzerdefinierten Desktopbenachrichtigungen zu benachrichtigen.

Navigator

Eine anpassbare Seitenkomponente zur Navigation durch Datensätze, die Layouts mit ersten, letzten, nächsten, vorherigen Tasten und Schnellzugriffsfeldern 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 Indikator, typischerweise ein Spinner, der signalisiert, dass ein globaler Prozess im Gange ist.

Loading

Ein örtlicher 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, typischerweise verwendet, um anzuzeigen, dass ein Prozess oder eine Aktion im Gange ist.

AppNav

Eine Komponente, die ein Navigationsmenü für die App bereitstellt, typischerweise verwendet zum Auflisten von Links oder Navigationselementen zum Wechseln zwischen verschiedenen Abschnitten oder Ansichten.

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 Befehlszeilenschnittstelle (CLI) innerhalb der App simuliert und es Benutzern ermöglicht, textbasierte Befehle einzugeben und auszuführen.

InfiniteScroll

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

Refresher

Eine Komponente, die eine Pull-to-Refresh-Interaktion innerhalb scrollbarer Container ermöglicht – ideal zum dynamischen Laden von Daten.

Tree

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

Avatar

Eine Komponente zur Anzeige von Benutzerprofilbildern oder Initialen, mit Unterstützung für verschiedene Größen, Formen und Themen.

MarkdownViewer

Eine Komponente zur Anzeige von Markdown-Inhalten mit schrittweiser, zeichenweiser Darstellung, ideal für KI-Chatoberflächen und Streaming-Text.