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

Flex 4 – Création d’une Skin pour le composant HSlider

Prenons tout d’abord le composant HSlider de base de Flex 4 :

Comme on l’a vu dans l'article précédent, dans la déclaration des SkinPart, on a "thumb" et "track" qui sont des boutons. On va laisser de côté, pour cet exemple, la Skin du DataTip. Pour créer une Skin, on va donc créer deux Skins de Button, un peu comme on l’a fait dans l’exemple précédent.
Pour la "track", on va simplement créer un rectangle arrondi avec un remplissage et une ombre portée. Ce fichier s’appellera MyTrackSkin.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"
        xmlns:mx="library://ns.adobe.com/flex/mx">
  <s:states>
    <s:State name="up" />
    <s:State name="over" />
    <s:State name="down" />
    <s:State name="disabled" />
  </s:states>
  <s:Rect radiusX="2" radiusY="2" top="0" right="0" bottom="0"
          left="0" height="3">
    <s:fill>
      <s:SolidColor color="0xFF3300"/>
    </s:fill>
    <s:stroke>
      <s:SolidColorStroke color="0x3E3E3E" weight="1" />
    </s:stroke>
    <s:filters>
      <s:DropShadowFilter blurX="5" blurY="5"
                          alpha="0.32" distance="2" />
    </s:filters>
  </s:Rect>
</s:Skin>

Pour la "thumb", on va simplement créer une ellipse avec un remplissage. Ce fichier s’appellera MyThumbSkin:

<?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">
  <s:states>
    <s:State name="up" />
    <s:State name="over" />
    <s:State name="down" />
    <s:State name="disabled" />
  </s:states>
  <s:Ellipse width="12" height="12">
    <s:fill>
      <s:SolidColor color="0xFF33FF"/>
    </s:fill>
    <s:stroke>
      <s:SolidColorStroke color="0x3E3E3E" weight="1" />
    </s:stroke>
  </s:Ellipse>
</s:Skin>

Il ne nous reste plus qu’à créer la Skin du Slider à proprement parler. Celle-ci sera constituée de nos deux composants. Notez leurs propriétés « id », liées aux SkinPart que l’on a décrit plus haut :

<?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">
  <fx:Metadata>
    [HostComponent("spark.components.HSlider")]
  </fx:Metadata>
  <s:states>
    <s:State name="normal" />
    <s:State name="disabled" />
  </s:states>

  <s:Button id="track" left="3" right="3" top="3" bottom="3" skinClass="MyTrackSkin"/>
  <s:Button id="thumb" top="0" bottom="0" width="12" height="5" skinClass="MyThumbSkin" />
</s:Skin>

Il ne nous reste plus qu’à donner notre Skin à notre composant dans l’application Flex principale :

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark">
  <s:layout>
    <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
  </s:layout>
  <s:HSlider skinClass="MySliderSkin" width="150"/>
</s:Application>

Voici le résultat de notre Skin très simpliste :