UI Components

Ouvrir dans ChatGPT

Dans webforJ, les applications sont créées à l'aide d'unités modulaires connues sous le nom de composants, qui facilitent le développement rapide et efficace de l'interface utilisateur. Le cadre offre une gamme de composants essentiels tels que des boutons, des éléments de saisie et des conteneurs de mise en page. Après avoir maîtrisé les fondamentaux, vous pouvez consulter les JavaDocs pour un aperçu détaillé de tous les composants et de leurs fonctionnalités.

Mise en page

Les composants de mise en page fournissent la base pour structurer les interfaces utilisateur, permettant aux développeurs d'organiser le contenu de manière efficace. Ces composants offrent diverses façons de contrôler l'arrangement des composants enfants, que ce soit pour des mises en page simples ou complexes.

Les composants de mise en page suivants sont conçus pour gérer un large éventail de cas d'utilisation, de la conception réactive à la gestion avancée du contenu.

AppLayout

Un composant conteneur qui fournit une mise en page structurée pour la navigation et l'organisation du contenu de niveau supérieur de l'application.

Toolbar

Un composant conteneur horizontal qui contient un ensemble de boutons d'action, icônes ou autres contrôles, généralement utilisés pour effectuer des tâches liées au contexte actuel.

FlexLayout

Un composant de mise en page qui arrange ses enfants en utilisant des règles de boîte flexible (flexbox) pour une conception réactive et un alignement.

ColumnsLayout

Un composant de mise en page qui dispose ses enfants en plusieurs colonnes verticales, utile pour créer des formulaires et des structures de type grille.

Splitter

Un composant de mise en page qui divise l'espace disponible entre deux composants enfants, permettant aux utilisateurs de les redimensionner en faisant glisser la barre de séparation.

Drawer

Un composant de panneau coulissant généralement utilisé pour la navigation latérale ou héberger du contenu supplémentaire pouvant être affiché ou masqué.

Dialog

Un composant de fenêtre modale qui superpose le contenu pour afficher des informations importantes ou inciter à l'interaction utilisateur, nécessitant souvent une action de l'utilisateur pour se fermer.

Login

Un composant qui fournit une interface utilisateur préconstruite pour l'authentification des utilisateurs, incluant généralement des champs pour le nom d'utilisateur et le mot de passe avec un bouton de soumission.

Accordion

Un ensemble de panneaux empilés verticalement et pliables, chacun avec un en-tête cliquable qui active la visibilité de son contenu.

TabbedPane

Un composant conteneur qui organise le contenu en plusieurs onglets, permettant aux utilisateurs de passer d'une vue ou section à une autre.

Saisie de données

Les composants de saisie de données fournissent des outils essentiels pour capturer les saisies des utilisateurs et gérer les interactions au sein de votre application. Ces composants sont polyvalents, facilitant la création de formulaires interactifs et la collecte de divers types de données.

TextField

Un composant d'entrée à une ligne pour saisir et modifier des données textuelles.

MaskedTextField

Un composant de saisie de texte qui limite la saisie de l'utilisateur à un format ou un modèle spécifique, généralement utilisé pour des champs comme les numéros de téléphone, les dates ou les numéros de carte de crédit.

NumberField

Un composant qui fournit un champ d'entrée basé sur le navigateur pour entrer des valeurs numériques, avec des contrôles intégrés pour incrémenter ou décrémenter la valeur.

MaskedNumberField

Un composant de saisie numérique qui limite la saisie de l'utilisateur à un format ou un modèle numérique spécifique, garantissant une saisie valide, comme pour la monnaie, les pourcentages ou d'autres nombres formatés.

PasswordField

Un composant d'entrée à une ligne pour saisir et masquer en toute sécurité des données de mot de passe.

DateField

Un composant qui fournit un sélecteur de date basé sur le navigateur pour sélectionner une date via un champ d'entrée.

MaskedDateField

Un composant de saisie de date qui impose un format ou un modèle de date spécifique, garantissant que l'utilisateur saisit une date valide selon le masque défini.

TimeField

Un composant qui fournit un sélecteur de temps basé sur le navigateur pour sélectionner une valeur horaire via un champ d'entrée.

MaskedTimeField

Un composant de saisie horaire qui impose un format ou un modèle temporel spécifique, garantissant que l'utilisateur saisit une heure valide selon le masque défini.

DateTimeField

Un composant qui fournit un sélecteur de date et d'heure basé sur le navigateur pour sélectionner à la fois une date et une heure via un champ d'entrée unique.

ColorField

Un composant qui fournit un sélecteur de couleur basé sur le navigateur, permettant aux utilisateurs de sélectionner une couleur via un champ d'entrée.

TextArea

Un composant d'entrée de texte multi-lignes qui permet aux utilisateurs d'entrer ou de modifier de plus grands blocs de texte.

CheckBox

Un composant qui représente une option binaire, permettant aux utilisateurs de basculer entre un état coché (vrai) ou non coché (faux).

RadioButton

Un composant qui permet aux utilisateurs de sélectionner une seule option parmi un groupe de choix mutuellement exclusifs.

Switch

Un composant de basculement qui permet aux utilisateurs de passer entre deux états, comme activé/désactivé ou vrai/faux, avec une action glissante.

ChoiceBox

Un composant qui fournit une liste déroulante d'options prédéfinies, permettant aux utilisateurs de sélectionner une option dans la liste.

ComboBox

Un composant qui combine une liste déroulante avec une saisie de texte modifiable, permettant aux utilisateurs de soit sélectionner une option dans la liste, soit entrer une valeur personnalisée.

ListBox

Un composant qui affiche une liste déroulante d'options, permettant aux utilisateurs de sélectionner un ou plusieurs éléments de la liste.

Dialogues d'option

Les dialogues d'option offrent un moyen de présenter des choix aux utilisateurs ou de les inciter à confirmer avant de procéder à une action. Ces composants sont essentiels pour créer des workflows interactifs axés sur la décision, permettant aux utilisateurs de confirmer, d'annuler ou de choisir parmi diverses options de manière claire et structurée.

MessageDialog

Un composant de dialogue utilisé pour afficher des messages ou des alertes informatives à l'utilisateur, généralement avec un seul bouton OK pour reconnaitre le message.

ConfirmDialog

Un composant de dialogue qui demande à l'utilisateur de confirmer ou d'annuler une action, fournissant généralement des boutons Oui et Non ou OK et Annuler.

InputDialog

Un composant de dialogue qui invite l'utilisateur à saisir du texte ou des données, fournissant généralement un champ d'entrée avec des boutons d'action comme OK et Annuler.

FileChooserDialog

Un composant de dialogue qui permet aux utilisateurs de parcourir et sélectionner des fichiers depuis le système de fichiers du serveur.

FileUploadDialog

Un composant de dialogue qui permet aux utilisateurs de télécharger des fichiers depuis leur système de fichiers local vers l'application.

FileSaveDialog

Un composant de dialogue qui permet aux utilisateurs de sauvegarder un fichier à un emplacement spécifié sur le système de fichiers du serveur.

Interaction et affichage

Cette catégorie comprend des composants qui facilitent les interactions utilisateur et affichent visuellement des données ou des états d'application. Ces composants aident les utilisateurs à naviguer dans l'application, à déclencher des actions et à comprendre les progrès ou les résultats à travers des éléments visuels dynamiques.

Table

Un composant utilisé pour afficher des données dans un format tabulaire structuré avec des lignes et des colonnes, prenant en charge des fonctionnalités telles que le tri et la pagination.

GoogleCharts

Un composant qui s'intègre à Google Charts pour afficher divers types de graphiques et de représentations de données visuelles dans l'application.

Button

Un composant cliquable qui déclenche une action ou un événement lorsqu'il est pressé.

Toast

Un composant de notification léger et non bloquant qui affiche brièvement un message à l'utilisateur avant de disparaître automatiquement.

Alert

Un composant qui affiche des messages ou des alertes importants dans un format saisissant pour attirer l'attention de l'utilisateur.

Badge

Un petit composant d'étiquette pour afficher des comptes, des états ou de courtes métadonnées, avec support pour des thèmes, tailles et icônes.

DesktopNotification

Un composant qui utilise l’API de notification native du navigateur pour alerter les utilisateurs avec des notifications de bureau personnalisées.

Navigator

Un composant de pagination personnalisable pour naviguer dans des ensembles de données, prenant en charge des mises en page avec des boutons premier, dernier, suivant, précédent et des champs de saut rapide.

ProgressBar

Un composant qui représente visuellement le progrès d'une tâche ou d'un processus, généralement affiché sous la forme d'une barre horizontale qui se remplit au fur et à mesure des progrès réalisés.

Slider

Un composant qui permet aux utilisateurs de sélectionner une valeur dans une plage définie en faisant glisser un curseur le long d'une piste.

BusyIndicator

Un indicateur visuel à l'échelle de l'application, généralement un chargement, signalant qu'un processus global est en cours.

Loading

Un indicateur de chargement de portée qui montre à l'intérieur d'un composant parent spécifique, indiquant que le contenu ou les données sont en cours de chargement dans cette section.

Spinner

Un composant qui affiche une animation de rotation, généralement utilisé pour indiquer qu'un processus ou une action est en cours.

AppNav

Un composant qui fournit un menu de navigation pour l'application, généralement utilisé pour lister des liens ou des éléments de navigation pour passer entre différentes sections ou vues.

Icon

Un composant qui affiche un symbole graphique ou une image, souvent utilisé pour représenter une action, un état ou une catégorie dans l'interface utilisateur.

Terminal

Un composant qui simule une interface de ligne de commande (CLI) au sein de l'application, permettant aux utilisateurs d'entrer et d'exécuter des commandes sous forme textuelle.

InfiniteScroll

Un composant qui charge plus d'éléments lors du défilement, montre un indicateur de chargement et suit quand tout le contenu est récupéré.

Refresher

Un composant qui permet une interaction de tirage pour rafraîchir au sein de conteneurs défilables, idéal pour le chargement dynamique de données.

Tree

Un composant pour afficher des données hiérarchiques, permettant aux utilisateurs d'élargir, de réduire et d'interagir avec des éléments imbriqués.

Avatar

Un composant pour afficher les photos de profil des utilisateurs ou leurs initiales, avec prise en charge de différentes tailles, formes et thèmes.

MarkdownViewer

Un composant pour afficher du contenu markdown avec un rendu progressif caractère par caractère, idéal pour les interfaces de chat IA et le texte en streaming.