Introdução

É hora de outra série de artigos do jQuery! Desde a minha última série, o jQuery solidificou sua posição como a biblioteca de Javascript preferida do lado do cliente. Este artigo foca no novo plug-in Globalize.

Este não era um plug-in do jQuery?

Ele foi um plug-in do jQuery quando a Microsoft® primeiro o lançou para o jQuery. Entretanto, a equipe de UI do jQuery recentemente decidiu torná-lo disponível para todos os codificadores de JavaScript, e todas as estruturas de JavaScript. Para tal, eles dissociaram-no do jQuery. Usuários pela primeira vez podem ficar tranquilos, pois isto que vocês estão lendo é a mais atual informação sobre este plug-in até o momento. Aqueles que experimentaram o plug-in antes, fiquem tranquilos, pois muito pouco mudou nos principais aspectos do código — apenas mudar o "$" em seu código para "Globalize" irá resolver a maioria dos seus problemas.

A globalização é uma parte vital de cada Web site no mundo de hoje. Muitos poderiam estar sacrificando negócios com clientes internacionais que não entendem ou por não quererem dar suporte para um idioma em particular. E se eu dissesse que dar suporte para qualquer cliente de qualquer lugar do mundo é agora tão fácil quanto não dar este suporte? Bem, este artigo está aqui para ensinar como.

Voltar para parte superior

Plano de fundo do problema

Nem todo mundo no planeta fala o mesmo idioma. E nem todo o mundo formata seus números, datas, e moedas da mesma forma.

Você pode se perguntar por que isto é um problema agora. Web sites tem estado por aí há anos e diferentes países têm estado por aí há 10.000 anos. O problema está se tornando mais grave porque é cada vez mais comum vermos Web sites focarem mais no cliente, ao invés de confiarem no servidor para fazer todo o serviço, ou confiarem nas chamadas de cliente/servidor do Ajax para fazerem o serviço. Os desenvolvedores querem uma solução de puramente para o cliente para tudo agora.

Vamos dar uma olhada em um simples exemplo para provar meu ponto. Digamos que você é o dono de um aplicativo da Web chamado "Duplique!". Um cliente digita um número em um campo de texto, e este número é duplicado quando o cliente aperta um botão. Isso parece bem simples, porém, um usuário nos Estados Unidos acessaria o site e digitaria "1,250.25" no campo de texto, e seu aplicativo mostraria - "2,500.5". Você poderia escrever um JavaScript do lado do cliente para fazer isso facilmente.

$("#reponseSpan").text(2 * new Number($("#inputTextField").val())); 

Agora, um usuário da Alemanha acessa o site. Eles não escrevem os números na Alemanha da mesma maneira que nos EUA. O alemão digita "1.250,25". Se você utilizar o mesmo JavaScript utilizado para um cliente dos EUA, você obterá um erro de JavaScript ao tentar criar o objeto numérico. Porque isso aconteceria? Porque as funções de JavaScript integradas esperam números no formato americano, e porque o visitante alemão não sabe digitar desta forma.

Você poderia instruir os usuários de seu Web site a digitarem todos os números no formato americano, mas essa é realmente a melhor resposta? Você quer forçar seus usuários a fazerem as coisas da sua maneira, ou quer aceitar o que eles fizerem e tornar a experiência de usuário a mais agradável possível?

Tabela 1 mostra os formatos possíveis para números que exemplificam porque o plug-in Globalize é a melhor solução.

Voltar para parte superior

Culturas

Como o plug-in Globalize lida com estes assuntos mencionados? Ele estrutura a solução em termos de culturas. Uma cultura não deve ser pensada como um idioma, porque muitos países no mundo falam o mesmo idioma, como o espanhol. Da mesma formam uma cultura não deve ser pensada como um país, uma vez que alguns países possuem vários idiomas oficiais, como a Suíça. A noção de cultura pode ser pensada como uma combinação única de um país e um idioma. Enquanto que o espanhol não é único é a Espanha não é única, a relação espanhol-Espanha é única, então pode ser considerada uma cultura (para diferenciar da relação espanhol-México e catalão- Espanha).

Quando você agrupa todos os idiomas e países únicos no mundo, há aproximadamente 350 culturas que necessitam de suporte. (essa é outra razão pela qual você não ia querer criar sozinho uma solução). Quando o plug-in Globalize constrói a cultura ele utiliza códigos de 2 letras. O primeiro é um código de idioma com duas letras minúsculas, pelo código ISO 639, o segundo é um código do país com duas letras maiúsculas, pelo código ISO 3166 (veja Recursos). Por exemplo, "en-US" denotaria que é o idioma inglês e uma cultura dos Estados Unidos, e "fr-FR" denotaria um idioma francês e a cultura francesa.

também importante é a cultura "neutra". Como efeito, o plug-in Globalize diz, "Se você não consegue especificar o idioma e a informação do país, você pode passar o idioma, e faremos a melhor tentativa possível para formatar corretamente". Isso é uma grande ajuda, como você verá posteriormente. As pessoas navegando pela Web tendem a identificarem o idioma que falam, porém determinar o código do país pode ser difícil às vezes.

Voltar para parte superior

Configuração das culturas em JavaScript

Agora que você já conhece o background do problema e como o plug-in Globalize utiliza o objeto de cultura para abstrair os detalhes subjacentes, vamos ver como definir a cultura ao trabalhar com JavaScript.

A primeira etapa é fazer o download do plug-in Globalize (vejaRecursos). Note também que o jQuery não é necessário para utilizar o plug-in Globalize. Isso foi no passado; a nova versão não requer isso. O plug-in Globalize foi projetado para que o plug-in "principal" seja a pasta-raiz, chamada "globalize.js". Este arquivo é pequeno, (apenas 44 KB), mas ele somente trabalha com o inglês americano. Isto acontece porque ele contém apenas os valores padrões para as suas funcionalidades, e não contém nenhum código de cultura real. Abra a pasta "cultures", existem 353 arquivos lá, que podem inserir complexidade ao problema. Agora, identifique este arquivo especial: "globalize.cultures.js" — Este arquivo contém todas as culturas possíveis, então você não precisará carregar especificamente aquelas necessárias para se trabalhar. Claro, incluindo cada cultura há a desvantagem de se criar um arquivo grande, 828 KB. Isso é excessivo em qualquer situação de produção. Entretanto, é bom o suficiente para escrever alguns exemplos de códigos por agora.

				
// Remember, you should only load the globalize.cultures.js when testing and in example
       code like this
// Later sections will show how to dynamically load each Culture as needed
<script type="text/javascript" src="globalize.js"></script>
<script type="text/javascript" src="cultures/globalize.cultures.js"></script>

Configurar a cultura dentro do JavaScript é, como a maioria das coisas, muito fácil. Aqui estão alguns exemplos de como configurá-las.

				
// Remember, this only works if you include the globalize.js file!
// And, you HAVE to include the globalize.cultures.js file OR
// each individual culture's JS file

// You can set the culture directly by referencing its name
Globalize.culture = Globalize.cultures.de;

// You can set the culture directly by referencing it from
// the Cultures array
Globalize.culture = Globalize.cultures["de-DE"];

Voltar para parte superior

Formatação de um número

A formatação e a análise são as duas funções mais fundamentais ao se trabalhar com a internacionalização. Afinal, você está permitindo que seus usuários digitem números e datas no formato que eles quiserem. E ainda, você precisa dos dados deles em um formato com o qual você possa trabalhar (analisar), ou exibir seus próprios dados no formato que eles quiserem (formato).

formatar é pegar um número, um número real que pode ser armazenado como um objeto numérico JavaScript, e exibi-lo propriamente ao usuário nos termos que eles estão acostumados. Lembre-se do exemplo anterior, onde um americano pode escrever "1,250.30" e um alemão "1.250,30".

Na maioria dos idiomas, a formatação dos números envolve trabalhar com quatro tipos de formatos: números (os dígitos em frente do ponto decimal), decimais (os dígitos após o ponto decimal), porcentagem (que multiplica o número por 100 e exibe o sinal "%") e moeda (que exibe o símbolo da moeda da cultura, como o $ ou o símbolo do euro). Cada tipo de formato pode ter um argumento, para dizer ao formatador como aplicar propriamente o padrão.

• n — é usado em números, e denota ao formatador retornar este objeto numérico em um número. Este argumento pode ser usado com um número, que diz ao formatador quantos pontos decimais utilizar. Por exemplo, "n3" dirá para o formatador fazer do argumento um número com 3 pontos decimais.
• d — é usado para decimais, e denota o retorno do objeto numérico em um número com decimais. Este argumento pode ser usado com um número, que diz ao formatador quantos dígitos utilizar antes do ponto decimal. Por exemplo, "d2" dirá ao formatador a mostrar um número que tenha 2 dígitos à esquerda do ponto decimal.
• p — é o mesmo que o argumento "n", exceto que o formatador multiplica o número por 100 e adiciona um "%" após o número.
• c — é o símbolo da moeda, e adiciona o símbolo da moeda da cultura ao local apropriado. Adicionado este argumento dirá ao formatador quantos dígitos decimais utilizar.

				
// Assume that the correct Culture JS file is always added here

// make the Culture German
Globalize.culture = Globalize.cultures.de;

// test the "n" command
Globalize.format(1839.560, "n1"); // outputs 1.839,6
Globalize.format(1839.560, "n0"); // outputs 1.840
Globalize.format(1839.560, "n6"); // outputs 1.839,560000

// test the "c" command
Globalize.format(1839.560, "c2"); // outputs 1.839,56 €
Globalize.format(1839.560, "c3"); // outputs 1.839,560 €
Globalize.format(1839.560, "c6"); // outputs 1.839,560000 €

// now make it English and run the same code
Globalize.culture = Globalize.cultures.en;

// test the "n" command
Globalize.format(1839.560, "n1"); // outputs 1,839.6
Globalize.format(1839.560, "n0"); // outputs 1,840
Globalize.format(1839.560, "n6"); // outputs 1,839.560000

// test the "c" command
Globalize.format(1839.560, "c2"); // outputs $1,839.56
Globalize.format(1839.560, "c3"); // outputs $1,839.560
Globalize.format(1839.560, "c6"); // outputs $1,839.560000

Há algumas coisas das quais eu não gosto sobre as funções de formatação usadas aqui, entretanto. Primeiro, a formatação de moeda não é flexível para permitir especificar onde eu quero colocar o símbolo da moeda. Compare isso com um formatador como o que o Java™ utiliza, onde o código pode especificar onde o símbolo da moeda deve ir, por exemplo, na frente ou atrás, com espaço ou sem espaço. É possível com o plug-in Globalize, mas requer a edição do objeto de cultura "de" (não recomendado) ou a criação de um objeto customizado. Além disso, a formatação em Java permite inserir caracteres ao início e ao fim, como customização posterior. Por exemplo, em se tratando de assinar um bônus para um novo trabalho, você pode escrever seu bônus como "$24k", com o "k" representando "milhares". Este tipo de abreviação é comum nos EUA, o "k" para milhares, "M" para milhões, e "B" para bilhões. Infelizmente, isto ainda não é possível na formatação do plug-in Globalize,sem escrever seu próprio objeto de cultura para tal.

Por fim, não acho que a formatação seja tão eficiente como o Java no lado do servidor, mas ainda é uma solução para quase tudo o que possa precisar.

Voltar para parte superior

Análise de um número

Uma vez que um usuário digita um número, moeda, ou porcentagem, é necessário obter esta informação, e você precisa disso de maneira que você possa criar um objeto numérico com ele. Em outras palavras, você precisa de uma maneira que o código possa se relacionar a isso. Além disso, você pode querer obter a informação na forma própria, se passar para o servidor. Neste caso, você precisa analisar o número, transformando-o de uma cadeia de caracteres em um número.

				
// Assume that the correct Culture JS file is always added here

// make the Culture German
Globalize.culture = Globalize.cultures.de;

// Call parseInt() on it, and get an object back we can work with
var num = Globalize.parseInt("1.839,56"); // will create an object with value 1840

// now make it English and run the same code
Globalize.culture = Globalize.cultures.en;

// Call parseInt() on it, and get an object back we can work with
var num = Globalize.parseInt("1,839.56"); // will create an object with value 1840

// Likewise, there's a parseFloat() that will preserve the decimal points
var num = Globalize.parseFloat("1,839.56"); // will create an object with value 1839.56

Voltar para parte superior

Formatação de uma data

A formatação não é apenas limitada por números com o plug-in Globalize. Datas podem também serem formatadas. Afinal, a data 8 de março de 2011 pode ser escrita como 3/8/11 nos Estados Unidos e 8/3/11 na Alemanha. A formatação de datas é muito mais complicada e envolve mais do que apenas números, e por isso, não entrarei em detalhes sobre todas as opções possíveis para a formatação de uma data. É para isso que existe a documentação, afinal.

				
// Assume that the correct Culture JS file is always added here

// make the Culture German
Globalize.culture = Globalize.cultures.de;

// Create a date for March 8th, 2011
// NOTE - months are 0 indexed, but the day isn't...how dumb!
Globalize.format(new Date(2011,2,8),"d"); // outputs 08.03.2011
Globalize.format(new Date(2011,2,8),"M"); // outputs 08 März
Globalize.format(new Date(2011,2,8),"D"); // outputs Dienstag, 8. März 2011

// now make it English and run the same code
Globalize.culture = Globalize.cultures.en;

Globalize.format(new Date(2011,2,8),"d"); // outputs 3/8/2011
Globalize.format(new Date(2011,2,8),"M"); // outputs March 08
Globalize.format(new Date(2011,2,8),"D"); // outputs Tuesday, March 08, 2011

Voltar para parte superior

Análise de uma data

Analisar uma data é muito fácil.

				
// Assume that the correct Culture JS file is always added here

// make the Culture German
Globalize.culture = Globalize.cultures.de;

Globalize.parseDate("3/8/2011"); // creates a JavaScript Date object for August 3rd, 2011
Globalize.parseDate("Tuesday, March 08, 2011"); // returns null

// now make it English and run the same code
Globalize.culture = Globalize.cultures.en;

Globalize.parseDate("3/8/2011"); // creates a JavaScript Date object for March 8th, 2011
Globalize.parseDate("Tuesday, March 08, 2011"); // creates a JavaScript Date object for
          March 8th, 2011

Globalização dinâmica

Até este ponto, nós usamos o arquivo "globalize.cultures.js" nos exemplos para tornar o código mais fácil de trabalhar. O arquivo "globalize.cultures.js" contém no total 350 culturas, e como resultado, possui 828 KB. Está bem para os exemplos, mas não será suficiente para trabalhar em um ambiente de produção. Porque passar 349 culturas desnecessárias com cada carga de página quando você não precisa? A maioria dos seus usuários precisarão apenas de uma ou duas culturas carregadas em suas páginas para poderem internacionalizar completamente a página.

Além disso, como você saberia quais culturas deveriam ser carregadas em uma página? Não é como se um navegador pudesse dizer exatamente de onde o usuário é (embora isto esteja mudando com os serviços com base em locais e com as consultas de endereço IP). Se eu viajar com meu laptop para Estocolmo, eu não ia querer que todo site convertesse automaticamente tudo para a formatação sueca, só porque eu estou fisicamente no local. Eu não mudei fisicamente a maneira como eu leio números e datas só porque eu mudei fisicamente de local. Não seria ótimo se houvesse uma maneira de dizer automaticamente quais idiomas e países um usuário prefere enquanto ele navega na Web?

Há uma maneira. A maneira mais fácil seria acessar esta informação em JavaScript. Surpreendentemente, embora o JavaScript dê muitas informações sobre o navegador, ele não dá informações sobre os idiomas preferenciais. Entretanto, embora o JavaScript não dê acesso a esta informação, é possível obtê-la com uma linguagem do lado do servidor como Java ou PHP.

Nossa meta é determinar quais idiomas os usuários preferem. Então, com base nestes idiomas, queremos carregar somente aquelas culturas na página, para reduzir o tráfego e o tempo de carregamento das páginas. Finalmente, queremos chamar Globalize.culture() com os idiomas preferidos dos usuários, para que o plug-in Globalize saiba como formatar tudo. Listagem 7 mostra o código em Java e Listagem 8 mostra o código em PHP que pode ser usado para internacionalizar sua página da Web automaticamente.

Se você usar JSP ou PHP, fique à vontade para copiar este código e colar no seu próprio código, se você planeja utilizar o plug-in Globalize. Ele está pronto para implementação e não possui dependências externas; Java 5 ou superior, PHP 4 ou superior.

				
<%
    // the user's preferred language is stored in the Header, and the Accept-Language
    // field
    // For example, in my Firefox browser, it shows
    // en-us,en;q=0.5
    // This means my primary Culture is "en-us" which has a q=1.0
    // My backup Culture is "en" neutral, which has a q=0.5
    // q values are used to rank the cultures and are a system
    // for safe fail-over
    String header = request.getHeader("Accept-Language");

    // Split each language into separate locales
    String[] locales = header.split(",");

    // load the globalize.js file, which must always
    // be loaded to use the Globalize plugin
    out.println("<script src=\"globalize.js\"
                type=\"text/javascript\"></script>");

    // loop through each locale, and load the appropriate Globalize
    // plugin file.
    // for example, since I have 2 locales, it will load the
    // globalize.culture.en-US.js file and the
    // globalize.culture.en.js file
    for (int i=0; i<locales.length; i++)
    {
        int end = (locales[i].indexOf(";") == -1) ? locales[i].length() :
          locales[i].indexOf(";");
        String locale = locales[i].substring(0,end);
        out.println("<script src=\"cultures/globalize.culture." +
                    locale +
                    ".js\" type=\"text/javascript\"></script>");
    }

    // Finally, call culture() with the Accept-Language
    // The Globalize plugin accepts the String directly from
    // the Header, and deals with the q values appropriately,
    // even failing over safely on its own
    out.println("<script>$(document).ready(function(){Globalize.culture(\"" +
               header +
               "\");});</script>");
%>

				
// Here's the same thing in PHP
<?
$accept_language = $_SERVER["HTTP_ACCEPT_LANGUAGE"];

$languages = explode(",", $accept_language);

echo "<script src=\"globalize.js\" type=\"text/javascript\"></script>";

for each ($languages as $language) {
        $locale = explode(";", $language);

        echo "<script src=\"cultures/globalize.culture.".$locale[0].".js\"
          type=\"text/javascript\"></script>";
}

echo '<script>$(document).ready(function(){Globalize.culture
          ("'.$accept_language.'");});</script>';
?>

Voltar para parte superior

Conclusão

O plug-in Globalize é uma ótima adição ao arsenal do jQuery e do JavaScript. Ele é resultado de anos de trabalho da Microsoft, que doou se trabalho à comunidade jQuery e do qual todos nós podemos nos beneficiar. O plug-in é definitivamente abrangente, incluindo 350 únicas culturas de idioma-país. Literalmente, todo mundo que visitar seu site será amparado pelo plug-in Globalize. Isso deve ser suficiente para convencê-lo a usar o plug-in Globalize ao invés de outro plug-in caseiro que você possa ter experimentado. (Ironicamente, embora eu tenha escrito sobre o popular plug-in de formatação de número da jQuery em um artigo anterior no developerWorks, estou dizendo agora para vocês pararem de usá-lo, e usarem este agora.)

O plug-in Globalize permite formatar facilmente números e datas, e também permite analisar tais valores. Este plug-in pode ser utilizado para customizar a maneira como uma página da Web exibe os números e datas, e permite que suas páginas da Web se conectem com o usuário de uma melhor maneira, tomando outra etapa vital para "tornar seu aplicativo da Web mais parecido com aplicativo de desktop". Previamente, se os desenvolvedores quisessem formatar números e datas corretamente para cada cultura, eles eram forçados a fazer chamadas do tipo cliente-servidor no Ajax, ou fazer todo o processamento diretamente no servidor. Como estamos vendo com todos os aplicativos da Web atuais, grande parte do processamento e da lógica está acontecendo no lado do cliente com o JavaScript.

Não abordamos aspectos mais detalhados do plug-in Globalize. Por exemplo, o plug-in é adaptável o suficiente para que você possa escrever facilmente sua própria cultura e implementá-la ao sistema. Entretanto, como sabemos que já existem 350 culturas incluídas no plug-in, você realmente precisa de outra? Se você acha que sim, isso é fácil de fazer, mas não vejo isso como um tópico necessário neste artigo.

por fim, eu mostrei o código em Java e PHP que pode determinar dinamicamente as culturas corretas que seus visitantes preferem utilizar em seus navegadores, e então carregar dinamicamente os arquivos de cultura corretos para incluir o plug-in Globalize, e finalmente como chamar de maneira dinâmica culture() para definir aquelas culturas na página. Você pode simplesmente copiar e colar o código acima em seu próprio código para internacionalizar suas páginas da Web.

Recursos

Aprender

• Leia o anúncio oficial da equipe do jQuery a respeito do lançamento deste plug-in.
  
  
• Aqui está uma lista dos códigos de idioma ISO 639.
  
  
• Aqui está uma lista dos códigos de países ISO 3166.
  
  
• Obtenha um background completo de CSS, JavaScript, e qualquer linguagem da Web em W3Schools.
  
  
• Working with jQuery, Part 1: Bringing desktop applications to the browser, Part 2: Building tomorrow's web applications today e Part 3: Rich Internet applications with jQuery and Ajax (Michael Abernethy, developerWorks, 2008): Este série anterior fornece uma introdução à biblioteca do jQuery.
  
  
• A Zona do developerWorks de software livre fornece muitas informações sobre ferramentas de software livre e de como utilizar tecnologias de software livre.
  
  

Obter produtos e tecnologias

• Faça o download do plug-in Globalize e leia a documentação no site GitHub.
  
  
• Navegue na página das metas atualizadas da documentação do Globalize.
  
  
• Experimente o software IBM sem custo. Faça o download de uma versão de avaliação, faça login em uma versão de avaliação on-line, trabalhe com o produto em um ambiente de simulação ou acesse-o por meio da nuvem. Escolha dentre mais de 100 versões de avaliação de produtos IBM.
  
  

Discutir

• Confira o blogs do developerWorks e participe da comunidade do developerWorks.
  
  

Sobre o autor

Em seus 12 anos de tecnologia, Michael Abernethy trabalhou com uma grande variedade de tecnologias e de clientes. Ele foca na criação de aplicativos da Web melhores e mais complexos, testando os limites dos navegadores nos quais eles são executados, enquanto que ao mesmo tempo tentam imaginar como torná-los mais fáceis de criar e de manter. Quando ele não está trabalhando em seu computador, ele está com seus filhos.

Classificar este artigo

Comentários

Voltar para parte superior

Índice

• Introdução
• Plano de fundo do problema
• Culturas
• Configuração das culturas em JavaScript
• Formatação de um número
• Análise de um número
• Formatação de uma data
• Análise de uma data
• Globalização dinâmica
• Conclusão
• Recursos
• Sobre o autor
• Comentários

Conheça a IBM da sua cidade

A IBM está mais perto do que você imagina!

---

Saiba mais