Personnalisez vos polices avec l’éditeur de texte de flex

Flex intègre nativement dans ses composants un éditeur de texte de type wysiwyg (What You See Is What You Get) très simple à mettre en place dans vos applications flash. La tâche se complique un peu lorsqu’il est question d’embarquer vos polices, et ne parlons même pas de la possibilité d’afficher un aperçu de ces dernières dans le menu déroulant, pour choisir la police à utiliser.

Voir l’aperçu

1. Création des SWF qui embarquent les polices

La 1re étape consiste à créer les SWF qui embarquent vos polices, pour cela, plusieurs choix s’offrent à vous: Soit vous décidez d’utiliser l’IDE d’adobe (méthode que je ne vais pas aborder ici), soit vous le faites en ligne de commande avec le compilateur Flex sdk 3.5 (Gratuit et multiplateforme). Attention, il faut au minimum la version 3.5 de flex sdk disponible ici.

Personnellement, j’ai voulu embarquer plusieurs polices, et qui dit action répétée, dit forcément automatisation. J’ai donc mis au point un petit script PHP qui va me parcourir le contenu d’un répertoire, récupérer tous les fichiers TTF ou OTF, générer des scripts AS pour embarquer chaque police, et compiler le tout.

Voici un exemple de script AS généré automatiquement pour embarquer une police:

package {

    import flash.display.Sprite;

    public class mapolice extends Sprite {
        [Embed(source = 'mapolice.ttf', fontName = 'mapolice')]
        public static var font:Class;
    }

}

Une fois compilé, vous obtenez votre SWF, il ne vous reste plus qu’à le charger depuis votre application principale.

2. Méthode de chargement des SWF

La prochaine étape, consiste à charger tous les SWF. Vous pouvez indiquer en dur dans votre code les fichiers à charger, pour mes besoins, j’ai choisi de faire appel à un fichier XML contenant la liste de toutes mes fonts. Pourquoi un XML ? Car le jour où vous aurez besoin d’ajouter une nouvelle font, inutile de recompiler votre application, il suffira simplement de modifier votre fichier XML. Plus pratique, plus rapide … c’est bon pour la planète, mais là aussi, libre à vous de choisir votre méthode de travail. Si vous êtes certain de ne jamais avoir à ajouter de fonts supplémentaires, stocker dans un tableau la liste de tous les fichiers SWF à charger sera une bien meilleure solution!

3. Ajouter les fonts à l’éditeur de texte RichTextEditor de flex

Commencez par ajouter un event sur l’éditeur de texte:

<mx:RichTextEditor id="rte" x="10" y="10"
    title="Mon éditeur" width="540" creationComplete="init ();">
</mx:RichTextEditor>

La méthode d’initialisation:

public function init ():void {
    // On supprime la liste des polices par defauts.
    rte.fontFamilyCombo.dataProvider = [];
    // Chargement du fichier XML.
    XML = new CXml ("./fonts/fonts.xml", constructFonts);
} // init ();

L’objet CXml se contente de charger le fichier fonts.xml et de le parser, constructFonts est la fonction appelée en retour qui va charger toutes les fonts.

private function constructFonts ():void {
    var xml:XML = XML.getXML ();
    // On recupere la liste des fonts a charger.
    for each (var d:XML in xml.children ()) {
        var nDir:String = d.attribute ("name").toString ();
        if (d.attribute ("swf").toString () == "0") {
            // Police systeme embarquee depuis local.css.
            for each (var f:XML in d.children ()) {
                fontLoaded (f.attribute ("name").toString ());
            }
        } else {
            for each (var c:XML in d.children ()) {
                embedFont (nDir, c.attribute ("name").toString ());
            }
        }
    }
} // constructFonts ();

Dans le bout de code ci-dessus, vous observez qu’il faut utiliser un fichier local.css. Pourquoi me direz-vous ? Car ce fichier va nous permettre d’embarquer la police par défaut (verdana) de l’éditeur de texte (normal, bold, italic etc…), sans quoi, nos autres polices seraient inutilisables. Pour faire court, sans verdana, il devient impossible d’utiliser nos polices embarquées dans l’éditeur de texte.

Pour utiliser un fichier CSS externe:

<mx:Style source="fonts/local.css"></mx:Style>

4. Afficher l’aperçu de nos polices dans le menu déroulant de l’éditeur de texte

Dans mon code, j’ai choisi d’afficher l’aperçu uniquement lorsque toutes les fonts sont correctement chargées. Vous le verrez dans mes sources, mais lorsque tout est terminé, je fait appel à une classe qui va modifier le rendu des polices dans le menu déroulant de l’éditeur.

rte.fontFamilyCombo.itemRenderer
    = new ClassFactory (CFontStyleRenderer);

5. Conclusion

Mettre en place un tel système est plutôt difficile, et je l’avoue, je n’ai pas mis 5 minutes à découvrir tous les rouages du langage pour arriver à mes fins. C’est pourquoi je met à votre disposition toutes les sources de l’aperçu que vous avez vu en tout début d’article. Sachez qu’il est aussi possible d’embarquer plus simplement vos polices:

[Embed(source='assets/CALIBRII.TTF', fontName='fontCalibri',
    mimeType='application/x-font')]

Mais attention, vos polices seront incluses dans l’animation, qui sera de ce fait, beaucoup plus lourde et longue à charger!

Les sources