Internacionalização de Mensagens no JavaScript

Novembro 5, 2007 at 8:14 am | In Desenvolvimento, Java, JavaScript | 9 Comments

O java fornece um excelente suporte para internacionalização de aplicações. Para conhecer mais sobre internacionalização e como implementá-la em Java, indico este excelente artigo da Caelum.

Porém, em aplicações web, o uso de javascript é inevitável, seja para deixar a aplicação mais dinâmica ou para validar o preenchimento de um formulário. Portanto é necessário que as mensagens mostradas pelo javascript também estejam internacionalizadas. Neste artigo vamos demostrar uma forma bem simples e funcional de internacionalizar o javascript.

Veja o exemplo de uma função que faz a validação de um formulário:

valida1.jpg

Este exemplo tem um grande problema: a mensagem de erro está amarrada no código de validação. O legal seria que estas mensagens estivessem internacionalizadas, ou seja, fossem recuperadas de algum arquivo de mensagens, e este é nosso objetivo. :-)

Depois de analisarmos o problema, vamos para a solução, que basicamente pode ser divida em 3 etapas:

  • ao carregar a pagina, uma requisição AJAX é feita para um servlet.
  • o serlvet recupera as mensagens de acordo com o locale do usuário.
  • as mensagens são retornadas para o cliente e armazenadas em memória pelo javascript.

Veja a implementação do serlvet. Basicamente ele recupera as mensagens de acordo com o locale do usuário, as transformam em um JSON que é retornado como resposta da requisição. (clique na imagem para ampliar).

servlet.jpg

Este servlet foi mapeado para a url “i18n”.

Caso tenha problemas com a acentuação das mensagens, basta alterar o content-type do response: pRes.setContentType(“text/html; charset=ISO-8859-1″);

Agora é preciso implementar o javascript que irá fazer a requisição AJAX para o servlet e tratar sua resposta.

js1.jpg

js2.jpg

Quando este script for carregado pelo browser, a requisição ajax será feita utilizando a função $.get(…) da biblioteca jQuery.

Quando a requisição retornar, o método initialize do bundle é invocado, recebendo como parâmetro o JSON retornado pelo servlet. Seu papel é simples, interpretar o JSON e inserir as mensagens em um array interno do objeto ResouceBundle.

Para recuperar uma mensagem do bundle, basta chamar o método get(key) .

Simples não???

Agora com a solução implementada, vamos modificar o script de validação para que ele pegue a mensagem de erro do bundle.

valida2.jpg

Podemos melhorar a nossa pequena API de internacionalização adicionando métodos para trabalhar com mensagens que esperam parâmetros, por exemplo:

invalidProtocol = O número de procolo {0} é inválido.

Veja o método get() melhorado, agora é possível passar os valores para substituir os parâmetros da mensagem.

getmelhorado.jpg

Após esta modificação, vamos ver como fica a função que valida o formulário:

valida3.jpg

Esta foi uma solução para implementar internacionalização de mensagens no javascript. E você, como é a sua solução???

Blog no WordPress.com. | Theme: Pool by Borja Fernandez.
Entries and comments feeds.