Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Les contrôles Spark ButtonBar et TabBar

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 02 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 Spark ButtonBar définit une ligne de boutons ayant la même apparence. Le contrôle définit un seul événement, l'événement itemClick qui est diffusé quand un des boutons est sélectionné.

Les boutons maintiennent leurs états, soit sélectionné ou désélectionné. Un seul bouton du contrôle ButtonBar peut-être dans son état sélectionné. Ce qui signifie que lorsque vous sélectionnez un bouton dans le contrôle ButtonBar, le bouton reste dans son état sélectionné jusqu'à ce que vous sélectionnez un autre bouton.

Le contrôle TabBar est similaire au contrôle ButtonBar, à l'exception qu'il affiche une ligne d'onglets au lieu d'une ligne de boutons.

Création d'un contrôle Spark ButtonBar

Vous définissez un contrôle Spark ButtonBar en MXML en utilisant la balise <s:ButtonBar>. 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.

Vous spécifiez les données du contrôle ButtonBar en utilisant la propriété dataProvider du contrôle. Cependant, comme dataProvider est la propriété par défaut du contrôle List, vous n'avez pas à spécifier une balise enfant <s:dataProvider> à la balise <s:ButtonBar>, comme le montre l'exemple suivant:

<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\spark\SparkBBarSimple.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">
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingTop="20"/>
    </s:layout>
 
    <s:ButtonBar>  
        <mx:ArrayCollection>
            <fx:String>Flash</fx:String> 
            <fx:String>Director</fx:String> 
            <fx:String>Dreamweaver</fx:String> 
            <fx:String>ColdFusion</fx:String> 
        </mx:ArrayCollection>
    </s:ButtonBar>
</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 crée une ligne de 4 contrôles Button.

Création d'un contrôle Spark TabBar

Vous définissez un contrôle Spark TabBar en MXML en utilisant la balise <s:TabBar>. 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.

Vous spécifiez les données du contrôle ButtonBar en utilisant la propriété dataProvider du contrôle. Cependant, comme dataProvider est la propriété par défaut du contrôle List, vous n'avez pas à spécifier une balise enfant <s:dataProvider> à la balise <s:TabBar>, comme le montre l'exemple suivant:

<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\spark\SparkTabBarSimple.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">
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingTop="20"/>
    </s:layout>
 
    <s:TabBar>  
        <mx:ArrayCollection>
            <fx:String>Flash</fx:String> 
            <fx:String>Director</fx:String> 
            <fx:String>Dreamweaver</fx:String> 
            <fx:String>ColdFusion</fx:String> 
        </mx:ArrayCollection>
    </s:TabBar>
</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 crée une ligne de 4 onglets.

Utilisation des contrôles Spark ButtonBar et TabBar avec un conteneur MX ViewStack

Vous pouvez utiliser les contrôles Spark ButtonBar et TabBar pour définir l'élément actif d'un conteneur ViewStack, comme le montre l'exemple suivant:

<?xml version="1.0"?>
<!-- containers\navigators\VSSparkButtonBar.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark">
 
    <s:VGroup>
        <!-- Create a Spark ButtonBar control to navigate 
            the ViewStack container. -->
        <s:ButtonBar dataProvider="{myViewStack}"/>
 
        <!-- Define the ViewStack and the three child containers. -->
        <mx:ViewStack id="myViewStack" 
            borderStyle="solid" 
            width="100%">
 
            <s:NavigatorContent id="search" label="Search">
                <s:Label text="Search Screen"/>
            </s:NavigatorContent>
 
            <s:NavigatorContent id="custInfo" label="Customer Info">
                <s:Label text="Customer Info"/>
            </s:NavigatorContent>
 
            <s:NavigatorContent id="accountInfo" label="Account Info">
                <s:Label text="Account Info"/>
            </s:NavigatorContent>
        </mx:ViewStack>
    </s:VGroup>
</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.

Pour plus d'informations sur le contrôle ViewStack, regardez MX ViewStack navigator container.

Utilisation d'apparences et de styles avec les contrôles Spark ButtonBar et TabBar

La classe d'apparence par défaut pour le contrôle ButtonBar, spark.skins.spark.ButtonBarSkin, référence 3 classes d'apparence pour définir les boutons:

Les apparences individuelles des boutons définissent les boutons qui sont des instances du contrôle ButtonBar. Vous pouvez définir des classes d'apparences personnalisées pour le contrôle ButtonBar. Vos classes d'apparences peuvent utiliser n'importe quel contrôle pour représenter chaque élément de données, pas seulement le contrôle ButtonBarButton.

Les onglets du contrôle TabBar sont dessinés de la même manière. Cependant, la classe d'apparence par défaut pour le contrôle TabBar, spark.skins.spark.TabBarSkin, référence seulement une unique classe pour dessiner les onglets: spark.skins.spark.TabBarButtonSkin.

Vous pouvez aussi définir des styles pour contrôler l'apparence des boutons ou des onglets. L'exemple suivant utilise des styles sur les contrôles ButtonBar et ButtonBarButton pour définir l'apparence individuelle des boutons:

<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\spark\SparkBBStyled.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">
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingTop="20"/>
    </s:layout>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        s|ButtonBar s|ButtonBarButton:upAndSelected,
        s|ButtonBar s|ButtonBarButton:overAndSelected,
        s|ButtonBar s|ButtonBarButton:downAndSelected,
        s|ButtonBar s|ButtonBarButton:disabledAndSelected {
            chromeColor: #663366;
            color: #9999CC;
        }
        s|ButtonBar { 
            chromeColor: #9999CC;
            color: #663366;
        }
    </fx:Style>
 
    <s:ButtonBar 
        requireSelection="true" 
        width="320">
        <mx:ArrayCollection>
            <fx:String>Flash</fx:String> 
            <fx:String>Director</fx:String> 
            <fx:String>Dreamweaver</fx:String> 
            <fx:String>ColdFusion</fx:String> 
        </mx:ArrayCollection>
    </s:ButtonBar>
</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 des sélecteurs CSS de descendance pour mettre en forme les contrôles ButtonBarButton de la ButtonBar, et pour définir des styles directement sur le contrôle ButtonBar. Les styles des contrôles ButtonBarButton définissent l'apparence des contrôles pour différents états visuels du contrôle ButtonBarButton.

Pour plus d'informations sur l'utilisation des sélecteurs de descendance, regardez Using Cascading Style Sheets.

Manipulation des événements des contrôles Spark ButtonBar et TabBar

Les contrôles ButtonBar et TabBar diffusent un événement change quand vous sélectionnez un bouton ou un onglet. L'objet d'événement passé à l'écouteur d'événement est de type IndexChangeEvent. L'accès aux propriétés de l'objet d'événement permet de déterminer l'index du bouton ou de l'onglet sélectionné, et toutes autres informations. L'index du premier bouton ou onglet est 0. Pour plus d'informations à propos de l'objet d'événement, regardez la description de la classe ItemClickEvent dans ActionScript 3.0 Reference for the Adobe Flash Platform.

Le contrôle ButtonBar dans l'exemple suivant définit un écouteur d'événement, nommé changeHandler(), pour l'événement change:

<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\spark\SparkBBarEvent.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">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
 
    <fx:Script> 
        <![CDATA[
            import spark.events.IndexChangeEvent; 
 
            private function changeHandler(event:IndexChangeEvent):void { 
                myTA.text="Selected button index: " + 
                String(event.newIndex) + "\n" + 
                "Selected button label: " + 
                event.target.selectedItem; 
            }
        ]]> 
    </fx:Script> 
 
    <s:ButtonBar 
        change="changeHandler(event);">
        <mx:ArrayCollection>
            <fx:String>Flash</fx:String> 
            <fx:String>Director</fx:String> 
            <fx:String>Dreamweaver</fx:String> 
            <fx:String>ColdFusion</fx:String> 
        </mx:ArrayCollection>
    </s:ButtonBar> 
 
    <s:TextArea id="myTA" width="250" height="100"/> 
</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, l'écouteur d'événement affiche l'index et la légende du bouton sélectionné dans un contrôle TextArea en réponse à un événement change.