JQuery e supporto multilingua

Hai bisogno di rendere la tua web app multilingua? Niente di più semplice; in questo articolo vi propongo un metodo che vi permetterà di avere un app multilingua utilizzando jquery e dei file json.

Il metodo è abbastanza semplice, la sua implementazione può essere sviluppata con una decina di righe di codice (esclusi naturalmente i file di traduzione); il metodo consiste nell’aggiunta di un attributo a tutti gli elementi dell’interfaccia che conterranno un testo multilingua. L’attributo conterrà come valore, una chiave, che verrà ricercata nei file delle traduzioni:

<p tkey="example"></p>


Ciò che ci serve fare, è prendere tutti gli elementi che hanno l’attributo tkey (in questo caso), ed aggiungere al loro interno il testo con codice il valore dell’attributo, tradotto nella lingua del browser corrente.

Javascript ci consente di conoscere la lingua del computer che stà visualizzando la pagina, tramite il campo navigator.language; conoscendo la lingua, possiamo selezionare il corretto file di traduzione. Ho scelto di utilizzare dei file json per codificare le traduzioni, questi file saranno così strutturati:

lang/it.json
{
"chiave" : "Stringa in italiano",
"example" : "Esempio"
...
}


Per prima cosa, dobbiamo caricare il file di lingua corretto, per farlo utilizziamo la variabile navigator.language e jquery:

langCode = navigator.language.substr (0, 2);
$.getJSON('lang/'+langCode+'.json', translate);


Al completamento del caricamento del file json, jquery chiamerà la funzione “translate”; questa funzione deve selezionare tutti gli elementi del dom che hanno l’attributo “tkey”, e sostituire il contenuto con la stringa nella lingua corrispondente. Per selezionare elementi, jquery è molti versatile: nel nostro caso basta usare un selettore di attributi:

$('[tkey]')


Ora vediamo la funzione translate:

var translate = function (jsdata)
{
$("[tkey]").each (function (index)
{
var stringaTradotta = jsdata [$(this).attr ('tkey')];
$(this).html (stringaTradotta);
});
}


Quello che fa è semplicemente, per ogni elemento contenente l’attributo tkey, prelevare la stringaTradotta dal file json precedentemente caricato con $.getJSON(), ed inserirla come codice HTML dell’elemento.

Questo è tutto; qualcuno magari si chiederà “Ma perchè non utilizziamo una delle milioni di librerie che fanno già tutto questo, e lo fanno anche meglio?”; beh, una soluzione simile ha il vantaggio di fare quello che ci serve in poche righe di codice, con un overhead abbastanza basso, in un modo abbastanza semplice e pulito. Poi se abbiamo esigenze più elaborato, si può pensare di scegliere di
utilizzare librerie più elaborate.

Potete trovare il codice di quest’implementazione sul mio profilo github: https://github.com/dakk/jquery-multilang

Advertisement