Le multilingue en Flex

Flex a tout ce qu’il faut pour gérer le multilingue de manière très simple et efficace. Mais cela demande tout de même à être mis en place puisque quelques subtilités existent.

Tout d’abord, vérifiez que vous avez les locales nécessaires au niveau du sdk (/Adobe Flex Builder 3/sdks/3.2.0/frameworks/locale/). Pour chaque locale, vous devez avoir un répertoire correspondant (par exemple en_US ou fr_FR). S’il vous en manque un, il suffit simplement de copier un des répertoires existants et de le renommer.

Pour commencer, il nous faut un fichier par langue pour y mettre les traductions nécessaires. Pour cela, il suffit de créer un répertoire locale/ dans votre répertoire src/ :

Dans ce répertoire locale/ vous devrez ensuite créer un répertoire pour chaque langue que vous voulez traduire (ici l’allemand et le français). Enfin, chaque répertoire doit contenir le fichier de traduction qu’on appellera ici « monProjet.properties ».

Les fichiers .properties contiennent une ligne par traduction selon le format de l’exemple ci dessous :

L_LOGIN=identifiant
L_PASSWORD=mot de passe
L_EXIT=quitter

J’ai l’habitude (pour des raisons historiques 😉 ) d’écrire mes clés de traduction en majuscule et de les faire commencer par un « L_ » mais ce n’est pas une obligation.

Maintenant que nous avons nos fichiers de traductions, il faut dire à l’application qu’ils existent. Pour cela, il suffit de rajouter au fichier monProjet.mxml les quelques lignes suivantes :

    <mx:Metadata>
        [ResourceBundle("monProjet")]
    </mx:Metadata>

Maintenant, chaque fois que vous voudrez traduire un texte, il faudra l’intégrer de la manière suivante à votre code :

    resourceManager.getString('monProjet', 'L_LOGIN');

Reste encore à préciser à votre application quelle est la langue actuellement sélectionnée. Rien de plus simple. La commande ci-dessous permet justement d’indiquer la langue choisie (quelle chance !) :

    resourceManager.localeChain = ['fr_FR'];

Evidemment, pour l’allemand, ça aurait donné :

    resourceManager.localeChain = ['de_DE'];

Une dernier petit détail… la compilation. En effet, lors de la compilation de votre projet, il faut préciser les langues utilisées et l’endroit où se trouvent les fichiers de traduction. Pour cela, dans les propriétés de votre projet, une section (« Flex Compiler ») traite de la compilation. Vous pouvez alors donner des arguments supplémentaires au compilateur. Pour la gestion multilingue, nous allons ajouter ceux-ci :

-locale=fr_FR,de_DE -allow-source-path-overlap=true -source-path=locale/{locale}

Cette fois le tour est joué, votre application est polyglotte.

Voici un très petit exemple qui permet de rapidement tester la fonctionalité :

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    creationComplete="init()">
    <mx:Metadata>
        [ResourceBundle("monProjet")]
    </mx:Metadata>
    <mx:Script>
        <![CDATA[
            private function init():void {
                resourceManager.localeChain = ['fr_FR'];
            }
        ]]>
    </mx:Script>
    <mx:Label text="FR" x="10" y="10"
              click="{resourceManager.localeChain = ['fr_FR']}"/>
    <mx:Label text="DE" x="10" y="30"
              click="{resourceManager.localeChain = ['de_DE']}"/>
    <mx:Label x="50" y="20"
              text="{resourceManager.getString('monProjet', 'L_HELLO')}"/>
</mx:WindowedApplication>