UI Components

In ChatGPT öffnen

In webforJ werden Anwendungen mithilfe modularer Einheiten, die als Komponenten bekannt sind, erstellt, die eine schnelle und effiziente UI-Entwicklung ermöglichen. Das Framework bietet eine Vielzahl grundlegender Komponenten wie Schaltflächen, Eingabeelemente und Layout-Container. Nachdem Sie die Grundlagen gemeistert haben, können Sie die JavaDocs zu einer detaillierten Übersicht über alle Komponenten und deren Funktionen konsultieren.

Layouts

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

Die folgenden Layout-Komponenten sind so konzipiert, dass sie eine breite Palette von Anwendungsfällen abdecken, von responsivem Design bis hin zu fortschrittlichem Content-Management.

AppLayout

Eine Containerkomponente, die ein strukturiertes Layout für die übergeordnete App-Navigation und die Inhaltsorganisation bereitstellt.

Toolbar

Ein horizontaler Container, der eine Gruppe von Aktionsschaltflächen, Symbolen oder anderen Steuerelementen hält, die typischerweise für Aufgaben verwendet werden, die mit dem aktuellen Kontext verbunden sind.

FlexLayout

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

ColumnsLayout

Eine Layout-Komponente, die ihre Kinder in mehrere vertikale Spalten anordnet, nützlich für die Erstellung von Formularen und gitterartigen Strukturen.

Splitter

Eine Layout-Komponente, die den verfügbaren Platz zwischen zwei untergeordneten Komponenten aufteilt und es den Benutzern ermöglicht, diese durch Ziehen des Splitterbalkens zu ändern.

Drawer

Eine schiebende Paneelkomponente, die typischerweise für die Seitennavigation oder zur Unterbringung zusätzlicher Inhalte verwendet wird, die angezeigt oder verborgen werden können.

Dialog

Eine modale Fensterkomponente, die Inhalte überlagert, um wichtige Informationen anzuzeigen oder die Interaktion des Benutzers anzufordern, oft mit der Notwendigkeit, dass der Benutzer eine Aktion zum Schließen ausführt.

Login

Eine Komponente, die eine vorkonzipierte Benutzeroberfläche für die Benutzerauthentifizierung bereitstellt, typischerweise mit Feldern für Benutzernamen und Passwort sowie einer Schaltfläche zum Absenden.

Accordion

Ein vertikal gestapeltes Set von zusammenklappbaren Paneelen, von denen jedes einen klickbaren Header hat, der die Sichtbarkeit seines Inhaltsbody umschaltet.

TabbedPane

Eine Containerkomponente, die Inhalte in mehrere Registerkarten organisiert und es den Benutzern ermöglicht, zwischen verschiedenen Ansichten oder Abschnitten zu wechseln.

Dateneingabe

Dateneingabekomponenten bieten essentielle Werkzeuge zum Erfassen von Benutzereingaben und für die Verwaltung von Interaktionen innerhalb Ihrer App. Diese Komponenten sind vielseitig und erleichtern den Aufbau interaktiver Formulare und das Sammeln verschiedener Datenarten.

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 für Felder wie Telefonnummern, Daten oder Kreditkartennummern verwendet.

NumberField

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

MaskedNumberField

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

PasswordField

Eine Eingabekomponente für eine Zeile, um Daten zu Passwort sicher einzugeben und zu maskieren.

DateField

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

MaskedDateField

Eine Dateneingabekomponente, 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 Zeitauswähler zur 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 nach der definierten Maske eingibt.

DateTimeField

Eine Komponente, die einen standardmäßigen browserbasierten Datum- und Zeitauswähler zur Auswahl von Datum und Zeit über ein einziges Eingabefeld bereitstellt.

ColorField

Eine Komponente, die einen standardmäßigen browserbasierten Farbauswä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 den Benutzern ermöglicht, zwischen einem aktiven (wahr) oder inaktiven (falsch) Zustand zu wechseln.

RadioButton

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

Switch

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

ChoiceBox

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

ComboBox

Eine Komponente, die eine Dropdown-Liste mit einem editierbaren Texteingabefeld kombiniert und es den 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, eines oder mehrere Elemente aus der Liste auszuwählen.

Optionsdialoge

Optionsdialoge bieten eine Möglichkeit, den Benutzern Auswahlmöglichkeiten zu präsentieren oder sie um Bestätigung zu bitten, bevor sie mit einer Aktion fortfahren. Diese Komponenten sind unerlässlich, um interaktive, entscheidungsgetriebenen Workflows zu erstellen, und ermöglichen es den Benutzern, klar und strukturiert zu bestätigen, abzulehnen oder aus verschiedenen Optionen auszuwählen.

MessageDialog

Eine Dialogkomponente, die verwendet wird, um Informationsnachrichten oder Warnungen an den Benutzer 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 abzulehnen, typischerweise mit Ja und Nein oder OK und Abbrechen-Schaltflächen.

InputDialog

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

FileChooserDialog

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

FileUploadDialog

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

FileSaveDialog

Eine Dialogkomponente, die es den 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 anzeigen. Diese Komponenten helfen den Benutzern, sich in der App zu orientieren, 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, wobei Funktionen wie Sortierung und Paginierung unterstützt werden.

GoogleCharts

Eine Komponente, die sich mit Google Charts integriert, um verschiedene Arten von Diagrammen und visuellen Datenrepräsentationen in der App anzuzeigen.

Button

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

Toast

Eine leichte, nicht blockierende Benachrichtigungskomponente, die eine Nachricht kurzzeitig 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 Beschriftungskomponente zur Anzeige von Zählungen, Status oder kurzen Metadaten, mit Unterstützung für Themen, Größen und Symbole.

DesktopNotification

Eine Komponente, die die native Benachrichtigungs-API des Browsers nutzt, um Benutzer mit benutzerdefinierten Desktop-Benachrichtigungen zu alarmieren.

Navigator

Eine anpassbare Paginierungskomponente zum Navigieren durch Datensätze, die Layouts mit ersten, letzten, nächsten, vorherigen Schaltflächen und Schnellsprungfeldern 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 erzielt werden.

Slider

Eine Komponente, die es Benutzern erlaubt, einen Wert aus einem definierten Bereich auszuwählen, indem sie einen Schieberegler entlang einer Spur ziehen.

BusyIndicator

Ein anwendungsweiter visueller Indikator, typischerweise ein Spinner, der signalisiert, dass ein globaler Prozess läuft.

Loading

Ein kontextbezogener Ladeindikator, der in einem bestimmten übergeordneten Element angezeigt wird und signalisiert, 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 App bereitstellt, typischerweise zur Auflistung 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 Lader 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.

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 progressiver charakterweise Rendering, ideal für KI-Chat-Schnittstellen und Text-Streaming.