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.