Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox



Flex & la programmation de skin

Compatible Flex Builder. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par slyc3 (Steve Domin), le 06 août 2009

Introduction

Bonjour et bienvenue dans ce nouvel article sur la programmation de skin en Actionscript 3.

Cette technique vous permettra d’aller très loin dans la personnalisation de vos applications Flex et ceci sans passer par les méthodes disons “plus conventionnelles” que sont l‘utilisation des extensions de skinning Flex pour Flash, Illustrator, Fireworks et cie.
Et pourtant grâce à cette technique vous pourrez en théorie aller aussi loin que si vous utilisiez ces outils. Je dis en théorie car, tout étant moins visuelle avec la programmation, il est souvent fastidieux d’arriver au même résultat que celui que l'on aurait eu assez facilement avec un logiciel spécialisé.
Cependant lorsque vous commencerez à maîtriser son fonctionnement, cette méthode vous étonnera par sa rapidité de mise en place, pour les boutons par exemple.

Solution

Commencer par créer un nouveau project Flex. Pour cela faîtes :
File > New > Flex Project.
Donner un nom à votre projet, dans mon cas SkinProgramming, et cliquez sur Finish.
Ajouter deux boutons à votre application.

Créer un nouveau fichier css dans le dossier src : File > New > CSS File
Nommez le style.css par exemple.
Une fois ce fichier créé, ouvrez-le et passez en mode Design.
Cliquez sur le bouton “New Style”.


Dans la fenêtre qui s’affiche cochez “Specific Component”, choisissez le composant Button et validez.
Cette fenêtre nous permets de choisir si nous voulons définir un style, pour un composant particulier, pour toute l’application ou pour des composants avec un “styleName”.
En effet dans la plupart de vos applications vous allez certainement vouloir personnaliser les composants mais ça ne voudra pas dire que, par exemple, tous les boutons de votre application devront avoir le même design. Et bien dans ce cas vous définirez l’attribut “styleName” de votre bouton et lorsque votre application lira le fichier css elle appliquera les styles aux composants en fonction du “styleName” que vous avez défini et si elle n’en trouve pas elle regardera alors si vous avez défini un style global pour tous les composants d’un même type comme nous allons le faire maintenant.

Une fois validé vous verrez apparaître à l’écran les huit états de votre bouton.
C’est à ce moment que la programmation de skin entre en jeu. Nous allons modifier l’apparence de ces boutons sans utiliser les outils traditionnels de dessin.
Pour cela créer une nouvelle classe Actionscript dans le dossier src:
File > New > Actionscript Class
Nommez la SkinBouton et faîtes la hériter de la classe mx.skins.Border. Pour cela cliquez sur le bouton Browse à droite de Superclass, commencez à taper Border et la classe devrait apparaître, vous n’avez plus qu’à cliquer sur OK puis Finish.

Avant d’aller plus loin je vais vous expliquer brièvement les différents choix qui s’offrent à vous lorsque vous souhaitez faire de la programmation de skin :
mx.skins.ProgrammaticSkin : la classe mère pour la plupart des skins. Vous pouvez l’utiliser dans tous les cas seulement ce n’est pas forcément le choix le plus judicieux.
mx.skins.Border : cette classe est une sous-classe de celle précédemment cité, mais avec la propriété borderMetrics en plus. Utilisez celle-ci si votre skin a une bordure.
mx.skins.RectangularBorder : Sous-classe de Border avec la propriété backgroundImage en plus.

Quelle que soit la classe que vous choisissez la méthode reste la même, vous devrez surcharger la méthode “protected” updateDisplayList(w:Number, h:Number).
Passer lui en argument la hauteur et la largeur que fera votre skin.
Cette méthode sera appelé à chaque fois que le composant aura besoin d’être redessiner.
Voici le code de notre classe SkinBouton :

package
{
    import flash.display.GradientType;
    import flash.display.Graphics;
    import flash.geom.Matrix;
 
    import mx.skins.Border;
 
    public class SkinBouton extends Border
    {
        public function SkinBouton()
        {
            super();
        }
 
        override protected function updateDisplayList(w:Number, h:Number):void
        {
            var g:Graphics = graphics;
            g.clear();
 
            switch(name)
            {
                case "upSkin":
                    g.beginFill(0xE245FF, 1);
                    g.drawRoundRect(0, 0, w, h, 10, 10);
                    g.endFill();
                    break;
 
                case "overSkin":
                    g.beginFill(0xE92D12, 1);
                    g.drawRoundRect(0, 0, w, h, 10, 10);
                    g.endFill();
                    break;
 
            }
        }
 
    }
}

Les explications : La première étape est de “nettoyer” la zone de dessin en cours.
Ensuite on fait un switch(name). name est propriété défini par la classe ProgrammaticSkin qui contient le nom de la skin en cours.
Dans notre cas : upSkin, overSkin, downSkin, disabledSkin, selectedUpSkin, etc… bref les huits états de notre bouton en somme.
En fonction du nom que l’on a on dessine la skin correspondante de notre bouton, dans notre cas un bouton violet si l’etat est up et un bouton orange si l’état est over.
Pour cet exemple je n’ai pas créé de skin particulière pour les autres états de mon bouton mais le principe est identique pour celles qui restent.
Reste maintenant à visualiser les changements dans la vue Design de notre fichier css et à répercuter ces changements sur les boutons de notre application.
Dans votre fichier css, passez en mode Source et ajoutez cette ligne entre les accolades du style de votre bouton :

skin:ClassReference("SkinBouton");

Cette petite ligne dit simplement que la classe a utilisé pour définir la skin de votre bouton est la classe SkinBouton.

Note : si votre classe se trouve dans un dossier skins, lui-même contenu dans un dossier composants, la ligne à ajouter serait la suivante :

skin:ClassReference("composants.skins.SkinBouton");


À ce stade il ne nous reste qu’à spécifier à notre application d’utiliser notre fichier css style.css pour définir le style de notre application.
Pour cela retourner dans le fichier mxml de votre application et ajouter cette ligne entre les balises <Applications> :

<mx:Style source="style.css" />

Vous constaterez que désormais votre curseur ne change pas d’apparence quand vous passez dessus le bouton. Pour remédier à ce problème vous n’avez qu’à passer la propriété buttonMode de votre bouton à true.

Conclusion

Voilà, cet article approche à sa fin. Si vous souhaitez plus d’infos sur le sujet je vous invite à consulter la doc d’Adobe et surtout de faire vos propres essais car c’est la seule méthode qui vous permettra d’apprécier réellement les limites de cette technique de skinning. D’autres part sachez qu’il y a très peu d’exemples sur internet donc si vous êtes coincé vous devrez très certainement régler le problème tout seul.

L'archive du projet est disponible ici.

Si vous souhaitez, vous pouvez venir discuter de cet article ici sur le forum, ou encore me contacter à : slyc3isback[at]me.com