Après avoir implémenté toutes les fonctionnalités de mon application mobile, la seconde étape avant sa publication en ligne, a été de la personnaliser afin de lui donner un look & feel propre (couleur de fond, couleur du texte, icône, image en background, etc...)
Flash Builder 4.5 met à notre disposition plusieurs techniques pour personnaliser son application :
- Les attributs des composants
- L'utilisation d'une feuille de style comme pour le web
- L'écriture d'un skin pour overriter le skin par défaut du composant que l'on souhaite personnaliser
La modification des attributs directement dans le composant est la technique la plus rapide et la plus accessible car nous pouvons le faire directement dans l'IDE. Attention toutefois, tous les attributs disponibles dans l'IDE ne s'appliquent pas au composant...
L'utilisation d'une feuille de style est basée sur la même technique que la personnalisation d'une application web. Il faut pour cela utiliser la balise <fx:Style>...</fx;Style>. Vous pouvez aussi utiliser les class et les id. A noter toutefois, comme pour la modification directe via l'IDE des attributs du composant, il est aussi difficile de savoir quels attributs s'appliquent au composant et quels autres ne s'appliquent pas...
Enfin, la dernière solution est l'écriture d'un skin propre au composant. C'est la seule solution permettant la personnalisation totale du composant mais c'est aussi la solution la plus complexe. Elle permet de redéfinir le graphisme du composant mais aussi son comportement. La grande difficulté que j'ai rencontré en mettant en œuvre cette solution a été de savoir de quoi partir pour personnaliser le composant. Sur ce point j'ai été un peu déçu par Flash Builder. Car la fonctionnalité, même si elle est un peu documentée par Adobe par des exemples assez classiques, ne permet pas une prise en main aisée. En effet, pour personnaliser totalement un composant de base Spark, il faut savoir comment il est construit et comment il fonctionne et cela n'est pas trivial si cela n'est pas assez documenté.
Finalement je me suis aperçu qu'on pouvait retrouver les skins par défaut d'Adbobe dans le package spark.skins.spark et ainsi partir de la source pour personnaliser son composant.
Pour utiliser dans un composant le skin que l'on vient de créer, il suffit d'utiliser son attribut skinClass="..."
