Compartir a través de

Inicio rápido: uso de recursos de cadena (HTML)

  • Artículo

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

Coloca los recursos de cadena en archivos de recursos y haz referencia a esas cadenas desde el código JavaScript o el marcado HTML.

Instrucciones

  1. Coloca las cadenas en archivos de recursos en lugar de ponerlas directamente en el código o la revisión.
    1. Abre package.appxmanifest en Visual Studio, selecciona la pestaña Aplicación y establece el idioma predeterminado en "es-ES". (Si es una aplicación universal, sigue este proceso con cada package.appxmanifest de la solución.)Nota  De este modo, se especifica el idioma predeterminado del proyecto. Los recursos de idioma predeterminado se usan cuando el idioma para mostrar o el idioma preferido del usuario no coincide con los recursos de idioma indicados en la aplicación. Para obtener más información, consulta el tema sobre Páginas de propiedades de JavaScript.  
    2. Crea una carpeta que contenga los archivos de recursos.
      1. En el Explorador de soluciones, haz clic con el botón derecho en el proyecto (el proyecto compartido, si se trata de una aplicación universal) y selecciona Agregar > Nueva carpeta.
      2. Asigna el nombre "Strings" a la nueva carpeta.
      3. Si no se ve la nueva carpeta en el Explorador de soluciones, selecciona Proyecto > Mostrar todos los archivos en el menú de Microsoft Visual Studio teniendo el proyecto seleccionado.
    3. Crea una subcarpeta y un archivo de recursos para inglés (Estados Unidos).

      1. Haz clic con el botón derecho en la carpeta de cadenas y agrega una nueva carpeta debajo. Asígnale el nombre "en-US". El archivo de recursos se coloca en una carpeta a la que se ha asignado un nombre para la etiqueta de idioma BCP-47. Consulta Cómo asignar nombre a los recursos mediante calificadores para obtener información detallada sobre el calificador de idioma y ver una lista de etiquetas de idioma comunes.

      2. Haz clic con el botón secundario en la carpeta en-US y selecciona Agregar > Nuevo elemento….

      3. Selecciona Archivo de recursos (.resjson).

      4. Haz clic en Agregar. Se agregará un archivo de recursos con el nombre predeterminado resources.rejson. Te recomendamos que utilices este nombre de archivo predeterminado. Las aplicaciones pueden particionar sus recursos en otros archivos, pero debes asegurarte de hacer referencia a ellos correctamente (consulta el tema Cómo cargar recursos de cadenas).

      5. El nuevo archivo contiene contenido predeterminado. Sustituye el contenido por lo siguiente (que puede ser muy parecido al contenido predeterminado):

        strings/en-US/resources.resjson

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

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

        Esto es sintaxis estricta de notación de objetos JavaScript (JSON), en la que debe colocarse una coma después de cada par nombre/valor, excepto en el último caso. En esta muestra, greeting y farewell identifican las cadenas que se van a mostrar. El resto de los pares (_greeting.comment y _farewell.comment) son comentarios que describen las cadenas. Los comentarios constituyen un buen lugar donde proporcionar instrucciones especiales a los traductores que localizan las cadenas a otros idiomas.

  2. Agrega identificadores de recursos de cadena en código y marcado.

    1. Agrega al archivo JavaScript del archivo HTML algunas referencias, si aún no las contiene. (Las plantillas predeterminadas siempre deberían producir; el nombre del archivo CSS predeterminado puede variar en función de la plantilla que usas, pero eso no es importante para los fines de este ejemplo).

      <!-- 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. En el código JavaScript que acompaña el archivo HTML, llama a la función WinJS.Resources.processAll cuando la página HTML esté cargada.

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

      Si se carga HTML adicional a un objeto WinJS.UI.Pages.PageControl, llama a WinJS.Resources.processAll(element) en el método IPageControlMembers.ready del control de la página, donde element es el elemento HTML (y sus elementos secundarios) que se está cargando. Este ejemplo se basa en el escenario 6 de la muestra de recursos de la aplicación y localización:

      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 el HTML, haz referencia a los recursos de cadena con los identificadores de recursos (greeting y farewell) desde los archivos de recursos, con data-win-res attribute.

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

    4. Aquí te mostramos cómo hacer referencia a los recursos de cadena en JavaScript.

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

Notas y sugerencias

El patrón general de data-win-res attribute para el reemplazo de HTML es data-win-res="{propertyname1**: 'resource ID', propertyname2: 'resource ID2'}"**.

Si la cadena de recursos no contiene ningún marcado y puede insertarse como texto sin formato, a continuación, enlaza el recurso a la propiedad textContent en lugar de innerHTML. La propiedad textContent puede reemplazarse con más rapidez dentro de DOM que innerHTML.

También puedes usar attributes: como el nombre de propiedad. En este caso el valor no es el nombre de recurso denominado, sino que un conjunto en el que el primer valor es el nombre de atributo y el segundo valor es el recurso denominado que quieras usar como valor. Por ejemplo:<div data-win-res="{attributes: {'aria-label' : 'Button1LabelForAria'}}" > ...</div>. Puedes ver un ejemplo de esto en el escenario 9 de la Muestra de recursos de la aplicación y localización.

Para obtener información más detallada sobre cómo agregar idiomas adicionales y la localización, consulta Inicio rápido: traducción de recursos de interfaz de usuario.

Temas relacionados

Cómo asignar nombre a los recursos mediante calificadores

Cómo cargar recursos de cadena

WinJS.Resources.processAll

Inicio rápido: traducción de recursos de interfaz de usuario

Muestra de recursos de la aplicación y localización

Páginas de propiedades, JavaScript.

La etiqueta de idioma BCP-47