Traduction

i18n

X4 intègre un système de traduction, ce système s’appelle i18n (Internationalisation).

Le système a parfois besoin d’afficher des chaînes de caractères. Evidement dans un système multilingue, rien n’est codé en dur.

Pour cela, X4 a définit un certain nombre de langages et vous permet d’ajouter vos propres traductions. Vous pouvez d’ailleurs patcher les traductions existantes si elles ne vous plaisent pas.

Vous pouvez bien sûr ajouter vos propres nouvelle langues (actuellement seul le français et l’anglais sont définis).

Comment utiliser le système de traduction

L’idée est que tout le système de traduction passe par une simple variable globale (read only) nommée _tr. Pour accéder a une traduction, il faut donc utiliser (un exemple un peu compliqué)

_tr.global.dayNames[0]
// global est le nom des éléments propres à x4.
// dayNames est un tableau contenant le nom long des jours.

Sélection de la langue courante

La langue courante se sélectionne ainsi:

selectlanguage( 'fr' );

Note

Il n’y a pas de code spécial pour les langues, par défaut x4 propose simplement le code pays.

Ajout de vos propres traductions

Amusons nous à créer nos propres chaines. Nous allons créer un ensemble de chaines que nous allons ranger dans un objet nommé app.

const app_fr = {
    app: {
        open: "Ouvrir",
      close: "Fermer"
    }
};

addTranslation( "fr", app_fr );

// nous allons maintenant pouvoir accéder à ces chaines par
console.log( _tr.app.open );

Note

Il n’y a pas de limite à arborescence vous pouvez créer des sous éléments qui correspondent par exemple a certaines fonctionnalités. Par exemple tout ce qui va concerner l’utilisateur peut être rangé dans le sous élément app.user

const app_fr = {
    app: {
        open: "Ouvrir",
        close: "Fermer",
        user: {
            last_name: "Nom",
            first_name: "Prénom"
        }
  }
};

addTranslation( "fr", app_fr );

// nous allons maintenant pouvoir accéder à ces chaines par
console.log( _tr.app.user.first_name );

Note

vous pouvez appeler plusieurs fois addTranslation avec des fragments différents.

Ajout d’un nouvelle langue

Vous pouvez définir une nouvelle langue grâce à la fonction suivante:

// nous créons une nouvelle langue 'de' qui a pour fallback 'fr'
createLanguage( 'de', 'fr' );

Attention

ll est indispensable de définir les langages avant toute utilisation…

Fallback

Le fallback est le mécanisme qui se met en place lorsqu’une traduction manque. Par défaut chaque langage dit de quel langage il dérive. En général, l’application est prévue dans une langue et des traductions sont ajoutées. La langue de base des traductions sera la langue de base (par exemple).

Inspection

Il est possible de connaitre les informations concernant i18n:

// affiche la langue courante
console.log( getCurrentLanguage( ) );

// renvoie la liste des langues définies
console.log( getAvailableLanguages( ) );

Eléments complexes

Comme nous l’avons vu en introduction, non seulement nous pouvons utiliser des chaines simples mais aussi des tableaux de chaines:

const app_fr = {
    app: {
        modes: ["simple", "normal", "avancé"]
    }
};