Skinner un bouton avec Flex 4

La version alpha de Flex 4 étant disponible depuis un petit moment maintenant, il était temps de dépoussiérer (et finaliser) cet article qui traine dans mes brouillons WordPress depuis un bon moment.
Il s'agit d'un exemple assez simple d'un bouton skinné avec la version 4 du SDK Flex. L'idée est de commencer à déblayer ce nouveau terrain de jeu et de voir quels sont les changements apportés par cette nouvelle mouture. Bien évidemment, cet article n'a pas pour but d'énumérer exhaustivement tous ces changements, mais plutôt de donner un feedback par rapport à cette phase de skinning.

Waurqueflau kezako ?
Si vous avez déjà eu la chance (le temps ?) de lire des articles ou voir des conférences à propos de Gumbo, vous aurez sûrement remarqué le leitmotiv 'Designer-Developer Workflow' rabâchés par tous les "évangélistes" Adobe. A vrai dire, il s'agit quand même de l'axe majeur de l'évolution du SDK vers sa version 4 et qui justifie la sortie du nouvel outil : Flash Catalyst.
Pour améliorer ce workflow, Adobe a donc décidé de revoir l'architecture des composants visuels Flex, et tout particulièrement le principe de Skinning. Dans la version actuelle de Flex, le skin permet juste de changer l'apparence graphique d'un composant. Avec Gumbo, le skin à plus de responsabilités, c'est lui qui gère l'apparence des données, le changement visuel d'état en état ou encore les transitions.
Des choses qu'adorent faire les développeurs en somme L'idée derrière tout ça, c'est donc bien que cette partie soit délégué au designer, et que la phase d'intégration devienne pratiquement nulle.

Skin.mxml
Comment se présente ce nouveau Skin ? Tout est déclaré sous forme de tags, y compris les éléments visuels, grâce au format d'échange FXG.
FXG, c'est du MXML mais pour tout ce qui concerne les graphiques (textes compris) . Ceux qui ont utilisé Degrafa connaissent déjà le principe.
Par exemple, pour dessiner un rectangle :

Effectivement, ça ressemble beaucoup à du SVG, avec des fonctionnalités supplémentaires !
Lesquelles ? Les spécifications sont disponibles ici.
Des outils comme Fireworks, Illustrator et bien sûr Thermo sont capables de générer du FXG.
Il faut bien comprendre que le FXG n'est qu'une sous-partie du MXML, ce qui implique qu'il ne supporte pas des concepts comme le data binding ou encore les states.
Mais on peut faire appel aux 2 namespaces au sein d'un même document afin de faire fonctionner ensemble les spécifités de chacun : voilà donc à quoi ressemble un fichier de Skin !

Bon, il est où ce bouton alors ?
Ça arrive, ça arrive. Merci au passage à Guillaume de http://www.forgeurdunumerique.net/ pour le design du bouton !

Le fichier de skin :

Examinons un peu le contenu de ce fichier :

Le metadata HostComponent indique que ce skin s'applique pour un Button. Comme tous les metadata, il donne des informations supplémentaires au compilateur. Dans le cas du HostComponent, il permet de :

• Créer dynamiquement un objet hostComponent de type du composant donné en paramètre (Button ici). Ainsi on va avoir le droit à la complétion automatique sur les propriétés du bouton. Par exemple : hostComponent.label
• Vérifier à la compilation si tous les parties et états de skin requis par le composant hôte ont bien été définies.

Ces notions de SkinPart et SkinState sont aussi des nouveautés dans Gumbo.
Je ne vais pas entrer en détail dans les explications, éventuellement dans un prochain article mais globalement :

• SkinPart : Il s'agit d'un contrat qui est passé entre le composant hôte et son skin indiquant quelles sont les parties de skins obligatoires à implémenter et celles qui sont optionnelles. Si on parcours le code source du Button, on peut remarquer que le labelElement n'est pas obligatoire.
  PLAIN TEXT
  CODE:

  1. [SkinPart(required="false")]
  2. public var labelElement:TextGraphicElement;

• SkinState : Il s'agit d'un contrat qui est passé entre le composant hôte et son skin inidiquant quelles sont les états de skins obligatoires à implémenter et celles qui sont optionnelles.
  Pour le Button, 4 états sont à implémenter :
  PLAIN TEXT
  CODE:

  1. [SkinState("up")]
  2. [SkinState("over")]
  3. [SkinState("down")]
  4. [SkinState("disabled")]

  On retrouve ainsi la définition des états dans le fichier de skin :

  PLAIN TEXT
  CODE:

  1. <states>
  2.     <State name="up" />
  3.     <State name="over" />
  4.     <State name="down" />
  5.     <State name="disabled" />
  6. </states>

La reste du code est la représentation graphique du bouton grâce aux tags FXG. On peut noter plusieurs choses :

• Le bouton est dessiné en parcourant le code de haut en bas. Si un tag Rect est suivi d'un tag BitmapGraphic, le bitmap sera dessiné au-dessus du rectangle. C'est un concept similaire aux calques de Photoshop.
• La définition des états (states) est complètement différente par rapport aux versions précédentes de Flex. Elle est maintenant faite "inline", pour plus de lisibilité et de compréhension. Là encore, je vais éviter d'entrer dans les spécifications. Pour plus d'infos, celles-ci sont disponibles sur le wiki http://opensource.adobe.com. Ex :
  PLAIN TEXT
  CODE:

  1. <SimpleText
  2.         color.up="#E6E6E6"
  3.         color.over="#FFFFFF"
  4.         color.down="#CCCCCC"
  5.         color.disabled="#808080" />

• Pour embarquer une police externe , on fait :
  PLAIN TEXT
  CODE:

  1. <Style>
  2. @font-face {
  3.        src: url("assets/tahomabd.ttf");
  4.        fontFamily: "Tahoma";
  5.        fontWeight: "bold";
  6.        cff: true;
  7. }
  8. </Style>

  Pour l'utiliser :

  PLAIN TEXT
  CODE:

  1. <SimpleText
  2.                 ...
  3.         fontLookup="embeddedCFF"
  4.         fontFamily="Tahoma"
  5. />

  Je n'ai pas encore compris la réelle différence entre embedded et embeddedCFF si ce n'est que les polices embarquées en embeddedCFF sont plus légères. Si vous avez des connaissances à ce sujet, n'hésitez pas à laisser un commentaire

Voilà pour ce premier aperçu de Flex 4. Attention toutefois, il s'agit de la version alpha, rien n'est stable et il ne faut bien sûr pas l'utiliser en production ! De même certains points risquent de changer et il ne faut donc pas considérer cet article comme référence. Je vais m'efforcer de le mettre à jour le plus souvent possible afin qu'il corresponde aux différents changements apportés jusqu'à la version stable.


Les sources.

Tags: Button, Flex 4, Gumbo, Skin, SkinPart, SkinState

Fatal error: Call to undefined function: st_related_posts() in /homez.144/astrois/www/blog/wp-content/themes/simplicitybright/single.php on line 14