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

Flex 4 – Utilisation de States dans une Skin

Tout d’abord, on va voir l’aspect State. Un composant pouvant être dans plusieurs états différents, il est normal que la Skin suive, et propose plusieurs états. Tout composant héritant de SkinnableComponent a au moins un état, celui de base.
Un composant peut définir des états supplémentaires à l’aide de la balise MetaData [SkinStates]. Voici par exemple les States déclarés dans la classe Button :

• [SkinState("up")]
• [SkinState("over")]
• [SkinState("down")]
• [SkinState("disabled")]

Pour un bouton, on a quatre States : up, over, down, disabled. On va modifier notre fichier Skin pour avoir un rendu différent dans chaque State. Comme on l’a vu plus haut, on déclare dans une balise « s:states », la liste des States utilisés par le composant :

<s:states>
 <s:State name="up" />
 <s:State name="over" />
 <s:State name="down" />
 <s:State name="disabled" />
 </s:states>

Grâce à cette déclaration, la Skin va respecter sa partie du contrat Skin-Composant. Vous pouvez utiliser la nouvelle notation Flex 4 « pointée ». Ainsi, alpha.disabled=".5" indique que l’opacité sera de 0.5 dans l’état nommé « disabled ». Pour donner un effet graphique plus agréable, on va aussi rajouter un léger dégradé.

Voici donc la Skin modifiée pour pouvoir avoir un aspect différent suivant la Skin :

<?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"
        xmlns:mx="library://ns.adobe.com/flex/mx" alpha.disabled=".5">

  <s:states>
    <s:State name="up" />
    <s:State name="over" />
    <s:State name="down" />
    <s:State name="disabled" />
  </s:states>

  <s:Rect radiusX="4" radiusY="4" top="0" right="0" bottom="0"
          left="0" includeIn="down">
    <s:fill>
      <s:SolidColor color="0"/>
    </s:fill>
    <s:filters>
      <s:DropShadowFilter knockout="true" blurX="5" blurY="5"
                          alpha="0.32" distance="2" />
    </s:filters>
  </s:Rect>

  <s:Rect id="rect" radiusX="4" radiusY="4" top="0"
          right="0" bottom="0" left="0">
    <s:fill>
      <s:SolidColor color="0x0099FF" color.over="0x0066FF"
                    color.down="0x0000CC"/>
    </s:fill>
    <s:stroke>
      <s:SolidColorStroke color="0x222222" weight="2"/>
    </s:stroke>
  </s:Rect>

  <s:Rect radiusX="4" radiusY="4" top="2" right="2" left="2"
          height="50%">
    <s:fill>
      <s:LinearGradient rotation="90">
        <s:GradientEntry color="0xFFFFFF" alpha=".5"/>
        <s:GradientEntry color="0xFFFFFF" alpha=".1"/>
      </s:LinearGradient>
    </s:fill>
  </s:Rect>

  <s:Label text="Bouton" color="0x222222"
           textAlign="center" verticalAlign="middle"
           horizontalCenter="0" verticalCenter="1"
           left="12" right="12" top="6" bottom="6"
           />
</s:Skin>

Et voici le résultat, dans les différents états :