Button

Ouvrir dans ChatGPT

Ombre dwc-button 23.02

Java API

Un Button est un élément cliquable qui déclenche une action lorsqu'il est pressé. Il peut afficher du texte, des icônes, ou une combinaison des deux. Les boutons prennent en charge plusieurs thèmes visuels et tailles, et peuvent être désactivés pour éviter toute interaction lors d'opérations prolongées ou lorsque certaines conditions ne sont pas remplies.

Usages

La classe Button est un composant polyvalent qui est couramment utilisé dans diverses situations où des interactions et des actions utilisateur doivent être déclenchées. Voici quelques scénarios typiques où vous pourriez avoir besoin d'un bouton dans votre application :

1. Soumission de formulaire : Les boutons sont souvent utilisés pour soumettre des données de formulaire. Par exemple, dans une application, vous pouvez utiliser :

• Un bouton "Soumettre" pour envoyer des données au serveur
• Un bouton "Effacer" pour retirer les informations déjà présentes dans le formulaire

2. Actions utilisateur : Les boutons sont utilisés pour permettre aux utilisateurs d'effectuer des actions spécifiques au sein de l'application. Par exemple, vous pouvez avoir un bouton étiqueté :

• "Supprimer" pour initier la suppression d'un élément sélectionné
• "Enregistrer" pour enregistrer les modifications apportées à un document ou une page.

3. Dialogues de confirmation : Les boutons sont souvent inclus dans des composants Dialog conçus à diverses fins pour fournir des options aux utilisateurs pour confirmer ou annuler une action, ou toute autre fonctionnalité intégrée dans le Dialog que vous utilisez.

4. Déclencheurs d'interaction : Les boutons peuvent servir de déclencheurs pour des interactions ou des événements au sein de l'application. En cliquant sur un bouton, les utilisateurs peuvent initier des actions complexes ou déclencher des animations, rafraîchir du contenu ou mettre à jour l'affichage.

5. Navigation : Les boutons peuvent être utilisés à des fins de navigation, telles que se déplacer entre différentes sections ou pages d'une application. Les boutons pour la navigation pourraient inclure :

• "Suivant" - Amène l'utilisateur à la page ou section suivante de l'application ou de la page actuelle.
• "Précédent" - Ramène l'utilisateur à la page précédente de l'application ou à la section dans laquelle il se trouve.
• "Retour" Ramène l'utilisateur à la première partie de l'application ou de la page dans laquelle il se trouve.

L'exemple suivant démontre des boutons utilisés pour la soumission de formulaire et l'effacement des entrées :

Afficher le code

ButtonView.java

Ajouter des icônes aux boutons 24.11

Incorporer une icône dans un bouton peut grandement améliorer le design de votre application, permettant aux utilisateurs d'identifier rapidement les éléments actionnables à l'écran. Le composant Icon propose un large choix d'icônes parmi lesquelles choisir.

En utilisant les méthodes setPrefixComponent() et setSuffixComponent(), vous avez la flexibilité de déterminer si une Icon doit apparaître avant ou après le texte sur un bouton. Alternativement, la méthode setIcon() peut être utilisée pour ajouter une Icon après le texte, mais avant l'emplacement suffix du bouton.

conseil

Par défaut, une Icon hérite du thème et de l'expansion du bouton.

Vous trouverez ci-dessous des exemples de boutons avec du texte à gauche et à droite, ainsi qu'un bouton avec uniquement une icône :

Afficher le code

ButtonIconView.java

Noms

Le composant Button utilise un nom, qui est utilisé pour l'accessibilité. Lorsqu'un nom n'est pas explicitement défini, l'étiquette du Button sera utilisée à la place. Cependant, certaines icônes n'ont pas d'étiquettes, et affichent uniquement des éléments non textuels, tels que des icônes. Dans ce cas, il est judicieux d'utiliser la méthode setName() pour garantir que le composant Button créé respecte les normes d'accessibilité.

Désactivation d'un bouton

Les composants de bouton, comme beaucoup d'autres, peuvent être désactivés pour faire comprendre à un utilisateur qu'une certaine action n'est pas encore ou n'est plus disponible. Un bouton désactivé diminuera l'opacité du bouton et est disponible pour tous les thèmes de bouton et expansions.

Afficher le code

ButtonDisableView.java

La désactivation d'un bouton peut être effectuée à tout moment dans le code en utilisant la fonction setEnabled(boolean enabled). Par commodité, un bouton peut également être désactivé lorsqu'il est cliqué en utilisant la fonction intégrée setDisabledOnClick(boolean enabled).

Dans certains cas, le fait de cliquer sur un bouton déclenche une action de longue durée. Désactiver le bouton jusqu'à ce que votre application traite l'action empêche l'utilisateur de cliquer plusieurs fois sur le bouton, surtout dans des environnements à forte latence.

conseil

La désactivation lors du clic aide non seulement à optimiser le traitement des actions, mais empêche également le développeur d'avoir à mettre en œuvre ce comportement par lui-même, car cette méthode a été optimisée pour réduire les communications aller-retour.

Style

Thèmes

Les composants Button sont livrés avec 14 thèmes discrets intégrés pour un style rapide sans utilisation de CSS. Ces thèmes sont des styles prédéfinis qui peuvent être appliqués aux boutons pour changer leur apparence et leur présentation visuelle. Ils offrent un moyen rapide et cohérent de personnaliser l'apparence des boutons dans toute une application.

Bien qu'il existe de nombreux cas d'utilisation pour chacun des différents thèmes, voici quelques exemples d'utilisation :

• Danger : Meilleur pour les actions ayant de graves conséquences, telles que l'effacement d'informations remplies ou la suppression permanente d'un compte/données.
• Default : Approprié pour des actions dans toute une application qui ne nécessitent pas d'attention particulière et sont génériques, telles que le basculement d'un paramètre.
• Primary : Approprié en tant qu'"appel à l'action" principal sur une page, comme s'inscrire, enregistrer des modifications ou continuer vers une autre page.
• Success : Excellent pour visualiser l'achèvement réussi d'un élément dans une application, comme la soumission d'un formulaire ou l'achèvement d'un processus d'inscription. Le thème de succès peut être appliqué par programme après qu'une action réussie a été réalisée.
• Warning : Utile pour indiquer qu'un utilisateur est sur le point de réaliser une action potentiellement risquée, comme quitter une page avec des modifications non enregistrées. Ces actions sont souvent moins impactantes que celles qui utiliseraient le thème Danger.
• Gray : Bon pour des actions subtiles, telles que des réglages mineurs ou des actions qui sont plus complémentaires à une page, et ne font pas partie de la fonctionnalité principale.
• Info : Bon pour fournir des informations supplémentaires clarificatrices à un utilisateur.

Vous trouverez ci-dessous des exemples de boutons avec chacun des thèmes supportés appliqués :

Afficher le code

ButtonThemesView.java

Expanses

Les valeurs des Expanses suivantes permettent un style rapide sans utiliser de CSS. Cela permet de manipuler les dimensions du bouton sans avoir à les définir explicitement à l'aide d'un style. En plus de simplifier le style, cela contribue également à créer et maintenir une uniformité dans votre application. L'expansion par défaut du Button est Expanse.MEDIUM.

Différentes tailles sont souvent appropriées pour différents usages :

• Les valeurs d'expansion plus grandes conviennent aux boutons qui doivent attirer l'attention, mettre en avant les fonctionnalités ou être essentiels à la fonctionnalité principale d'une application ou d'une page.
• Les boutons à expansion moyenne, la taille par défaut, devraient être la taille standard des boutons. Les fonctions de ces boutons ne devraient être ni plus ni moins critiques que celles de composants similaires.
• Les valeurs d'expansion plus petites devraient être utilisées pour les boutons qui n'ont pas des comportements intégrants dans l'application, et qui servent un rôle plus complémentaire ou utilitaire, plutôt que de jouer un rôle important dans l'interaction utilisateur. Cela inclut des composants Button utilisés uniquement avec des icônes à des fins utilitaires.

Vous trouverez ci-dessous les différentes expansions supportées pour le composant Button :

Afficher le code

ButtonExpansesView.java

Loading...

Meilleures pratiques

Pour assurer une expérience utilisateur optimale lors de l'utilisation du composant Button, considérez les meilleures pratiques suivantes :

1. Texte approprié : Utilisez un texte clair et concis pour le texte contenu dans votre composant Button pour fournir une indication claire de son objectif.

2. Style visuel approprié : Considérez le style visuel et le thème du Button pour assurer la cohérence avec le design de votre application. Par exemple :

• Un composant Button "Annuler" doit être stylisé avec le thème ou le style CSS approprié pour s'assurer que les utilisateurs soient sûrs de vouloir annuler une action.
• Un Button "Confirmer" aurait un style différent de celui d'un bouton "Annuler", mais se démarquerait également pour s'assurer que les utilisateurs sachent qu'il s'agit d'une action spéciale.

3. Gestion efficace des événements : Gérez les événements des Button de manière efficace et fournissez un retour d'information approprié aux utilisateurs. Référez-vous à Events pour examiner des comportements d'ajout d'événements efficaces.

4. Tests et accessibilité : Testez le comportement du bouton dans différentes situations, telles que lorsqu'il est désactivé ou reçoit le focus, pour garantir une expérience utilisateur fluide. Suivez les directives d'accessibilité pour rendre le Button utilisable par tous les utilisateurs, y compris ceux qui dépendent de technologies d'assistance.