Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Le contrôle LinkButton

Compatible Flex 4. 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 08 avril 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 LinkButton fait partie du jeu de composants MX. Il n'a pas d'équivalent dans le jeu de composants Spark.

Le contrôle LinkButton définit un lien hypertexte sur une ligne, supportant en option une icône. Vous pouvez utiliser un contrôle LinkButton pour ouvrir une URL dans le navigateur.

Création d'un contrôle LinkButton

Vous définissez un contrôle LinkButton en MXML en utilisant la balise <mx:LinkButton>, comme le montre l'exemple suivant. 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:

<?xml version="1.0"?>
<!-- controls\button\LBSimple.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <mx:HBox>
        <mx:LinkButton label="link1"/>
        <mx:LinkButton label="link2"/>
        <mx:LinkButton label="link3"/>
    </mx:HBox>
</s: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.

Le code suivant contient un contrôle LinkButton qui ouvre une URL dans le navigateur:

<?xml version="1.0"?>
<!-- controls\button\LBURL.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <mx:LinkButton label="ADBE" 
        width="100"
        click="navigateToURL(new URLRequest('http://quote.yahoo.com/q?s=ADBE'), 'quote')"/>
</s: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.

Cet exemple utilise la méthode navigateToURL() pour ouvrir l'URL.

Le contrôle LinkButton fournit automatiquement des repères visuels lorsque vous déplacez le pointeur de souris au-dessus du contrôle ou lorsque vous cliquez sur le contrôle. Le premier exemple de code ne contient pas de gestionnaire de clic mais la couleur change lorsque vous déplacez le pointeur de souris au-dessus du contrôle ou lorsque vous cliquez sur le lien.

L'exemple de code suivant contient des contrôles LinkButton pour naviguer dans un conteneur de navigation ViewStack.

<?xml version="1.0"?>
<!-- controls\button\LBViewStack.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <mx:VBox>
 
        <!-- Put the links in an HBox container across the top. -->
        <mx:HBox>
            <mx:LinkButton label="Link1" 
                click="viewStack.selectedIndex=0;"/>
            <mx:LinkButton label="Link2" 
                click="viewStack.selectedIndex=1;"/>
            <mx:LinkButton label="Link3" 
                click="viewStack.selectedIndex=2;"/>
        </mx:HBox>
 
        <!-- This ViewStack container has three children. -->
        <mx:ViewStack id="viewStack">
            <mx:VBox width="150">
                <mx:Label text="One"/>
            </mx:VBox>
            <mx:VBox width="150">
                <mx:Label text="Two"/>
            </mx:VBox>          
            <mx:VBox width="150">
                <mx:Label text="Three"/>
            </mx:VBox>
        </mx:ViewStack>
    </mx:VBox>
</s: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.

Le texte d'un contrôle LinkButton est centré dans les limites du contrôle LinkButton. Vous pouvez positionner le texte en relation avec l'icône en utilisant la propriété labelPlacement, qui accepte les valeurs right, left, bottom, et top.

Interaction utilisateur du contrôle LinkButton

Quand un utilisateur clique sur un contrôle LinkButton, le contrôle LinkButton diffuse un événement click. Si un contrôle LinkButton est activé, il se produit ceci:

  • Quand l'utilisateur déplace le pointeur de souris au dessus du contrôle LinkButton, le contrôle LinkButton affiche son apparence « dessus ».
  • Quand l'utilisateur clique sur le contrôle LinkButton, le focus d'entrée se déplace sur le contrôle et le contrôle LinkButton affiche son apparence « pressée ». Quand l'utilisateur relâche le bouton de souris, le contrôle retourne à son apparence « dessus ».
  • Si l'utilisateur déplace le pointeur de souris en dehors du contrôle tout en gardant appuyé le bouton de souris, le contrôle affiche son apparence « normale » et conserve le focus d'entrée.
  • Si la propriété toggle est définie sur true, l'état du contrôle LinkButton ne change pas jusqu'à ce que le bouton de la souris soit relâché sur le contrôle.

Si un contrôle LinkButton est désactivé, il apparaît dans son état désactivé, quel que soit l'interaction de l'utilisateur. Dans l'état désactivé, le contrôle ignore toutes les interactions souris ou clavier.