Guia de início rápido: Traduzindo recursos da interface do usuário (HTML)

  • Artigo

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

Coloque recursos de cadeia de caracteres na interface do usuário, em arquivos de recurso. Você poderá então referenciar essas cadeias de caracteres no código ou na marcação.

Instruções

  1. Coloque as cadeias de caracteres em arquivos de recurso em vez de colocá-las diretamente no código ou na marcação.

    1. Abra package.appxmanifest no Visual Studio, vá para a guia Aplicativo e defina seu idioma padrão como "pt-br". Se esse for um aplicativo universal, faça isso para cada package.appxmanifest em sua solução.Observação  Isso especifica o idioma padrão do projeto. Os recursos de idioma padrão serão usados se o idioma de preferência do usuário ou os idiomas de exibição não corresponderem aos recursos de idioma fornecidos no aplicativo. Veja Páginas de propriedades, JavaScript.  
    2. Crie uma pasta para conter os arquivos de recursos.
      1. No Gerenciador de Soluções, clique com o botão direito no projeto (o projeto compartilhado se esse foro um aplicativo universal) e selecione Adicionar > Nova Pasta.
      2. Dê um nome para a nova pasta "cadeias de caracteres".
      3. Se a nova pasta não estiver visível no Gerenciador de Soluções, selecione Projeto > Mostrar Todos os Arquivos no menu do Microsoft Visual Studio enquanto o projeto ainda está selecionado.
    3. Crie uma subpasta e um arquivo de recursos para inglês (Estados Unidos).

      1. Clique com o botão direito na pasta de cadeias de caracteres e adicione uma nova pasta abaixo dela. Dê o nome "en-US". O arquivo de recursos é colocado em uma pasta que foi nomeada para a marca de idioma BCP-47. Veja Como nomear recursos usando qualificadores para saber mais sobre o qualificador de idioma e uma lista de marcas de idioma comuns.

      2. Clique om o botão direito na pasta en-US e selecione Adicionar > Novo Item….

      3. Selecione "Aquivo de recursos (.resjson)".

      4. Clique em Adicionar. Isso adiciona um arquivo de recursos com o nome padrão resources.rejson. Recomendamos que você use esse nome de arquivo padrão. Os aplicativos podem particionar seus recursos em outros arquivos, mas você deve ter cuidado de fazer a referência a eles corretamente (veja Como carregar recursos de cadeias de caracteres).

      5. O novo arquivo contém conteúdo padrão. Substitua o conteúdo pelo seguinte (que pode ser muito similar ao padrão):

        strings/en-US/resources.resjson

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

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

        Essa é a sintaxe da cadeia de caracteres JavaScript Object Notation (JSON) em que uma vírgula deve ser colocada depois de cada par nome/valor, exceto o último. Neste exemplo, "saudação" e "adeus" identificam as cadeias de caracteres a serem exibidas. Os outros pares ("_greeting.comment" e "_farewell.comment") são comentários que descrevem as cadeias de caracteres. Os comentários são um bom lugar para fornecer qualquer instrução especial para tradutores que localizarem as cadeias de caracteres para outros idiomas.

  2. Adicione identificadores de recurso ao código e à marcação.

    1. Adicione referências à Biblioteca do Windows para JavaScript ao seu arquivo HTML, caso ainda não estejam lá.

      Observação  O seguinte código de exemplo mostra o HTML do arquivo default.html do projeto Windows que é gerado quando você cria um novo projeto Aplicativo em Branco (Aplicativos Universais) no Visual Studio. Observe que ele já contém referências ao WinJS.

      <!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

      Observação  O seguinte código de exemplo mostra o HTML do arquivo default.html do projeto WindowsPhone que é gerado quando você cria um novo projeto Aplicativo em Branco (Aplicativos Universais) no Visual Studio. Observe que ele já contém referências ao WinJS.

      <!-- 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. No código JavaScript que acompanha seu arquivo HTML, chame a função WinJS.Resources.processAll quando o HTML for carregado.

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

      Se HTML adicional for carregado em um objeto WinJS.UI.Pages.PageControl, chame WinJS.Resources.processAll(element) no método IPageControlMembers.ready de controle de página, onde element é o elemento HTML (e seus elementos filho) sendo carregado. Este exemplo é baseado no cenário 6 do Exemplo de recursos e localização de aplicativo:

      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. No HTML, consulte os recursos da cadeia de caracteres usando os identificadores de recurso ('greeting' e 'farewell') dos arquivos de recurso.

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

    4. Consulte os recursos da cadeia de caracteres para atributos.

      <div data-win-res="{attributes: {'aria-label' : 'String1'}}" >

    5. Consulte os recursos da cadeia de caracteres em JavaScript.

      var el = element.querySelector('#header');
var res = WinJS.Resources.getString('greeting');
el.textContent = res.value;
el.setAttribute('lang', res.lang);

    O padrão geral do atributo data-win-res para a substituição de HTML é data-win-res="{propertyname1: 'resource ID', propertyname2: 'resource ID2'}".

    Observação  Se a cadeia de caracteres não contiver marcação, associe o recurso onde for possível para a propriedade textContent em vez de innerHTML. A propriedade textContent é muito mais rápida para substituir do que innerHTML.

     

  3. Adicione pastas e arquivos de recursos para dois outros idiomas.

    1. Adicione outra pasta sob a pasta de cadeias de caracteres para o idioma alemão. Nomeie a pasta "de-DE" para alemão (Alemanha).

    2. Crie outro arquivo Resources.rejson na pasta de-DE e substitua o conteúdo dela pelo seguinte:

      strings/de-DE/resources.resjson

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

    "farewell"              : "Auf Wiedersehen",
    "_farewell.comment"     : "A goodbye."
}

    3. Crie mais uma pasta chamada "fr-FR" para francês (França). Crie um novo arquivo Resources.rejson e substitua o conteúdo dele pelo seguinte:

      strings/fr-FR/resources.resjson

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

    "farewell"              : "Au revoir",
    "_farewell.comment"     : "A goodbye."
}

  4. Compile e execute o aplicativo.

    Teste o aplicativo no idioma de exibição padrão.

    1. Pressione F5 para compilar e executar o aplicativo.
    2. Os itens greeting e farewell são exibidos no idioma de preferência do usuário.
    3. Saia do aplicativo.

    Observação  Somente aplicativos da Windows Store. Teste o aplicativo nos outros idiomas.

    1. Abra o Painel de Controle e selecione Relógio, Idioma e Região > Idioma.
    2. Observe que o idioma exibido quando você executa o aplicativo corresponde ao primeiro da lista (inglês, alemão ou francês). Se o seu idioma principal não for nenhum desses três, o aplicativo utilizará o próximo da lista de opções compatíveis.
    3. Caso nenhum desses três idiomas estejam presentes em seu computador, adicione os que estiverem faltando. Para isto, clique em Adicionar um idioma e adicione-os à lista.
    4. Para testar o aplicativo em outro idioma, selecione o idioma desejado na lista, depois clique em Mover para cima até que ele fique no início. Em seguida, execute o aplicativo.

    Observação  Somente aplicativos da Loja do Windows Phone. Teste o aplicativo nos outros idiomas.

    1. Entre em Configurações no telefone (ou emulador de telefone).
    2. Selecione idioma.
    3. Observe que o idioma exibido quando você executa o aplicativo corresponde ao primeiro da lista (inglês, alemão ou francês). Se o seu idioma principal não for nenhum desses três, o aplicativo utilizará o próximo da lista de opções compatíveis.
    4. Caso nenhum desses três idiomas estejam presentes em seu telefone, adicione os que estiverem faltando tocando em adicionar idiomas e adicione-os à lista.
    5. Para testar o aplicativo em outro idioma, toque e mantenha pressionado o idioma desejado na lista, depois toque em mover para cima até que ele fique no início. Em seguida, redefina o telefone e execute o aplicativo.

Tópicos relacionados

Como nomear recursos usando qualificadores

Como carregar recursos de cadeias de caracteres

WinJS.Resources.processAll

Recursos de aplicativos e amostra de localização

Páginas de propriedades, JavaScript.

A marca do idioma BCP-47