Flex 4 – Création d’une Skin de bouton Flex 4

Pour introduire le skinning dans Flex 4, on va partir d’un des composants les plus simple: le composant Button. Alors certains me diront que c’est complètement bateau de faire un Button mais l’important est pour l’instant de comprendre les concepts. Une fois la skin de bouton réalisée, vous verrez que l’on peut faire une skin de Slider sans problème.

Flex SDK est Open Source, profitez-en!

On ne le répètera jamais assez, le framework Flex 4 est totalement Open Source. Ce qui signifie que vous avez accès au code de toutes les classes du framework. Seules les classes vraiment bas niveau de Flash Player (appartenant à playerglobal.swc) ne sont pas disponibles mais de toutes manières, dans la plupart des situations, vous aurez seulement besoin du code de « haut niveau ».

Certains bloggeurs critiquent la qualité du code du framework Flex (notamment le composant AdvancedDataGrid qui est particulièrement décrié) mais de manière globale, le code est bon, bien meilleur que le code de certains composants que l’on peut trouver sur le net. Le code doit suivre les conventions d’écriture Adobe. Après avoir analysé le code de quelques classes, vous ne serez pas perdus. Vous pouvez beaucoup apprendre en regardant le code de Flex, n’hésitez pas à vous plonger dedans!

Les Skin sont un bon exemple de code qu’il faut analyser attentivement. Si vous vous demandez par exemple à quoi ressemble la skin d’un Button, vous pouvez aller voir à quoi ressemble la Skin de base d’un Button. Cherchez simplement dans le code ou dans la doc, le nom de la Skin de base et ouvrez cette classe. Et voilà, vous avez un exemple sous les yeux!

On se lance tout doucement…

Une Skin Flex 4 comporte exactement les mêmes composants que vous utiliseriez dans une application. Ils se situent simplement dans un fichier séparé que vous pouvez utiliser dans votre application.
Pour avoir un aperçu de la Skin que nous allons créer, nous pouvons donc travailler tout d’abord dans un projet Flex que l’on va créer.
On va commencer par un bouton le plus simple possible, c’est-à-dire un rectangle arrondi avec un label au dessus. Pour le rectangle arrondi, on va prendre la primitive Spark « Rect » et pour le label, un composant « Label » Spark.
Flex 4 utilise une nouvelle architecture, d’un point de vue interne aux composants. Celle-ci est basée sur les Element et plus les Children afin de séparer les composants purement graphiques (Element, comme les primitives Spark Rect / Ellipse / Path) et les composants visuels (tous les composants dérivant de UIComponent. Pour pouvoir être dessinées, les Element comme Rect doivent appartenir à un objet de type « Group » qui va se charger de gérer le rendu des primitives Spark. En effet, de base, une primitive n’est qu’une définition d’un objet graphique, elle ne comporte pas de code de dessin. C’est le Group dans lequel elle est qui va s’en charger.

Pour plus d’informations sur ce nouveau mode de fonctionnement, veuillez consulter ces articles:

Flex 4 – (4) Structure des composants Flex 4 et comparaison avec Flex 3

Flex 4 – (5) Utilisation de Group pour le rendu des IVisualElement

Voici donc le code permettant de réaliser notre esquisse de bouton :

<?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:Group verticalCenter="0" horizontalCenter="0">
    <s:Rect id="rect" radiusX="4" radiusY="4" top="0"
            right="0" bottom="0" left="0">
      <s:fill>
        <s:SolidColor color="0x0099FF" />
      </s:fill>
      <s:stroke>
        <s:SolidColorStroke color="0x222222" weight="2"/>
      </s:stroke>
    </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:Group>
</s:Application>

Et voici le résultat lors du lancement de l’application :

spark-1

Pour l’instant, le rendu n’est pas interactif, nous avons juste habillé la scène. On va donc prendre ce que l’on vient de faire et le transformer en Skin Flex 4 pour pouvoir l’associer à un Button.
Pour créer une nouvelle Skin, créez un nouveau composant MXML nommé « MyButtonSkin » dans Flash Builder, ayant comme « Based on : », la classe Skin.
Copiez ensuite la primitive Rect et le composant Label et ajouter une définition de States. Cette définition nous sera utile par la suite :

<?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 id="rect" radiusX="4" radiusY="4" top="0"
          right="0" bottom="0" left="0">
    <s:fill>
      <s:SolidColor color="0x0099FF" />
    </s:fill>
    <s:stroke>
      <s:SolidColorStroke color="0x222222" weight="2"/>
    </s:stroke>
  </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>

Maintenant que votre Skin est créée, il faut l’associer à un composant Button. Pour cela, on va utiliser la propriété de style « skinClass » présente sur tous les objets héritant de SkinnableComponent (la grande majorité des  composants visuels Flex 4). A cette propriété, on va simplement lier notre classe « MyButtonSkin » :

<?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:Button horizontalCenter="0" verticalCenter="0" skinClass="{MyButtonSkin}"/>
</s:Application>

On obtient alors exactement le même résultat qu’avec notre esquisse, sauf que l’on a bien un composant bouton, qui répond au clic par exemple. Cependant, le bouton ne parait pas interactif, il aura toujours le même rendu statique. Si vous changez le label du bouton, celui-ci n’aura aucun effet puisque le texte, par exemple, est écrit en dur.
Pour résoudre ces problématiques, on va utiliser les mécanismes de Skinning de Flex 4 ainsi que les States.

2 réflexions au sujet de « Flex 4 – Création d’une Skin de bouton Flex 4 »

  1. switcherdav

    Et bien voilà une explication claire de comment ça fonctionne, à mon avis, beaucoup risquent de traîner des pieds pour basculer de Flex 3 à 4, en partie à cause de cette nouvelle façon de gérer le skinning

    J’espère qu’Adobe saura te remercier pour tes tutos, ils auront permis de faire basculer au moins une personne ici

    Vivement la suite

  2. fnicollet Auteur de l’article

    Merci :)
    D’autres tutoriaux arrivent, ils sont dans mes brouillons pour le moment. Effectivement, ce passage de skinning est difficile et va en rebuter plus d’un, surtout pour des choses que les dév pensent comme faisant partie du fonctionnel de base (mettre un icône sur un bouton > faire une skin).
    Jamais été contacté par Adobe, peut-être il faudrait que je fasse des tutos sur LCDS (ahah!)

    Fab

Les commentaires sont fermés.