Desenvolvimento - Java
NetBeans IDE: Visual Web Pack - parte 1
Ao longo destes artigos, vocês irão aprender a utilizar o Visual Web Pack (VWP), atualmente um pacote separado do NetBeans na versão 5.5.1, para desenvolver uma área administrativa, passo a passo, com login e senha de acesso à banco de dados, criar a navegação por entre as páginas visualmente e utilizar um recurso muito importante da API Servlet, chamada de Filtros.
por Edson GonçalvesOlá pessoal. Este é o primeiro, de uma série de artigos onde abordaremos o Visual Web Pack do NetBeans IDE.
Ao longo destes artigos, vocês irão aprender a utilizar o Visual Web Pack (VWP), atualmente um pacote separado do NetBeans na versão 5.5.1, para desenvolver uma área administrativa, passo a passo, com login e senha de acesso à banco de dados, criar a navegação por entre as páginas visualmente e utilizar um recurso muito importante da API Servlet, chamada de Filtros.
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
Será fundamental que os leitores deste artigo, e dos demais que compõem esta série, tenham conhecimento de Java, uma vez que o NetBeans desenvolve com o Visual Web Pack 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 destes artigos.
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:
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.
Além dos itens citados, teremos que utilizar o MySQL como banco de dados, que além de ser excelente, é multiplataforma, podendo ter sua versão Community Server sendo baixada no endereço:
http://www.mysql.com/downloads
Além do banco de dados, também utilizaremos a ponte JDBC chamada Connector/J, necessária para a conexão entre a aplicação e o banco de dados.
A versão que estamos usando neste artigo é a Connector/J 5.0 que pode ser baixada no endereço:
http://dev.mysql.com/downloads/connector/j/5.0.html
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/livros.asp?id=919&sub=9
Primeira Parte – Criando o projeto e a área administrativa
Neste primeiro artigo vocês irão criar um projeto, utilizando o Visual Web Pack e desenharão a área administrativa.
Iniciando um projeto com 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 SistemaAdministrativo 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.
O servidor neste caso poderá ser a sua escolha. No caso deste artigo, o container Servlet Tomcat 5.5.17, incluso na instalação da IDE fora utilizado. Para completar esta tarefa inicial, clique no botão Finalizar.
Figura 3
Criando o design de entrada da área administrativa
Assim que concluir a criação do projeto, o NetBeans exibirá uma página inicial, chamada de Page1.jsp, ao qual poderemos arrastar os componentes em um editor WYSIWYG, chamado de Design.
Para iniciarmos, vamos criar uma grade que irá organizar os componentes visuais para a entrada de login e senha. Na lateral direita de seu editor, arrastem da janela Paleta, no grupo Layout, o componente Painel de grade.
Figura 4
Aumentem sua largura para o tamanho desejado. Este componente é responsável por gerar a tag JavaServer Faces <h:panelGrid >, ao qual possui por padrão apenas uma coluna.
Figura 5
Voltando a janela Paleta arrastem do grupo Básico o componente Rótulo sobre o componente Painel de grade adicionado em seu Design.
Figura 6
O VWP abrirá uma caixa de texto com a palavra rótulo selecionada. Alterem-na para “Usuário:” e pressionem ENTER para confirmar.
Figura 7
Voltem para a janela Paleta e arrastem desta vez, sobre o Painel de grade, o componente Campo de texto.
Figura 8
Desta vez o campo de texto ficará abaixo do rótulo adicionado.
Figura 9
Com este campo selecionado, vamos voltar à janela Propriedades e alterar a propriedade id, em Geral, para usuario e marcar a opção required, no grupo Dados.
Figura 10
Quase ao fim do grupo Básico, da janela Paleta, nós encontramos o componente Mensagem. Assim como os demais componentes usados, vamos arrastá-lo para o Painel de grade.
Figura 11
Até o momento, possuiremos apenas os itens necessários para o login do usuário.
Figura 12
Fazendo o mesmo processo, nós iremos adicionar mais três componentes: Rótulo, Campo de senha e Mensagem.
No Rótulo desta vez, digitaremos “Senha:”. Iremos alterar no Campo de senha a propriedade id para senha e marcar required.
Nossa página deverá se parecer com a Figura 13 mostrada a seguir:
Figura 13
Selecionem o Painel de grade que adicionamos ao design da página e na janela Propriedades alterem a propriedade columns para 3.
Figura 14
Observem que a grade agora alterou alinhando o rótulo à caixa de texto e mensagem.
Figura 15
Pressionando as teclas Ctrl+Shift, iremos arrastar partindo do rótulo “Usuário:” para a caixa de texto usuario. Nosso cursor indicará a ligação (bind). O mesmo será feito com o rótulo “Senha:” e sua respectiva caixa de texto.
Figura 16
Assim como os rótulos, iremos ligar cada caixa de texto a sua respectiva mensagem. Pressionando as mesmas teclas Ctrl+Shift, arrastem da caixa de texto usuario para o componente de mensagem ao seu lado. Façam o mesmo com o campo senha.
Para finalizar o design, precisaremos do botão de envio. Voltem à janela Paleta e arrastem o componente Botão. Digitem “Logar” e pressionem ENTER.
Figura 17
Para finalizar, vamos adicionar uma área de mensagens, para exibir informações ao usuário quando houver problema em logar. Na janela Paleta arrastem para baixo do botão Logar o componente Grupo de mensagens.
Adicionando as páginas da área administrativa
A área administrativa ficará dentro de um diretório chamado “admin”. Na janela Projetos, vamos clicar com o direito do mouse sobre Páginas da Web e no menu de contexto, em Novo, no item Diretório.
Figura 18
Na caixa de diálogo Novo Diretório digitem admin no campo Nome da Pasta. Cliquem no botão Finalizar para concluir.
Figura 19
Voltando a janela Projetos, sobre o diretório admin, clicaremos novamente com o direito do mouse. No menu de contexto, em Novo, desta vez vamos selecionar o item Página. Se quiserem, basta deixar o nome sugerido e confirmem no botão Finalizar.
Neste caso, basta colocar um Texto estático e digitar um texto. Para aumentarmos o tamanho da fonte e outros detalhes relacionados à formatação, temos que ir a janela Propriedades e clicar no botão [...] em style.
Figura 20
Além do texto estático, vamos adicionar também um link que irá abrir uma segunda página. Na janela Painel, vamos arrastar o componente Hyperlink.
Figura 21
Podemos digitar o texto que melhor convier neste link. A formatação também é opcional.
Figura 22
Agora que temos a primeira página, vamos criar uma segunda página. Neste caso, teremos dois links. Um para voltar à primeira página da área administrativa e o segundo para efetuar logout.
No link “Logout” alterem a propriedade id para logout. Isso ajudará a nos orientar na hora de criar a navegação por entre as páginas, que será visto no próximo artigo.
Figura 23
Pronto, por enquanto é isso. No próximo artigo iremos criar a navegação por entre as páginas, partindo desde a área de login até a saída do sistema. Aguardem.
