UI-Komponenten

In ChatGPT öffnen

In webforJ werden Anwendungen mit modularen Einheiten, die als Komponenten bekannt sind, entwickelt, die eine schnelle und effiziente UI-Entwicklung ermöglichen. Das Framework bietet eine Reihe wichtiger 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 bieten die Grundlage zur 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, unabhängig davon, ob es sich um einfache oder komplexe Layouts handelt.

Die folgenden Layout-Komponenten sind so konzipiert, dass sie eine Vielzahl von Anwendungsfällen abdecken, von responsivem Design bis hin zu fortgeschrittener Inhaltsverwaltung.

AppLayout

Eine Container-Komponente, die ein strukturiertes Layout für die Navigation und Organisation von Inhalten auf oberster Ebene der App 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 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 Kindkomponenten aufteilt und es Benutzern ermöglicht, sie durch Ziehen der Trennleiste zu ändern.

Drawer

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

Dialog

Eine modale Fensterkomponente, die Inhalte überlagert, um wichtige Informationen anzuzeigen oder die Benutzerinteraktion zu fördern, oft mit der Aufforderung, die Eingabe zu bestätigen, um sie zu schließen.

Login

Eine Komponente, die eine vorgefertigte Benutzeroberfläche für die Benutzerauthentifizierung bereitstellt, typischerweise mit Feldern für Benutzernamen und Passwort sowie einem Absenden-Button.

Accordion

Ein vertikal gestapeltes Set von ausklappbaren Panels, von denen jedes eine klickbare Kopfzeile hat, die die Sichtbarkeit seines Inhalts umschaltet.

TabbedPane

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

Card

Eine Fläche, die verwandte Inhalte und Aktionen gruppiert, mit Bereichen für Medien, Kopfzeilen, Hauptinhalte und Fußzeilen.

Dateneingabe

Dateneingabekomponenten bieten wichtige Werkzeuge zur Erfassung von Benutzereingaben und zur Verwaltung von Interaktionen innerhalb Ihrer App. Diese Komponenten sind vielseitig und erleichtern den Aufbau interaktiver Formulare und die Erfassung verschiedener Datenarten.

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 für die Eingabe numerischer Werte bereitstellt, mit integrierten Steuerelementen zum Erhöhen oder Verringern des Werts.

MaskedNumberField

Eine numerische Eingabekomponente, die die Benutzereingabe auf ein bestimmtes numerisches Format oder Muster beschränkt und eine gültige Zahlen eingabe für Währungen, Prozentsätze oder andere formatierte Zahlen sicherstellt.

PasswordField

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

DateField

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

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, browserbasierten Zeitwähler für die Auswahl eines Zeitwerts über ein Eingabefeld bereitstellt.

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, 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 Farb wä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 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 gegenseitig ausschließenden Auswahlmöglichkeiten zu wählen.

Switch

Eine Umschaltkomponente, die es Benutzern ermöglicht, zwischen zwei Zuständen, wie ein/aus oder wahr/falsch, durch eine ziehende Aktion umzuschalten.

ChoiceBox

Eine Komponente, die eine Dropdown-Liste mit vordefinierten Optionen bereitstellt, sodass Benutzer eine Option aus der Liste auswählen können.

ComboBox

Eine Komponente, die eine Dropdown-Liste mit einer editierbaren Texteingabe 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, sodass Benutzer eines oder mehrere Elemente aus der Liste auswählen können.

Upload

Ein inline-Dateiwähler, der es Benutzern ermöglicht, eine oder mehrere Dateien von ihrem lokalen Gerät auszuwählen und an den Server hochzuladen, mit Drag-and-Drop, Filtern und einer Ereignisverfolgung pro Datei.

Optionsdialoge

Optionsdialoge bieten eine Möglichkeit, den Benutzern Auswahlmöglichkeiten zu präsentieren oder sie zur Bestätigung aufzufordern, bevor sie mit einer Aktion fortfahren. Diese Komponenten sind entscheidend für die Erstellung interaktiver, entscheidungsorientierter Workflows, die es den Benutzern ermöglichen, zu bestätigen, abzulehnen oder aus verschiedenen Optionen auf klare und strukturierte Weise zu wählen.

MessageDialog

Eine Dialogkomponente, die verwendet wird, um Informationsnachrichten oder Warnungen an den Benutzer anzuzeigen, typischerweise mit einer einzigen OK-Taste zur Bestätigung der Nachricht.

ConfirmDialog

Eine Dialogkomponente, die den Benutzer fragt, ob er eine Aktion bestätigen oder ablehnen möchte, typischerweise mit den Tasten Ja und Nein oder OK und Abbrechen.

InputDialog

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

FileChooserDialog

Eine Dialogkomponente, die es Benutzern ermöglicht, Dateien auf dem Serverdateisystem zu durchsuchen und auszuwählen.

FileUploadDialog

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

FileSaveDialog

Eine Dialogkomponente, die es Benutzern ermöglicht, eine Datei an einem bestimmten Speicherort 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, in der App zu navigieren, Aktionen auszulösen und Fortschritt 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 Seitenanzahl unterstützt.

GoogleCharts

Eine Komponente, die sich mit Google Charts integriert, 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 Benachrichtigungskomponente, die eine Nachricht kurz 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ählungen, 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 Benutzern benutzerdefinierte Desktop-Benachrichtigungen zu senden.

Navigator

Eine anpassbare Paginierungs-Komponente für die Navigation durch Datensätze, die Layouts mit ersten, letzten, nächsten, vorherigen Schaltflächen 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 erzielt werden.

Slider

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

BusyIndicator

Ein appweites visuelles Indikator, typischerweise ein Spinner, der signalisiert, dass ein globaler Prozess im Gange ist.

Loading

Ein lokalisierter 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 darauf hinzuweisen, dass ein Prozess oder eine Aktion im Gange ist.

AppNav

Eine Komponente, die ein Navigationsmenü für die App bereitstellt, typischerweise verwendet, um Links oder Navigationselemente aufzulisten, um zwischen verschiedenen Abschnitten oder Ansichten zu wechseln.

Icon

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

Terminal

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

InfiniteScroll

Eine Komponente, die beim Scrollen weitere 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 für dynamisches 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 progressiver Zeichen-für-Zeichen-Darstellung, ideal für AI-Chat-Schnittstellen und Streaming von Text.