Je suis actuellement en voyage aux USA, il m’est donc assez difficile de bloguer. Voici néanmoins une sélection de liens qui ont retenu mon attention ces derniers temps :

• Flex Builder gratuit pour les étudiants (super bonne chose, on manque de développeurs Flex)
• Quelques tuyaux si vous recherchez un livre sur Silverlight
• Un tutoriel d’introduction pour écrire une application en Silverlight, ou Adobe AIR ou encore JavaFX
• Adobe Thermo: est-ce que ça va démocratiser les interfaces riches ?
• HP lance une application Flex dédiée aux impressions personnalisées, type cartes de visite
• Je voulais écrire un article sur ExtJS, mais Julien a été plus rapide :-) Une bonne alternative à Flex et Silverlight pour faire des RIA qui ne nécessitent pas l’installation d’un player.
• Les interfaces riches et le référencement ? Fabien traite ce sujet parfois délicat pour les sites à fort contenu.
• Besoin d’un nouveau défi ? Pourquoi pas le MTV Adobe AIR Challenge …
• Il s’est passé plein de choses à l’Adobe MAX, le compte-rendu par Fred.

Voila … à très vite pour un petit compte-rendu de ce que j’ai vu et entendu pendant mon voyage dans la Silicon Valley la semaine dernière :-)

Au fil de mes recherches, je suis tombé sur un site que j’aime beaucoup : Flex Examples. Ce site, en anglais, propose des exemples de code source Flex pour des fonctionnalités simples. Sur la droite, il est possible d’accéder aux tutoriaux classés par fonction abordée; j’ai trouvé ce moyen de naviguer très pratique.

En tout cas, ce m’a beaucoup aidé à résoudre certains petits problèmes sur lesquels je bloquai dans mon apprentissage. Régulièrement mis à jour, Flex Examples trouvera sa place dans les favoris de tout développeur Flex qui se respecte ;-)

Je continue sur ma lancée avec quelques tutoriaux AIR et Flex que j’ai récemment trouvé lors de mes recherches :

• Le blog de Phiphou : un blog sympa avec pas mal de tutoriaux Flex et Flash. C’est ma découverte du moment !
• Un lecteur RSS écrit avec Apollo : publié par O’reilly
• Un lecteur MP3 développé avec AIR : toujours par O’reilly
• Tutoriaux Adobe® Flex™ 2 : une liste de tutoriaux Flex par Mediabox

Je posterai régulièrement des liens vers les tutoriaux Flex que je trouve au fil de mes recherches et de mon apprentissage. Voici deux tutoriaux en français et qui traitent de deux sujets importants dans la conception d’une application :

• La validation sous Flex (Validators)
• Des applications localisées sous Flex 2

Si vous trouvez des tutoriaux intéressants ou si vous en publiez sur votre blog, n’hésitez pas à m’en faire part !

Avant que vous commenciez, voici quelques astuces pour travailler avec le template de skin Flash fourni par Adobe:

• En général, vous aurez certainement meilleur temps à créer vos morceaux de skin à la même taille que ceux fournis dans le template. Si vous les faites plus grands ou plus petits, vous devrez peut-être éditer la scale-9 grid (pour les parties qui le nécessitent).
• Le fichier CSS fourni suppose que les fichiers et symboles exportés auront des noms spécifiques, aussi vous devriez éviter de changer les noms des symboles dans le fichier Flash. (Renommer les différents objets dans un symbole ne pose pas de problèmes.)
• Pour les éléments qui ont du texte, comme les boutons, vous ne pouvez pas gérer les attributs de texte (position, couleur, taille, police, etc.) depuis le fichier de skin, c’est pourquoi le texte n’est pas affiché dans le modèle de skin. La section sur la modification des styles décrira plus tard comment spécifier les attributs du texte en utilisant les CSS.
• Le skin par défaut Halo Aeon est à moitié transparent, aussi il prends un peu de la couleur de fond du conteneur. C’est pourquoi les éléments semblent grisés dans le template fourni. Vous pouvez suivre une stratégie similaire pour votre skin ou les rendre simplement opaques.
• En raison de la façon de Flex 2 de gérer les scrollbars, vous devrez vous assurer que chacun des symboles dans les différents états est décalé d’un pixel vers la droite du point de référence, comme dans le fichier d’exemple.

1. Téléchargez le fichier de skin d’exemple

Téléchargez le fichier flex_skins_flash.zip et dézippez le dossier sur votre ordinateur. Vous devez obtenir un seul dossier nommé flex_skins_flash. Si vous voulez, vous pouvez travailler sur une copie de ce dossier, en laissant l’original sans modifications, au cas où vous souhaiteriez créer différentes skins par la suite.

2. Éditez les différents composants du skin

Démarrez Flash et ouvrez le fichier flex_skins.fla depuis votre répertoire de travail. Vous verrez tous les skins pour les composants Flex 2 sur la scène. Chacun d’entre eux est une instance d’un symbole de la bibliothèque de Flash.

Pour éditer l’un des composants du fichier:

1. Double-cliquez sur le composant pour l’éditer sur place. (Vous pouvez également trouver et ouvrir le symbole depuis la bibliothèque de Flash.)
2. Modifiez les dessins existants, ou supprimez tout et dessinez les votre.
3. Quand vous avez fini d’éditer un élément du skin, double-cliquez en dehors de la zone du symbole, ou cliquez sur le bouton de retour dans la zone supérieure gauche de la fenêtre du document (au dessus de la timeline).

Quand vous éditez un symbole, faîtes attention au point de référence (le signe + dans le coin supérieur gauche de votre symbole). Flex alignera toujours le point de référence avec le coin supérieur gauche du composant, c’est pourquoi vous devez vous assurer que le coin supérieur gauche de votre dessin a le signe + (sauf pour les éléments de scrollbar, qui doivent être décalés d’un pixel vers la droit comme mentionné plus haut).

Si la forme des élements des skins que vous créez est très différente du dessin de base (par exemple si vos coins sont plus arrondis, ou si vous avez fait vos skins plus grandes) vous devrez certainement éditer la scale-9 grid.

Pour faire cela, suivez les étapes suivantes:

1. Faites un clic droit sur l’élément de votre skin sur la scène, et choisissez « Modifier ». Cela vous ouvrira une vue juste avec le symbole que vous avez choisi.
   • Si vous ne voyez pas les lignes en pointillés, c’est que le symbole ne requiert pas une scale-9 grid. C’est un composant Flex qui n’est jamais redimensionné.
   • Si vous voyez les lignes en pointillés, elles représentent la scale-9 grid. En utilisant l’outil pointeur, déplacez les lignes pour spécifier les différentes parties qui doivent s’étirer et dans quelles directions, comme cela a été décrit dans la section dédiée à l’étirement des composants Flex. Par exemple, si vous avez des coins arrondis, assurez vous qu’ils sont entièrement contenus dans les quarts de cercle faisant les coins de la scale-9 grid.
2. Quand vous avez ajusté la grille, cliquez sur le bouton retour dans le coin supérieur droit de la fenêtre du document pour retourner sur la scène principale.

3. Exportez le fichier de skin

Quand vous avez fini d’éditer tous les symboles et les scale-9 grids, l’export est très simple: choisissez juste Fichier > Publier. Cela créera automatiquement un fichier flex_skins.swf dans le même répertoire. Ce fichier et le fichier flex_skins.css fourni sont tout ce dont vous avez besoin pour personnaliser l’apparence d’une application Flex.

Une fois que vous avez publié le fichier de skin, vous pouvez passer à l’étape suivante, la modification des styles CSS.

S: 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.

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.

Je travaille actuellement sur la conception d’une application Flex, dont l’aspect graphique et ergonomique est très important puisqu’elle touche le grand public. J’en suis à la phase de maquettage de l’application, et j’ai assez tendance à me « lacher » dans le design !

J’ai donc cherché à rentrer un peu plus dans la personnalisation graphique dans Flex pour en connaître les limites techniques, et j’ai trouvé peu de ressources à ce sujet sur le web. L’article que j’ai trouvé le plus intéressant est celui de Narciso Jaramillo, publié sur le site d’Adobe : Designing Flex 2 skins with Flash, Photoshop, Fireworks, or Illustrator.

Etant donné le peu de ressources en français sur Flex, je vais faire une traduction (très) libre de cet article, agrémentée de mon retour d’expérience au niveau de la personnalisation d’interface Flex. Pour cela, je suivrai une trame proche de celle suivie par l’auteur original :

1. Introduction à la personnalisation d’interface graphique Flex
2. Explications sur le fonctionnement du skinning d’une application Flex
3. La problématique de l’étirement d’un composant dans Flex
4. Réaliser un skin pour composants Flex avec Flash
5. Réaliser un skin pour composants Flex avec Photoshop
6. Réaliser un skin pour composants Flex avec Fireworks
7. Réaliser un skin pour composants Flex avec Illustrator
8. Utiliser la technique « scale-9 grid » dans Flex pour les bitmaps
9. Editer les styles CSS dans Flex
10. Créer plusieurs skins pour un même composant Flex
11. Testez vos skins et vos styles pour Flex

Je n’ai ni la prétention d’être un traducteur hors-pair, ni de maîtriser sur le bout des doigts la personnalisation d’applications Flex. Je suis dans une période d’apprentissage, et mon but est de vous faire partager ce que je découvre et apprends, en espérant que cela puisse vous servir. N’hésitez pas à laisser un commentaire si vous pensez qu’un concept n’est pas expliqué de façon suffisamment claire ou qu’une traduction plus appropriée existe pour l’un des termes utilisé.

A très vite pour le premier article : Introduction à la personnalisation d’interface graphique Flex.

Voici un premier billet dans une lignée plus technique que les précédents, histoire de combler le peu de ressources Flex disponibles en langue française.

L’une des premières difficultés que rencontre nécessairement un développeur qui débute avec Flex est le changement de couleur d’arrière plan de son application lors du preload. En effet, une couleur « gris-bleu » (je ne sais même comment la définir) est affectée par défaut en background-color.

Il n’existe pas de moyen de changer cela via une instruction dans le MXML ou dans une feuille de style. Il faut donc utiliser l’une de ces deux solutions :

1. Compiler l’application à l’aide de l’argument -default-background-color

En passant l’argument -default-background-color #FFFFFF (par exemple) vous forcez la couleur de fond de votre application au blanc. Pour faire cela à l’aide de Flex Builder, vous devez procéder comme ceci :

• Ouvrez votre projet
• Allez dans le menu Project > Properties > Flex Compiler
• Ajoutez -default-background-color #FFFFFF à la ligne « Additional compiler arguments », à la suite des arguments déja définis
• Compilez le projet pour voir le résultat

Cette méthode ne change que le background-color de votre preload, et non pas celui de votre application. Pour changer également celui de votre application, vous pouvez rajouter la ligne suivante dans votre fichier MXML, sur le tag <mx:Application> :

backgroundGradientColors= »[#ffffff, #ffffff]« 

Ce qui donne par exemple :

[cc lang="xml"]


[/cc]

2. Forcer la couleur d’arrière plan directement dans le code HTML

Voici un exemple donné par Adobe pour forcer la couleur de fond d’une application depuis le code HTML :

[cc lang="xml"]
width= »100″ height= »100″ name= »test » align= »middle »
play= »true »
loop= »false »
quality= »high »
allowScriptAccess= »sameDomain »
type= »application/x-shockwave-flash »
pluginspage= »http://www.adobe.com/go/getflashplayer »>

[/cc]Je détaillerai certainement dans un prochain article la manière de personnaliser l’animation de preload.