yoann nussbaumer

Dans le contexte de la création de thèmes, l’étirement se réfère à la façon dont un composant est affiché quand sa taille est différente de la taille de son skin original. Vous pourriez créer un skin pour un bouton à une taille spécifique, mais le bouton qui apparaîtra quand vous lancerez l’application sera affiché dans des tailles différentes. Très probablement, il sera plus large ou plus étroit que ce que vous avez dessiné, parce que le texte du bouton va l’étirer ou le rétrécir horizontalement. Si le bouton n’a pas la taille de police par défaut, il sera également plus grand ou plus court. Par défaut, le skin s’étirerera ou se rétrécira pour s’adapter à la taille du bouton.

Si vous pensez à ce qui se produit quand vous étirez ou réduisez un bitmap, vous réaliserez qu’il y a deux problèmes avec cela. Premièrement, le skin du bouton peut devenir pixelisé ou trouble, spécialement sur les bords. Deuxièmement, si vous avez par exemple des coins arrondis sur vos boutons, leur formes seront déformées si le ratio du bitmap change. (Si vous utilisez des images vectorielles, vous n’aurez pas le premier problème, mais certainement le second. Les contours pourraient également s’épaissir sans ce que soit l’effet recherché.)

Voici un exemple de ce qui pourrait arriver si vous étirez un skin réalisé avec des images bitmaps :

Fig 1: étirement d’un skin réalisé à l’aide d’une image bitmap.

Vous pouvez voir que la bordure du bouton de droite semble un peu épaisse et que les coins ont été étirés horizontalement et qu’ils ne sont plus symétriques.

Si vous avez déjà fait ce genre de choses en HTML en utilisant les tableaux, vous savez qu’une façon pour obtenir des coins arrondis est de découper chaque image en 9 parties, et d’étirer chaque morceau différemment :

• Les images des coins ne s’étirent pas, elle restent à une taille fixe, ainsi les coins conservent leur symétrie
• Les images des faces latérales s’étirent uniquement verticalement, et les images des faces du haut et du bas s’étirent uniquement horizontalement; ainsi elles se rallongent mais ne semblent pas altérées.
• La partie du centre s’étire dans toutes les directions. (En HTML, on y applique habituellement juste une couleur unie.)

Cette méthode fonctionne, mais elle augmente de façon non négligeable le nombre d’image que vous devez gérer. Rappelez-vous qu’un bouton flex possède 4 types d’état possible. Si vous devez découper chaque état en 9 images, vous devez gérer 36 fichiers images, juste pour faire un simple bouton !

Heureusement, Flex a une manière plus pratique pour travailler avec cela, appelée scale-9 grid (également connu sous le nom « 9-slice« ). Au lieu de découper les images en 9 pièces, vous pouvez juste dire à Flex où se trouvent les lignes de découpe, et il étirera automatiquement les différentes images de manière appropriée. Ainsi, pour le bouton présenté au dessus, la scal-9 grid pourrait ressembler à cela :

Figure 2. Les flèches montrent dans quel sens les différentes portions de l’image sont étirées.

Gardez à l’esprit que si vous utilisez la technique scale-9 grid, la zone centrale sera étirée dans toutes les directions. Si vous créez une image bitmap qui a un dégradé vertical, vous voudrez être certain que les boutons s’étireront uniquement dans une direction horizontale. Cela veut dire que le texte peut devenir plus long et plus court, mais la police ne doit pas changer, autrement le bouton pourrait s’étendre verticalement, et votre dégradé pourrait être altéré (bien que le problème pourrait ne pas être apparent si c’est très léger). Si vous créez des skins en utilisant des images vectorielles réalisées avec Flash ou Illustrator, cela ne sera pas un problème.

Je vais décrire comment spécifier la scale-9 grid pour les différents composants un peu plus tard. Si vous vous en tenez étroitement au template de skin fourni, vous n’aurez peut être pas à ajuster les scale-9 grids, puisqu’elles sont pré-établies dans le fichier. En outre, toutes les éléments d’un skin n’ont pas besoin de scale-9 grid, puisque Flex ne redimensionne pas certains composants.

Maintenant que les concepts ennuyeux sont derrière nous, vous pouvez réellement commencer à créer des skins. Pour cela, rendez-vous à la section dédiée à votre logiciel graphique préféré :

• Réaliser un skin pour composants Flex à l’aide de Flash
• Réaliser un skin pour composants Flex à l’aide de Photoshop
• Réaliser un skin pour composants Flex à l’aide de Fireworks
• Réaliser un skin pour composants Flex à l’aide d’Illustrator

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.

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.

Avec Flex 2, il est très simple de construire des applications au look sympa et qui sortent de l’ordinaire, en utilisant le thème par défaut Halo Aeon. Néanmoins, Flex vous donne également plusieurs autres possibilités de personnaliser le look des composants de vos applications. Si vous souhaitez garder le look de base du thème Halo Aeon, mais que vous voulez simplement le modifier (en changeant les couleurs, les coins arrondis, et autre), vous pouvez « styler » les composants Flex en utilisant les CSS. Par contre, si vous souhaitez changer complètement l’apparence des composants Flex, vous pouvez le faire en créant un nouveau thème qui remplacera réellement le thème de base.

Si vous n’êtes pas sur de savoir si vous devez styler ou bien plutôt créer un thème, essayez de jouer un peu avec le Flex Style Explorer (nécessite Flash Player 9) ou utilisez le mode design de Flex Builder pour voir un peu jusqu’à où vous pouvez aller avec les styles. Si vous pouvez avoir le look que vous souhaitez juste en utilisant les styles, c’est parfait : vous pouvez copier le code CSS depuis le Flex Style Explorer et le donner à vos développeurs. Par contre, si vous avez besoin d’un look unique, cet article est fait pour vous !

Il décrit comment utiliser Flash, Photoshop, Fireworks, ou Illustrator pour créer un thème pour l’ensemble des composants Flex. En utilisant le modèle de thème fourni avec cet article, vous pourrez dessiner vos propres thèmes, avec un processus d’ export simple pour créer les fichiers de ressources dont a besoin Flex. Vous n’avez pas à apprendre le MXML ou l’ActionScript, les langages utilisés par Flex, mais selon la manière sont est conçu votre thème, il sera peut-être nécessaire de reprendre un peu le fichier CSS fourni. Si vous ne connaissez pas CSS, ne vous inquiétez pas, nous verrons ensemble les différentes étapes que cela implique.

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.