yoann nussbaumer

Les applications Flex sont réalisées à l’aide de plusieurs composants. Il existe deux types de composants différents qui sont les contrôles (controls) et les conteneurs (containers). Les contrôles sont les éléments habituels d’interface tels que les boutons, les cases à cocher, les listes déroulantes, etc. Les conteneurs sont les composants qui contiennent d’autres contrôles. Il s’agit par exemple des accordéons, des onglets ou des panels. Il existe d’autres types de conteneurs qui servent dans la mise en page, comme les HBox et les VBox, mais ils n’ont pas d’apparence visuelle propre, donc ils ne sont pas skinnables.

Chaque composant skinnable a un ensemble de parties skinnables, appelées « skins parts« . Pour beaucoup de composants, comme les boutons par exemple, ces skin parts représentent différents états visuels :

• up skin: l’apparence du bouton dans son état « normal », quand il est accessible, mais que la souris ne le survole pas
• over skin: l’apparence quand la souris le survole et qu’aucun de ses boutons (de la souris) n’est pressé
• down skin: l’apparence quand l’utilisateur le clique
• disabled skin: l’apparence quand il est désactivé.

D’autres composants ont des skin parts différents. Par exemple, une scrollBar a un lot de skin up/over/down/disabled pour chacune des flèches, pour l’arrière plan et pour l’ascenseur.

Indépendamment de la complexité du composant, chaque partie d’un skin est une simple ressource graphique. Vous pouvez créer des skin parts en tant qu’image avec n’importe quel logiciel de graphisme, ou comme étant une collection de symboles dans un fichier flash. Dans la plupart des cas, c’est comme créer une image pour un rollover en HTML : il suffit de réaliser un GIF ou un JPEG pour l’image de l’état normal, et un autre fichier pour l’état de rollover. Contrairement au HTML, Flex 2 attribue des skins à de nombreux composants en utilisant le CSS.

Tout cela peut sembler plutôt pénible et complexe : créer un ensemble de fichiers graphiques et ensuite devoir écrire du code CSS pour lier le tout. Eh bien, c’est pourquoi j’écris cet article !

Nous avons créé des templates qui peuvent vous aider à créer toutes les parties de votre skin en une seule fois, sans avoir à gérer manuellement les différentes pièces comme des fichiers séparés. Les modèles de skin vous montrent de quoi ont l’air les fichiers graphiques pour le thème par défaut Halo Aeon. Vous pouvez bien entendu les modifier ou les remplacer complètement par votre propre thème.

Nous fournissons aussi un fichier CSS de base qui met en place automatiquement toutes les skins parts à votre place. Vous pouvez vouloir modifier les CSS vous même (j’aborderai le sujet plus tard), mais la plupart du temps, vous avez juste à ouvrir l’un des fichiers de skin et à l’éditer, cela suffit.

Mais avant tout cela, il est important de parler d’abord d’un concept important : l’étirement (scalability).

PS: Ce billet fait partie d’une suite d’articles sur le thème Créer un skin pour une application Flex avec Flash, Photoshop, Fireworks, ou Illustrator, traduit de l’article d’Adobe : Designing Flex 2 skins with Flash, Photoshop, Fireworks, or Illustrator.