Comment localiser les contrôles WinJS (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 ]

Localisez les libellés et les icônes de vos contrôles WinJS avec le reste du contenu de votre application.

Prérequis

Comment gérer la langue et la région (Étape 1 : définir les préférences de langue de l’utilisateur)
Démarrage rapide : utilisation de ressources de type chaîne
Démarrage rapide : ajout d’une barre de l’application avec commandes
Démarrage rapide : ajout d’un menu
Démarrage rapide : ajout de contrôles et de styles WinJS

Localisation des propriétés

Les contrôles WinJS peuvent avoir des attributs qui doivent être localisés, tels que :

libellés et icônes des commandes de la barre de l’application ;
libellés des options de menu ;
libellés des boutons bascules dans les menus volants Paramètres ;
libellés ARIA utilisés pour l’accessibilité.

Ajoutez des identificateurs de ressource pour le balisage de vos contrôles WinJS afin de faire référence aux chaînes localisées.

Dans l’exemple de barre de l’application ci-dessous, un attribut data-win-res est ajouté à chaque commande de la barre de l’application avec ce modèle :

data-win-res="{winControl: {propertyName1:'resourceID1',propertyName2:'resourceID2'}}"

Chaque propertyName correspond à l’une des propriétés du contrôle (telles que le libellé ou le titre), et resourceID fait référence à l’identificateur de ressource de la chaîne à charger à partir des fichiers ressources. Voir l’exemple de strings/en-US/resources.resjson, ci-dessous.

Dans le code JavaScript qui accompagne ce balisage, la fonction WinJS.Resources.processAll doit être appelée lorsque le code HTML est chargé pour remplacer les attributs et les propriétés de chaque attribut data-win-res par les chaînes ressources.

Exemple de barre de l’application

Cet exemple montre comment localiser des chaînes de commande sur une barre de l’application.

<div data-win-control="WinJS.UI.AppBar" data-win-options="">
<button data-win-control="WinJS.UI.AppBarCommand" 
     data-win-res="{winControl: {label:'command1Label',tooltip:'command1Tooltip'}}"
     data-win-options="{id:'cmdCommand1',icon:'add',section:'global'}">
</button>
<button data-win-control="WinJS.UI.AppBarCommand"
     data-win-res="{winControl: {label:'command2Label',tooltip:'command2Tooltip'}}"
     data-win-options="{id:'cmdCommand2',icon:'remove',section:'global'}">
</button>
</div>

(function () {

    "use strict";
    var page = WinJS.UI.Pages.define("/html/localize-appbar.html", {
    ready: function (element, options) {
        // Load resources.
        loadResources();
        // Enable listener so they get updated when user changes language selection.
        WinJS.Resources.addEventListener("contextchanged", loadResources);
    }
});

// Handle loading of resources.
function loadResources() {
    WinJS.Resources.processAll();
}

})();

Fichiers ressources

strings/en-US/resources.resjson

{
    "command1Label"            : "en-US Command1",
    "command1Tooltip"          : "en-US Command1 Tooltip",

    "command2Label"            : "en-US Command2",
    "command2Tooltip"          : "en-US Command2 Tooltip"
}

strings/fr-FR/resources.resjson

{
    "command1Label"            : "fr-FR Command1",
    "command1Tooltip"          : "fr-FR Command1 Tooltip",

    "command2Label"            : "fr-FR Command2",
    "command2Tooltip"          : "fr-FR Command2 Tooltip"
}

strings/de-DE/resources.resjson

{
    "command1Label"            : "de-DE Command1",
    "command1Tooltip"          : "de-DE Command1 Tooltip",

    "command2Label"            : "de-DE Command2",
    "command2Tooltip"          : "de-DE Command2 Tooltip"
}

Ce balisage montre comment localiser un contrôle menu. Des fichiers JavaScript et de ressources semblables à l’exemple de barre de l’application sont également requis.

<div id="headerMenu" data-win-control="WinJS.UI.Menu">
    <button data-win-control="WinJS.UI.MenuCommand" 
        data-win-res="{winControl: {label:'item1Label'}}" 
        data-win-options="{id:'firstMenuItem'}">
    </button>
    <button data-win-control="WinJS.UI.MenuCommand" 
        data-win-res="{winControl: {label:'item2Label'}}" 
        data-win-options="{id:'secondMenuItem'}">
    </button>
    <hr data-win-control="WinJS.UI.MenuCommand" 
        data-win-options="{id:'separator',type:'separator'}" />
    <button data-win-control="WinJS.UI.MenuCommand" 
        data-win-res="{winControl: {label:'itemNLabel'}}" 
        data-win-options="{id:'lastMenuItem'}">
    </button>
</div>

Exemple de bouton bascule

Ce balisage montre comment localiser un contrôle ToggleSwitch. Des fichiers JavaScript et de ressources semblables à l’exemple de barre de l’application sont également requis.

<div data-win-control="WinJS.UI.ToggleSwitch" 
    data-win-res="{winControl: {labelOn:'switch1LabelOn',labelOff:'switch1LabelOff',
    title:'switch1Title'}}"
    data-win-options="">
</div>

Rubriques associées

Exemple de contrôle AppBar HTML

Exemple de contrôle menu volant HTML

Exemple de contrôle ToggleSwitch HTML

Partager via