Internacionalização de Mensagens no JavaScript

novembro 5, 2007 às 8:14 am | Publicado em Desenvolvimento, Java, JavaScript | 11 Comentários

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???

Anúncios

11 Comentários »

RSS feed for comments on this post. TrackBack URI

  1. Isso já foi feito no harpia..????
    o Bita consegui fazer isso..????

  2. fala Ewerton, blz?

    estavamos com um problema para internacionalizar as mensagens do javascript. As mensagens de interface ficam em arquivos de propriedades.

    Esta solução atendeu perfeitamente as nossas necessidades.

  3. Gostaria de obter o código de um formulário exatamente igual a esse que estou preenxendo.

    Ficario grato.

    No aguardo,

    Caio.

  4. Caio…

    você quer o código deste artigo, é isso?

    abraços
    Marcelo

  5. Gostaria de saber se você poderia disponibilizar o projeto.

  6. Olá Marco…

    vou verificar se ainda tenho o código do projeto.

    abraços.

  7. Bom dia,
    Gostaria de saber se você poderia me explicar como funciona o trecho do codigo q vc usa “ResourceBundle.prototype.initialize” e “bundle.initialize” não entendi e não consegui encontrar uma explicação na web… implementei seu codigo e está funcinando perfeitamente mas preciso fazer uma adpatação e preciso entender como funciona a sua lógica…

  8. CARO COLEGA, GOSTARIA QUE VOCÊ ME ENVIASSE ESSE JAVA DO COMENTÁRIO, ESTOU PRECISANDO DE UM FORMULARIO DESSE TIPO.
    OBRIGADO

  9. esse é o jeito simples?

  10. setContentType(“text/html; charset=ISO-8859-1″)

    Isso salvou minha vida!!

  11. Outra abordagem seria um template (JSP, Velocity, PHP, etc) que permita você acessar as propriedades do arquivo de mensagens. Este template funcionaria como um filtro das mensagens utilizadas via script, visto que o arquivo de properties pode abrigar outras mensagens utilizadas para outros fins que não a camada de apresentação da aplicação (ex: logs, webservices, etc). O template então renderizaria sintaxe JavaScript pondendo facilmente ser importado como script baixando a um tamanho consideravelmente menor.

    Para integrar facilmente com o snippet do artigo a geração do template poderia considerar o protocolo JSONP recebendo um parâmetro para popular sua instância “bundle”:

    Exemplo de URL:
    http://sua_aplicacao/i18n?callback=bundle.initialize

    Exemplo do script gerado pelo template:
    bundle.initialize({
    INVALID_USERNAME: ‘Usuário inválido’,
    REQUIRED_FIELD: ‘Campo de preenchimento obrigatório’
    });


Deixe um comentário

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

Crie um website ou blog gratuito no WordPress.com.
Entries e comentários feeds.

%d blogueiros gostam disto: