No mundo cada vez mais globalizado de hoje em dia, é muito comum a necessidade de suportarmos a execução dos nossos aplicativos em outros idiomas. Quando desenvolvemos Windows Apps (antigamente chamadas de aplicativos para a Windows Store e mais antigamente ainda chamadas de Metro Style Apps), fica muito fácil adicionarmos a tradução (também chamada de localização) através de arquivos de recursos. No artigo de hoje veremos como conseguimos criar esses arquivos de recursos a fim de fazermos a tradução das nossas Windows Apps.

No universo de Windows Apps, conseguimos fazer a tradução das mais diversas partes do nosso aplicativo. A parte que mais óbvia é a tradução dos controles da nossa aplicação. Porém, é também possível traduzirmos as mensagens e até mesmo o nome e a descrição que serão utilizados em cada uma das Windows Stores ao redor do mundo. Nas próximas seções desse artigo nós veremos como fazer a localização de cada uma dessas partes do aplicativo.

Criando o aplicativo de exemplo

Antes de verificarmos como fazemos para traduzir os nossos aplicativos, temos que criar um aplicativo que servirá como exemplo para este artigo. Para isso, crie um novo projeto do tipo “Windows Apps” / “Blank App” e, no Grid da MainPage (criada automaticamente pelo Visual Studio), vamos adicionar um TextBox e um Button dentro de um StackPanel:

[code language=”xml”] <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Margin="50"
Width="400"
HorizontalAlignment="Left">
<TextBox x:Name="NomeTextBox"
Header="Digite o seu nome:" />
<Button Content="Dizer olá!"
HorizontalAlignment="Stretch" />
</StackPanel>
</Grid>
[/code]

Note que a ideia desse aplicativo de exemplo é muito simples e primitiva: quando o usuário clica no botão, uma mensagem é exibida dando um “olá” para o usuário utilizando o nome disponibilizado no TextBox. Apesar de simples, esse aplicativo será o suficiente para entendermos como funciona a tradução de controles e mensagens ao desenvolvermos Windows Apps.

Traduzindo os controles

Para traduzirmos os controles do nosso aplicativo, primeiramente temos que configurar um “Uid” para cada um dos controles. Esse Uid nada mais é que um identificador único para o controle, que é importantíssimo no processo de tradução de aplicativos, uma vez que ele será a forma com que ligaremos os termos traduzidos com os controles que devem receber essas localizações.

Vamos definir o Uid do TextBox como “NomeTextBox” e o Uid do botão como “DizerOlaButton“:

[code language=”xml”] <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Margin="50"
Width="400"
HorizontalAlignment="Left">
<TextBox x:Uid="NomeTextBox"
x:Name="NomeTextBox"
Header="Digite o seu nome:" />
<Button x:Uid="DizerOlaButton"
Content="Dizer olá!"
HorizontalAlignment="Stretch" />
</StackPanel>
</Grid>
[/code]

Após termos definido um Uid para cada um dos controles que devem ser localizados, podemos prosseguir com o processo de tradução. Crie uma pasta chamada “Resources” dentro do projeto e, para cada um dos idiomas que você quiser suportar, crie uma subpasta utilizando o código do idioma e região (por exemplo, de-DE, en-US e pt-BR, para alemão da Alemanha, inglês dos Estados Unidos e português do Brasil respectivamente – para uma lista completa dos idiomas suportados, confira este link). Dentro de cada uma dessas subpastas, adicione um arquivo de recursos (extensão “resw“) chamado “Resources“:

Para traduzirmos os controles do nosso aplicativo, basta adicionarmos itens dentro desses arquivos de recursos com as traduções de cada um dos controles. A sintaxe que temos que utilizar para o nome de cada item dentro do arquivo de recursos é: “Uid.NomePropriedade“. Ou seja, se quisermos traduzir a propriedade “Header” do controle “NomeTextBox“, temos que adicionar um item com o nome “NomeTextBox.Header” em cada um dos arquivos de recursos. A ideia é a mesma para traduzirmos o texto do botão (utilizando o nome “DizerOlaButton.Content“). Veja como fica a tradução desses dois controles em cada um dos idiomas suportados:

Traduzindo mensagens

Na nossa aplicação de exemplo, quando o usuário clicar no botão, devemos exibir uma mensagem de saudação. Como conseguimos traduzir essa mensagem? Simples! Basta adicionarmos itens nos arquivos de recursos utilizando nomes sem pontuação. E então é só utilizar a classe ResourceLoader para acessarmos esses itens no arquivo de recursos.

Primeiramente, vamos adicionar um handler para o evento “Click” do botão no XAML da MainPage:

[code language=”xml”] <Button x:Uid="DizerOlaButton"
Content="Dizer olá!"
HorizontalAlignment="Stretch"
Click="DizerOlaButton_Click" />
[/code]

Feito isso, vá até o code-behind da MainPage e adicione a implementação desse handler:

[code language=”csharp”] private async void DizerOlaButton_Click(object sender, RoutedEventArgs e)
{
var resourceLoader = Windows.ApplicationModel.Resources.ResourceLoader.GetForCurrentView();
var title = resourceLoader.GetString("MensagemOlaTitle");
var content = resourceLoader.GetString("MensagemOlaContent");
title = string.Format(title, NomeTextBox.Text);

Windows.UI.Popups.MessageDialog dialog = new Windows.UI.Popups.MessageDialog(content, title);
await dialog.ShowAsync();
}
[/code]

Note que, na primeira linha do event handler, utilizamos o método GetForCurrentView da classe ResourceLoader. Esse método retornará uma instância de ResourceLoader utilizando as informações de contexto da aplicação e do sistema operacional. Ou seja, dependendo do idioma configurado no sistema operacional e do idioma padrão da aplicação, esse método utilizará o arquivo de recursos do idioma mais apropriado.

Com o ResourceLoader em mãos, a única coisa que temos que fazer é chamar o método GetString passando o nome do termo (lembrando novamente que o nome do termo não pode conter pontos nesse caso – os nomes de recursos com pontos são reservados para a tradução de controles).

Uma vez que acessamos os termos traduzidos para o título e conteúdo da mensagem, basta exibirmos a mensagem utilizando a classe MessageDialog, como você pode ver na listagem anterior. Como utilizamos os termos “MensagemOlaTitle” e “MensagemOlaContent“, temos que adicioná-los em cada um dos arquivos de recursos com a sua correspondente tradução:

Traduzindo o nome e descrição do aplicativo

Para finalizar a tradução do nosso aplicativo, temos que localizar o nome que será utilizado quando ele for instalado na tela inicial e a descrição que será utilizada ao publicarmos o aplicativo na Windows Store. Para isso, vá até o manifesto da aplicação e, nas abas “Application” e “Packaging“, altere o conteúdo dos itens “Display name“, “Description” e “Package display name” conforme as imagens abaixo:

Note que utilizamos a sintaxe “ms-resource:NomeDoRecurso” para esses itens. Ao utilizarmos essa sintaxe, o conteúdo desses itens será automaticamente substituído pelo item correspondente no arquivo de recursos mais apropriado para o ambiente em que o aplicativo está sendo executado.

Para finalizar, temos que adicionar a tradução desses itens em cada um dos arquivos de recursos da nossa aplicação:

Idioma padrão e testando outros idiomas

Dentro da aba “Application” no manifesto da aplicação, podemos definir o idioma padrão do aplicativo. Esse será o idioma utilizado caso o sistema operacional esteja configurado para um idioma que não está disponível nos arquivos de recursos do aplicativo. Por exemplo, para configurarmos o idioma padrão como português do Brasil, basta alterarmos o item “Default language” no manifesto para “pt-BR” (confira este link caso você queira ver uma lista completa dos idiomas suportados):

Ao executarmos o aplicativo, a engine do WinRT verificará o idioma padrão configurado no sistema operacional e utilizará esse idioma como o idioma do aplicativo (caso ele esteja disponível – caso contrário, o idioma padrão da aplicação será utilizado). A fim de conseguirmos testar o nosso aplicativo em outros idiomas, temos que alterar a ordem dos idiomas no painel de controle. Para isso, clique na indicação do idioma do teclado ao lado do relógio e escolha a opção “Language preferences“:

Na tela “Language“, mova os idiomas utilizando os botões “Move up” ou “Move down“.

O idioma que estiver em primeiro na lista será o idioma utilizado para traduzir os termos da aplicação.

Concluindo

A tradução dos nossos Windows Apps faz com que eles possam ser utilizados com mais facilidade em outras regiões do mundo. Esse passo é imprescindível para alcançarmos uma maior quantidade de usuários na Windows Store. Nesse artigo você conferiu como traduzir os controles, mensagens e descrição dos seus aplicativos. Não perca tempo e utilize as informações desse artigo para traduzir o seu aplicativo para outros idiomas agora mesmo!

Caso você queira conferir outros artigos relacionados ao desenvolvimento de aplicativos para a plataforma Microsoft, dê uma conferida no meu site.

Até a próxima!

André Lima

Photo by woodleywonderworks used under Creative Commons
https://www.flickr.com/photos/wwworks/4759535950/