Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Les conteneurs Spark Group et Spark SkinnableContainer

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 03 mai 2010

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

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

Présentation

Les conteneurs Spark Group et Spark SkinnableContainer peuvent posséder comme enfant, n'importe quel composant qui implémente l'interface IVisualElement. Utilisez ces conteneurs lorsque vous souhaitez gérer des enfants visuels, tel que des composants visuels et des composants graphiques.

Les principales différences entre les conteneurs Group et SkinnableContainer sont:

  • SkinnableContainer peut-être modifié au niveau de l'apparence. Le conteneur Group est conçu pour être simple et avoir une mise en place minime, et ne peut-être modifieé au niveau de l'apparence.
  • Group peut-être un enfant du contrôle Scroller afin de supporter des barres de défilement. Vous devez créer une apparence au conteneur SkinnableContainer pour ajouter des barres de défilement.

Une des utilisations du conteneur Group est l'import d'éléments graphiques depuis les outils de graphiques d'Adobe, tel que Adobe Illustrator. Par exemple, si vous utilisez un outil graphique pour créer des éléments graphiques importés dans Flex, ces éléments sont représentés par des descriptions au format FXG contenues dans un conteneur Group. Pour plus d'informations, regardez FXG and MXML graphics.

La classe de mise en page par défaut des conteneurs Group et SkinnableContainer est la classe BasicLayout. L'exemple suivant montre un conteneur Group avec une mise en page horizontale et un autre avec une mise en page verticale:

Pour une information complète sur la référence de langage, regardez ActionScript 3.0 Reference for the Adobe Flash Platform.

Création d'un conteneur Spark Group

Vous utilisez la balise <s:Group> pour définir un conteneur Group. 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.

L'exemple suivant montre un conteneur Group avec 4 contrôles Button en tant qu'enfants:

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkGroupContainerSimple.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:Group>
        <s:Button label="Button 1" 
            left="10" top="13" bottom="10"/>
        <s:Button label="Button 2"
            left="110" top="13" bottom="10"/>
        <s:Button label="Button 3"
            left="210" top="13" bottom="10"/>
        <s:Button label="Button 4"
            left="310" top="13" bottom="10" right="10"/>
    </s:Group>
</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, le conteneur Group utilise sa mise en page par défaut définie par la classe BasicLayout,et qui indique l'utilisation d'une mise en page absolue. Les 4 boutons utilisent des contraintes pour définir leurs positions dans le conteneur. Pour plus d'informations sur les contraintes, regardez Using constraints to control component layout.

Vous pouvez ajouter un élément graphique au conteneur pour définir l'arrière-plan des boutons comme le montre l'exemple suivant:

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkGroupContainerRect.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:Group>
        <s:Rect x="0" y="0" 
            radiusX="4" radiusY="4" 
            height="100%" width="100%">
            <s:stroke>
                <s:LinearGradientStroke weight="1" scaleMode="normal"/>
            </s:stroke>
            <s:fill>
                <s:LinearGradient>
                    <s:entries>
                        <mx:GradientEntry color="0x999999"/>
                    </s:entries>
                </s:LinearGradient>
            </s:fill>
        </s:Rect>        
        <s:Button label="Button 1" 
            left="10" top="13" bottom="10"/>
        <s:Button label="Button 2"
            left="110" top="13" bottom="10"/>
        <s:Button label="Button 3"
            left="210" top="13" bottom="10"/>
        <s:Button label="Button 4"
            left="310" top="13" right="10" bottom="10"/>
    </s:Group>
</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 ajoutez une instance de la classe Rect, une sous-classe de GraphicElement, qui définie un arrière-plan gris et une bordure de 1 pixel autour du conteneur. Dans cet exemple, l'élément graphique Rect est positionné aux coordonnéés 0,0 dans le conteneur, et dimensionné de façon à remplir l'intégralité du conteneur.

Création d'un conteneur Spark SkinnableContainer

Vous utilisez la balise <s:SkinnableContainer> pour définir un conteneur SkinnableContainer. 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.

L'exemple suivant montre un conteneur Group avec 4 contrôles Button en tant qu'enfants:

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkContainerSimple.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:SkinnableContainer>
        <s:layout>
            <s:HorizontalLayout/>
        </s:layout>
        <s:Button label="Button 1"/>
        <s:Button label="Button 2"/>
        <s:Button label="Button 3"/>
        <s:Button label="Button 4"/>
    </s:SkinnableContainer> 
</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.

La classe de mise en page par défaut du conteneur SkinnableContainer est la classe BasicLayout. Dans cet exemple, le conteneur SkinnableContainer utilise la classe HorizontalLayout pour disposer les boutons sur une seule ligne.

Si le conteneur SkinnableContainer utilise une mise en page BasicLayout, vous pouvez utiliser un composant Rect en tant qu'enfant du conteneur pour ajouter une couleur d'arrière-plan et une bordure. Pour un exemple, regardez Création d'un conteneur Spark Group.

Cependant, la classe SkinnableContainer vous permet d'appliquer une apparence pour définir les caractéristiques visuelles du conteneur. Par exemple, l'apparence suivante définie un arrière-plan gris et une bordure d'un pixel pour le conteneur:

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\mySkins\MyBorderSkin.mxml -->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    alpha.disabled="0.5">
 
    <fx:Metadata>
        [HostComponent("spark.components.SkinnableContainer")]
    </fx:Metadata> 
 
    <!-- Define the skin states. -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <!-- Define a Rect to fill the area of the skin. -->
    <s:Rect x="0" y="0"
        radiusX="4" radiusY="4"
        height="100%" width="100%">
        <s:stroke>
            <s:LinearGradientStroke weight="1"/>
        </s:stroke>
        <s:fill>
            <s:LinearGradient>
                <s:entries>
                   <mx:GradientEntry color="0x999999"/>
                </s:entries>
            </s:LinearGradient>
        </s:fill>            
    </s:Rect>
 
    <!-- Define the content area of the container. -->
    <s:Group id="contentGroup"
        left="5" right="5" top="5" bottom="5">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
    </s:Group>        
</s:Skin>

Toutes les apparences de SkinnableContainer doivent implémenter les états visuels définis par le conteneur SkinnableContainer. Parce que la classe SkinnableContainer supporte les états visuels normal et disabled, l'apparence doit aussi les supporter.

Le composant Rect ajoute la bordure et l'arrière-plan gris à l'apparence.

La seule partie requise de l'apparence du conteneur SkinnableContainer est contentGroup. Toutes les apparences de SkinnableContainer doivent définir une partie nommée contentGroup.

Tous les enfants du conteneur sont ajoutés au conteneur contentGroup de l'apparence. Dans cet exemple, le conteneur contentGroup est un conteneur Group avec une mise en page verticale. La définition de la propriété layout du conteneur SkinnableContainer prend le dessus sur la mise en page définie dans l'apparence.

L'avantage de définir une apparence pour le conteneur SkinnableContainer, par rapport à l'ajout d'éléments visuels dans la définition de SkinnableContainer, est que l'apparence est réutilisable. Par exemple, vous avez l'habitude de définir une apparence cohérente pour tous les conteneurs SkinnableContainer dans une application. En encapsulant cette apparence dans une classe d'apparence réutilisable, vous pouvez l'appliquer à tous les conteneurs de votre application.

Utilisez la propriété skinClass pour appliquer l'apparence au conteneur SkinnableContainer, comme le montre l'exemple suivant:

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkContainerSkin.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:SkinnableContainer
        skinClass="mySkins.MyBorderSkin">
        <s:layout>
            <s:HorizontalLayout gap="10"/> 
        </s:layout>
        <s:Button label="Button 1"/>
        <s:Button label="Button 2"/>
        <s:Button label="Button 3"/>
        <s:Button label="Button 4"/>
    </s:SkinnableContainer>
</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 la gestion des apparences, regardez Spark Skinning.