Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Le contrôle Button

Compatible Flex 3. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 12 mars 2010

Cet article est une traduction de l'aide Adobe Flex.

Adobe a donné son accord concernant la traduction de la documentation.

Introduction

Le contrôle Button est un bouton rectangulaire couramment utilisé. Les contrôles Button montrent qu'ils peuvent être pressés, et possèdent une légende, une icône, ou les deux. Vous pouvez spécifier, de façon optionnelle, une apparence graphique pour chaque état du bouton.

Vous pouvez créer un contrôle Button normal ou un contrôle Button poussoir. Un contrôle Button normal reste dans son état appuyé tant que le bouton de la souris est enfoncé après avoir sélectionné le contrôle. Un contrôle Button poussoir reste dans son état appuyé jusqu'à ce que l'on le sélectionne de nouveau.

Les boutons utilisent des écouteurs d'événements pour réaliser une action quand l'utilisateur sélectionne le contrôle. Quand un utilisateur clique sur un contrôle Bouton, et que le bouton est actif , il diffuse un événement click et un événement buttonDown. Un bouton diffuse toujours des événements tels que mouseMove, mouseOver, mouseOut, rollOver, rollOut, mouseDown, et mouseUp qu'il soit actif ou non.

L'exemple suivant montre un contrôle Button:

Vous pouvez utiliser des apparences graphiques personnalisées pour modifier vos buttons afin qu'ils correspondent au mieux à votre application et à ses fonctionnalités. Vous pouvez donner au contrôle Button, plusieurs images définissant l'apparence des états normal, survol, enfoncé et désactivé, et toutes les apparences de ces états peuvent être différentes suivant que le bouton soit sélectionné ou non. Le contrôle peut changer dynamiquement les images des apparences.

L'exemple suivant montre sept contrôles Button permettant l'enregistrement ou la lecture de vidéo, disposés dans un conteneur de type HBox. Tous les boutons sont dans leur état normal:

Création d'un contrôle Button

Vous définissez un contrôle Button en MXML en utilisant la balise <mx:Button>, comme le montre l'exemple ci-dessous. Spécifiez une valeur à la propriété id si vous souhaitez utiliser votre contrôle ailleurs dans une balise MXML ou dans un bloc ActionScript. Le code suivant crée un contrôle Button avec comme légende « Hello world! »:

<?xml version="1.0"?>
<!-- controls\button\ButtonLabel.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Button id="button1" label="Hello world!" width="100"/>
</mx:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

L'icône d'un contrôle Button, si spécifié, et la légende sont centrés dans les limites du contrôle Button. Vous pouvez positionner la légende en fonction de l'icône en utilisant la propriété labelPlacement qui accepte les valeurs right, left, bottom, et top.

Intégration d'une icône dans un contrôle Button

Les icônes de boutons peuvent être intégrer à la compilation. Vous ne pouvez pas référencer une icône de bouton à l'exécution. Vous pouvez utiliser la syntaxe @Embed dans la propriété icon pour intégrer des fichiers GIF, JPEG, PNG, SVG, ou SWF, ou vous pouvez la lier à une image que vous avez défini dans un bloc script en utilisant le metadata [Embed]. Si vous voulez référencer l'aspect graphique du bouton à l'exécution, vous devez utiliser une balise <mx:Image> dans une balise <mx:Button>.

Pour plus d'informations sur l'intégration de ressources, consultez Embedding Assets

L'exemple de code suivant crée un contrôle Button avec une légende et une icône:

<?xml version="1.0"?>
<!-- controls\button\ButtonLabelIcon.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Button 
        label="Icon Button" 
        icon="@Embed(source='assets/logo.jpg')"
        height="36"
     />
</mx:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

L'icône est dans le sous-dossier assets du dossier contenant le fichier de l'application. Il en résulte un bouton affichant l'icône à gauche de la légende:

Pour plus d'informations sur l'intégration de ressources, consultez Embedding Assets

Redimensionnement d'un contrôle Button

Par défaut, Flex adapte la largeur du contrôle Button pour correspondre à la largeur de la légende, plus celle de l'icône, plus 6 pixels d'espacement autour de l'icône. Vous pouvez surcharger cette largeur par défaut en définissant la propriété width du contrôle Button sur une valeur ou sur un pourcentage du conteneur parent. Si vous spécifiez une largeur en pourcentage, le bouton se redimensionne, entre sa largeur minimum et sa largeur maximum, relativement à la taille de son conteneur parent.

Si vous spécifiez une largeur au contrôle Button et qu'elle n'est pas suffisante pour afficher l'intégralité de la légende, celle-ci est tronquée et est terminée par (…). L'intégralité de la légende est affichée en tant que info-bulle lorsque vous déplacez la souris au dessus du bouton. Si vous avez aussi définit une info-bulle en utilisant la propriété tooltip, l'info-bulle s'affiche plutôt que le texte de la légende.

Un texte plus haut que le contrôle Bouton est coupé. Si vous définissez explicitement, pour le contrôle Button, une taille qui n'est pas assez grande pour accueillir son icône, les icônes plus grandes que le contrôle Button s'étendent en dehors des limites rectangulaires du bouton.

Interaction utilisateur du contrôle Button

Quand un utilisateur clique sur un contrôle Button, le contrôle Button diffuse un événement click, comme le montre l'exemple suivant:

<?xml version="1.0"?>
<!-- controls\button\ButtonClick.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <!-- Input field. -->
    <mx:TextInput id="myInput" width="150" text=""/>
 
    <!-- Button control that triggers the copy. -->
    <mx:Button id="myButton" label="Copy Text"
        click="myText.text=myInput.text;"/>
 
    <!-- Output text box. -->
    <mx:TextArea id="myText" text="" width="150" height="20"/>
</mx:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Dans cet exemple, le clic sur le contrôle Button copie le texte du contrôle TextInput vers le contrôle TextArea.

Si un contrôle bouton est activé, il se comporte comme suit:

  • Quand l'utilisateur déplace le pointeur de souris au dessus du contrôle Button, le contrôle Button affiche l'apparence de son état dessus.
  • Quand l'utilisateur clique sur le contrôle Button, le focus se déplace sur le contrôle et le contrôle Button affiche l'apparence de son état appuyé. Quand l'utilisateur relâche le bouton de souris, le contrôle Button retourne à son apparence dessus. NDT: Sauf si sa propriété toggle est définie à true.
  • Si l'utilisateur déplace le pointeur de souris en dehors du bouton tout en conservant le bouton de la souris enfoncé, le bouton reprend son état normal et conserve le focus.
  • Si la propriété toggle est définie à true, l'état du bouton ne change pas quand l'utilisateur relâche le bouton de la souris, et continue à afficher l'apparence de son état appuyé. Le bouton ne retournera à son apparence dessus ou normal que s'il est pressé une seconde fois. C'est ce comportement que l'on appelle un bouton de type poussoir.

Si un contrôle Button est désactivé, il affiche son apparence désactivée, quel que soit l'interaction utilisateur. Dans l'état désactivé, toutes les actions souris ou clavier sont ignorées.

Modification de l'apparence d'un contrôle Button

Vous pouvez spécifier un ensemble de huit propriétés d'apparence différentes, où chaque propriété correspond à un état du bouton. Ces apparences déterminent l'apparence générale des boutons. Vous pouvez spécifier des images pour tous les états suivants du bouton:

  • Up (La souris est en dehors du bouton)
  • Down (La souris est sur le bouton et le bouton est appuyé)
  • Over (La souris survole le bouton)
  • Disabled
  • Selected and up
  • Selected and down
  • Selected and over
  • Selected and disabled

Vous spécifiez l'apparence par défaut d'un contrôle Button en définissant une image pour l'état haut (la propriété upSkin). Tous les autres états utilisent l'image de l'état haut ou une image d'un autre état comme image par défaut. Par exemple, si vous ne spécifiez pas d'image pour l'état appuyé , Flex utilise l'image spécifiée par l'état dessus; si vous ne spécifiez pas d'image pour l'état dessus, Flex utilise l'image de l'état haut. Les états sélectionnés ne sont utilisés que pour les boutons poussoirs qui sont sélectionnés (pressés).

L'image définit l'apparence du bouton, y compris sa forme. L'image peut-être un fichier au format GIF, JPEG, PNG, SVG, ou SWF. Vous pouvez créer les apparences en tant que fichiers image indépendants, ou incorporer plusieurs images dans un fichier SWF unique.

Flex doit embarquer les images du bouton dans l'application SWF à la compilation; vous ne pouvez pas télécharger les images depuis un serveur à l'exécution. Pour embarquer une image, utilisez la directive MXML de compilation @Embed. L'exemple de code suivant montre comment utiliser un fichier GIF pour l'état haut (l'état par défaut):

upSkin="@Embed(source='assets/buttonUp.gif')"

L'exemple de code suivant crée un bouton poussoir avec une image pour les états haut, dessus, appuyé et désactivé. Le bouton possède aussi une légende et une icône:

<?xml version="1.0"?>
<!-- controls\button\ButtonSkin.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
<mx:Button label="Image Button" 
    toggle="true" 
    color="0xFFFFAA" 
    textRollOverColor="0xAAAA55" 
    textSelectedColor="0xFFFF00"
    upSkin="@Embed(source='assets/buttonUp.gif')"
    overSkin="@Embed(source='assets/buttonOver.gif')"
    downSkin="@Embed(source='assets/buttonDown.gif')"
    disabledSkin="@Embed(source='assets/buttonDisabled.gif')"
    icon="@Embed(source='assets/logo.gif')"/>
</mx:Application>

code

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.