Como localizar controles WInJS (HTML)

Artigo
01/29/2016

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

Localize os rótulos e os ícones de seus controles WinJS juntamente com o resto do conteúdo do seu aplicativo.

Pré-requisitos

Como gerenciar o idioma e a região (Etapa 1: definir as preferências de idioma do usuário)
Início rápido: usando recursos de cadeia de caracteres
Guia de início rápido: Adicionando uma barra de aplicativos
Guia de início rápido: Adicionando um menu
Guia de início rápido: adicionando controles e estilos WinJS

Localizando propriedades

Os controles WinJS podem ter atributos que precisam ser traduzidos, como:

Rótulos e ícones nos comandos da barra de aplicativos
Rótulos de itens de menu
Rótulos de comutador de alternância em submenus Configurações
Rótulos ARIA usados para acessibilidade

Adicione identificadores de recursos à marcação de seus controles de WinJS para se referir às cadeias de caracteres traduzidas.

No exemplo da barra de aplicativos abaixo, um atributo data-win-res é adicionado ao comando da barra de aplicativos seguindo este padrão:

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

Cada propertyName mapeia para uma das propriedades do controle (como rótulo ou bloco) e resourceID se refere ao identificador de recurso da cadeia de caracteres a ser carregada dos arquivos de recursos. Veja o exemplo do strings/en-US/resources.resjson, abaixo.

No código JavaScript que acompanha a marcação, a função WinJS.Resources.processAll deve ser chamada quando o HTML é carregado para substituir os atributos e as propriedades em cada atributo data-win-res com cadeias de caracteres de recursos.

Exemplo de barra de aplicativos

Este exemplo demonstra como localizar cadeias de caracteres de comando em uma barra de aplicativo.

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

})();

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

Essa marcação demonstra como localizar um menu de controle. Também requer JavaScript e arquivos de recurso similares ao exemplo da barra de aplicativos.

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

Exemplo do comutador de alternância

Essa marcação demonstra como localizar um controle ToggleSwitch. Também requer JavaScript e arquivos de recurso similares ao exemplo da barra de aplicativos.

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

Tópicos relacionados

Exemplo de controle AppBar em HTML

Exemplo de controle de menu suspenso em HTML

Exemplo de controle ToggleSwitch em HTML

Compartilhar via