UI Components

Openen in ChatGPT

In webforJ worden applicaties gemaakt met behulp van modulaire eenheden die bekend staan als Componenten, die snelle en efficiënte UI-ontwikkeling mogelijk maken. Het framework biedt een reeks essentiële componenten zoals knoppen, invoerelementen en lay-outcontainers. Nadat je de basisprincipes onder de knie hebt, kun je de JavaDocs raadplegen voor een gedetailleerd overzicht van alle componenten en hun functionaliteiten.

Layouts

Lay-outcomponenten bieden de basis voor het structureren van gebruikersinterfaces, waardoor ontwikkelaars inhoud efficiënt kunnen organiseren. Deze componenten bieden verschillende manieren om de indeling van kindcomponenten te beheersen, of het nu gaat om eenvoudige of complexe lay-outs.

De volgende lay-outcomponenten zijn ontworpen om een breed scala aan gebruikscases aan te pakken, van responsief ontwerp tot geavanceerd contentbeheer.

AppLayout

Een containercomponent die een gestructureerde lay-out biedt voor de navigatie op hoog niveau van de app en de organisatie van inhoud.

Toolbar

Een horizontale containercomponent die een set actieknoppen, pictogrammen of andere bedieningselementen bevat, die meestal wordt gebruikt om taken uit te voeren die verband houden met de huidige context.

FlexLayout

Een lay-outcomponent die zijn kinderen rangschikt aan de hand van flexibele box (flexbox) regels voor responsief ontwerp en uitlijning.

ColumnsLayout

Een lay-outcomponent die zijn kinderen in meerdere verticale kolommen rangschikt, nuttig voor het creëren van formulieren en rasterachtige structuren.

Splitter

Een lay-outcomponent die de beschikbare ruimte tussen twee kindcomponenten verdeelt, waardoor gebruikers deze kunnen vergroten of verkleinen door de splitsingsbalk te slepen.

Drawer

Een paneelcomponent die meestal wordt gebruikt voor zij-navigatie of voor het huisvesten van extra inhoud die kan worden weergegeven of verborgen.

Dialog

Een modaal venstercomponent die inhoud overdekt om belangrijke informatie weer te geven of om de gebruiker tot interactie aan te zetten, vaak met gebruikersactie om te sluiten.

Login

Een component die een kant-en-klare UI biedt voor gebruikersauthenticatie, meestal inclusief velden voor gebruikersnaam en wachtwoord, samen met een verzendknop.

Accordion

Een verticaal gestapeld geheel van inklapbare panelen, elk met een klikbare kop die de zichtbaarheid van de inhoud van het paneel wijzigt.

TabbedPane

Een containercomponent die inhoud in meerdere tabbladen organiseert, waarmee gebruikers tussen verschillende weergaven of secties kunnen schakelen.

Gegevensinvoer

Gegevensinvoercomponenten bieden essentiële hulpmiddelen voor het vastleggen van gebruikersinvoer en het beheren van interacties binnen je app. Deze componenten zijn veelzijdig en maken het eenvoudig om interactieve formulieren te bouwen en verschillende soorten gegevens te verzamelen.

TextField

Een invoercomponent voor het invoeren en bewerken van tekstgegevens in één regel.

GemaskeerdeTextField

Een tekstinvoercomponent die de invoer van de gebruiker beperkt tot een specifiek formaat of patroon, meestal gebruikt voor velden zoals telefoonnummers, data of creditcardnummers.

NumberField

Een component die een standaard browsergebaseerd invoerveld biedt voor het invoeren van numerieke waarden, met ingebouwde bedieningselementen voor het verhogen of verlagen van de waarde.

GemaskeerdeNumberField

Een numerieke invoercomponent die de invoer van de gebruiker beperkt tot een specifiek numeriek formaat of patroon, waardoor geldige numerieke invoer wordt gewaarborgd, zoals voor valuta, percentages of andere geformatteerde nummers.

PasswordField

Een invoercomponent voor het veilig invoeren en maskeren van wachtwoordgegevens in één regel.

DateField

Een component die een standaard browsergebaseerde datumkiezer biedt voor het selecteren van een datum via een invoerveld.

GemaskeerdeDateField

Een datum invoercomponent die een specifiek datumformaat of patroon afdwingt, zodat de gebruiker een geldige datum invoert volgens de gedefinieerde masker.

TimeField

Een component die een standaard browsergebaseerde tijdkiezer biedt voor het selecteren van een tijdwaarde via een invoerveld.

GemaskeerdeTimeField

Een tijd invoercomponent die een specifiek tijdformaat of patroon afdwingt, zodat de gebruiker een geldige tijd invoert volgens de gedefinieerde masker.

DateTimeField

Een component die een standaard browsergebaseerde datum- en tijdkiezer biedt voor het selecteren van zowel datum als tijd via een enkel invoerveld.

ColorField

Een component die een standaard browsergebaseerde kleurenkiezer biedt, waarmee gebruikers een kleur kunnen selecteren via een invoerveld.

TextArea

Een invoercomponent voor meerdere regels tekst die gebruikers in staat stelt om grotere tekstblokken in te voeren of te bewerken.

CheckBox

Een component die een binaire optie vertegenwoordigt, waarmee gebruikers kunnen schakelen tussen een aangevinkte (waar) of niet-aangevinkte (onwaar) status.

RadioButton

Een component waarmee gebruikers een enkele optie uit een groep onderling exclusieve keuzes kunnen selecteren.

Switch

Een schakelpunt dat gebruikers in staat stelt om tussen twee staten te wisselen, zoals aan/uit of waar/onwaar, met een schuifactie.

ChoiceBox

Een component die een vervolgkeuzelijst met vooraf gedefinieerde opties biedt, waarmee gebruikers één optie uit de lijst kunnen selecteren.

ComboBox

Een component die een vervolgkeuzelijst combineert met een bewerkbaar tekstinvoerveld, waarmee gebruikers een optie uit de lijst kunnen selecteren of een aangepaste waarde kunnen invoeren.

ListBox

Een component die een scrollbare lijst van opties weergeeft, waarmee gebruikers een of meer items uit de lijst kunnen selecteren.

Optiedialogen

Optiedialogen bieden een manier om gebruikers keuzes voor te leggen of hen om bevestiging te vragen voordat ze met een actie doorgaan. Deze componenten zijn essentieel voor het creëren van interactieve, besluitgedreven workflows, waarmee gebruikers kunnen bevestigen, annuleren of kiezen uit verschillende opties op een duidelijke en gestructureerde manier.

MessageDialog

Een dialoogcomponent die wordt gebruikt om informatieve berichten of waarschuwingen aan de gebruiker weer te geven, meestal met een enkele OK-knop om het bericht te bevestigen.

ConfirmDialog

Een dialoogcomponent die de gebruiker vraagt om een actie te bevestigen of te annuleren, meestal met Ja en Nee of OK en Annuleren knoppen.

InputDialog

Een dialoogcomponent die de gebruiker vraagt om tekst of gegevens in te voeren, meestal met een invoerveld en actieknoppen zoals OK en Annuleren.

FileChooserDialog

Een dialoogcomponent waarmee gebruikers bestanden kunnen doorbladeren en selecteren van het serverbestandssysteem.

FileUploadDialog

Een dialoogcomponent die gebruikers in staat stelt bestanden van hun lokale bestandssysteem naar de app te uploaden.

FileSaveDialog

Een dialoogcomponent die gebruikers in staat stelt een bestand op een opgegeven locatie op het serverbestandssysteem op te slaan.

Interactie en weergave

Deze categorie omvat componenten die gebruikersinteracties vergemakkelijken en gegevens of app-staten visueel weergeven. Deze componenten helpen gebruikers bij het navigeren door de app, acties te initiëren en de voortgang of resultaten te begrijpen via dynamische visuele elementen.

Table

Een component die wordt gebruikt om gegevens in een gestructureerd, tabelmatig formaat weer te geven met rijen en kolommen, waarbij functies zoals sorteren en paginering worden ondersteund.

GoogleCharts

Een component die integreert met Google Charts om verschillende soorten diagrammen en visuele gegevensrepresentaties in de app weer te geven.

Button

Een klikbare component die een actie of evenement activeert wanneer deze wordt ingedrukt.

Toast

Een lichte, niet-blokkerende notificatiecomponent die kort een bericht aan de gebruiker weergeeft voordat deze automatisch verdwijnt.

Alert

Een component die belangrijke berichten of waarschuwingen in een opvallend formaat weergeeft om de aandacht van de gebruiker te trekken.

Badge

Een klein labelcomponent voor het weergeven van tellingen, statussen of korte metadata, met ondersteuning voor thema's, maten en pictogrammen.

DesktopNotification

Een component die gebruikmaakt van de native Notification API van de browser om gebruikers te waarschuwen met aangepaste desktopnotificaties.

Navigator

Een aanpasbare pagineringcomponent voor het navigeren door datasets, met lay-outs met eerste, laatste, volgende, vorige knoppen en snelle springvelden.

ProgressBar

Een component die de voortgang van een taak of proces visueel weergeeft, doorgaans weergegeven als een horizontale balk die zich vuldt naarmate de voortgang vordert.

Slider

Een component die gebruikers in staat stelt een waarde uit een gedefinieerd bereik te selecteren door een handgreep langs een spoor te slepen.

BusyIndicator

Een visuele indicator voor de app, meestal een draaiende animatie, die aangeeft dat er een wereldwijde bewerking aan de gang is.

Loading

Een gescopeerde laadindicator die binnen een specifieke bovenliggende component wordt weergegeven, die aangeeft dat inhoud of gegevens in dat gedeelte worden geladen.

Spinner

Een component die een draaiende animatie weergeeft, meestal gebruikt om aan te geven dat een proces of actie aan de gang is.

AppNav

Een component die een navigatiemenu voor de app biedt, meestal gebruikt voor het opsommen van links of navigatie-items voor het schakelen tussen verschillende secties of weergaven.

Icon

Een component die een grafisch symbool of afbeelding weergeeft, vaak gebruikt om een actie, status of categorie in de gebruikersinterface te vertegenwoordigen.

Terminal

Een component die een commandoregelinterface (CLI) binnen de app simuleert, waardoor gebruikers tekstgebaseerde opdrachten kunnen invoeren en uitvoeren.

InfiniteScroll

Een component die meer items laadt bij scrollen, een loader toont en bijhoudt wanneer alle inhoud is opgehaald.

Refresher

Een component die een pull-to-refresh-interactie binnen scrollbare containers mogelijk maakt — ideaal voor dynamische gegevensladen.

Tree

Een component voor het weergeven van hiërarchische gegevens, waarmee gebruikers geneste items kunnen uitvouwen, inklappen en ermee kunnen interageren.

Avatar

Een component voor het weergeven van gebruikersprofielafbeeldingen of initialen, met ondersteuning voor verschillende maten, vormen en thema's.

MarkdownViewer

Een component voor het weergeven van markdown-inhoud met progressieve weergave van teken voor teken, ideaal voor AI-chatinterfaces en streamingtekst.