Langage: HTML | XAML

Démarrage rapide : utilisation de ressources de type chaîne (HTML)

Applies to Windows and Windows Phone

Placez les ressources de type chaîne dans des fichiers de ressources et faites référence à ces chaînes dans le code ou dans le 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 des identificateurs de ressource de type 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à.

      • Applies to Windows

      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>
      
      
      

      • Applies to Windows Phone

      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 quand 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 la page, où element est l’élément HTML (et ses éléments enfants) en cours de chargement. 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 = document.getElementById('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 = document.getElementById('header');
      var res = WinJS.Resources.getString('greeting');
      el.textContent = res.value;
      el.setAttribute('lang', res.lang);
      
      
      

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

    Remarque  Si la chaîne ne contient aucun balisage, liez la ressource chaque fois que possible à la propriété textContent plutôt qu’à la propriété innerHTML. La propriété textContent est beaucoup plus rapide à remplacer que la propriété innerHTML.

Pour obtenir plus de détails sur l’ajout de langues supplémentaires et la localisation, voir Démarrage rapide : traduction des ressources de l’interface utilisateur.

Rubriques associées

Comment nommer des ressources à l’aide de qualificateurs
Comment charger des ressources de type chaîne
WinJS.Resources.processAll
Démarrage rapide : traduction des ressources de l’interface utilisateur
Exemple de ressources d’application et de localisation
Pages de propriétés, JavaScript.
Balise de langue BCP-47

 

 

Afficher:
© 2015 Microsoft