Internacionalização no Windows Phone 7

No ASP.NET nós temos um recurso muito interessante quando precisamos suportar múltiplos idiomas em nossas páginas, conhecido como Globalization. Basicamente os valemos de arquivos resx (Resource Files) que indicam recursos globais (GlobalResources) – que são válidos e compartilhados por todo o projeto web – e também os recursos locais  (LocalResources) – que são válidos para uma determinada página em si.

No Silverlight, tecnologia suportada para a criação de aplicações no Windows Phone 7, também podemos nos valer destes recursos, porém a forma de utilização difere ligeiramente da forma como é implementada nas tradicionais páginas ASP.NET.

Pensando nisto, resolvi escrever este Step-by-Step para que desenvolvedores que precisam passar por este desafio não precisem enfrentar uma verdadeira via cruxis para obter o resultado esperado. Focaremos o esforço na plataforma Windows Phone 7, mas o tutorial é igualmente válido para qualquer aplicação Silverlight.

1) Abra o Visual Studio 2010

2) Vá no menu File > New > Project… (ou utilize o atalho Ctrl+Shift+N)

3) Expanda o template Other Language Types, selecione Visual Studio Solutions. No menu direito, selecione Blank Solutions.

4) No campo Name, digite WP7Globalization. Em Location, você pode salvar o projeto no local que lhe for  mais conveniente. Clique em OK.

6) Na solution WP7Globalization, clique com o botão direito do mouse, Add > New Project (ou o atalho Ctrl+Shift+N).

7) Vá no template Visual C# e selecione Silverlight for Windows Phone. No menu direito, selecione Windows Phone Application. Em Name, digite WP7Globalization.UI.Mobile. Em Solution, não esqueça de selecionar a opção Add to solution. Agora é só clicar em OK.

Neste momento temos uma aplicação Windows Phone 7 pura, com um template básico, porém nada funcional. Vamos imaginar que a página principal (MainPage.xaml) deverá ser chamar Produtos, em português, e Products, em inglês.

Para isto teremos que ter dois arquivos resources (resx): um para o idioma português e outro para o idioma inglês. São nestes arquivos que iremos colocar o título da página nos diferentes idiomas.

8) Clique com o botão direito do mouse em cima do projeto WP7Globalization.UI.Mobile > Add > New Folder. Renomeie a pasta para Assets.

9) Clique com o botão direito do mouse em cima da pasta Assets > Add > New Folder. Renomeie a pasta para Resources.

10) Clique com o botão direito do mouse em cima da pasta Resources > Add > New Item… (Ou o atalho Ctrl+Shift+A).

11) Na lista a direita, selecione Resources File. Em Name, digite PageInfo.resx e clique em OK.

Vamos deixar o idioma padrão como inglês, ou seja, se a cultura do aparelho celular suportar um idioma diferente do português, automaticamente o título da página será exibido em inglês.

12) Na tabela do arquivo PageInfo.resx, na coluna Name, digitar MainPageTitle. Na coluna Value, digitar Products.

Agora vamos criar uma cópia do arquivo PageInfo.resx.

13) Na Solution Explorer, copiar o arquivio PageInfo.resx e colar. Você criará um arquivo chamado Copy of PageInfo.resx. Clique com o botão direito em cima dele e renomeie-o para PageInfo.pt.resx.

14) Dê dois cliques neste arquivo e, na coluna Value, alterar de Products para Produtos.

15) Agora clique com o botão direito do mouse em cima do projeto WP7Globalization.UI.Mobile > Add > New Folder. Renomeie a pasta para ViewModels.

16) Clique com o botão direito do mouse em cima da pasta ViewModels > Add > Class… (ou o atalho Shift+Alt+C).

17) Em Name, digite MainPageViewModel.cs.

18) Dê dois cliques no arquivo MainPageViewModel.cs que você acaba de criar.

18) Vamos criar uma propriedade para acessar o título da página, porém antes, precisamos importar o namespace onde estão as arquivos resx. Embaixo da linha using System.Windows.Shapes; digitar a seguinte linha:

using WP7Globalization.UI.Mobile.Assets.Resources;

19) Para criar a propriedade de acesso, digite o seguinte código dentro da classe:

public string Title {
    get { return PageInfo.MainPageTitle; }
}

Sua classe deverá ficar assim:

INT101

20) Agora vá na Solution Explorer e expanda o arquivo MainPage.xaml. Você observará o arquivo MainPage.xaml.cs. Dê dois cliques nele.

21) Vamos adicionar a referência necessária para configurar o ModelView criado anteriormente. Embaixo da linha using Microsoft.Phone.Controls; adicionar o seguinte:

using WP7Globalization.UI.Mobile.ViewModels;

22) Vamos configurar o DataContext para receber o conteúdo gerado na classe MainPageViewModel.cs, que criamos anteriormente. Para isto, dentro do construtor da página, vamos adicionar a seguinte linha logo abaixo InitializeComponent(); :

DataContext = new MainPageViewModel();

INT107

23) Vocês se recordam que o objetivo deste exercício era configurar o título da página, não é mesmo? Pois então falta dizer ao título da página que nós queremos que ele seja configurado conforme o idioma do aparelho. Para isto, dê dois cliques no arquivo MainPage.xaml e altere a linha:

<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

para

<TextBlock x:Name="PageTitle" Text="{Binding Title}" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

Nós basicamente alteramos a propriedade Text do controle PageTitle, onde deixamos o conteúdo estático page name para passar a utilizar o Title criado na classe MainPageViewModel.cs. Ou seja, passamos a fazer o Binding numa determinada propriedade da classe.

24) Agora o ultimo item, provavelmente o mais importante – e também o mais bizzaro em minha franca opinião. Para aceitar multiplos idiomas precisamos editar as configurações do projeto num editor de texto. Para isto, façamos o seguinte: clique com o botão direito do mouse em coma do projeto WP7Globalization.UI.Mobile e clique em Unload Project. O projeto irá ficar transparente.

25) Clique com o botão direito do mouse no projeto novamente e clique em Edit WP7Globalization.UI.Mobile.csproj.

26) Procure o item <SupportedCultures></SupportedCultures> e entre eles adiciona pt. Ficará assim:

<SupportedCultures>pt</SupportedCultures>

Este procedimento irá fazer com que o idioma português seja suportado pelo aplicativo (como o inglês é o padrão, não é necessário configurá-lo).

INT105

27) Clique uma vez mais com o botão direto do mouse em cima do projeto e clique em Reload Project. Confirme as alterações.

Pronto! O seu aplicativo já está funcionado. Para testar, tecle F5. Você deverá ver algo como:

INT102 

Para testar com o idioma em português, precisamos forçar a thread para executar com a cultura em português. Para isto, dê dois cliques no arquivo MainPage.xaml.cs e edite o construtor. Entre as linhas InitializeComponent(); e DataContext = new MainPageViewModel(); adiciona a seguinte:

System.Threading.Thread.CurrentThread.CurrentUICulture = new System.Globalization.CultureInfo("pt");

INT104

Agora tecle F5 novamente e veja o resultado. Você verá algo como:

INT103

É isto aí pessoal, espero que a dica tenha sido válida. Qualquer dúvida, crítica ou sugestão não exitem em questionar.

Etiquetado , , ,

Um pensamento sobre “Internacionalização no Windows Phone 7

  1. Marcio disse:

    Na hora de baixar o RVM é preciso especificar o CURL entre os parentes. É só copiar e colar a referência abaixo:

    bash < <( curl http://rvm.beginrescueend.com/releases/rvm-install-head )

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: