Démarrage rapide : traduction des ressources d’interface utilisateur (HTML)

  • Article

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Placez les ressources de type chaîne de votre interface utilisateur dans des fichiers de ressources. Vous pouvez ensuite référencer ces chaînes dans votre code ou votre balisage.

Instructions

  1. Placez les chaînes dans des fichiers de ressources au lieu de les insérer directement dans le code ou dans le balisage.

    1. Ouvrez package.appxmanifest dans Visual Studio, accédez à l’onglet Application, puis définissez la langue par défaut sur "en-US". S’il s’agit d’une application universelle, effectuez cette opération pour chaque fichier package.appxmanifest de votre solution.Remarque  Cela spécifie la langue par défaut du projet. Les ressources linguistiques par défaut sont utilisées si la langue par défaut de l’utilisateur ou les langues d’affichage ne correspondent pas aux ressources linguistiques fournies dans l’application. Voir Pages de propriétés, JavaScript.  
    2. Créez un dossier destiné à contenir les fichiers de ressources.
      1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le projet (le projet partagé dans le cas d’une application universelle) et sélectionnez Ajouter > Nouveau dossier.
      2. Nommez le nouveau dossier "strings".
      3. Si le nouveau dossier n’est pas affiché dans l’Explorateur de solutions, sélectionnez Projet > Afficher tous les fichiers dans le menu Microsoft Visual Studio en veillant à ce que le projet soit toujours sélectionné.
    3. Créez un sous-dossier et un fichier de ressources pour l’anglais (États-Unis).

      1. Cliquez avec le bouton droit sur le dossier strings et ajoutez un dossier sous celui-ci. Nommez-le "en-US". Le fichier de ressources est placé dans un dossier qui a été nommé pour la balise de langue BCP-47. Pour obtenir plus de détails sur le qualificateur de langue ainsi qu’une liste des balises de langue usuelles, voir Comment nommer des ressources à l’aide de qualificateurs.

      2. Cliquez avec le bouton droit sur le dossier en-US et sélectionnez Ajouter > Nouvel élément….

      3. Sélectionnez "Resources File (.resjson)".

      4. Cliquez sur Ajouter. Un fichier de ressources est ajouté avec le nom par défaut resources.rejson. Nous vous recommandons d’utiliser ce nom de fichier par défaut. Les applications peuvent partitionner leurs ressources dans d’autres fichiers. Toutefois, elles doivent y faire référence correctement (voir Comment charger des ressources de type chaîne).

      5. Le nouveau fichier contient du contenu par défaut. Remplacez le contenu par ce qui suit (qui peut être très similaire au contenu par défaut) :

        strings/en-US/resources.resjson

        {
    "greeting"              : "Hello",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Goodbye",
    "_farewell.comment"     : "A goodbye."
}

        Il s’agit d’une syntaxe JSON (JavaScript Object Notation) stricte, où une virgule doit être placée après chaque paire nom/valeur, sauf la dernière. Dans cet exemple, "greeting" et "farewell" identifient les chaînes à afficher. Les autres paires ("_greeting.comment" et "_farewell.comment") sont des commentaires qui décrivent les chaînes. Les commentaires permettent de donner des instructions particulières aux traducteurs qui localisent les chaînes dans d’autres langues.

  2. Ajoutez les identificateurs des ressources de chaîne dans le code et le balisage.

    1. Ajoutez des références à la Bibliothèque Windows pour JavaScript dans votre fichier HTML, si elles ne s’y trouvent pas déjà.

      Remarque  Le code suivant montre le code HTML pour le fichier default.html du projet Windows qui est généré lorsque vous créez un projet Application vide (Applications universelles) dans Visual Studio. Notez que le fichier contient déjà les références à WinJS.

      <!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

      Remarque  Le code suivant montre le code HTML pour le fichier default.htmldu projet Windows Phone qui est généré lorsque vous créez un projet Application vide (Applications universelles) dans Visual Studio. Notez que le fichier contient déjà les références à WinJS.

      <!-- WinJS references -->
<link href="/css/ui-themed.css" rel="stylesheet" />
<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
<script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

    2. Dans le code JavaScript qui accompagne votre fichier HTML, appelez la fonction WinJS.Resources.processAll lorsque votre code HTML est chargé.

      WinJS.Application.onloaded = function(){
    WinJS.Resources.processAll();
}

      Si du code HTML supplémentaire est chargé dans un objet WinJS.UI.Pages.PageControl, appelez WinJS.Resources.processAll(element) dans la méthode IPageControlMembers.ready du contrôle de page, où element est l’élément HTML (et ses éléments enfants) étant chargé. Cet exemple est basé sur le scénario 6 des exemples de localisation et de ressources d’application :

      var output;

var page = WinJS.UI.Pages.define("/html/scenario6.html", {
    ready: function (element, options) {
        output = element.querySelector('#output');
        WinJS.Resources.processAll(output); // Refetch string resources
        WinJS.Resources.addEventListener("contextchanged", refresh, false);
    }
    unload: function () { 
        WinJS.Resources.removeEventListener("contextchanged", refresh, false); 
    } 
});

    3. En HTML, utilisez des identificateurs de ressources (« greeting » et « farewell ») pour faire référence aux ressources de chaîne dans les fichiers de ressources.

      <h2><span data-win-res="{textContent: 'greeting'}"></span></h2>
<h2><span data-win-res="{textContent: 'farewell'}"></span></h2>

    4. Faites référence aux ressources de chaîne pour les attributs.

      <div data-win-res="{attributes: {'aria-label' : 'String1'}}" >

    5. Faites référence aux ressources de chaîne en JavaScript.

      var el = element.querySelector('#header');
var res = WinJS.Resources.getString('greeting');
el.textContent = res.value;
el.setAttribute('lang', res.lang);

    Pour le remplacement HTML, le modèle général de l’attribut data-win-res est data-win-res="{propertyname1: 'resource ID', propertyname2: 'resource ID2'}".

    Remarque  Si la chaîne ne peut pas contenir de balisage, liez la ressource chaque fois que possible à la propriété textContent à la place de innerHTML. La propriété textContent est beaucoup plus rapide à remplacer que innerHTML.

     

  3. Ajoutez des dossiers et des fichiers de ressources pour deux autres langues.

    1. Ajoutez un dossier sous le dossier « strings » pour l’allemand. Nommez le dossier "de-DE", signifiant « Deutsch (Deutschland) ».

    2. Créez un autre fichier Resources.rejson dans le dossier « de-DE », et remplacez son contenu par ce qui suit :

      strings/de-DE/resources.resjson

      {
    "greeting"              : "Hallo",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Auf Wiedersehen",
    "_farewell.comment"     : "A goodbye."
}

    3. Créez un autre dossier nommé "fr-FR" pour « Français (France) ». Créez un fichier Resources.rejson et remplacez son contenu par ce qui suit :

      strings/fr-FR/resources.resjson

      {
    "greeting"              : "Bonjour",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Au revoir",
    "_farewell.comment"     : "A goodbye."
}

  4. Générez et exécutez l’application.

    Testez l’application pour votre langue d’affichage par défaut.

    1. Appuyez sur la touche F5 pour générer et exécuter l’application.
    2. Notez que les chaînes « greeting » et « farewell » sont affichées dans la langue d’affichage par défaut de l’utilisateur.
    3. Quittez l’application.

    Remarque  Applications du Windows Store uniquement. Testez l’application avec les autres langues.

    1. Ouvrez le Panneau de configuration et sélectionnez Horloge, langue et région > Langue.
    2. Notez que la langue qui était affichée lorsque vous avez exécuté l’application est la langue principale, c’est-à-dire Anglais, Allemand ou Français. Si votre langue principale n’est pas l’une de ces trois langues, l’application passe à la langue suivante dans la liste qui est prise en charge par l’application.
    3. Si vous n’avez pas ces trois langues sur votre ordinateur, ajoutez les langues manquantes en cliquant sur Ajouter une langue pour les ajouter à la liste.
    4. Pour tester l’application avec une autre langue, sélectionnez la langue dans la liste et cliquez sur Monter jusqu’à ce qu’elle apparaisse en tête de la liste. Exécutez ensuite l’application.

    Remarque  Applications du Windows Phone Store uniquement. Testez l’application avec les autres langues.

    1. Accédez à la section Paramètres sur le téléphone (ou l’émulateur de téléphone).
    2. Sélectionnez langue.
    3. Notez que la langue qui était affichée lorsque vous avez exécuté l’application est la langue principale, c’est-à-dire Anglais, Allemand ou Français. Si votre langue principale n’est pas l’une de ces trois langues, l’application passe à la langue suivante dans la liste qui est prise en charge par l’application.
    4. Si vous n’avez pas ces trois langues sur votre téléphone, ajoutez les langues manquantes en appuyant sur ajouter des langues pour les ajouter à la liste.
    5. Pour tester l’application avec une autre langue, appuyez de façon prolongée sur la langue dans la liste, puis appuyez sur monter jusqu’à ce qu’elle apparaisse en tête de la liste. Ensuite, réinitialisez le téléphone et exécutez l’application.

Rubriques associées

Comment nommer des ressources à l’aide de qualificateurs

Comment charger des ressources de type chaîne

WinJS.Resources.processAll

Exemple de ressources d’application et de localisation

Pages de propriétés, JavaScript.

Balise de langue BCP-47