UI Components

Openen in ChatGPT

In webforJ worden applicaties gemaakt met behulp van modulaire eenheden, bekend als Componenten, die een snelle en efficiënte ontwikkeling van de gebruikersinterface mogelijk maken. Het framework biedt een scala aan essentiële componenten zoals knoppen, invoerelementen en lay-outcontainers. Na het beheersen van de basisprincipes kun je de JavaDocs raadplegen voor een gedetailleerd overzicht van alle componenten en hun functionaliteiten.

Lay-outs

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 controleren, of het nu gaat om eenvoudige of complexe lay-outs.

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

AppLayout

Een containercomponent die een gestructureerde lay-out biedt voor navigatie en organisatie van inhoud op het hoogste niveau.

Toolbar

Een horizontale containercomponent die een set actieknoppen, pictogrammen of andere bedieningselementen bevat, meestal gebruikt voor het uitvoeren van taken die verband houden met de huidige context.

FlexLayout

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

ColumnsLayout

Een lay-outcomponent die zijn kinderen rangschikt in meerdere verticale kolommen, nuttig voor het maken van formulieren en roosterachtige structuren.

Splitter

Een lay-outcomponent die de beschikbare ruimte tussen twee kindcomponenten verdeelt, waardoor gebruikers ze kunnen aanpassen door de splitterbalk te slepen.

Drawer

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

Dialog

Een modaal venstercomponent die inhoud overlayt om belangrijke informatie weer te geven of gebruikersinteractie te vragen, vaak met vereiste gebruikersactie om te sluiten.

Login

Een component die een vooraf gebouwde gebruikersinterface biedt voor gebruikersauthenticatie, meestal met velden voor gebruikersnaam en wachtwoord, samen met een knop om te verzenden.

Accordion

Een verticaal gestapeld stel uitklapbare panelen, elk met een klikbare kop die de zichtbaarheid van de lichaam inhoud omschakelt.

TabbedPane

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

Card

Een oppervlak dat gerelateerde inhoud en acties groepeert, met gebieden voor media, koppen, hoofdinhoud en voetteksten.

Gegevensinvoer

Gegevensinvoerencomponenten bieden essentiële tools 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 enkele regel invoerencomponent voor het invoeren en bewerken van tekstgegevens.

GemaskerdeTextField

Een tekstinvoerencomponent die de gebruikersinvoer beperkt tot een specifiek formaat of patroon, typisch gebruikt voor velden zoals telefoonnummers, data of creditcardnummers.

NumberField

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

GemaskerdeNumberField

Een numerieke invoerencomponent die de gebruikersinvoer beperkt tot een specifiek numeriek formaat of patroon, en zorgt ervoor dat geldige nummerinvoer, zoals voor valuta, percentages of andere geformatteerde nummers.

PasswordField

Een enkele regel invoerencomponent voor veilig invoeren en maskeren van wachtwoordgegevens.

DateField

Een component die een standaard webbrowser-gebaseerde datumkiezer biedt voor het selecteren van een datum via een invoerveld.

GemaskerdeDateField

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

TimeField

Een component die een standaard webbrowser-gebaseerde tijdkiezer biedt voor het selecteren van een tijdwaarde via een invoerveld.

GemaskerdeTimeField

Een tijdinvoerencomponent die een specifiek tijdformaat of -patroon afdwingt, en ervoor zorgt dat de gebruiker een geldige tijd invoert volgens de gedefinieerde masker.

DateTimeField

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

ColorField

Een component die een standaard webbrowser-gebaseerde kleurkiezer biedt, waarmee gebruikers een kleur kunnen selecteren vanuit een invoerveld.

TextArea

Een multi-regel tekstinvoerencomponent die gebruikers toestaat om grotere blokken tekst 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 die gebruikers toestaat om een enkele optie te selecteren uit een groep onderling exclusieve keuzes.

Switch

Een schakelaardcomponent die gebruikers toestaat om tussen twee staten te schakelen, zoals aan/uit of waar/onwaar, met een schuifbeweging.

ChoiceBox

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

ComboBox

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

ListBox

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

Upload

Een inline-bestandkiezer waarmee gebruikers een of meer bestanden van hun lokale machine kunnen selecteren en uploaden naar de server, met slepen en neerzetten, filters en per-bestand gebeurtenistracering.

Optiedialogen

Optiedialogen bieden een manier om gebruikers keuzes voor te leggen of hen om bevestiging te vragen voordat ze doorgaan met een actie. 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, typisch met een enkele OK-knop om het bericht te erkennen.

ConfirmDialog

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

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 om bestanden van hun lokale bestandssysteem naar de app te uploaden.

FileSaveDialog

Een dialoogcomponent die gebruikers de mogelijkheid biedt om een bestand op te slaan op een specifieke locatie op het serverbestandssysteem.

Interactie en weergave

Deze categorie omvat componenten die gebruikerse interacties faciliteren en gegevens of app-statusen visueel weergeven. Deze componenten helpen gebruikers de app te navigeren, acties te activeren en de voortgang of resultaten inzichtelijk te maken via dynamische visuele elementen.

Table

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

GoogleCharts

Een component die is geïntegreerd met Google Charts om verschillende soorten grafieken en visuele gegevensrepresentaties in de app weer te geven.

Button

Een klikbare component die een actie of gebeurtenis activeert wanneer erop wordt gedrukt.

Toast

Een lichte, niet-blokkerende notificatiecomponent die kort een bericht aan de gebruiker weergeeft voordat het 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 pagineringscomponent voor het navigeren door gegevenssets, met ondersteuning voor lay-outs met eerste, laatste, volgende, vorige knoppen en snelle springvelden.

ProgressBar

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

Slider

Een component die gebruikers toestaat om een waarde uit een gedefinieerd bereik te selecteren door een handgreep langs een baan te slepen.

BusyIndicator

Een visuele indicator, typisch een spinner, die aangeeft dat een globale proces aan de gang is.

Loading

Een loading-indicator die binnen een specifieke bovenliggende component toont, wat aangeeft dat inhoud of gegevens worden geladen in dat gedeelte.

Spinner

Een component die een roterende 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 weer te geven.

Terminal

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

InfiniteScroll

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

Refresher

Een component die een pull-naar-verversen-interactie binnen scrollbare containers mogelijk maakt—ideaal voor dynamisch gegevensladen.

Tree

Een component voor het weergeven van hiërarchische gegevens, waarmee gebruikers genestelde items kunnen uitbreiden, samenvouwen en ermee interageren.

Avatar

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

MarkdownViewer

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