UI Components

Open in ChatGPT

In webforJ worden applicaties gemaakt met behulp van modulaire eenheden die bekend staan als Componenten, die een 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, waardoor ontwikkelaars inhoud efficiënt kunnen organiseren. Deze componenten bieden verschillende manieren om de indeling van kindcomponenten te regelen, of het nu gaat om eenvoudige of complexe lay-outs.

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

AppLayout

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

Toolbar

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

FlexLayout

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

ColumnsLayout

Een lay-outcomponent die zijn kinderen in meerdere verticale kolommen ordent, handig voor het maken van formulieren en rasterachtige structuren.

Splitter

Een lay-outcomponent die de beschikbare ruimte tussen twee kindcomponenten verdeelt, zodat gebruikers deze kunnen aanpassen door de splitbalk 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 inhoud wordt weergegeven om belangrijke informatie weer te geven of gebruikersinteractie te vragen, vaak met actie van de gebruiker om te sluiten.

Login

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

TabbedPane

Een containercomponent die inhoud organiseert in meerdere tabbladen, zodat 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, 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 tekstinvoerelement 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 invoerveld op basis van de browser biedt voor het invoeren van numerieke waarden, met ingebouwde bedieningselementen voor het verhogen of verlagen van de waarde.

MaskedNumberField

Een numeriek invoerelement dat de gebruikersinvoer beperkt tot een specifiek numeriek formaat of patroon, waardoor geldige nummerinvoer zoals voor valuta, percentages of andere opgemaakte nummers wordt gegarandeerd.

PasswordField

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

DateField

Een component die een standaard datepicker op basis van de browser biedt voor het selecteren van een datum via een invoerveld.

MaskedDateField

Een datum invoerelement dat een specifiek datumformaat of patroon afdwingt, waardoor de gebruiker een geldige datum volgens de gedefinieerde mask moet invoeren.

TimeField

Een component die een standaard tijdkiezer op basis van de browser biedt voor het selecteren van een tijdwaarde via een invoerveld.

MaskedTimeField

Een tijdinvoerelement dat een specifiek tijdformaat of patroon afdwingt, waardoor de gebruiker een geldige tijd volgens de gedefinieerde mask moet invoeren.

DateTimeField

Een component die een standaard date- en tijdkiezer op basis van de browser biedt voor het selecteren van zowel datum als tijd via één invoerveld.

ColorField

Een component die een standaard kleuroverzicht op basis van de browser biedt, waarmee gebruikers een kleur vanuit een invoerveld kunnen selecteren.

TextArea

Een multi-regel tekstinvoerelement dat gebruikers in staat stelt om grotere tekstblokken in te voeren of te bewerken.

CheckBox

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

RadioButton

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

Switch

Een togglecomponent 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, waarmee gebruikers één optie uit de lijst kunnen selecteren.

ComboBox

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

ListBox

Een component die een scrollbare lijst met opties weergeeft, zodat gebruikers één of meerdere 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 doorgaan met een actie. Deze componenten zijn essentieel voor het creëren van interactieve, beslissingsgestuurde 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, 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 vanuit het bestanden systeem van de server.

FileUploadDialog

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

FileSaveDialog

Een dialoogcomponent die gebruikers in staat stelt om een bestand op een opgegeven locatie op het bestandssysteem van de server op te slaan.

Interactie en weergave

Deze categorie omvat componenten die gebruikersinteracties faciliteren en gegevens of app-staten visueel weergeven. Deze componenten helpen gebruikers om door 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 paginering.

GoogleCharts

Een component die integreert met Google Charts om verschillende soorten grafieken en visuele gegevenspresentaties 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 deze automatisch verdwijnt.

Alert

Een component die belangrijke berichten of waarschuwingen op een opvallende manier 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 desktopnotificaties.

Navigator

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

ProgressBar

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

Slider

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

BusyIndicator

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

Loading

Een beperkte laadindicator die binnen een specifieke bovenliggende component wordt weergegeven, waarmee wordt aangegeven 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 gaande 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 opdrachten kunnen invoeren en uitvoeren.

InfiniteScroll

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

Refresher

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

Tree

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