Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex 4 – Le lien "Composants" entre Skin et Composant

Jusqu’ici, on a vu deux types de contrat entre le composant et sa Skin : States et Données. Le dernier est le lien "Composant". Il faut tout d’abord comprendre qu’un composant peut-être défini par un ensemble de SkinPart (morceaux de Skin). Par exemple, pour une barre de défilement, on a :

• Le bouton ascendant
• Le bouton descendant
• Le curseur
• La zone dans laquelle le curseur va se déplacer (« track »)

Dans le cas du Button, il n’y a qu’une SkinPart : le label. C’est la seule partie dont le Button a besoin. C’est par ces SkinPart que l’on va établir le contrat "Composants".

Définition des SkinPart dans les composants Flex 4

Ces SkinPart sont aussi définies par annotation, juste au dessus des variables concernées. Par exemple, dans la classe spark.components.supportClasses.ButtonBase, on peut trouver :

[SkinPart(required="false")]

    /**
     *  A skin part that defines the label of the button.
     *
     *  @langversion 3.0
     *  @playerversion Flash 10
     *  @playerversion AIR 1.5
     *  @productversion Flex 4
     */
    public var labelDisplay:TextBase;

Dans cet exemple, la SkinPart est définie comme non requise. Cela nous a permis de pouvoir créer la Skin sans même connaître cette notion de SkinPart. Cela pourrait ainsi nous permettre de réaliser un bouton complètement graphique, sans texte.
Pour remplir le contrat, la Skin doit déclarer un composant du type TextBase (dont Label hérite) avec comme identifiant "labelDisplay". Dans ce cas-là, le composant hôte (le Button) va reconnaître la SkinPart et lui donner automatiquement la propriété "text".

On aura donc dans MyButtonSkin :

<s:Label id="labelDisplay" color="0x131313" textAlign="center"
           verticalAlign="middle"
           horizontalCenter="0" verticalCenter="1"
           left="12" right="12" top="6" bottom="6"
           />

On a plus de Data Binding entre le Label et le "hostComponent". Au lieu de cela, on lui donne comme "id", labelDisplay. Le composant Button fera ensuite le travail pour vous et va injecter sa propriété "label" dans le composant "labelDisplay".
Ce lien "Composant" va bien plus loin, en vous permettant de lier les comportements des composants à la Skin. Par exemple, pour le composant Slider, on a trois SkinParts (tous facultatifs) :

• Le curseur
• La zone dans laquelle le curseur va se déplacer (« track »)
• Le DataTip (tooltip indiquant la valeur sélectionnée)

Voici les déclarations dans les classes TrackBase et SliderBase, dont les Slider héritent :

[SkinPart(required="false")]
public var thumb:Button;
[SkinPart(required="false")]
public var track:Button;
[SkinPart(required="false", type="mx.core.IDataRenderer")]
public var dataTip:IFactory;

Contrairement au bouton, dans lequel la zone interactive se résume au bouton tout entier, ici on a trois composants distincts, qui réagissent différemment aux actions utilisateur. Le composant « curseur » peut ainsi être déplacé par le clic de l’utilisateur.

Dans le cas du Slider, l’avantage de la liaison composant n’est pas de récupérer de la donnée, mais bien de pouvoir utiliser les évènements qui vont être ajoutés sur ces composants. Cela vous permet de profiter de la classe Slider de base, en modifiant uniquement son style graphique, et pas son comportement.

Pour bien illustrer ce comportement, on va créer une Skin de Slider.