UI Components

Ouvrir dans ChatGPT

Dans webforJ, les applications sont créées à l'aide d'unités modulaires appelées Composants, qui facilitent le développement rapide et efficace de l'interface utilisateur. Le cadre offre une gamme de composants essentiels comme 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.

Mises en page

Les composants de mise en page fournissent la base pour structurer les interfaces utilisateur, permettant aux développeurs d'organiser efficacement le contenu. Ces composants offrent différentes manières 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, du design réactif à la gestion avancée du contenu.

AppLayout

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

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 qui peut ê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éconçue pour l'authentification des utilisateurs, incluant généralement des champs pour le nom d'utilisateur et le mot de passe ainsi qu'un bouton de soumission.

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 l'entrée utilisateur 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 sur une seule ligne pour saisir et modifier des données textuelles.

MaskedTextField

Un composant d'entrée textuelle qui restreint l'entrée 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 des numéros de carte de crédit.

NumberField

Un composant qui fournit un champ d'entrée basé sur le navigateur par défaut pour saisir des valeurs numériques, avec des contrôles intégrés pour augmenter ou diminuer la valeur.

MaskedNumberField

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

PasswordField

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

DateField

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

MaskedDateField

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

TimeField

Un composant qui fournit un sélecteur d'heure basé sur le navigateur par défaut pour sélectionner une valeur temporelle via un champ d'entrée.

MaskedTimeField

Un composant d'entrée horaire qui impose un format ou un modèle d'heure spécifique, garantissant que l'utilisateur saisisse 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 par défaut pour sélectionner à la fois la date et l'heure via un champ d'entrée.

ColorField

Un composant qui fournit un sélecteur de couleur basé sur le navigateur par défaut, 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 dé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 de glissement.

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 un champ de texte modifiable, permettant aux utilisateurs de sélectionner une option dans la liste ou d'entrer une valeur personnalisée.

ListBox

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

Dialogues d'options

Les dialogues d'options fournissent un moyen de présenter aux utilisateurs des choix ou de leur demander une confirmation avant de procéder à une action. Ces composants sont essentiels pour créer des workflows interactifs et orientés vers des décisions, permettant aux utilisateurs de confirmer, annuler ou choisir parmi diverses options de manière claire et structurée.

MessageDialog

Un composant de dialogue utilisé pour afficher des messages d'information ou des alertes à 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 à entrer 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 de sélectionner des fichiers à partir du 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 à travers des é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 à Google Charts pour afficher divers types de graphiques et de représentations visuelles des 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 importants ou des avertissements dans un format visible pour capter l'attention de l'utilisateur.

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 à travers 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 l'avancement d'une tâche ou d'un processus, généralement affiché sous forme de barre horizontale qui se remplit à mesure que des progrès sont 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 spinner, signalant qu'un processus global est en cours.

Loading

Un indicateur de chargement scoped qui montre à l'intérieur d'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 tournante, généralement utilisée 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ée 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 textuelles.

InfiniteScroll

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

Refresher

Un composant qui permet une interaction pull-to-refresh au sein de conteneurs défilables, idéal pour le chargement de données dynamiques.

Tree

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

Avatar

Un composant pour afficher des photos de profil ou des initiales d'utilisateur, avec des options pour différentes tailles, formes et thèmes.