Início rápido: usando recursos de cadeia de caracteres (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 ]

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.
1. 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.
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 com o botão direito do mouse na pasta en-US e selecione Adicionar > Novo Item….
  3. Selecione Arquivo 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 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 e farewell 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.
1. 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.)
```

<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 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); 
    } 
});
```
3. No HTML, consulte os recursos de cadeia de caracteres usando os identificadores de recurso (greeting e farewell) 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>
```
4. 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

WinJS.Resources.processAll

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

Recursos de aplicativos e amostra de localização

Páginas de propriedades, JavaScript.

A marca do idioma BCP-47

Compartilhar via

Início rápido: usando recursos de cadeia de caracteres (HTML)

Instruções

Observações e dicas

Tópicos relacionados

Recursos adicionais