UI Components

Openen in ChatGPT

In webforJ worden toepassingen gemaakt met behulp van modulaire eenheden die bekend staan als Componenten, die een snelle en efficiënte ontwikkeling van de gebruikersinterface 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, waarmee ontwikkelaars de 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 gebruikstoepassingen 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, die typisch worden gebruikt voor het uitvoeren van taken gerelateerd aan de huidige context.

FlexLayout

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

ColumnsLayout

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

Splitter

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

Drawer

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

Dialog

Een modaal venstercomponent die bovenop de inhoud wordt weergegeven om belangrijke informatie te tonen of gebruikersinteractie te vragen, vaak met gebruikersactie vereist om te sluiten.

Login

Een component die een vooraf gebouwde gebruikersinterface voor gebruikersauthenticatie biedt, meestal met velden voor gebruikersnaam en wachtwoord, naast een verzendknop.

Accordion

Een verticaal gestapelde set opvouwbare panelen, elk met een klikbare kop die de zichtbaarheid van de inhoud van het lichaam wijzigt.

TabbedPane

Een containercomponent die de inhoud organiseert in meerdere tabs, zodat gebruikers tussen verschillende weergaven of secties kunnen schakelen.

Data-invoer

Data-invoercomponenten bieden essentiële hulpmiddelen voor het vastleggen van gebruikersinvoer en het beheren van interacties binnen je app. Deze componenten zijn veelzijdig, waardoor het eenvoudig is om interactieve formulieren te bouwen en verschillende soorten gegevens te verzamelen.

TextField

Een enkelregel invoercomponent voor het invoeren en bewerken van tekstgegevens.

MaskedTextField

Een tekstinvoercomponent die de gebruikersinvoer beperkt tot een specifiek formaat of patroon, doorgaans 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.

MaskedNumberField

Een numerieke invoercomponent die de gebruikersinvoer beperkt tot een specifiek numeriek formaat of patroon, waardoor geldige nummerinvoer wordt gegarandeerd, zoals voor valuta, percentages of andere geformatteerde nummers.

PasswordField

Een enkelregel invoercomponent voor het veilig invoeren en maskeren van wachtwoordgegevens.

DateField

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

MaskedDateField

Een datum invoercomponent die een specifiek datumformaat of patroon afdwingt, waarmee ervoor wordt gezorgd dat de gebruiker een geldige datum invoert volgens de gedefinieerde mask.

TimeField

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

MaskedTimeField

Een tijdinvoercomponent die een specifiek tijdformaat of patroon afdwingt, waarmee ervoor wordt gezorgd dat de gebruiker een geldige tijd invoert volgens de gedefinieerde mask.

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 uit een invoerveld kunnen selecteren.

TextArea

Een multi-regel tekstinvoercomponent 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) staat.

RadioButton

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

Switch

Een schakelcomponent waarmee gebruikers tussen twee toestanden kunnen schakelen, zoals aan/uit of waar/onwaar, met een schuifactie.

ChoiceBox

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

ComboBox

Een component die een keuzelijst 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 verdergaan met een actie. Deze componenten zijn essentieel voor het creëren van interactieve, besluitgestuurde 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 erkennen.

ConfirmDialog

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

InputDialog

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

FileChooserDialog

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

FileUploadDialog

Een dialoogcomponent die gebruikers de mogelijkheid biedt om bestanden van hun lokale bestandssysteem naar de app te uploaden.

FileSaveDialog

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

Interactie en weergave

Deze categorie bevat componenten die gebruikersinteracties vergemakkelijken en gegevens of app-statussen visueel weergeven. Deze componenten helpen gebruikers de app te navigeren, acties te activeren en voortgang of resultaten te begrijpen via dynamische visuele elementen.

Table

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

GoogleCharts

Een component die integreert 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 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 tellers, 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 op maat gemaakte desktopnotificaties.

Navigator

Een aanpasbare pagineringcomponent voor het navigeren door datasets, met ondersteuning voor lay-outs met knoppen voor eerst, laatst, volgende, vorige en snelle sprongvelden.

ProgressBar

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

Slider

Een component waarmee gebruikers een waarde uit een gedefinieerd bereik kunnen selecteren door een handvat langs een spoor te slepen.

BusyIndicator

Een visuele indicator die in de hele app wordt weergegeven, typisch een spinners, die aangeeft dat er een global proces aan de gang is.

Loading

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

Spinner

Een component die een roterende animatie weergeeft, typisch 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 command-line interface (CLI) binnen de app simuleert, waardoor gebruikers tekstgebaseerde commando's kunnen invoeren en uitvoeren.

InfiniteScroll

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

Refresher

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

Tree

Een component voor het weergeven van hiërarchische gegevens, waarmee gebruikers geneste items kunnen uitbreiden, inklappen en interactie hebben.

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.