Adicionando Máscaras de entrada em Campos de texto com Visual Web e jQuery

Olá pessoal. Tenho recebido bons feedbacks a respeito da série de artigos a respeito do uso do Visual Web do NetBeans IDE.

Alguns leitores me pediram para ensinar como adicionar máscaras de entrada facilmente no componente Campo de texto. A pedidos, vamos aprender como adicionar máscaras de entrada em Campos de texto utilizando a biblioteca jQuery.

Para a melhor compreensão do leitor, vamos utilizar a versão traduzida em nosso idioma (Português do Brasil), tanto do NetBeans como do VWP, apoiando a tradução do programa.

Antes de começar

Como em outros artigos de uso do NetBeans IDE, é importante que os leitores tenham conhecimento em Java, uma vez que o Visual Web gera aplicações nesta linguagem. Outro detalhe importante será no conhecimento de Java para o desenvolvimento de aplicações Web, principalmente no framework JavaServer Faces, que será fundamental para a melhor compreensão deste artigo.

Também será desejável um conhecimento do NetBeans IDE, uma vez que estes artigos requerem uma certa familiaridade com o programa. Alguns tutoriais e vídeos são disponibilizados no endereço oficial da IDE:

http://www.netbeans.org

Caso haja necessidade de baixar o programa, entre no endereço:

http://www.netbeans.info/downloads/index.php

Além do NetBeans, será necessária a instalação do Visual Web Pack, também traduzido em nosso idioma, que pode ser acessado no endereço:

http://www.netbeans.org/products/visualweb/

E baixado clicando-se no botão Download NetBeans Visual Web Pack.

Iniciando um projeto novo no Visual Web Pack

Com a instalação do NetBeans e do Visual Web Pack, podemos iniciar a criação de um projeto. Vá ao menu Arquivo e clique no item Novo Projeto (Ctrl+Shift+N).

Figura 1

Na caixa de diálogo Novo Projeto, em Categorias selecione o item Web. Selecione em Aplicativo Visual Web em Projetos e clique no botão Próximo.

Figura 2

Na segunda e última etapa do assistente, digite MascaraComVWP no campo Nome do Projeto. Altere também para o nome do pacote Java que vai utilizar no projeto no campo Pacote Java padrão.

Para mais detalhes sobre a criação do projeto com Visual Web, recomendo uma leitura sobre a primeira parte do artigo também publicado no Linha de Código, sobre criação de um sistema administrativo com Servlet Filter e Visual Web Pack no seguinte endereço:

http://www.linhadecodigo.com.br/Artigo.aspx?id=1390

Criando a tela da aplicação

A aplicação em questão não será funcional, uma vez que apenas adicionaremos a capacidade de ter nos campos de texto uma máscara de entrada.

Através dos componentes Rótulo e Campo de texto, ambos encontrados na janela Paleta, crie uma tela similar à mostrada na Figura 3 a seguir:

Figura 3

Selecione cada um dos campos de texto e altere na janela Propriedades o id como mostrado na Tabela 1 a seguir:

Tabela 1

Campo de texto para...	Propriedade id
Data	data
Telefone	telefone
CEP	cep

Baixando o jQuery e o Masked Input Plugin

Para adicionar a máscara de entrada, vamos utilizar um plugin do jQuery chamado Masked Input Plugin.

Como o plugin depende do jQuery, temos que fazer download deste também.

Para quem não conhece, o jQuery é uma biblioteca que facilita o desenvolvimento com JavaScript. Esta biblioteca chama a atenção dos desenvolvedores devido ao seu tamanho (muito compacto) e simplicidade no desenvolvimento de aplicações com JavaScript, principalmente para quem utiliza AJAX.

A linguagem de expressão básica usada por jQuery é uma mistura de seletores CSS (CSS Níveis 1–3) e expressões XPath simples. Com esta mistura, é possível achar elementos específicos ou grupos de elementos sem manipular o DOM diretamente.

Isso significa que se você precisa pegar um valor de um campo de texto em um formulário, cujo atributo id seja telefone, em jQuery você faria assim:

$("#telefone).val( );

Se o jQuery, deveríamos fazer assim:

var tel = document.getElementById("telefone");

tel.value;

Essa é a maior vantagem do jQuery, a redução excessiva de código. Perceba que houve uma redução considerável em relação à manipulação sem a biblioteca, através de DOM. Há muito mais em jQuery que o faz atraente. Deixaremos para dar mais detalhes em um próximo artigo, somente sobre o assunto.

A segunda maior vantagem do jQuery é com certeza seu tamanho, que em relação a outras bibliotecas JavaScript, incluindo AJAX, é muito pequeno.

Baixando o jQuery

Entrem no site do jQuery para baixar o arquivo:

http://jquery.com/

Para baixar no site, você possui três opções:

Figura 4

Observe que a diferença sempre está em seu tamanho, que varia de acordo com a sua compressão.

Para o exemplo proposto neste artigo, vamos utilizar o download do arquivo que utiliza a compressão com Packer (indicada no site como Packed), um compressor JavaScript que minimiza o tamanho da biblioteca.

Baixando o Masked Input Plugin

Para baixar este plugin, entrem no site oficial:

http://digitalbush.com/projects/masked-input-plugin

E no final da página encontrem o item Downloads:

Figura 5

Adicionando os arquivos JavaScript ao projeto

Concluído os downloads, temos que adicionar estes arquivos ao projeto. Com este selecionado, vá ao menu Arquivo, em Adicionar item existente e clique na opção Outros (todos os arquivos).

Figura 6

Adicione um arquivo e repetindo a operação, o outro.

Após adicionar, vamos mover de lugar estes arquivos, uma vez que o NetBeans, nesta versão, adicionou os dois no pacote de sua aplicação.

Primeiro expanda os itens Páginas da Web > resources. Veja que neste diretório se encontra um arquivo CSS. É neste diretório que iremos mover os arquivos JavaScript adicionados no projeto.

Expanda os itens Pacotes de origem > NOME_DO_SEU_PACOTE (na Figura 7 representado por br.com.integrator) e pressionando a tecla <SHIFT> selecione os dois itens, sem soltá-la, arraste para resources.

Figura 7

Criando o JavaScript para mascarar os campos

Para que tenhamos as máscaras devidamente configuradas em cada um dos campos adicionados na sua página Web, vamos ter que criar um terceiro JavaScript, configurando-o de acordo com o suporte dado na página oficial do plugin Masked Input Plugin.

Clique com o direito do mouse sobre o projeto e selecione Novo > Arquivo /Pasta. Na caixa de diálogo, em Categoria selecione Outro e em Tipos de Arquivo selecione Arquivo Vazio. Clique no botão Próximo.

Na segunda etapa, em Nome do Arquivo digite mascara.js. No campo Pasta, clique no botão Procurar e expanda web e selecione resources clicando em Selecionar Pasta em seguida. Clique em Finalizar para concluir.

Figura 8

Na janela aberta do arquivo mascara.js adicione o código mostrado a seguir:

$(document).ready(function() {

jQuery(function($){

$("#form1\\:telefone").mask("(999) 9999-9999");

$("#form1\\:data").mask("99/99/9999");

$("#form1\\:cep").mask("99999-999");

});

Para melhor entendimento, a parte inicial:

$(document).ready(function() {...

Representa ao carregar o documento. Ou seja, ao carregar a página, então este script é executado. Nada mais obvio, uma vez que os campos do formulário, que serão renderizados pelo framework JavaServer Faces, precisarão ser carregados antes de adicionar funcionalidades JavaScript a eles.

Com jQuery, procuramos no documento os campos com os respectivos atributos id, gerados pelo JavaServer Faces após sua renderização. Por exemplo, para o campo Telefone, onde você digitou este mesmo nome para a propriedade id (em minúsculo), no princípio deste artigo, o JSF gerará um atributo HTML id: form1:telefone. Ou seja, como você não mudou o id do seu formulário, o Visual Web o criou automaticamente com o nome de form1. O JavaServer Faces por sua vez, na renderização, une o nome do formulário ao nome do campo.

$("#form1\\:telefone")

Como o jQuery considera os dois pontos “:” caractere especial, temos que adicionar dois “escapes” (duas barras invertidas), conforme pode ser visto em detalhe no seguinte endereço, no item Escape Selectors:

http://jquery.com/blog/2007/07/01/jquery-113-800-faster-still-20kb/

Para mascarar o campo telefone, seguindo as orientações do plugin, o que não deixa de ser muito simples, adicione o método mask com a string de mascara que vai usar, como no caso:

$("#form1\\:telefone").mask("(999) 9999-9999");

Onde o número 9 representa somente caracteres numéricos.

Adicionando os arquivos JavaScript na página

Antes de executar a página, precisamos adicionar os arquivos JavaScripts. Voltando a Page1, no Design, pegue o item Script, na janela Paleta em Avançado e arraste para sua página.

Figura 9

Observe que na janela Esboço surgirá script1, em head1. Selecione-o.

Figura 10

Na janela Propriedades, em url, clique no botão com três pontos. Selecione na caixa de diálogo url o arquivo jquery-1.2.1.pack.js .

Figura 11

Execute as mesmas operações, adicionando mais dois scripts e configurando-os para os arquivos jquery.maskedinput-1.0.js e mascara.js respectivamente. Ao final, você possuirá na janela Esboço os scripts adicionados como mostra a Figura 12:

Figura 12

Testando a aplicação

Execute a aplicação com F6. Observe que, ao tentar digitar nos campos, automaticamente surgirá a máscara de entrada, como ocorre em aplicações desktop que possuem este recurso. Caso tente digitar algo diferente do indicado, como por exemplo, letras, a máscara impedirá.

Figura 13

Criem outras máscaras e testem, adicionando também outras características exibidas no site do plugin Masked Input Plugin.

Até a próxima, sucesso meus amigos e bons códigos.

Referências

Em inglês e Português sobre o Visual Web Pack

Site NetBeans: http://www.netbeans.org/kb/55/vwp-index_pt_BR.html?1

Em inglês sobre jQuery

Site oficial: http://jquery.com/

Em português sobre jQuery

Comunidade brasileira:

http://jquerybrasil.com/

Introdução ao jQuery:

http://i18n.2kminterativa.com.br/jquery/jquery-getting-started-pt_br.html

Tradução do plugin Masked Input Plugin:

http://jquerybrasil.com/campo_de_formulario_com_mascara_jquery/

Em livro, para aprender Visual Web Pack em Português

Caso precisem de mais detalhes, ao final dos artigos, sobre o NetBeans, no desenvolvimento de aplicações Web, há também o livro de minha autoria, Desenvolvendo Aplicações Web com NetBeans IDE 5.5, com apoio do DFJUG, que pode ser encontrado aqui na Linha de Código, no seguinte endereço:

http://www.linhadecodigo.com.br/Livro.aspx?id=2836

Para aprender Java para desenvolvimento Web, incluindo JavaServer Faces, também de minha autoria, encontrado aqui no Linha de Código:

Desenvolvendo Aplicações Web com JSP, SERVLETS, JAVASERVER FACES, HIBERNATE, EJB 3 PERSISTENCE E AJAX

http://www.linhadecodigo.com.br/Livro.aspx?id=2811