L'internationalisation d'une application
javascript est, comme pour tout autre type d'application très
pratique. En javascript point de gettext ou autre bibliothèque,
mais des méthodes diverses et personnelles. En voici une, elle
utile lorsque le script est utilisé
dans le cadre d'une application web (voir mon article, pour
internationaliser une application ruby on rails).
Une extension est disponible dans le cadre d'une application
javascript totalement autonome d'un langage serveur.
La base
Cette méthode est basée sur le même principe
qu'avec gettext. Chaque traduction correspond à une clef sous
forme d'une chaîne de caractères.
Le fichier de traduction
Pour chaque langue, correspond un fichier de traduction. Celui-ci contient le texte traduit, avec sa clef. Il se présente sous cette forme:
var i18n =
new Array();
i18n["Bonjour"]
= "Hello";
i18n["Enregistrer"] =
"Save";
i18n["Supprimer"] = "Delete";
Il est donc en javascript, et doit être inclus par le serveur.
La variable d'environnement HTTP_ACCEPT_LANGUAGE est très
utile pour ce genre d'utilisation.
Voici un exemple pour un fichier d'internationalisation
anglophone.
<script
type="text/javascript"
src="/javascript/tr/en.js"
></script>
La méthode d'appel
L'appel d'une traduction à partir d'une clée se passe comme pour une internationalisation avec gettext, on utilise une fonction nommée _ avec la clée pour paramètre.
>>_("Bonjour")
"Hello"
>>_("Supprimer")
"Delete"
>>_("Texte non traduit")
"Texte non
traduit"
Voici son code:
function
_(clef){
// Si la traduction existe
try{
//
Récupération de la chaine correspondant à la clef
var str = i18n[clef];
//
Si la traduction n'existe pas
if (str === undefined){
//
Renvoi la clef
str
= clef;
//
Dans le cadre du développement,
//
une notification peut être ajouté.
window.console.log("Traduction
non trouvée pour la clef: "+clef);
};
//
Renvoi la chaine traduite
return str;
}catch(e){
//
Si il y a un problème (fichier non chargé par exemple),
//
renvoi la clée
return clef;
};
};
L'extension pour une utilisation seulement javascript
Dans le cadre d'une application javascript
autonome et donc indépendente d'un
langage serveur, voici une méthode pour que l'application
détecte toute seule la langue du
client, et charge le fichier de traduction en fonction. C'est
un peu lourd et gros, mais ça fonctionne.
function
init_i18n(url,langues){
// Tout dans une grande exeption,
pour éviter les erreurs
try{
//
Détection de la langue du navigateur.
try{
var
l = navigator.language;
}catch(e){
//
La truc pour ie
var
l = navigator.browserLanguage;
};
//
Vérification pour savoir si la langue existe
try{
//
Si la langue n'existe pas
if
(langues.indexOf(l)==-1){
//
Récupération des deux premières lettres pour éviter les
indicateurs de pays
l
= l.slice(0,2);
//
Si à nouveau, elle n'existe pas
if
(langues.indexOf(l)==-1){
//
La langue est celle par default
l
= langues[0];
};
};
}catch(e){
//
Pour les navigateurs n'ayant pas encore le javascript 1.6
var
langues_t = langues.join(' ')+' ';
//
Si la langue n'existe pas
if
(!new
RegExp(l+'
','i').test(langues_t)){
//
Récupération des deux premières lettres pour éviter les
indicateurs de pays
l
= l.slice(0,2);
//
Si à nouveau, elle n'existe pas
if
(!new
RegExp(l+'
','i').test(langues_t)){
//
La langue est celle par default
l
= langues[0];
};
};
};
//
Création de la requette ajax
try{
var
objet_ajax = new
XMLHttpRequest();
}catch(e){
//
La même chose, pour ie
var
objet_ajax = new
ActiveXObject("Microsoft.XMLHTTP");
}
//
Récupère le fichier d'internationalisation, en synchronisé
objet_ajax.open("GET",
url.replace('@langue@',l),
false);
//
Gestion de la requête
objet_ajax.onreadystatechange
= function(){
//
Quand le fichier est chargé
if
(objet_ajax.readyState == 4){
//
Interprétation du fichier, sans redéfinir la variable globale
eval(objet_ajax.responseText.replace('var
i18n = new
Array();',''));
};
};
//
Appel de la requête
objet_ajax.send(null);
}catch(ee){
//
Si il y a un problème, c'est le fichier javascript par default
qui est appelé.
window.console.log("Erreur
lors du chargement de l'internationalisation: "+ee);
};
};
Il faut quand même charger un fichier par défaut, pour les
vieux navigateurs, supprimer les window.console.log pour la
production.
<script
type="text/javascript"
src="/javascript/tr/en.js"
></script>
La méthode s'utilise comme ceci:
window.onload = function(){
window.console.log(_('Bonjour'));
init_i18n('i18n_@langue@.js',['en','fr']);
document.body.firstChild.data =
_('Bonjour');
}
On passe en paramètre l'url du fichier d'internationalisation,
avec @langue@ à la
place de l'indicateur de langue, et un tableau listant les
langues disponibles.
Conclusion
Voilà, maintenant vous savez
internationaliser une application javascript. C'est
facile et utile.
Pour aller plus loin
