Condividi tramite

Guida introduttiva: Uso di risorse di tipo stringa (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 le risorse stringa in file di risorse, quindi fai riferimento a quelle stringhe dal codice JavaScript o dal markup HTML.

Istruzioni

  1. Inserisci le stringhe in un file di risorse, invece che direttamente nel codice o nel markup.
    1. Apri package.appxmanifest in Visual Studio, seleziona la 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 se la lingua preferita e le lingue di visualizzazione dell'utente non corrispondono alle risorse disponibili nell'app. Per altre informazioni, 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 scegli 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, a eccezione dell'ultima. In questo esempio, greeting e farewell identificano le stringhe da visualizzare. Le altre coppie (_greeting.comment e _farewell.comment) sono 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. Aggiungere identificatori di risorse stringa al codice e al markup.

    1. Se non sono già inclusi, aggiungi al file JavaScript i riferimenti dal tuo file HTML. I modelli predefiniti dovrebbero sempre generarli. Il nome del file CSS predefinito può variare a seconda del modello usato, ma per questo esempio non è importante.

      <!-- 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 della pagina HTML.

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

      Se viene caricato altro codice HTML in un oggetto WinJS.UI.Pages.PageControl, chiama WinJS.Resources.processAll(element) nel metodo IPageControlMembers.ready del controllo della pagina, dove element è l'elemento HTML (con i relativi elementi figli) in fase di caricamento. 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, con data-win-res attribute.

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

    4. Ecco come fare riferimento alle risorse stringa in JavaScript.

      var el = document.getElementById('header');
var res = WinJS.Resources.getString('greeting');
el.textContent = res.value;
el.setAttribute('lang', res.lang);

Note e suggerimenti

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

Se la stringa della risorsa non contiene alcun markup e può essere inserita come testo normale, associa la risorsa alla proprietà textContent invece che a innerHTML. La proprietà textContent è molto più veloce da sostituire nel DOM rispetto a innerHTML.

Puoi usare anche attributes: come nome della proprietà. In questo caso il valore non è il nome della risorsa denominata, ma è un set in cui il primo valore è il nome dell'attributo e il secondo valore è la risorsa denominata che vuoi usare come valore. Ad esempio:<div data-win-res="{attributes: {'aria-label' : 'Button1LabelForAria'}}" > ...</div>. Puoi vederne un esempio nello scenario 9 dell'esempio di risorse dell'applicazione e localizzazione.

Per altre informazioni sull'aggiunta di lingue e sulla localizzazione, vedi Guida introduttiva: Traduzione delle risorse dell'interfaccia utente.

Argomenti correlati

Come assegnare nomi alle risorse con i qualificatori

Come caricare le risorse stringa

WinJS.Resources.processAll

Guida introduttiva: Traduzione delle risorse dell'interfaccia utente

Esempio di risorse dell'applicazione e localizzazione

Pagine delle proprietà, JavaScript.

Tag di lingua BCP-47