Flex 4 – Le lien « Données » entre Skin et Composant

Grâce à l’utilisation des States, notre composant a un nouvel aspect graphique. Cependant, le label du bouton est toujours « Bouton ». En effet, celui-ci est codé en dur dans notre fichier MyButtonSkin. Le label que l’on va donner au bouton n’est pas une propriété de la Skin, mais une propriété du composant Button. Pourtant, notre composant Label se trouve dans le Skin, et c’est lui qui doit recevoir ce texte.
C’est là qu’intervient le contrat de type « Données » entre le composant Button et la Skin. La Skin va ainsi indiquer sur quel composant hôte elle peut se greffer. Cela se fait par l’ajout d’une méta-information sur le composant : [HostComponent("chemin vers la classe concernée")].
Depuis la Skin, on pourra alors accéder à ce composant hôte par la propriété « hostComponent ». Pour lier la propriété « label » du composant Button et la propriété « text » du composant Label de la Skin, on va faire un simple DataBinding. Voici les éléments à rajouter dans MyButtonSkin.mxml :

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled=".5">

  <fx:Metadata>
    [HostComponent("spark.components.Button")]
  </fx:Metadata>

  ...

  <s:Label text="{hostComponent.label}" color="0x131313"
           textAlign="center"
           verticalAlign="middle"
           horizontalCenter="0" verticalCenter="1"
           left="12" right="12" top="6" bottom="6"
           />
</s:Skin>

Vous pouvez maintenant préciser n’importe quel label, en donnant simplement une valeur à la propriété « label » de votre Button:
spark-3

Votre composant se comporte maintenant comme vous le souhaitiez, exactement comme le Button Spark de base. Le composant Button de base est d’ailleurs fait de la même manière, avec de base, la classe spark.skins.spark.ButtonSkin.

Vous pouvez si le souhaitez aller voir comment est crée la Skin de base des Button Spark. Pour cela, il vous suffit d’ouvrir la classe ButtonSkin dans Flash Builder. Dans le menu de Flash Builder 4, allez dans Navigate > Open Type… puis tapez « ButtonSkin » dans le champ de recherche.