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

Article
01/28/2016

[ 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 dans des fichiers de ressources et faites référence à ces chaînes dans le code JavaScript ou le balisage HTML.

Instructions

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 l’élément 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 élément 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. Pour en savoir plus, 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 de la souris 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, dans laquelle une virgule doit être placée après chaque paire nom/valeur, sauf la dernière. Dans cet exemple, les éléments greeting et farewell identifient les chaînes à afficher. Les autres paires (_greeting.comment et _farewell.comment) correspondent à 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.
Ajoutez des identificateurs de ressource de type chaîne dans le code et le balisage
1. Ajoutez des références au fichier JavaScript dans votre fichier HTML, si elles ne s’y trouvent pas déjà. (Les modèles par défaut doivent toujours produire ces éléments. Le nom du fichier CSS par défaut dépend du modèle que vous utilisez ; cependant, cela n’a pas d’importance pour cet exemple.)
```

<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 la page HTML est chargée.
```
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 = 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 type chaîne dans les fichiers de ressources, à l’aide de l’élément data-win-res attribute.
```
<h2><span data-win-res="{textContent: 'greeting'}"></span></h2>
<h2><span data-win-res="{textContent: 'farewell'}"></span></h2>
```
4. Voici comment procéder pour faire référence aux ressources de type chaîne en JavaScript.
```
var el = document.getElementById('header');
var res = WinJS.Resources.getString('greeting');
el.textContent = res.value;
el.setAttribute('lang', res.lang);
```

Remarques et conseils

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

Si la chaîne de ressource ne contient aucun balisage et peut être insérée au format texte brut, liez la ressource à la propriété textContent au lieu de l’élément innerHTML. Dans le modèle DOM, la propriété textContent est beaucoup plus rapide à remplacer que l’élément innerHTML.

Vous pouvez également utiliser le nom de propriété attributes:. Dans ce cas, la valeur ne correspond pas au nom de la ressource nommée, mais à un ensemble dans lequel la première valeur est le nom d’attribut, la deuxième valeur correspondant à la ressource nommée que vous souhaitez utiliser en tant que valeur. Par exemple : <div data-win-res="{attributes: {'aria-label' : 'Button1LabelForAria'}}" > ...</div>. Pour consulter un exemple de cette opération, reportez-vous au scénario 9 des exemples de localisation et de ressources d’application.

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

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

Instructions

Remarques et conseils

Rubriques associées

Ressources supplémentaires