Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Le contrôle LinkBar

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 07 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 LinkBar fait partie du jeu de composants MX. Il n'a pas d'équivalent dans le jeu de composants Spark.

Le contrôle LinkBar définit une ligne horizontale ou verticale de contrôles LinkButton qui désignent une série de destinations de liens. Vous utilisez généralement un contrôle LinkBar pour contrôler le conteneur enfant actif d'un conteneur ViewStack, ou pour créer un ensemble autonome de liens.

Création d'un contrôle LinkBar

Une des utilisations les plus communes d'un contrôle LinkBar est de contrôler le conteneur enfant actif d'un conteneur ViewStack. Pour un exemple, regardez MX ViewStack navigator container.

Vous pouvez également créer un contrôle LinkBar seul pour créer un ensemble de liens dans votre application. Dans l'exemple suivant, vous définissez un gestionnaire de l'événement itemClick pour le contrôle LinkBar en réponse à un choix utilisateur, et utilisez la propriété dataProvider du contrôle LinkBar pour préciser les textes des liens:

<?xml version="1.0"?>
<!-- controls\bar\LBarSimple.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:LinkBar borderStyle="solid"
        itemClick="navigateToURL(new URLRequest('http://www.adobe.com/' + 
            String(event.label).toLowerCase()), '_blank');">
        <mx:dataProvider>
            <fx:String>Flash</fx:String>
            <fx:String>Director</fx:String>
            <fx:String>Dreamweaver</fx:String>
            <fx:String>ColdFusion</fx:String>
        </mx:dataProvider>  
    </mx:LinkBar>
</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.

Dans cet exemple, vous utilisez la balise <mx:dataProvider> pour définir le texte des liens. L'objet d'événement passé au gestionnaire de l'événement itemClick contient le texte sélectionné par l'utilisateur. Le gestionnaire de l'événement itemClick construit une requête HTTP vers le site d'Adobe basée sur le texte, et ouvre cette page dans une nouvelle fenêtre.

Vous pouvez aussi lier des données vers la balise <mx:dataProvider> pour remplir le contrôle LinkBar, comme le montre l'exemple suivant:

<?xml version="1.0"?>
<!-- controls\bar\LBarBinding.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">
 
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
 
            [Bindable]
            private var linkData:ArrayCollection = new ArrayCollection([
                "Flash", "Director", "Dreamweaver", "ColdFusion"
            ]);
        ]]>
    </fx:Script>
 
    <mx:LinkBar 
        horizontalAlign="right" 
        borderStyle="solid" 
        itemClick="navigateToURL(new URLRequest('http://www.adobe.com/' + 
            String(event.label).toLowerCase()), '_blank');">
        <mx:dataProvider>
            {linkData}
        </mx:dataProvider>
    </mx:LinkBar>
</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.

Dans cet exemple, vous définissez les données du contrôle LinkBar en tant que variable en ActionScript, puis vous liez cette variable à la balise <mx:dataProvider>. Vous pouvez aussi lier la balise <mx:dataProvider> depuis un modèle de données Flex, depuis une réponse d'un service web, ou depuis tout autre modèle de données.

Un contrôle LinkBar crée des contrôles LinkButton basés sur les valeurs de sa propriété dataProvider. Même si LinkBar est une sous-classe de Container, n'utilisez pas les méthodes comme Container.addChild() ou Container.removeChild() pour ajouter ou supprimer des contrôles LinkButton. Au lieu de cela, utiliser des méthodes telles que addItem () et removeItem () pour manipuler la propriété dataProvider. Un contrôle LinkBar ajoute ou supprime automatiquement les enfants nécessaires en fonction des changements de la propriété dataProvider.