Come localizzare controlli WinJS (HTML)

Articolo
01/28/2016

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Puoi localizzare le etichette e le icone dei tuoi controlli WinJS, insieme al resto del contenuto della tua app.

Prerequisiti

Come gestire la lingua e l'area geografica (Passaggio 1: Impostare la lingua preferita)
Guida introduttiva: Uso di risorse di tipo stringa
Guida introduttiva: Aggiunta di una barra dell'app con comandi
Guida introduttiva: Aggiunta di un menu
Guida introduttiva: Aggiunta di controlli e stili WinJS

Localizzazione delle proprietà

I controlli WinJS possono includere attributi che devono essere localizzati, ad esempio:

Etichette e icone sui comandi della barra dell'app
Etichette delle voci di menu
Etichette degli interruttori nei riquadri a comparsa delle impostazioni
Etichette ARIA utilizzate per l'accessibilità

Aggiungi gli identificatori di risorse al markup dei controlli WinJS per fare riferimento alle stringhe localizzate.

Nella barra dell'app seguente, a ogni comando della barra dell'app viene aggiunto un attributo data-win-res basato sul criterio seguente:

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

Ogni proprietà propertyName è mappata a una proprietà del controllo (ad esempio label o title) e resourceID si riferisce all'identificatore di risorsa della stringa da caricare dai file di rsorse. Vedi il seguente esempio di stringhe/en-US/risorse.resjson.

Nel codice JavaScript che accompagna il markup, è necessario chiamare la funzione WinJS.Resources.processAll, quando viene caricato il codice HTML, per sostituire con stringhe di risorsa gli attributi e le proprietà in ogni attributo data-win-res.

Esempio di barra dell'app

Questo esempio illustra come localizzare le stringhe dei comandi di una barra dell'app.

<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();
}

})();

File di risorse

stringhe/en-US/risorse.resjson

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

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

stringhe/fr-FR/risorse.resjson

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

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

stringhe/de-DE/risorse.resjson

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

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

Questo markup illustra come localizzare un controllo Menu. Richiede anche file JavaScript e di risorse simili a quelli dell'esempio sulla barra dell'app.

<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>

Esempio di interruttore

Questo markup illustra come localizzare un controllo ToggleSwitch. Richiede anche file JavaScript e di risorse simili a quelli dell'esempio sulla barra dell'app.

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

Argomenti correlati

Esempio di controllo AppBar HTML

Esempio di riquadro a comparsa HTML

Esempio di controllo ToggleSwitch HTML

Condividi tramite