Si vous développez avec Flex, vous vous êtes déjà certainement rendu compte des limites des composants fournis par le langage, et vous avez certainement cherché à les  améliorer. Rassurez-vous, vous n’êtes pas le seul ! J’ai relevé pour vous un certain nombre de composants téléchargeables librement  sur le web :

Flexlib : il s’agit certainement de l’une des librairies les plus en vogue du moment car elle est relativement complète. Elle me parait indispensable à tout développement qui nécessite de faire une interface assez dense en terme de fonctionnalités. La liste des composants se trouve ici.

Quietly Scheming : ce blog propose un certain nombre de composants vraiment sympa visuellement, comme par exemple : Fisheye Component, Flexbook, différents graphiques, etc …

Stretchmedia : ce blog propose entre autre un superbe lecteur de courbe graphique, un peu comme celui que l’on retrouve sur Google Finance.

Flexbox : un annuaire de composants Flex sympa, ou j’y ai notamment trouvé un Reflexion Explorer du plus bel effet …

Flex Exchange Beta : le site d’échange de composants Flex mis en place par Adobe.

Voila, il y en a sûrement d’autres qui existent, n’hésitez pas à m’en faire part si vous en connaissez des bons. Rien qu’explorer ceux-ci m’a pris un sacré temps … Je présenterai certains composants plus en détail après les avoir intégré dans une application.

Tout bon développeur web qui se respecte a forcemment entendu parler un jour de CssZenGarden, le célèbre site qui démontre la puissance des styles CSS. Le principe est simple : un seul fichier XHTML, et une quantité impressionnante de feuilles de styles CSS, qui changent complètement le graphisme de la page.

Il existe désormais le même site, mais pour les skins d’applications Flex (ou AIR) ! Le site s’appelle FillColors et vient d’être lancé. Le principe est le même : un fichier MXML unique, et différentes skins qui font varier son aspect graphique.

Il n’y a pas beaucoup de skins proposées pour le moment, mais je suis certain que ça ne va pas tarder. En tout cas, celles qui sont proposées sont déjà impressionnantes, et même si je traduit actuellement un article sur la personnalisation d’applications Flex, je ne savais pas qu’on pouvait aller aussi loin ! Bref, encore un site à ajouter à vos favoris et à suivre de près ;-)

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 ;-)

Au fil des mes recherches et de ma veille, je suis tombé sur un article très intéressant de Niko, où il fait une bonne présentation de Flex. Je trouve qu’il est très bien écrit, il résume bien les points principaux pour tout développeur qui souhaite savoir ce qu’est Flex. Hop, dans mes favoris ;-)

Adobe propose un certain nombre de ressources, gratuites ou payantes, pour personnaliser les composants et interfaces Flex. Voici un tour d’horizon des principaux :

Les utilitaires

• Adobe Flex 2 Component Explorer : une application Flex qui permet de voir l’ensemble des composants disponibles sous Flex 2.
• Adobe Flex 2 Style Explorer : une application Flex qui vous permet de personnaliser les CSS pour les composants Flex à l’aide d’un outil graphique, puis de récupérer le code à utiliser dans votre fichier CSS.

Les logiciels

• Adobe Flash
• Adobe Photoshop
• Adobe Fireworks
• Adobe Illustrator
• Adobe Flex Builder : l’IDE indispensable pour développer vos applications Flex.

Les templates

Adobe fournit un certain nombre de templates pour apprendre à personnaliser vos applications Flex à l’aide de ses logiciels. Il y a un modèle pour chacun d’entre eux :

• flex_skins_flash.zip (ZIP, 108K)
• flex_skins_photoshop.zip (ZIP, 1.57 MB)
• flex_skins_fireworks.zip (ZIP, 288K)
• flex_skins_illustrator.zip (ZIP, 178K)

L’éditeur O’reilly vient de publier un nouvel ouvrage sur Flex et Apollo pour les développeurs :  » Apollo pour les développeurs Adobe Flex – précis et concis « . Voici le résumé officiel du livre :

Ce texte est une introduction au développement d’applications pour la version Alpha 1 publique d’Adobe Apollo, un nouvel environnement de développement multi-plateformes pour applications de bureau.

Bien qu’Apollo permette le développement d’applications basées à la fois sur Flash et sur HTML, ce texte se concentre essentiellement sur la création d’applications Apollo avec le framework Flex.

Après un bref aperçu d’Apollo, vous verrez comment préparer votre environnement de développement ainsi que les nouvelles fonctionnalités et les API.

Au terme de votre lecture, vous devriez avoir une bonne compréhension de ce qu’est Apollo et de la manière de créer des applications Apollo avec Flex.

Cela fait un ouvrage de plus sur les technologies Flex / Apollo, même si Adobe est déjà passé à la suite avec AIR ;-)

Si vous lisez cet ouvrage, n’hésitez pas à me donner votre avis en commentaire de ce billet !

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.