Início rápido: usando recursos de cadeia de caracteres (HTML)
[ 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 cadeias de caracteres em arquivos de recursos e faça referência a essas cadeias de caracteres no seu código JavaScript ou na marcação HTML.
Instruções
- Coloque as cadeias de caracteres em arquivos de recurso em vez de colocá-las diretamente no código ou na marcação.
- Abra package.appxmanifest no Visual Studio, selecione 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. Para saber mais, veja Páginas de propriedades, JavaScript.
- Crie uma pasta para conter os arquivos de recursos.
- 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.
- Dê um nome para a nova pasta "cadeias de caracteres".
- 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.
- Crie uma subpasta e um arquivo de recursos para inglês (Estados Unidos).
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.
Clique com o botão direito do mouse na pasta en-US e selecione Adicionar > Novo Item….
Selecione Arquivo de Recursos (.resjson).
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).
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 exata da cadeia de caracteres JavaScript Object Notation (JSON), onde deve ser colocada uma vírgula depois de cada par nome/valor, exceto o último. Neste exemplo,
greeting
efarewell
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.
- Adicione identificadores de recurso ao código e à marcação.
Adicione referências ao arquivo JavaScript em seu arquivo HTML, caso ainda não estejam lá. (Os modelos padrão devem sempre produzir esses itens; o nome do arquivo CSS padrão pode variar dependendo do modelo que você esteja usando, mas que não é relevante para os objetivos deste exemplo.)
<!-- 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>
No código JavaScript que acompanha seu arquivo HTML, chame a função WinJS.Resources.processAll quando sua página HTML for carregada.
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 do controle da página, ondeelement é o elemento HTML (e seus elementos filhos) que está 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); } });
No HTML, consulte os recursos de cadeia de caracteres usando os identificadores de recurso (
greeting
efarewell
) dos arquivos de recurso, usando data-win-res attribute.<h2><span data-win-res="{textContent: 'greeting'}"></span></h2> <h2><span data-win-res="{textContent: 'farewell'}"></span></h2>
Veja aqui como consultar recursos de cadeia de caracteres em JavaScript.
var el = document.getElementById('header'); var res = WinJS.Resources.getString('greeting'); el.textContent = res.value; el.setAttribute('lang', res.lang);
Observações e dicas
O padrão geral do data-win-res attribute para substituição HTML é data-win-res="{propertyname1**: 'resource ID', propertyname2: 'resource ID2'}"**.
Se a cadeia de caracteres de recurso não contiver marcação e puder ser inserida como texto sem formatação, associe o recurso à propriedade textContent, em vez de innerHTML. A propriedade textContent é muito mais rápida para substituir no DOM do que innerHTML.
Você também pode usar attributes: como o nome da propriedade. Nesse caso, o valor não é o nome do recurso nomeado, mas um conjunto em que o primeiro valor é o nome do atributo e o segundo valor é o recurso nomeado que você deseja usar como o valor. Por exemplo:<div data-win-res="{attributes: {'aria-label' : 'Button1LabelForAria'}}" > ...</div>
. Você pode ver um exemplo disso no cenário 9 do Exemplo de recursos e de localização de aplicativos.
Para mais detalhes sobre como adicionar idiomas adicionais e localização, veja Guia de início rápido: Traduzindo reecursos de interface do usuário.
Tópicos relacionados
Como nomear recursos usando qualificadores
Como carregar recursos de cadeias de caracteres
Guia de início rápido: Traduzindo recursos da interface do usuário
Recursos de aplicativos e amostra de localização