Composants d'interface

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'UI. Le cadre offre une gamme de composants essentiels tels que des boutons, des éléments d'entrée 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'agencement 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, du design réactif à la gestion avancée de contenu.

AppLayout

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

Toolbar

Un composant conteneur horizontal qui contient un ensemble de boutons d'action, d'icônes ou d'autres contrôles, généralement utilisé 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 un design réactif et un alignement.

ColumnsLayout

Un composant de mise en page qui arrange ses enfants en plusieurs colonnes verticales, utile pour créer des formulaires et des structures en 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 pour abriter un contenu supplémentaire pouvant être affiché ou masqué.

Dialog

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

Login

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

Accordion

Un ensemble empilé verticalement de panneaux réductibles, chacun avec un en-tête cliquable qui alterne la visibilité de son contenu corporel.

TabbedPane

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

Card

Une surface qui regroupe du contenu et des actions connexes, avec des régions pour les médias, les en-têtes, le contenu principal et les pieds de page.

Saisie de données

Les composants de saisie de données fournissent des outils essentiels pour capturer les entrées 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 seule ligne pour saisir et modifier des données textuelles.

MaskedTextField

Un composant d'entrée de texte qui limite la saisie de l'utilisateur à un format ou à un motif spécifique, généralement utilisé pour des champs tels que 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 saisir des valeurs numériques, avec des contrôles intégrés pour incrémenter ou décrémenter la valeur.

MaskedNumberField

Un composant d'entrée numérique qui limite la saisie de l'utilisateur à un format ou à un motif numérique spécifique, garantissant une saisie valide de nombre tel que pour la monnaie, les pourcentages ou d'autres nombres formatés.

PasswordField

Un composant d'entrée à une seule ligne pour saisir et masquer les données de mot de passe de manière sécurisée.

DateField

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

MaskedDateField

Un composant d'entrée de date qui impose un format ou un motif 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 d'heure basé sur le navigateur pour sélectionner une valeur horaire par le biais d'un champ d'entrée.

MaskedTimeField

Un composant d'entrée horaire qui impose un format ou un motif horaire 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 la date et l'heure via un seul champ d'entrée.

ColorField

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

TextArea

Un composant d'entrée de texte multi-lignes qui permet aux utilisateurs de saisir 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 à bascule qui permet aux utilisateurs de passer entre deux états, tels que activé/désactivé ou vrai/faux, avec une action de glissement.

ChoiceBox

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

ComboBox

Un composant qui combine une liste déroulante avec un champ de texte éditable, permettant aux utilisateurs de sélectionner une option de la liste ou d'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.

Upload

Un sélecteur de fichiers en ligne qui permet aux utilisateurs de sélectionner un ou plusieurs fichiers de leur machine locale et de les télécharger sur le serveur, avec des fonctionnalités de glisser-déposer, des filtres et un suivi des événements par fichier.

Boîtes de dialogue d'options

Les boîtes de dialogue d'options fournissent un moyen de présenter aux utilisateurs des choix ou de les inviter à confirmer avant de procéder à une action. Ces composants sont essentiels pour créer des flux de travail interactifs orientés vers 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 d'information à l'utilisateur, généralement avec un seul bouton OK pour reconnaître 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 ainsi que des boutons d'action comme OK et Annuler.

FileChooserDialog

Un composant de dialogue qui permet aux utilisateurs de parcourir et de sélectionner des fichiers dans 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 d'enregistrer 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 de l'application. Ces composants aident les utilisateurs à naviguer dans l'application, à déclencher des actions et à comprendre les progrès ou les résultats par le biais d'éléments visuels dynamiques.

Table

Un composant utilisé pour afficher des données dans un format structuré et tabulaire 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 avec Google Charts pour afficher divers types de graphiques et de représentations visuelles de données 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 avertissements importants dans un format perceptible pour attirer l'attention de l'utilisateur.

Badge

Un petit composant d'étiquette pour afficher des décomptes, des statuts ou des métadonnées courtes, avec prise en charge des thèmes, des tailles et des 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 la progression d'une tâche ou d'un processus, généralement affiché sous forme de barre horizontale qui se remplit au fur et à mesure des progrès.

Slider

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

BusyIndicator

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

Loading

Un indicateur de chargement contextualisé qui montre dans un composant parent spécifique, indiquant que du contenu ou des 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 statut 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 de saisir et d'exécuter des commandes basées sur du texte.

InfiniteScroll

Un composant qui charge plus d'éléments lors du défilement, affiche un chargeur et suit lorsque tout le contenu est récupéré.

Refresher

Un composant qui permet une interaction de tirage pour actualiser dans des conteneurs déroulants, idéal pour le chargement dynamique de données.

Tree

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

Avatar

Un composant pour afficher des photos de profil d'utilisateur ou des initiales, avec prise en charge de différentes tailles, shapes 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 AI et le texte en streaming.