Je vous propose un petit tour d’horizon de la création de compo personnalisés avec Flex4 et le skinning. Vous allez voir ! Comme moi, vous ne voudrez plus jamais faire de Flex3. Moi ça fait 5 mois… et j’en suis bien content !

Alors voila. Nous allons voir comment faire un composant personnalisé avec le SDK4, de la conception actionScript, au skinning.
Il me fallait une idée de départ… Ceux qui me suivent sur Twitter aurons vu/lu qu’en ce moment je m’éclate avec Eaze, la librairie d’animation de Philippe Elsass. Super légère, facile d’utilisation et performante (Nicoptère a réalisé quelques “petites” démos sur le sujet). Je ne saurais que trop vous la conseiller.
Et bien on va se faire un petit compo de visualisation de ces fonctions d’animations

Première étapes : la primitive étendue

Avant de partir sur le composant, nous allons d’abord faire une extension de StrokedElement, qui va se charger de dessiner les courbes d’animations.

La classe StrokedElement est, dans Flex4, la classe de base pour tous les éléments graphiques ayant à dessiner une ligne. FilledElement, extensions de StrokedElement, s’occupe du remplissage. Les classes Line, Rect, Ellipse, Path… sont elles mêmes des extensions de FilledElement.

Nous allons donc créer une classe EazeElement, qui étend StrokedElement.
L’idée ici n’est pas d’afficher la “vraie” courbe d’accélération, mais plutôt d’avoir une “information visuelle” qui nous donne une idée sur l’évolution de l’animation, avec un point de départ et d’arrivé identique… Le voir en vrai c’est plus simple qu’à expliquer…

Nous allons associer à cette primitive 2 propriétés : eazeFunction : la fonction d’animation a tracer, et step la “précision” de la ligne.

Ensuite, il suffit d’overrider la méthode draw, et de faire ce que l’on veut dedans.
En gros nous allons boucler sur la largeur de l’élément, en se décalant à chaque passe de la valeur step, et calculer la position x, y de notre ligne en fonction de eazeFunction…. Vous pouvez voir en vrai la classe sous ce lien.

Aller hop on test tout ça ! Pour l’apparence, nous ajoutons à notre élément un “IStroke”. Cela peut être, <s:SolidColorStroke />, <s:LinearGradientStroke />, … Y’en à d’autres : à vous de tester !

<primitives:EazeElement
    eazeFunction="Elastic.easeInOut" step="2"
    horizontalCenter="0" verticalCenter="0" width="400" height="200">

    <primitives:stroke>

        <s:LinearGradientStroke rotation="90">
            <s:GradientEntry color="#F19000" />
            <s:GradientEntry color="#00FF00" />
            <s:GradientEntry color="#009EE0" />
        </s:LinearGradientStroke>

    </primitives:stroke>

</primitives:EazeElement>

Rhooo ! C’est jouli !

C’est parti pour le composant

Notre composant va étendre SkinnableContainer, base pour la création de composant.

package com.lafabrick.components
{
    public class SimpleEazeViewer extends SkinnableContainer
    ...

Nous voulons utiliser notre primitive EazeElement dans ce compo. Il pourra aussi être redimensionnable, via une “ancre”. Nous devons donc définir ces différents objets de contrôles, dans la définition de notre composant. Nous utilisons ici les SkinPart.

SkinPart

Une skinPart définit un objet, visuel ou non, devant être présent (de manière obligatoire ou non) dans la skin. Ajoutons nos parties :

public class SimpleEazeViewer extends SkinnableContainer
{
    [SkinPart(required="false")]
    public var anchor : Group;

    [SkinPart(required="true")]
    public var eazeElement : EazeElement;

ici, eazeElement est requis et obligatoire. anchor, l’ancre pour redimensionner le composant, par contre est optionnel.

Nous verrons plus bas comment les utiliser dans le composant. Occupons nous des états de ce composant.

SkinState

SkinnableContainer définit 2 états de base : “normal” et “disabled”. Ces états devront être présents dans la skin. Nous allons ajouter un état “selected” : lorsque l’utilisateur déplacera l’ancre, le composant passera en état “selected”. Pour ajouter un état personnalisé, dans l’en-tête de classe, ajoutons le tag suivant :

[SkinState(name="selected")]

Nous allons également créer une propriété selected, qui définira si le composant est sélectionné…

dans le setter, nous allons appeler la fonction invalidateSkinState(), qui va déclencher le processus de changement d’état. Pour relier la propriété selected à l’état sélectionner, nous devons overrider la fonction protégée getCurrentSkinState().

private var _selected : Boolean = false;

public function get selected():Boolean
{
    return _selected;
}

public function set selected(value:Boolean):void
{
    _selected = value;
    invalidateSkinState();
}

override protected function getCurrentSkinState() : String
{
    return selected ? "selected" : "normal";
}

Ajoutons enfin la dernière propriété eazeFonction : Function qui va nous permettre de définir la fonction à tracer par la primitive.

Overridons un brin

Il est temps de passer à la gestion de tout ça. Ce que l’on a besoin, c’est de savoir quand les différents éléments définit dans les SkinPart sont ajoutés, pour leur pousser les propriétés et autres écouteurs qui vont bien. Pour cela, nous devons overrider la méthode partAdded de la manière suivante.

override protected function partAdded(partName:String, instance:Object) : void
{
    super.partAdded( partName, instance );

    if( instance == eazeElement ) {
        eazeElement.eazeFunction = eazeFunction;
    }

    if( instance == anchor ) {
        anchor.addEventListener(MouseEvent.MOUSE_DOWN, onAnchorMouseDown );
        systemManager.getSandboxRoot().addEventListener(MouseEvent.MOUSE_UP, onMouseUp );
        systemManager.getSandboxRoot().addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove );
    }
}

Dans le sens inverse, il faut overrider partRemoved pour, entre autre chose, enlever les écouteurs sur les éléments.

override protected function partRemoved(partName:String, instance:Object) : void
{
    super.partRemoved( partName, instance );

    if( instance == anchor ) {
        anchor.removeEventListener(MouseEvent.MOUSE_DOWN, onAnchorMouseDown );
        systemManager.getSandboxRoot().removeEventListener(MouseEvent.MOUSE_UP, onMouseUp );
        systemManager.getSandboxRoot().removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove );
    }
}

Plus qu’à mettre la mécanique dans les fonctions qui vont bien.

La classe complète ici

plutôt super simple ce fonctionnement !

Côté skin

Skin ou SparkSkin ?

Vous avez 2 possibilités : partir de Skin ou SparkSkin, la dernière étant une extension de la première. La différence est que SparkSkin ajoute une mécanique spéciale pour exclure des éléments de la mécanique de skinning. Dans Flex4 vous pouvez injecter des couleurs de base à vos skin, avec la propriété baseColor. L’exclusion permet d’éviter de coloriser les éléments sélectionnés. Je vous invite a faire un saut dans les classes Skin des boutons (ex: spark.skins.spark.ToggleButtonSkin ) pour voir à quoi cela ressemble.

Nous allons choisir Skin.

Pointer sur le composant cible

En premier lieu, nous devons spécifier quel est le composant cible de cette skin. Cela se passe dans le tag metadata :

<fx:Metadata>
    [HostComponent("com.lafabrick.components.SimpleEazeViewer")]
</fx:Metadata>

Les états

Nous devons aussi retrouver les états définit dans le composants : normal, disabled et selected :

<s:states>
    <s:State name="normal" />
    <s:State name="selected" />
    <s:State name="disabled" />
</s:states>

Plus qu’a ajouter vos éléments définit dans les skinPart (un Group avec l’id “anchor” et un EazeElement avec l’id “eazeElement” ). Et puis vous amusez a faire de la déco à grand coup de Rect, Ellipse, Line, Path, …. La grande classe !
Tout ces éléments se calibrent avec les contraintes top, left, bottom, right. Les possibilités sont infinies.

<s:Group id="anchor" top="0" bottom="0" width="16" right="0">
    <s:Rect
        topRightRadiusX="8" topRightRadiusY="8"
        bottomRightRadiusX="8" bottomRightRadiusY="8"
        top="0" bottom="0" left="0" right="0">
        <s:fill>
            <s:SolidColor color="#212121" alpha="0" />
        </s:fill>
    </s:Rect>

    <s:Group verticalCenter="0" height="16" horizontalCenter="0">
        <s:Line top="0" bottom="0" horizontalCenter="-2">
            <s:stroke>
                <s:SolidColorStroke color="#353535" />
            </s:stroke>
        </s:Line>
        <s:Line top="0" bottom="0" horizontalCenter="0">
            <s:stroke>
                <s:SolidColorStroke color="#353535" />
            </s:stroke>
        </s:Line>
        <s:Line top="0" bottom="0" horizontalCenter="2">
            <s:stroke>
                <s:SolidColorStroke color="#353535" />
            </s:stroke>
        </s:Line>
    </s:Group>	

</s:Group>

Pimp my State! inclusion, exclusion, groupage….

Voyons comment gérer notre skin en fonction de ses états.
Le nouveau système de gestion d’états est bien loin de celui proposé dans Flex3. Plus simple et bien plus logique, il vous permet un contrôle total de votre skin.
Admettons que vous ayez un composant avec les états suivants :

<s:states>

    <s:State name="up" />
    <s:State name="down" />
    <s:State name="over" />
    <s:State name="upAndSelected" />
    <s:State name="downAndSelected" />
    <s:State name="overAndSelected" />
    <s:State name="disabled" />

</s:states>

Un rectangle est définit dans la skin, et doit être inclus dans les états « up », « down », « over ». La déclaration de l’inclusion, et des différentes couleurs en fonction des états devra se faire suivant cette exemple :

<s:Rect includeIn="over, down, up" top="0" bottom="0" left="0" right="0">
    <s:stroke>
        <s:SolidColorStroke color="#212121" />
    </s:stroke>

    <s:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry color.down="#FCD301" color.over="#FCD301" color="#F7F7F7" ratio="0" />
            <s:GradientEntry color.down="#F19000" color.over="#F19000" color="#C2C6C7" ratio="1" />
        </s:LinearGradient>
    </s:fill>

    <s:filters>
        <s:DropShadowFilter color="#000000" distance="1"
            blurX.over="10" blurX.down="10" blurX="4"
            blurY.over="10" blurY.down="10" blurY="4"
            quality="3" alpha="0.8" />
    </s:filters>
</s:Rect>

Vous pouvez voir ici que l’attribution de valeur en fonction des états fonctionne aussi bien sur des couleurs que sur n’importe quelle autre propriété, comme sur le filtre.

Les états proposent une mécanique de groupage par nom, qui vous permet de pousser encore plus loin la gestion de la skin. Un état peut faire partie de plusieurs groupes :

<s:states>

    <s:State name="up" />
    <s:State name="down" stateGroups="mouseOn" />
    <s:State name="over" stateGroups="mouseOn" />
    <s:State name="upAndSelected"  stateGroups="selected, mouseOn" />
    <s:State name="downAndSelected"  stateGroups="selected, mouseOn" />
    <s:State name="overAndSelected" stateGroups="selected, mouseOn" />
    <s:State name="disabled" />

</s:states>

Les états down et over, en vue « normal » et « sélectionné » font partie d’un même groupe « mouseOn ». De même, les états sélectionnés sont regroupés dans un groupe « selected ».

Nous pouvons alors modifier la skin de notre rectangle. Au lieu de définir dans quel état le rectangle est présent, nous allons plutôt lui définir dans quels groupes d’états il est exclu :

<s:Rect excludeFrom="selected" top="0" bottom="0" left="0" right="0">

De même, la définition des couleurs et des propriétés du filtre peut être affectée globalement en fonction du groupe d’état :

<s:Rect excludeFrom="selected" top="0" bottom="0" left="0" right="0">
    <s:stroke>
        <s:SolidColorStroke color="#212121" color.mouseOn="#F7F7F7" weight.mouseOn="2" />
    </s:stroke>

    <s:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry color.mouseOn="#FCD301" color="#F7F7F7" ratio="0" />
            <s:GradientEntry color.mouseOn="#F19000" color="#C2C6C7" ratio="1" />
        </s:LinearGradient>
    </s:fill>

    <s:filters>
        <s:DropShadowFilter color="#000000" distance="1"
            blurX.mouseOn="10" blurX="4"
            blurY.mouseOn="10" blurY="4"
            quality="3" alpha="0.8" />
    </s:filters>
</s:Rect>

Le rectangle est exclu des états sélectionnés, et les couleurs sont attribuées en fonction du groupe définissant une interaction de l’utilisateur « mouseOn ».

Sympa non?

Je veux mon composant !

Vous pouvez bien sur accéder a votre composant via hostComponent : si par exemple vous définissez un texte dans votre composant, vous avez possibilité de l’affecter directement dans votre skin comme ceci :

<s:Label id="labelDisplay"

    text="{hostComponent.monTitre}"

    textAlign="center"
    verticalAlign="middle"
    maxDisplayedLines="1"
    horizontalCenter="0" verticalCenter="1"
    left="10" right="10" top="2" bottom="2" />

Bon a savoir : le contentGroup

SkinnableContainer définit un Group optionnel, contentGroup, qui, comme son nom l’indique est le groupe du contenu Ce groupe est le réceptacle des différents éléments que vous pouvez ajouter a votre compo. Par exemple un Panel dispose de ce contentGroup. Sinon on met rien dedans et ce ne serait plus un Panel…. Bon nous n’en avons pas besoin ici, mais si jamais vous avez besoin d’un composant qui peut être aussi un réceptacle de composants, n’oublier pas le contentGroup !

Retournons à notre compo…

… et regardons la skin complète.

Un peu plus loin…

Imaginons maintenant que vous ne vouliez plus afficher une courbe mais plusieurs à la suite, définit dans un tableau. Vous n’aurez donc plus un eazeElement, mais un Group qui contiendra vos primitives.
Le problème alors est de pouvoir skinner le trait de vos primitives. Vous devrez donc définir un IStroke. Ce qui est intéressant dans ce nouveau système de skin, c’est qu’il est aussi possible de définir ce Stroke, pourtant élément non visuel, dans une SkinPart.

[SkinPart(required="false")]
public var anchor : Group;

[SkinPart(required="true")]
public var eazeGroup : Group;

[SkinPart(required="true")]
public var eazeStroke : IStroke;

La déclaration côté Skin ce fera a l’intérieur des balises déclaration :

<fx:Metadata>
    [HostComponent("com.lafabrick.components.MultipleEazeViewer")]
</fx:Metadata>

<fx:Declarations>
    <s:LinearGradientStroke id="eazeStroke" rotation="90">
        <s:GradientEntry color="#F19000" />
        <s:GradientEntry color="#00FF00" />
        <s:GradientEntry color="#009EE0" />
    </s:LinearGradientStroke>
</fx:Declarations>

La nouvelle classe, se cache derrière ce lien, et la skin associée derrière celui-ci.

La démo finale ( les sources )
J’espère que comme moi vous tomberez sous le charme. C’est fou comme une évolution peut vous montrer à quel point c’était tout nul avant !

---

Par Fabien, Vendredi 27 novembre 2009 à 18:49
[Dev] Flash / Flex / AIR...

Tags: FlashBuilder, flex4, skinning, Tutoriels, UI Design

---