Cómo localizar controles de WinJS (HTML)

Artículo
01/29/2016

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

Localiza las etiquetas y los iconos de los controles de WinJS junto con el resto del contenido de tu aplicación.

Requisitos previos

Cómo administrar idiomas y regiones (Paso 1: establecer las preferencias de idioma del usuario)
Inicio rápido: usar recursos de cadena
Inicio rápido: agregar una barra de la aplicación con comandos
Inicio rápido: agregar un menú
Inicio rápido: agregar controles y estilos de WinJS

Localización de propiedades

Es posible que los controles de WinJS tengan atributos que debas localizar, como los siguientes:

Etiquetas e iconos en los comandos de la barra de la aplicación
Etiquetas de elementos de menú
Etiquetas de modificadores para alternar en controles flotantes de Configuración
Etiquetas ARIA usadas para accesibilidad

Agrega identificadores de recursos al marcado en los controles de WinJS para hacer referencia a cadenas localizadas.

En el ejemplo de barra de la aplicación siguiente, se agrega un atributo data-win-res a cada comando de la barra de la aplicación según el siguiente patrón:

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

Cada propertyName se asigna a una de las propiedades del control (como una etiqueta o un título) y resourceID hace referencia al identificador de recursos de la cadena que se cargará desde los archivos de recursos. Consulta los ejemplos de strings/en-US/resources.resjson a continuación.

En el código JavaScript que acompaña este marcado, se debe llamar a la función WinJS.Resources.processAll cuando se carga el código HTML para reemplazar los atributos y las propiedades de cada atributo data-win-res con cadenas de recursos.

Ejemplo de barra de la aplicación

En este ejemplo, se demuestra cómo localizar cadenas de comandos en la barra de la aplicación.

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

})();

Archivos de recursos

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

Ejemplo de menú

Este marcado muestra cómo localizar un control de menú. También requiere que el código JavaScript y los archivos de recursos sean similares al ejemplo de la barra de la aplicación.

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

Ejemplo de modificador para alternar

En este marcado, se demuestra cómo localizar un control de ToggleSwitch. También requiere que el código JavaScript y los archivos de recursos sean similares al ejemplo de la barra de la aplicación.

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

Temas relacionados

Muestra del control AppBar HTML

Muestra del control flotante HTML

Muestra de control ToggleSwitch HTML

Share via