Plugin jQuery da Microsoft para Globalização
- by Leniel Macaferi
No mês passado eu escrevi sobre como a Microsoft está começando a fazer contribuições de código para a jQuery (em Inglês), e sobre algumas das primeiras contribuições de código nas quais estávamos trabalhando: Suporte para Templates jQuery e Linkagem de Dados (em Inglês).
Hoje,
lançamos um protótipo de um novo plugin jQuery para Globalização que te
permite adicionar suporte à globalização/internacionalização para as suas aplicações
JavaScript. Este plugin inclui informações de globalização para mais de
350 culturas que vão desde o Gaélico Escocês, o Frísio, Húngaro,
Japonês, e Inglês Canadense. Nós estaremos lançando este plugin para a
comunidade em um formato de código livre.
Você pode baixar nosso protótipo do plugin jQuery para Globalização a partir do nosso repositório Github:
http://github.com/nje/jquery-glob
Você também pode baixar um conjunto de exemplos que demonstram alguns simples casos de uso com ele aqui.
Entendendo Globalização
O plugin jQuery para Globalização permite que você facilmente analise e
formate números, moedas e datas para diferentes culturas em JavaScript.
Por exemplo, você pode usar o plugin de globalização para mostrar o
símbolo da moeda adequado para uma cultura:
Você
também pode usar o plugin de globalização para formatar datas para que o
dia e o mês apareçam na ordem certa e para que os nomes dos dias e
meses sejam corretamente traduzidos:
Observe acima como o ano Árabe é exibido como 1431. Isso ocorre porque o ano foi convertido para usar o calendário Árabe.
Algumas
diferenças culturais, tais como moeda diferente ou nomes de meses, são
óbvias. Outras diferenças culturais são surpreendentes e sutis. Por
exemplo, em algumas culturas, o agrupamento de números é feito de forma
irregular. Na cultura "te-IN" (Telugu na Índia), grupos possuem 3
dígitos e, em seguida, dois dígitos. O número 1000000 (um milhão) é
escrito como "10,00,000". Algumas culturas não agrupam os números. Todas
essas sutis diferenças culturais são tratadas pelo plugin de
Globalização da jQuery automaticamente.
Pegar as datas
corretamente pode ser especialmente complicado. Diferentes culturas têm
calendários diferentes, como o Gregoriano e os calendários UmAlQura. Uma
única cultura pode até mesmo ter vários calendários. Por exemplo, a
cultura Japonesa usa o calendário Gregoriano e um calendário Japonês que
possui eras com nomes de imperadores Japoneses. O plugin de
Globalização inclui métodos para a conversão de datas entre todos estes
diferentes calendários.
Usando Tags de Idioma
O plugin de Globalização da jQuery utiliza as tags de idioma definidas nos
padrões das RFCs 4646 e 5646 para identificar culturas (veja http://tools.ietf.org/html/rfc5646). Uma tag de idioma é composta por uma ou mais subtags separadas por hífens. Por exemplo:
Tag do Idioma
Nome do Idioma (em Inglês)
en-UA
English (Australia)
en-BZ
English (Belize)
en-CA
English (Canada)
Id
Indonesian
zh-CHS
Chinese (Simplified) Legacy
Zu
isiZulu
Observe
que um único idioma, como o Inglês, pode ter várias tags de idioma.
Falantes de Inglês no Canadá formatam números, moedas e datas usando
diferentes convenções daquelas usadas pelos falantes de Inglês na
Austrália ou nos Estados Unidos. Você pode encontrar a tag de idioma
para uma cultura específica usando a Language Subtag Lookup Tool (Ferramenta de Pesquisa de Subtags de Idiomas) em: http://rishida.net/utils/subtags/
O download do plugin de Globalização da jQuery inclui uma pasta chamada globinfo
que contém as informações de cada uma das 350 culturas. Na verdade,
esta pasta contém mais de 700 arquivos, porque a pasta inclui ambas as
versões minified (tamanho reduzido) e não-minified de cada arquivo.
Por exemplo, a pasta globinfo
inclui arquivos JavaScript chamados jQuery.glob.en-AU.js para o Inglês
da Austrália, jQuery.glob.id.js para o Indonésio, e jQuery.glob.zh-CHS
para o Chinês (simplificado) Legacy.
Exemplo: Definindo uma Cultura Específica
Imagine
que te pediram para criar um site em Alemão e que querem formatar todas
as datas, moedas e números usando convenções de formatação da cultura
Alemã de maneira correta em JavaScript no lado do cliente. O código HTML
para a página pode ser igual a este:
Observe
as tags span acima. Elas marcam as áreas da página que desejamos
formatar com o plugin de Globalização. Queremos formatar o preço do
produto, a data em que o produto está disponível, e as unidades do
produto em estoque.
Para usar o plugin de Globalização da jQuery,
vamos adicionar três arquivos JavaScript na página: a biblioteca
jQuery, o plugin de Globalização da jQuery, e as informações de cultura
para um determinado idioma:
Neste
caso, eu estaticamente acrescentei o arquivo JavaScript
jQuery.glob.de-DE.js que contém as informações para a cultura Alemã. A
tag de idioma "de-DE" é usada para o Alemão falado na Alemanha.
Agora que eu tenho todos os scripts necessários, eu posso usar o plugin de Globalização para formatar os valores do preço do produto, data disponível, e unidades no estoque usando o seguinte JavaScript no lado do cliente:
O plugin de Globalização jQuery amplia a biblioteca jQuery com novos métodos - incluindo novos métodos chamados preferCulture() e format(). O método preferCulture() permite que você defina a cultura padrão utilizada pelos métodos do plugin de Globalização da jQuery. Observe que o método preferCulture() aceita uma tag de idioma. O método irá buscar a cultura mais próxima que corresponda à tag do idioma.
O método $.format() é usado para formatar os valores monetários, datas e números. O segundo parâmetro passado para o método $.format()
é um especificador de formato. Por exemplo, passar um "c" faz com que o
valor seja formatado como moeda. O arquivo LeiaMe (ReadMe) no github
detalha o significado de todos os diferentes especificadores de formato:
http://github.com/nje/jquery-glob
Quando
abrimos a página em um navegador, tudo está formatado corretamente de
acordo com as convenções da língua Alemã. Um símbolo do euro é usado
para o símbolo de moeda. A data é formatada usando nomes de dia e mês em
Alemão. Finalmente, um ponto, em vez de uma vírgula é usado como
separador numérico:
Você pode ver um exemplo em execução da abordagem acima com o arquivo 3_GermanSite.htm neste download de amostras.
Exemplo: Permitindo que um Usuário Selecione Dinamicamente uma Cultura
No
exemplo anterior, nós explicitamente dissemos que queríamos globalizar
em Alemão (referenciando o arquivo jQuery.glob.de-DE.js). Vamos agora
olhar para o primeiro de alguns exemplos que demonstram como definir
dinamicamente a cultura da globalização a ser usada.
Imagine que
você deseja exibir uma lista suspensa (dropdown) de todas as 350
culturas em uma página. Quando alguém escolhe uma cultura a partir da
lista suspensa, você quer que todas as datas da página sejam formatadas
usando a cultura selecionada.
Aqui está o código HTML para a página:
Observe
que todas as datas estão contidas em uma tag <span> com um
atributo data-date (atributos data-* são um novo recurso da HTML 5, que
convenientemente também ainda funcionam com navegadores mais antigos).
Nós vamos formatar a data representada pelo atributo data-date quando um
usuário selecionar uma cultura a partir da lista suspensa.
A fim de mostrar as datas para qualquer cultura disponível, vamos incluir o arquivo jQuery.glob.all.js igual a seguir:
O plugin de Globalização da jQuery inclui um arquivo JavaScript chamado jQuery.glob.all.js. Este arquivo contém informações de globalização para todas as mais de 350 culturas suportadas pelo plugin de Globalização. Em um tamanho de 367 KB minified (reduzido), esse arquivo não é pequeno. Devido
ao tamanho deste arquivo, a menos que você realmente precise usar todas
essas culturas, ao mesmo tempo, recomendamos que você adicione em uma
página somente os arquivos JavaScript individuais para as culturas
específicas que você pretende suportar, ao invés do arquivo
jQuery.glob.all.js combinado. No próximo exemplo, eu vou mostrar como carregar dinamicamente apenas os arquivos de idioma que você precisa.
A
seguir, vamos preencher a lista suspensa com todas as culturas
disponíveis. Podemos usar a propriedade $.cultures para obter todas as
culturas carregadas:
Finalmente, vamos escrever o código jQuery que pega cada elemento span com um atributo data-date e formataremos a data:
O método parseDate()
do plugin de Globalização da jQuery é usado para converter uma
representação de uma data em string para uma data JavaScript. O método format()
do plugin é usado para formatar a data. O especificador de formato "D"
faz com que a data a ser formatada use o formato de data longa.
E
agora, o conteúdo será globalizado corretamente, independentemente de
qual das 350 línguas o usuário que visita a página selecione. Você pode
ver um exemplo em execução da abordagem acima com o arquivo
4_SelectCulture.htm neste download de amostras.
Exemplo: Carregando Arquivos de Globalização Dinamicamente
Conforme
mencionado na seção anterior, você deve evitar adicionar o arquivo
jQuery.glob.all.js em uma página, sempre que possível, porque o arquivo é
muito grande. Uma melhor alternativa é carregar as informações de
globalização que você precisa dinamicamente.
Por exemplo, imagine que você tenha criado uma lista suspensa que exibe uma lista de idiomas:
O
seguinte código jQuery é executado sempre que um usuário seleciona um
novo idioma na lista suspensa. O código verifica se o arquivo associado
com a globalização do idioma selecionado já foi carregado. Se o arquivo
de globalização ainda não foi carregado, o arquivo de globalização é
carregado dinamicamente, tirando vantagem do método $.getScript() da jQuery.
O
método globalizePage() é chamado depois que o arquivo de globalização
solicitado tenha sido carregado, e contém o código do lado do cliente
necessário para realizar a globalização.
A vantagem dessa
abordagem é que ela permite evitar o carregamento do arquivo
jQuery.glob.all.js inteiro. Em vez disso você só precisa carregar os
arquivos que você vai usar e você não precisa carregar os arquivos mais
de uma vez.
O arquivo 5_Dynamic.htm neste download de amostras demonstra como implementar esta abordagem.
Exemplo: Definindo o Idioma Preferido do Usuário Automaticamente
Muitos
sites detectam o idioma preferido do usuário a partir das configurações
de seu navegador e as usam automaticamente quando globalizam o
conteúdo. Um usuário pode definir o idioma preferido para o seu
navegador. Então, sempre que o usuário solicita uma página, esta
preferência de idioma está incluída no pedido no cabeçalho
Accept-Language.
Quando você usa o Microsoft Internet Explorer, você pode definir o seu idioma preferido, seguindo estes passos:
Selecione a opção do menu Ferramentas, Opções da Internet.
Selecione a guia/tab Geral.
Clique no botão Idiomas na seção Aparência.
Clique no botão Adicionar para adicionar um novo idioma na lista de idiomas.
Mova seu idioma preferido para o topo da lista.
Observe
que você pode listar múltiplos idiomas na janela de diálogo de
Preferências de Idioma. Todas estas línguas são enviadas na ordem em que
você as listou no cabeçalho Accept-Language:
Accept-Language: fr-FR,id-ID;q=0.7,en-US;q= 0.3
Estranhamente,
você não pode recuperar o valor do cabeçalho Accept-Language a partir
do código JavaScript no lado do cliente. O Microsoft Internet Explorer e
o Mozilla Firefox suportam um grupo de propriedades relacionadas a
idiomas que são expostas pelo objeto window.navigator, tais como
windows.navigator.browserLanguage e window.navigator.language, mas essas
propriedades representam tanto o idioma definido para o sistema
operacional ou a linguagem de edição do navegador. Essas propriedades
não permitem que você recupere o idioma que o usuário definiu como seu
idioma preferido.
A única maneira confiável para se obter o
idioma preferido do usuário (o valor do cabeçalho Accept-Language) é
escrever código no lado do servidor. Por exemplo, a seguinte página
ASP.NET tira vantagem da propriedade do servidor Request.UserLanguages
para atribuir o idioma preferido do usuário para uma variável JavaScript
no lado do cliente chamada AcceptLanguage (a qual então permite que você acesse o valor usando código JavaScript no lado do cliente):
Para
que este código funcione, as informações de cultura associadas ao valor
de acceptLanguage devem ser incluídas na página. Por exemplo, se a
cultura preferida de alguém é fr-FR (Francês na França) então você
precisa incluir tanto o arquivo jQuery.glob.fr-FR.js ou o arquivo
jQuery.glob.all.js na página; caso contrário, as informações de cultura
não estarão disponíveis. O exemplo "6_AcceptLanguages.aspx" neste download de amostras demonstra como implementar esta abordagem.
Se as informações de cultura para o idioma preferido do usuário não estiverem incluídas na página, então, o método $.preferCulture()
voltará a usar a cultura neutra (por exemplo, passará a usar
jQuery.glob.fr.js ao invés de jQuery.glob.fr-FR.js). Se as informações
da cultura neutra não estiverem disponíveis, então, o método $.preferCulture() retornará para a cultura padrão (Inglês).
Exemplo: Usando o Plugin de Globalização com o jQuery UI DatePicker (Selecionador de Datas da jQuery)
Um
dos objetivos do plugin de Globalização é tornar mais fácil construir
widgets jQuery que podem ser usados com diferentes culturas.
Nós
queríamos ter certeza de que o plugin de Globalização da jQuery pudesse
funcionar com os plugins de UI (interface do usuário) da jQuery, como o
plugin DatePicker. Para esse fim, criamos uma versão corrigida do plugin
DatePicker que pode tirar proveito do plugin de Globalização na
renderização de um calendário. A imagem a seguir ilustra o que acontece
quando você adiciona o plugin de Globalização jQuery e o plugin
DatePicker da jQuery corrigido em uma página e seleciona a cultura da
Indonésia como preferencial:
Note
que os cabeçalhos para os dias da semana são exibidos usando
abreviaturas dos nomes dos dias referentes ao idioma Indonésio. Além
disso, os nomes dos meses são exibidos em Indonésio.
Você pode baixar a versão corrigida do jQuery UI DatePicker no nosso site no github. Ou você pode usar a versão incluída neste download de amostras e usada pelo arquivo de exemplo 7_DatePicker.htm.
Sumário
Estou
animado com a nossa participação contínua na comunidade jQuery. Este
plugin de Globalização é o terceiro plugin jQuery que lançamos.
Nós
realmente apreciamos todos os ótimos comentários e sugestões sobre os
protótipos do Suporte para Templates jQuery e Linkagem de Dados que
lançamos mais cedo neste ano. Queremos também agradecer aos times da jQuery e jQuery UI por trabalharem conosco na criação deses plugins.
Espero que isso ajude,
Scott
P.S. Além do blog, eu também estou agora utilizando o Twitter para atualizações rápidas e para compartilhar links. Você pode me acompanhar em: twitter.com/scottgu
Texto traduzido do post original por
Leniel Macaferi.
