Les applications web doivent de nos jours permettre d’être totalement exploitées par les utilisateurs de nationalités différentes. Pour cela, elle doit prendre en charge diverses langues et afficher son texte dans la langue de l’utilisateur. FirefoxOS nous propose une façon très simple à mettre en place.

Le manifeste

Il faut pour gérer les langues ajouter dans le fichier manifeste de l’application le champ locales (champ facultatif) tel que ci-dessous. L’interface utilisera ces informations pour traduire les écrans en fonction des paramètres de l’appareil (l’option langue du système).

"locales": {
  "es": {
    "description": "¡Acción abierta emocionante del desarrollo del Web!",
    "developer": {
      "url": "http://es.mozillalabs.com/"
    }
  },
  "it": {
    "description": "Azione aperta emozionante di sviluppo di fotoricettore!",
    "developer": {
      "url": "http://it.mozillalabs.com/"
    }
  }  
},

Quand le champ locales est présent, default_locale devient obligatoire.

  "default_locale": "en"

Les données

Une fois le manifeste définit, il reste à ajouter les données qui seront chargées par l’application. Ces données doivent se trouver dans un dossier data situé à la racine de l’application et contenir les fichier properties de chaque langue ainsi que le fichier locales.ini.

data/
  - en.properties
  - es.properties
  - it.properties
  - locales.ini
index.html

Le fichier locales.ini

Il est le fichier qui définit pour chaque langue le nom du fichier properties à charger par l’application.

@import url(en.properties)

[es]
@import url(es.properties)

[it]
@import url(it.properties)

Le fichier properties

Il contient les paires clés/valeur qui seront utilisées par l’application dans les fichiers HTML. Si l’on veut que la valeur retournée contienne des balises et qu’elles soient interprétées nous pouvons ajouter .innerHTML à la clé. C’est très pratique !

app_title = Aplicación privilegiada
app_description.innerHTML = Esta aplicación demuestra cómo usar <code>XMLHttpRequest</code> y el permiso <code>systemXHR</code>.
search = Buscar
searching = Buscando...
search_no_results = No se encontraron resultados

Le fichier HTML

Il doit pré-charger (cf. html5-prefetch) le fichier locales.ini ainsi que le JavaScript l10n.js fournit par Gaia.

Il est alors possible de faire appel aux clés disponibles dans le fichier properties à l’aide de l’attribut data-l10n-id.

<!-- index.html -->
<html >
  <head>
    <link rel="prefetch" type="application/l10n" href="data/locales.ini" />
     <script type="text/javascript" src="js/libs/l10n.js" defer></script>
  </head>
  <body>
    <h1 data-l10n-id="app_title">Privileged app</h1>
  </body>
</html>

Sources

Publié dans les catégories suivantes

javascript
comments powered by Disqus

Téléphone

+33 637 700 504

Adresse

Bordeaux, 33300
France