Javascript et I18N

Dans le cadre du projet Arte Live Web, je cherchais à manipuler des fichiers "resources" I18N  en Javascript sur le même principe que Struts ou Spring. Je souhaitais que n'importe quelle classe JS puisse accéder à ces traductions.

Pour cela, je me suis inspirée d'une solution dénichée dans un article de blog.

1. Fichiers de traduction

Il doit avoir un fichier JS par locale et chaque fichier doit contenir une variable que je nomme "messageResources" contenant un ensemble de clés/valeurs en notation JSON.

Exemple de fichier :

var messageResources = {
"js.front.home.tooltip.addInPlaylist":"Pour ne pas manquer ce spectacle, ajoutez le à votre playlist !",
"js.front.blog.comment.nicknameMandatory":"'Pseudo' obligatoire",
"js.front.user.profile.saveWithEmailModification.ok":"Vos informations ont été mises à jour. Un email de confirmation a été envoyé à l'adresse {0}. Vous venez d'être déconnecté."
...
};

Pour charger le bon fichier, je me sers de la locale Java en cours dans une JSP.

2. Classes pour manipuler les fichiers

Ensuite pour exploiter le fichier, j'ai écrit 2 classes utilisant le framework Javascript PrototypeJS.

- Une classe Resources pour manipuler un ensemble de clés/valeurs en notation JSON et réaliser de la substitution (remplacer {0} par une valeur) comme on peut le faire avec le Tablig Bean de Struts.

var Resources = Class.create(
{
messages : null,
load : function(messages)
{
this.messages = messages;
},
format : function(message)
{
var args = $A(arguments);
args.shift(); // Suppression du message dans les arguments
return message.replace(/{(d+)}/g, function(match, index) {
return args[index];
});
},
getMessage : function(key)
{
if (this.messages && this.messages[key])
{
var args = $A(arguments);
args.shift(); // Suppression de la clé dans les arguments
var formatFunction = this.format.bind(this, this.messages[key]);
for( var i = 0; i < args.length; i++)
{
formatFunction = formatFunction.bind(this, args[i]);
}
return formatFunction();
}
return key;
}
});

- Une classe statique I18nHelper qui transforme la variable messageResources en objet Resources.

var I18nHelper =
{
resources : null,
getResources : function()
{
if (!this.resources)
{
try
{
this.resources = new Resources();
if (messageResources)
{
this.resources.load(messageResources);
}
else
{
alert('Attention, la variable messageResources n'est pas déclarée!');
}
}
catch(e)
{
}
}
return this.resources;
}
};

Ces deux classes vont nous permettre d'accéder aux fichiers resources depuis n'importe portion de code JS.

3. Exemples d'utilisation

- Sans substitution : on affiche le message associé à la clé js.front.blog.comment.nicknameMandatory.


var errorMessage = I18nHelper.getResources().getMessage('js.front.blog.comment.nicknameMandatory');
alert(errorMessage);

- Avec substitution : on affiche le message associé à la clé js.front.user.profile.saveWithEmailModification.ok en remplaçant {0} par la valeur passée en paramètre de getMessage

var message = I18nHelper.getResources().getMessage('js.front.user.profile.saveWithEmailModification.ok ', 'test@free.fr')
alert(message);

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.