Cómo localizar controles de WinJS (HTML)
[ 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