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 scala aan essentiële componenten zoals knoppen, invoerelementen en lay-outcontainers. Nadat je de basisprincipes hebt beheerst, 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, waarmee ontwikkelaars content efficiënt kunnen organiseren. Deze componenten bieden verschillende manieren om de indeling van kindercomponenten te beheersen, of het nu gaat om eenvoudige of complexe lay-outs.

De volgende lay-outcomponenten zijn ontworpen voor een breed scala aan gebruikssituaties, van responsief ontwerp tot geavanceerd contentbeheer

AppLayout

Een containercomponent die een gestructureerde lay-out biedt voor de navigatie en contentorganisatie van de applicatie.

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 in meerdere verticale kolommen rangschikt, nuttig voor het maken van formulieren en grid-achtige structuren.

Splitter

Een lay-outcomponent die de beschikbare ruimte verdeelt tussen twee kindercomponenten, waardoor gebruikers ze kunnen vergroten of verkleinen door de splitterbalk te slepen.

Drawer

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

Dialog

Een modaal venstercomponent die inhoud overlagert om belangrijke informatie weer te geven of om gebruikersinteractie te vragen, vaak vereist het dat de gebruiker actie onderneemt om te sluiten.

Login

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

Accordion

Een verticaal gestapeld pakket van inklapbare panelen, elk met een klikbare kop die de zichtbaarheid van de lichaaminhoud toggleert.

TabbedPane

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

Gegevensinvoer

Gegevensinvoercomponenten bieden essentiële tools 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 tekstinvoerveld dat de gebruikersinvoer beperkt tot een specifiek formaat of patroon, meestal gebruikt voor velden zoals telefoonnummers, datums 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 numeriek invoerveld dat de gebruikersinvoer beperkt tot een specifiek numeriek formaat of patroon, wat zorgt voor geldige invoer zoals voor valuta, percentages of andere geformatteerde nummers.

PasswordField

Een enkelregel invoercomponent voor veilig invoeren en maskeren van wachtwoordgegevens.

DateField

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

MaskedDateField

Een datuminvoerveld dat een specifiek datumformaat of patroon afdwingt, waardoor 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 tijdinvoerveld dat een specifiek tijdformaat of patroon afdwingt, waardoor 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 kleurkiezer biedt, waarmee gebruikers een kleur kunnen selecteren uit een invoerveld.

TextArea

Een multi-regel tekstinvoerveld waarmee gebruikers grotere tekstblokken kunnen invoeren of bewerken.

CheckBox

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

RadioButton

Een component die gebruikers in staat stelt een enkele optie te selecteren uit een groep onderling uitsluitende keuzes.

Switch

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

ChoiceBox

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

ComboBox

Een component die een dropdownlijst combineert met een bewerkbaar tekstinvoerveld, zodat gebruikers zowel een optie uit de lijst kunnen selecteren als een aangepaste waarde kunnen invoeren.

ListBox

Een component die een doorbloembare lijst met opties weergeeft, waarmee gebruikers één of meerdere items uit de lijst kunnen selecteren.

Upload

Een inline bestandskiezer waarmee gebruikers één of meerdere bestanden van hun lokale machine kunnen selecteren en naar de server kunnen uploaden, met slepen-en-neerzetten, filters en per-bestand evenementtracking.

Optiedialogen

Optiedialogen bieden een manier om gebruikers keuzes voor te stellen of hen om bevestiging te vragen voordat ze met een actie doorgaan. Deze componenten zijn essentieel voor het creëren van interactieve, beslissinggedreven workflows, waarmee gebruikers bevestigen, annuleren of uit verschillende opties kunnen kiezen 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 aan de gebruiker vraagt om een actie te bevestigen of te annuleren, doorgaans met Ja en Nee of OK en Annuleer knoppen.

InputDialog

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

FileChooserDialog

Een dialoogcomponent die gebruikers in staat stelt om bestanden te doorbladeren en te selecteren vanuit 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 in staat stelt om een bestand op een opgegeven locatie in het server bestandssysteem op te slaan.

Interactie en weergave

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

Table

Een component die wordt gebruikt om gegevens in een gestructureerd, tabelvorm te weergeven met rijen en kolommen, met ondersteuning voor functies zoals sorteren en paginering.

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 evenement triggert 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, groottes en pictogrammen.

DesktopNotification

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

Navigator

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

ProgressBar

Een component die visueel de voortgang van een taak of proces weergeeft, meestal weergegeven als een horizontale balk die opvult naarmate er voortgang wordt gemaakt.

Slider

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

BusyIndicator

Een visuele indicator voor de hele app, meestal een spinner, die aangeeft dat een wereldwijd proces gaande is.

Loading

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

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 om over verschillende secties of weergaven te schakelen.

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) simuleert binnen de app, waarmee gebruikers tekstgebaseerde commando's 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 container mogelijk maakt—ideaal voor dynamische gegevensbelasting.

Tree

Een component voor het weergeven van hiërarchische gegevens, waarmee gebruikers geneste items kunnen uitbreiden, inkrimpen en ermee kunnen communiceren.

Avatar

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

MarkdownViewer

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