Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Cómo localizar controles de WinJS (aplicaciones de la Tienda Windows con JavaScript y HTML)

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

Requisitos previos

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 de aplicaciones de Internet enriquecidas accesibles (ARIA) usadas para obtener 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

 

 

Mostrar:
© 2018 Microsoft