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 vergemakkelijken. Het raamwerk 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 opstelling van kindcomponenten te beheren, zowel voor eenvoudige als complexe lay-outs.

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

AppLayout

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

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 creëren van formulieren en rasterachtige structuren.

Splitter

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

Drawer

Een schuifpaneelcomponent die meestal wordt gebruikt voor zij-navigatie of 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 actie van de gebruiker om te sluiten.

Login

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

TabbedPane

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

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 invoercomponent voor één regel voor het invoeren en bewerken van tekstgegevens.

MaskedTextField

Een tekstinvoercmpoent die de gebruikersinvoer beperkt tot een specifiek formaat of patroon, doorgaans 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 numerieke invoercomponent die de gebruikersinvoer beperkt tot een specifiek numeriek formaat of patroon, om geldige nummerinvoer te waarborgen zoals voor valuta, percentages of andere geformatteerde nummers.

PasswordField

Een invoercomponent voor één regel 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 datum invoercomponent die een specifiek datumformaat of patroon afdwingt, om ervoor te zorgen 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 tijd invoercomponent die een specifiek tijdformaat of patroon afdwingt, om ervoor te zorgen 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 één invoerveld.

ColorField

Een component die een standaard browsergebaseerde kleurkiezer biedt, waardoor gebruikers een kleur kunnen selecteren vanuit een invoerveld.

TextArea

Een multi-regel tekstinvoerveld dat 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 die gebruikers in staat stelt om een enkele optie te selecteren uit een groep onderling exclusieve keuzes.

Switch

Een schakelingcomponent die gebruikers in staat stelt om tussen twee toestanden te schakelen, zoals aan/uit of waar/onwaar, met een schuifactie.

ChoiceBox

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

ComboBox

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

ListBox

Een component die een doorlopende 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, besluitgestuurde workflows, waarmee gebruikers kunnen 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 de gebruiker vraagt om een actie te bevestigen of te annuleren, doorgaans 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 van het serversysteem kunnen doorbladeren en selecteren.

FileUploadDialog

Een dialoogcomponent waarmee gebruikers bestanden van hun lokale systeem naar de app kunnen uploaden.

FileSaveDialog

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

Interactie en weergave

Deze categorie omvat componenten die gebruikersinteracties faciliteren 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 gegevens in een gestructureerd, tabelvormig formaat met rijen en kolommen weergeeft, 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 gebeurtenis triggert wanneer deze wordt ingedrukt.

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.

DesktopNotification

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

Navigator

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

ProgressBar

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

Slider

Een component die gebruikers in staat stelt om een waarde uit een gedefinieerd bereik te selecteren door een handvat langs een baan te slepen.

BusyIndicator

Een app-brede visuele indicator, meestal een spinner, die aangeeft dat een globaal proces aan de gang is.

Loading

Een scoped laadindicator die binnen een specifieke bovenliggende component toont dat inhoud of gegevens in dat gedeelte wordt geladen.

Spinner

Een component die een draaiende animatie toont, meestal gebruikt om aan te geven dat een proces of actie in uitvoering 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) simuleert binnen de app, waarmee 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 doorbladerbare containers mogelijk maakt - ideaal voor dynamisch laden van gegevens.

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 maten, vormen en thema's.