Pourquoi faire un thème ?

Si l’on crée une application en Flex c’est pour proposer une meilleure expérience utilisateur que celle permise avec une simple application web en HTML, et notamment de proposer une interface utilisateur « plus sexy » avec de base des composants visuels jouant avec des effets d’ombres, de relief, de transparence, etc…

Par défaut, toutes les applications Flex que l’on crée ont le même rendu, le thème Halo : ce thème regroupe un ensemble d’assets graphiques qui dessinent tous les éléments visuels représentant les composants, une palette de couleurs appliquées de manière homogène à tous les composants, ou encore des propriétés de styles pour entre autres la mise en forme du texte.

Faire évoluer soit même ce design est réalisable en positionnant des propriétés CSS et en fournissant de nouveaux assets sous forme d’images bitmaps ou vectorielles qui deviendront les nouveaux skins des composants. Concevoir ces styles et skins à partir de Photoshop, Illustrator ou Flash est un gros travail à part entière et n’est pas l’objet de cet article, pour ce faire, je vous renvoies à l’article d’Adobe : Designing Flex 3 skins and styles using Creative Suite 3 and Flex Builder 3

Maintenant que vous avez changé entièrement le look&feel de tous les composants Flex du framework à l’aide de nombreux fichiers CSS, BMP, PNG, SWF, ou peut-être encore TTF, vous avez besoin de les packager : soit pour en faciliter l’utilisation de la part d’autres développeurs qui ne parlent pas CSS ni skinning couramment et éviter tout risque que votre design soit altéré par erreur, soit dans un soucis de réutilisabilité dans différents projets Flex si par exemple vous avez décliné ainsi la charte graphique de l’entreprise que vous représentez et que vous voulez pouvoir recompiler facilement les applications de votre entreprise en cas d’évolution de son identité visuelle.

Pour toutes ces raisons, il est intéressant de convertir ces skins et styles sous la forme d’un thème représenté par un unique fichier SWC.

Convertir les polices TTF en SWF

Si vos styles font appel à des polices TTF que vous embarquez, même si vous arrivez à compiler ce genre de fichiers dans un thème, malheureusement lors de l’utilisation du thème par un projet vous risquez qu’une erreur se produise empêchant toute utilisation de ce thème et par conséquent vous empêche de compiler votre projet. Seule solution : convertir les polices TTF en SWF beaucoup mieux (di)gérées par le compilateur Flex.

Commencez par installer les polices en question sur votre poste de travail parmi vos polices système.

Ensuite nous allons utiliser Flash Professional pour faire la conversion (Adobe met à disposition une version d’essai valable 30j si besoin est).

Dans Flash Pro, créez un nouveau fichier Flash (ActionScript 3.0), sélectionnez l’outil Texte (T) et dans la fenêtre Propriétés correspondante, choisir « texte dynamique » avant de choisir le nom de la police à convertir parmi la liste déroulante ; ensuite désactivez tout style italique ou gras qui pourrait avoir été déjà sélectionné.

Cliquez alors n’importe où sur la scène pour créer un champ texte mais ne saisissez pas de texte. La fenêtre Propriétés change alors et fait apparaître notamment un bouton « Intégrer… » ou « Character Embedding… » sur lequel vous devez cliquer pour choisir les caractères qui devrons être convertis.

Sélectionnez alors au moins les 5 premiers ensembles de caractères (majuscules, minuscules, chiffres, ponctuation, latin basique) pour gérer tous les caractères de la langue française.

Validez ces choix en cliquant sur OK.

Terminer en enregistrant ce projet Flash sous la forme d’un fichier FLA puis utilisez alors le menu Fichier/Publier pour lancer la conversion qui créera alors dans le même dossier que le fichier FLA, un fichier SWF.

Dans votre projet Flex, il ne vous qu’à remplacer les références à la police en TTF par le nom du fichier équivalent en SWF et supprimez éventuellement toute trace qui resterait de la propriété « unicode-range » pour ces polices. Enfin vérifiez que le nom indiqué dans la propriété « font-family » est bien le nom de la police comme affiché par votre poste de travail lors de son utilisation dans n’importe quel logiciel.

Préparer les sources du thème

On considère ici que vous avez conçu les styles et skins désirés comme indiqué précédemment et que votre projet Flex compile bien avec ce nouveau design qui repose sur l’utilisation d’une feuille de style CSS chargée par le composant principal de votre projet (la classe MXML qui étend Application).

Par exemple, notre feuille de style placée dans le dossier « css » se nomme « flex.css », et a donc été chargée dans l’application avec un code de la forme :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Style source="/css/flex.css"/>

Pour compiler un thème, nous allons recenser tous les fichiers nécessaires (il s’agit des fichiers évoqués précédemment et qui ont été créés pour le look&feel) puis nous les listons dans un fichier de configuration XML que nous appelerons monTheme.xml et que nous placerons à la racine de notre projet, il sera de la forme suivante :

<?xml version="1.0"?>
 <flex-config xmlns="http://www.adobe.com/2006/flex-config">
  <output>C:\destination\monTheme.swc</output>
  <include-file>
   <name>flex.css</name>
   <path>/css/flex.css</path>
  </include-file>
  <include-file>
   <name>mesFlashSkins.swf</name>
   <path>/swf/mesFlashSkins.swf</path>
  </include-file>
  <include-file>
   <name>maPolice.swf</name>
   <path>/fonts/maPolice.swf</path>
  </include-file>
  <include-file>
   <name>monSkin1.png</name>
   <path>/bmp/monSkin1.png</path>
  </include-file>
  <include-classes>
   <class>com.company.styles.ButtonSkin</class>
   <class>com.company.styles.ToolTipSkin</class>
  </include-classes>
 </flex-config>

Comme vous le voyez, nous commençons par indiquer que nous souhaitons inclure la feuille de style CSS en lui indiquant son nom avec l’attribut <name> puis précisons avec <path> le chemin où peut-être trouvé ce fichier par rapport à la position de monTheme.xml dans l’arborescence de fichiers du projet Flex.

Tous les fichiers que vous avez créés pour changer le look&feel de votre application sont tous normalement appelés par la CSS, il suffit donc d’enrichir ce fichier XML avec les noms et chemins des fichiers découverts.

Prenons l’exemple du fichier monTheme.css qui contiendrait entre autres ces lignes :

@font-face
{
 src: url("/fonts/maPolice.swf");
 font-family: "Ma Police";
}

Button
{
 disabledSkin: Embed(source="/swf/mesFlashSkins.swf", symbol="Button_disabledSkin");
 downSkin: Embed(source="/swf/mesFlashSkins.swf", symbol="Button_downSkin");
 overSkin: Embed(source="/swf/mesFlashSkins.swf", symbol="Button_overSkin");
 upSkin: Embed(source="/swf/mesFlashSkins.swf", symbol="Button_upSkin");
 selected-disabled-skin: Embed(source="/swf/mesFlashSkins.swf", symbol="Button_disabledSkin");
 selected-down-skin: Embed(source="/swf/mesFlashSkins.swf", symbol="Button_downSkin");
 selected-over-skin: Embed(source="/swf/mesFlashSkins.swf", symbol="Button_downSkin");
 selected-up-skin: Embed(source="/swf/mesFlashSkins.swf", symbol="Button_downSkin");

DateField
{
 disabledSkin: Embed(source="/bmp/DateField_disabledSkin.png");
 downSkin: Embed(source="/bmp/DateField_downSkin.png");
 overSkin: Embed(source="/bmp/DateField_overSkin.png");
 upSkin: Embed(source="/bmp/DateField_upSkin.png");
}

PopUpButton
{
 disabledSkin: ClassReference("com.company.styles.PopUpButtonSkin");
 downSkin: ClassReference("com.company.styles.PopUpButtonSkin");
 overSkin: ClassReference("com.company.styles.PopUpButtonSkin");
 popUpDownSkin: ClassReference("com.company.styles.PopUpButtonSkin");
 popUpOverSkin: ClassReference("com.company.styles.PopUpButtonSkin");
 upSkin: ClassReference("com.company.styles.PopUpButtonSkin");
}

Le fichier de configuration correspondant monTheme.xml ressemblera alors :

<?xml version="1.0"?>
<flex-config xmlns="http://www.adobe.com/2006/flex-config">
 <output>C:\destination\monTheme.swc</output>
 <include-file>
  <name>flex.css</name>
  <path>/css/flex.css</path>
 </include-file>
 <include-file>
  <name>/fonts/maPolice.swf</name>
  <path>/fonts/maPolice.swf</path>
 </include-file>
 <include-file>
  <name>/swf/mesFlashSkins.swf</name>
  <path>/swf/mesFlashSkins.swf</path>
 </include-file>
 <include-file>
  <name>/bmp/DateField_disabledSkin.png</name>
  <path>/bmp/DateField_disabledSkin.png</path>
 </include-file>
 <include-file>
  <name>/bmp/DateField_downSkin.png</name>
  <path>/bmp/DateField_downSkin.png</path>
 </include-file>
 <include-file>
  <name>/bmp/DateField_overSkin.png</name>
  <path>/bmp/DateField_overSkin.png</path>
 </include-file>
 <include-file>
  <name>/bmp/DateField_upSkin.png</name>
  <path>/bmp/DateField_upSkin.png</path>
 </include-file>
 <include-classes>
  <class>com.company.styles.PopUpButtonSkin</class>
  <class>com.company.styles.PopUpButtonSkin</class>
 </include-classes>
</flex-config>

Remarques :

• dans l’attribut <name> on indique le nom du fichier tel qu’il apparaît dans ses appels depuis la feuille de style donc ici avec un nom de dossier.
• si des skins programmables sont utilisés il faut inclure les classes concernées vu qu’elles ne font pas partie du framework de base.

Compilation du thème

Nous allons utiliser le compilateur en ligne de commande. Il est accessible depuis un chemin ressemblant à :

C:\Program Files\Flex Builder 3 Plug-in\sdks\3.2.0\bin

La ligne de commande à éxécuter depuis ce chemin est de la forme :

compc -load-config C:\[chemin absolu vers fichier de config]\monTheme.xml

Si aucun message d’erreur n’apparaît, félicitations, vous avez créé votre thème !

Le fichier monTheme.swc a alors été créé à l’endroit que vous aviez indiqué dans votre fichier XML.

Utilisation du thème

Pour appliquer désormais ce thème sur un projet Flex, plus besoin d’avoir recours à la moindre feuille de style, il vous suffit d’ajouter le paramètre de compilation suivant :

-theme "C:\[chemin absolu]\monTheme.swc"

Le moyen le plus simple d’ajouter ce paramètre étant de les ajouter via Flex Builder ou le plugin Eclipse dans la fenêtre des Propriétés du projet dans la rubrique Flex Compiler / Additional compiler arguments à la suite des paramètres déjà entrés.

Enfin, si votre thème ne contient pas tous les styles dont vous avez besoin, rien ne vous empêche (comme vous le faisiez déjà avec le thème Halo par défaut) de l’enrichir ou de le rédéfinir en définissant de nouveaux styles dans une feuille de style CSS qui se chargera après votre thème.

Références :

• Flex-Tutorial.fr : Flash Font – Convertir un fichier TTF en SWF (Convert TTF to SWF)
• HeMedia : Flex, Thème – Créer et compiler des thèmes sous Flex
• Flex-Tutorial.fr : Flex Theme: Créer un thème Flex (SWC)