Guida introduttiva: Traduzione delle risorse dell'interfaccia utente (HTML)

  • Articolo

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

Inserisci risorse stringa per l'interfaccia utente nei file di risorse. Successivamente, potrai fare riferimento a quelle stringhe dal codice o dal markup.

Istruzioni

  1. Inserisci le stringhe in un file di risorse, invece che direttamente nel codice o nel markup.

    1. Apri il file package.appxmanifest in Visual Studio, vai alla scheda Applicazione e imposta la lingua predefinita su "en-US". Se si tratta di un'app universale, esegui questa operazione per tutti i file package.appxmanifest della tua soluzione.Nota  In questo modo specifichi la lingua predefinita del progetto. Le risorse della lingua predefinita sono usate la lingua preferita e le lingue di visualizzazione dell'utente non corrispondono alle risorse disponibili nell'applicazione. Vedi Pagine delle proprietà, JavaScript.  
    2. Crea una cartella per i file di risorse.
      1. In Esplora soluzioni, fai clic con il pulsante destro del mouse sul progetto (progetto condiviso nel caso di un'app universale) e seleziona Aggiungi > Nuova cartella.
      2. Assegna alla nuova cartella il nome "stringhe".
      3. Se la nuova cartella non è visibile in Esplora soluzioni, con il progetto selezionato scegli Progetto > Mostra tutti i file dal menu di Microsoft Visual Studio.
    3. Crea una sottocartella e un file di risorse per inglese (Stati Uniti).

      1. Fai clic con il pulsante destro del mouse sulla cartella stringhe e aggiungi una nuova cartella al suo interno. Assegnale il nome "en-US". Il file di risorse si trova in una cartella denominata per il tag di lingua BCP-47. Vedi Come denominare risorse usando qualificatori per dettagli relativi al qualificatore della lingua e per un elenco dei tag di lingua comuni.

      2. Fai clic con il pulsante destro del mouse sulla cartella en-US e seleziona Aggiungi > Nuovo elemento….

      3. Seleziona "File di risorse (.resjson)".

      4. Fai clic su Aggiungi. Viene aggiunto un file di risorse con il nome predefinito resources.rejson. Ti consigliamo di mantenere il nome file predefinito. Le app possono suddividere le proprie risorse in altri file, perciò presta attenzione a farvi riferimento correttamente (vedi Come caricare le risorse stringa).

      5. Il nuovo file ha contenuti predefiniti. Sostituiscili con i seguenti (che potrebbero essere molto simili ai predefiniti):

        strings/en-US/resources.resjson

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

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

        La sintassi utilizzata è JavaScript Object Notation (JSON), in cui è necessario inserire una virgola dopo ogni coppia di nomi/valori, ad eccezione dell'ultima. In questo esempio, "greeting" e "farewell" identificano le stringhe da visualizzare. L'altra coppia ("_greeting.comment" e "_farewell.comment") rappresenta commenti che descrivono le stringhe. I commenti rappresentano una buona posizione in cui fornire eventuali istruzioni speciali ai traduttori che localizzano le stringhe in altre lingue.

  2. Aggiungi identificatori delle risorse stringa al codice e al markup.

    1. Se non sono già inclusi, aggiungi al tuo file HTML i riferimenti alla libreria di Windows per JavaScript.

      Nota  Quello che segue è il codice HTML relativo al default.html file del progetto Windows generato quando crei un nuovo progetto App vuota (App universali) in Visual Studio. Come puoi notare il file include già i riferimenti a 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>

      Nota  Quello che segue è il codice HTML relativo al default.html file del progetto WindowsPhone generato quando crei un nuovo progetto App vuota (App universali) in Visual Studio. Come puoi notare il file include già i riferimenti a 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. Nel codice JavaScript che accompagna il file HTML, chiama la funzione WinJS.Resources.processAll durante il caricamento del codice HTML.

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

      Se viene caricato codice HTML aggiuntivo in un oggetto WinJS.UI.Pages.PageControl, chiama WinJS.Resources.processAll(element) nel metodo IPageControlMembers.ready del controllo pagina, dove element è l'elemento HTML da caricare, con i relativi elementi figlio. Questo esempio è basato sullo scenario 6 dell'esempio di risorse dell'applicazione e localizzazione:

      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. Nel file HTML, fai riferimento alle risorse stringa con gli identificativi di risorsa ('greeting' e 'farewell') presenti nei file di risorse.

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

    4. Fai riferimento alle risorse stringa degli attributi.

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

    5. Fai riferimento alle risorse stringa in JavaScript.

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

    Il modello generale dell'attributo data-win-res per la sostituzione HTML è data-win-res="{propertyname1: 'resource ID', propertyname2: 'resource ID2'}".

    Nota  Se la stringa non contiene markup, ogni volta che è possibile associa la risorsa alla proprietà textContent anziché alla proprietà innerHTML. La proprietà textContent è più veloce da sostituire rispetto alla proprietà innerHTML.

     

  3. Aggiungi le cartelle e i file di risorse per altre due lingue.

    1. Aggiungi un'altra cartella sotto la cartella stringhe per il tedesco. Assegna alla cartella il nome "de-DE" per tedesco (Germania).

    2. Crea un altro file Resources.rejson nella cartella de-DE e sostituisci il contenuto con quello seguente:

      strings/de-DE/resources.resjson

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

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

    3. Crea un'altra cartella denominata "fr-FR" per francese (Francia). Crea un nuovo file Resources.rejson e sostituisci il contenuto con quello seguente:

      stringhe/fr-FR/risorse.resjson

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

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

  4. Compila ed esegui l'app.

    Testa l'app per la tua lingua di visualizzazione predefinita.

    1. Premi F5 per compilare ed eseguire l'app.
    2. Come puoi notare, la formula introduttiva e i saluti sono visualizzati nella lingua preferita dell'utente.
    3. Esci dall'app.

    Nota  Solo app di Windows Store. Testa l'app per le altre lingue.

    1. Apri il Pannello di controllo e seleziona Orologio e opzioni internazionali > Lingua.
    2. La lingua visualizzata quando hai eseguito l'applicazione è la prima dell'elenco, cioè inglese, tedesco o francese. Se la prima lingua dell'elenco non è una di queste tre, l'app userà quella successiva nell'elenco supportato dall'app stessa.
    3. Se nel tuo computer non sono presenti tutte e tre le lingue, aggiungi all'elenco quelle mancanti facendo clic su Aggiungi una lingua.
    4. Per testare l'app con un'altra lingua, selezionala nell'elenco e fai clic su Sposta su finché non si troverà all'inizio dell'elenco, quindi esegui l'app.

    Nota  Solo app di Windows Phone Store. Testa l'app per le altre lingue.

    1. Passa a Impostazioni nel telefono o nell'emulatore del telefono.
    2. Seleziona lingua.
    3. La lingua visualizzata quando hai eseguito l'applicazione è la prima dell'elenco, cioè inglese, tedesco o francese. Se la prima lingua dell'elenco non è una di queste tre, l'app userà quella successiva nell'elenco supportato dall'app stessa.
    4. Se nel tuo telefono non sono presenti tutte e tre le lingue, aggiungi all'elenco quelle mancanti toccando aggiungi lingue e aggiungendole all'elenco.
    5. Per testare l'app con un'altra lingua, tocca e tieni premuta la lingua nell'elenco e quindi tocca sposta su finché la lingua non si troverà all'inizio dell'elenco. Reimposta quindi il telefono ed esegui l'app.

Argomenti correlati

Come assegnare un nome alle risorse con i qualificatori

Come caricare le risorse stringa

WinJS.Resources.processAll

Esempio di risorse dell'applicazione e localizzazione

Pagine delle proprietà, JavaScript.

Tag di lingua BCP-47