UI Components

In ChatGPT öffnen

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

Layouts

Layoutkomponenten bieten die Grundlage für die Strukturierung von Benutzeroberflächen und ermöglichen es Entwicklern, Inhalte effizient zu organisieren. Diese Komponenten bieten verschiedene Möglichkeiten zur Steuerung der Anordnung von Kindkomponenten, ob für einfache oder komplexe Layouts.

Die folgenden Layoutkomponenten sind darauf ausgelegt, eine Vielzahl von Anwendungsfällen zu bewältigen, von responsive Design bis hin zu fortgeschrittener Inhaltsverwaltung.

AppLayout

Eine Containerkomponente, die ein strukturiertes Layout für die Navigation und die Organisation des Inhalts auf oberster Ebene bereitstellt.

Toolbar

Eine horizontale Containerkomponente, die eine Reihe von Aktionsschaltflächen, Symbolen oder anderen Steuerungen enthält, die typischerweise zur Durchführung von Aufgaben im aktuellen Kontext verwendet werden.

FlexLayout

Eine Layoutkomponente, die ihre Kinder mithilfe von flexiblen Boxregeln (Flexbox) für responsive Designs und Ausrichtungen anordnet.

ColumnsLayout

Eine Layoutkomponente, die ihre Kinder in mehrere vertikale Spalten anordnet und nützlich ist, um Formulare und gitterartige Strukturen zu erstellen.

Splitter

Eine Layoutkomponente, die den verfügbaren Platz zwischen zwei Kindkomponenten aufteilt und es den Benutzern ermöglicht, sie durch Ziehen der Splitterleiste zu ändern.

Drawer

Eine schiebende Panelkomponente, die typischerweise für die seitliche Navigation oder das Unterbringen 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, und oft eine Benutzeraktion zum Schließen erfordert.

Login

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

TabbedPane

Eine Containerkomponente, die Inhalte in mehreren Reitern organisiert, sodass Benutzer zwischen verschiedenen Ansichten oder Abschnitten wechseln können.

Dateneingabe

Dateneingabekomponenten bieten wesentliche Werkzeuge zur Erfassung von Benutzereingaben und zur Verwaltung von Interaktionen innerhalb Ihrer App. Diese Komponenten sind vielseitig und ermöglichen es, interaktive Formulare zu erstellen und verschiedene Datentypen zu erfassen.

TextField

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

MaskedTextField

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

NumberField

Eine Komponente, die ein standardmäßiges browserbasiertes Eingabefeld zur 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 sicherstellt, dass gültige Zahlen wie Währungen, Prozentsätze oder andere formatierte Zahlen eingegeben werden.

PasswordField

Eine Eingabekomponente für die sichere Eingabe und Maskierung von Passwortdaten in einer Zeile.

DateField

Eine Komponente, die einen standardmäßigen browserbasierten Datumsauswahl-Dialog bietet, um ein Datum über ein Eingabefeld auszuwählen.

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 bietet, um einen Zeitwert über ein Eingabefeld auszuwählen.

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 Zeitpicker bietet, um sowohl Datum als auch Uhrzeit über ein einzelnes Eingabefeld auszuwählen.

ColorField

Eine Komponente, die einen standardmäßigen browserbasierten Farbwähler bereitstellt, der es Benutzern ermöglicht, eine Farbe über ein Eingabefeld auszuwählen.

TextArea

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

CheckBox

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

RadioButton

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

Switch

Eine Toggle-Komponente, die es Benutzern ermöglicht, zwischen zwei Zuständen, wie ein/ausschalten oder wahr/falsch, mit einer gleitenden Aktion umzuschalten.

ChoiceBox

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

ComboBox

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

ListBox

Eine Komponente, die eine durchscrollbare 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 Auswahlmöglichkeiten 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, entscheidungsorientierter Workflows und ermöglichen es Benutzern, aus verschiedenen Optionen in klarer und strukturierter Weise zu bestätigen, abzubrechen oder auszuwählen.

MessageDialog

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

ConfirmDialog

Eine Dialogkomponente, die den Benutzer fragt, ob er eine Aktion bestätigen oder abbrechen möchte, 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 und Aktionsschaltflächen wie OK und Abbrechen.

FileChooserDialog

Eine Dialogkomponente, die es Benutzern ermöglicht, Dateien im Dateisystem des Servers 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 Dateisystem des Servers zu speichern.

Interaktion und Anzeige

Diese Kategorie umfasst Komponenten, die Benutzerinteraktionen erleichtern und Daten oder App-Zustä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 zur Anzeige von Daten in einem strukturierten, tabellarischen Format mit Zeilen und Spalten verwendet wird und Funktionen wie Sortierung und Seitenumbruch unterstützt.

GoogleCharts

Eine Komponente, die mit Google Charts integriert ist, 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 kurz anzeigt und dann automatisch verschwindet.

Alert

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

DesktopNotification

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

Navigator

Eine anpassbare Paginierungskomponente zur Navigation durch Datensätze, die Layouts mit Ersten, Letzten, Nächsten, Vorherigen Schaltflächen und Schnelljumpfeldern unterstützt.

ProgressBar

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

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 visueller Indikator für die gesamte App, typischerweise ein Spinner, der signalisiert, dass ein globaler Prozess im Gange ist.

Loading

Ein kontextueller Ladeindikator, der innerhalb einer bestimmten übergeordneten Komponente angezeigt wird und darauf hinweist, 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 und typischerweise dazu verwendet wird, Links oder Navigationselemente aufzulisten, um zwischen verschiedenen Abschnitten oder Ansichten zu wechseln.

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 Loader anzeigt und verfolgt, wann alle Inhalte abgerufen wurden.

Refresher

Eine Komponente, die eine Pull-to-Refresh-Interaktion innerhalb von scrollbaren Containern zulässt – ideal für das dynamische Laden von Daten.

Tree

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

Avatar

Eine Komponente zum Anzeigen von Benutzerdprofilbildern oder Initialen, mit Unterstützung für verschiedene Größen, Formen und Themen.