Visual Web Pack

Utilizando Visual Web Pack para criar uma área administrativa
Conteúdo
Sobre o Tutorial de artigos ...............................................................................................3
Antes de começar ............................................................................................................3
Primeira Parte – Criando o projeto e a área administrativa ...............................................4
Iniciando um projeto com Visual Web Pack.............................................................................. 4
Criando o design de entrada da área administrativa ................................................................ 6
Adicionando as páginas da área administrativa...................................................................... 11
Segunda Parte – Criando a navegação ............................................................................ 14
Criando a navegação das páginas .......................................................................................... 14
Terceira Parte – O Banco de dados e a tabela.................................................................. 16
Criando o banco de dados no MySQL ..................................................................................... 16
Adicionando um usuário ao banco de dados no MySQL......................................................... 17
Criando a tabela no banco de dados ....................................................................................... 17
Quarta Parte – Criando a query e verificando o usuário................................................... 21
Criando a query para verificar o usuário e senha ................................................................... 21
Adicionando código ao botão Logar ....................................................................................... 24
Quinta Parte – Criando um Servlet Filter, configurando, rodando e criando a saída da área
administrativa ............................................................................................................... 25
Criando o Filtro .................................................................................................................... 25
A configuração..................................................................................................................... 28
Rodando a aplicação ........................................................................................................... 30
Criando o código para o logout do sistema ........................................................................ 30
Exibindo uma mensagem de erro disparada pelo Filtro ..................................................... 31
www.integrator.com.br 1
Referências .............................................................................................................................. 35
Em inglês e Português ......................................................................................................... 35
Para aprender a utilizar o Visual Web Pack ........................................................................ 35
Sobre o Tutorial de artigos

Este Tutorial são os cinco artigos que serão publicados em outros sites.
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 com banco de dados, criar a navegação por entre
as páginas visualmente e na utilização de 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 vocês 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 deste artigo.
Também será desejável um conhecimento do NetBeans IDE, uma vez que este artigo requer
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.
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á compor 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 na hora de 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.
Figura 23
Segunda Parte – Criando a navegação

No primeiro artigo vocês criaram um projeto e fizeram as páginas que irá compor o sistema
administrativo. Neste artigo iremos criar a navegação das páginas, desde a sua entrada no
sistema até a sua saída.
Caso não tenham visto a primeira parte do artigo, recomendo lê-la antes de prosseguir.
Criando a navegação das páginas

Após a criação das páginas administrativas, vamos criar a navegação das páginas, passando da
área de “login” até o seu “logout”.
No Design de qualquer uma das páginas criadas, cliquem com o direito do mouse. Ao surgir o
menu de contexto, clique no último item chamado de Navegação de página.
Inicialmente teremos apenas as páginas que criamos, sem ligação entre elas, como mostra a
Figura 24 a seguir.
Figura 24
Cliquem sobre a página Page1.jsp (a página de login). A página será ampliada, exibindo seus
componentes. Arrastem do componente button1 para a página admin/Page1.jsp. Observem
que uma linha surgiu, indicando que estas páginas contêm uma ligação. Quem conhece
JavaServer Faces, sabe que estamos configurando as regras de navegação em um XML, que no
caso do Visual Web Pack, está em um arquivo separado do faces-config.xml, chamado de
navigation.xml (que pode ser visto expandindo WEB-INF em Páginas da Web na janela
Projetos).
Figura 25
Executando o mesmo processo, vamos arrastar do componente hyperlink1, da página

admin/Page1.jsp para a página admin/Page2.jsp.
Figura 26
Da página admin/Page2.jsp, temos dois links. O link que demos o nome de logout será usado
para chamar a página Page1.jsp. O outro link, iremos chamar a página admin/Page1.jsp.
Cada elemento de navegação possui uma string, que é automaticamente adicionada. Perceba
que temos case1, case2 e por ai vai, dependendo do número de casos que possuímos na
construção de uma navegação. Evidentemente que isso pode confundir um desenvolvedor
iniciante, além de ser muito desorganizado, tendo todos o mesmo nome. Por isso, entre as
páginas Page1.jsp e admin/Page1.jsp cliquem na linha de navegação. Observem que na janela
Propriedades temos uma propriedade chamada Resultado, ao qual está escrito case1. Alterem
para logado.
Na linha que liga as páginas admin/Page2.jsp à Page1.jsp, altere para logout.
Figura 27
Terceira Parte – O Banco de dados e a tabela

No primeiro artigo vocês criaram um projeto e fizeram as páginas que irá compor o sistema.
Na segunda parte ligaram as páginas, uma nas outras criando a navegabilidade. Agora, iremos
criar o banco de dados que será utilizado pelo sistema, além da tabela de usuário para efetuar
o login.
Criando o banco de dados no MySQL

Para criar o banco de dados no MySQL, vamos ter que entrar em sua área administrativa. Caso
vocês estejam utilizando o sistema operacional Windows e executaram a instalação padrão,
existe a chamada ao prompt de comando no menu Iniciar que o leva a área administrativa.
Neste caso, iremos nos logar como root, o padrão e digitaremos apenas a senha administrativa
pedida na instalação.
Caso estejam utilizando o sistema operacional Linux, entrem no terminal e digitem a

seqüência:
mysql –u root –p
Pressionem <ENTER> e digitem a senha, caso haja uma.
Assim que estivermos logado ao terminal do mysql, vamos criar o banco de dados, através do
comando:
CREATE DATABASE administrator;
Ao pressionar <ENTER> vocês criarão o banco de dados chamado administrator. Caso já

tenham este nome em algum banco de dados usado, outro poderá ser utilizado.
Adicionando um usuário ao banco de dados no MySQL

Além de criar o banco de dados, precisaremos criar um usuário. Ainda no terminal do MySQL,
digitem a seqüência a seguir:
GRANT ALL ON administrator.* TO linhadecodigo IDENTIFIED BY '1234';
Este comando dará plenos poderes administrativos ao usuário chamado “linhadecodigo” com
a senha “1234”.
Para que este usuário seja confirmado, teremos que usar a seguinte seqüência:
FLUSH PRIVILEGES;
Criando a tabela no banco de dados

Primeiramente precisaremos adicionar o driver do MySQL ao seu Netbeans. Na janela
Execução, cliquem com o direito do mouse sobre Drivers, em Banco de Dados e selecionem
Novo Driver.
Figura 28
Na caixa de diálogo Novo Driver JDBC, cliquem no botão Adicionar. Selecionem o arquivo .jar
baixado do driver JDBC do MySQL e confirmem.
Figura 29
Com o driver Connector/J adicionado ao NetBeans, podemos nos conectar ao banco de dados
e criar a tabela necessária para efetuar o login e senha.
Ainda na janela Execução, clique com o direito do mouse sobre Banco de Dados. No menu de
contexto selecionem Nova Conexão.
Figura 30
Na caixa de diálogo Nova Conexão de Banco de Dados, selecionem no campo Nome o

Connector/J.
Na URL do Banco de Dados completem como mostra a Figura a seguir:
Figura 31
Digite em Nome de Usuário e Senha o usuário e senha adicionados anteriormente na criação

do banco de dados administrator.
Marquem a opção Lembrar senha durante esta sessão e confirmem. Observem que a caixa de
diálogo mudará o foco para a guia Avançado, contendo um pequeno texto na parte inferior
dizendo: Conexão estabelecida.
Neste momento, podemos criar nossa tabela administrativa.
Expandindo a conexão criada, na janela Execução, em Tabelas, clique com o direito do mouse
e selecione Executar Comando.
Figura 32
Na janela Comando SQL 1, digite o comando SQL mostrado na Figura a seguir e depois clique
no botão Executar SQL.
Figura 33
Observem na barra de status do NetBeans que o texto Expressões SQL executadas com
sucesso surgirá, indicando que a tabela foi criada.
Caso a tabela não apareça na janela Execução, em Tabelas cliquem com o direito do mouse e
selecionem no menu de contexto o item Atualizar.
Figura 34
Fazendo da mesma forma que usamos para criar a tabela, vamos adicionar um usuário e uma
senha. Em Executar Comando digite a SQL mostrada a seguir:
INSERT INTO usuarios (login, password) VALUES(‘linhadecodigo’,’123’);
Figura 35
Caso desejem ver os dados inseridos na tabela, cliquem novamente com o direito do mouse
sobre a tabela usuários, na janela Execução e selecionem Visualizar Dados.
Uma query SELECT será executada, exibindo na parte inferior da janela os resultados
encontrados.
Figura 36
Agora que temos o usuário, estamos prontos para codificar a aplicação.
Quarta Parte – Criando a query e verificando o usuário

Nesta etapa, criaremos a query que será utilizada para verificar se o login utilizado pertence a
um usuário da área administrativa da aplicação, passando pela verificação da senha, liberando
a entrada no sistema. Em seguida adicionaremos código ao botão Logar para que o usuário
possa entrar na área administrativa.
Criando a query para verificar o usuário e senha

Para compreender o que iremos desenvolver, observem a Figura a seguir e siga os três
passos:
1 - Com a página Page1.jsp aberta, arraste da janela Execução a tabela usuarios para o Design.
2 – Observem que na janela Esboço surgirá um componente chamado de

usuariosDataProvider.
3 – Dentro de SessionBean1 aparecerá um componente chamado de usuariosRowSet,

contendo uma query da tabela usuarios.
Figura 37
Agora que a classe SessionBean1 possui acesso ao banco de dados e a tabela usuarios, iremos
alterá-la para que um usuário possa ser selecionado. Em usuariosRowSet, na janela Esboço,
vamos dar um duplo clique.
Ao surgir a janela Query Editor, no segundo quadro, na estrutura da tabela usuarios, clique
com o direito do mouse sobre a linha da coluna login e selecione no menu de contexto o item
Adicionar critérios de consulta.
Figura 38
Na caixa de diálogo Adicionar critérios de consulta, mantenha em Comparação o item

“=Iguais” e marque Parâmetro, mantendo da forma como está. Confirme.
Figura 39
Observe que um critério será adicionado, onde o parâmetro de entrada é representado pelo
sinal de interrogação “?”. Deixaremos as explicações técnicas quanto ao que está ocorrendo
para outra oportunidade. O importante é que agora temos a query como precisamos para
verificar o login e a senha.
Figura 40
IMPORTANTE: Quando estivermos utilizando o Visual Web Pack com o Apache Tomcat
embutido, adicione o driver JDBC do seu banco de dados, no caso do MySQL no seguinte local
da instalação do NetBeans:
$LOCAL_INSTALADO/netbeans-5.5/enterprise3/apache-tomcat-5.5.17/common/lib
Adicionando código ao botão Logar

Primeiramente vamos adicionar o código necessário para logar o sistema. Na Page1.jsp, na
área de login, comecem com um duplo clique no botão Logar.
Observem que o Visual Web Pack já adiciona um método público de retorno String, contendo
inclusive a string “logado” colocada na navegação.
Vamos adicionar o código mostrado a seguir para que ao clicar no botão, o usuário e a senha
sejam verificados pelo banco de dados, retornando ou não o acesso a área administrativa.
public String button1_action() {
try {
//captura o login passado pelo campo usuario
getSessionBean1().getUsuariosRowSet().
setObject(1,usuario.getText());
//reinicia o Data Provider

//apagando dados cacheados anteriores
usuariosDataProvider.refresh();
//verifica se a senha está correta, evitando SQL Injection

if(senha.getText().equals((String)
usuariosDataProvider.getValue("usuarios.password"))){
//captura a sessão do contexto criado

//pelo JavaServer Faces do VWP
FacesContext fc = FacesContext.getCurrentInstance();
HttpSession session =
(HttpSession)fc.getExternalContext().getSession(false);
//cria uma sessão contendo o nome de usuario chamada logado

session.setAttribute("logado", usuario.getText() );
//redireciona para a área administrativa
return "logado";
}
} catch (Exception ex) {

//exibe a mensagem de login ou senha inválidos
error("Login ou senha inválidos");
}
return "";
}
Este código funciona perfeitamente, e em um teste você pode “logar” no sistema. O problema
maior está nas áreas administrativas, que exigem uma segurança maior. Quando você está
dentro da área administrativa, o navegador vai armazenando os endereços das páginas na

barra de endereços. Qualquer pessoa depois, poderá acessar estas áreas sem a necessidade
de logar, simplesmente acessando a área através do seu endereço direto.
Quinta Parte – Criando um Servlet Filter, configurando, rodando e

criando a saída da área administrativa
Na quinta etapa, vamos criar um Filtro com a API Servlet, que gerenciará se o usuário está ou
não logado, configuraremos suas características, rodaremos a aplicação e por último
adicionaremos a “ação” de “logout” na página.
Criando o Filtro
Na etapa anterior, vimos que já podemos entrar na área administrativa, uma vez que o botão
Logar agora possui o código necessário para verificar o usuário e a senha. Mas infelizmente,
também estamos sabendo que não há segurança alguma nas áreas administrativas, o que
acarretará em uma possível invasão.
Para evitar isso, devemos criar uma sessão gerenciada. A especificação da API Servlet possui
uma forma de gerenciar esta situação através da API Servlet Filter. É a melhor maneira de
redirecionar um usuário quando a sessão está expirada. Claro que isso também evita a entrada
direta pelo endereço no navegador.
No código utilizado pelo botão Logar, na etapa anterior, nos criamos uma sessão chamada de
“logado”, que possui o login do usuário como valor.

É através deste atributo de sessão que vamos nos basear para verificar se há ou não um
usuário logado no sistema administrativo.
Para criar um filtro, cliquem com o botão direito do mouse sobre o projeto. Selecionem no
menu de contexto o item Novo e cliquem em Arquivo/Pasta.
Na caixa de diálogo Novo Arquivo, selecione em Categorias o item Visual Web e Filtro em
Tipos de Arquivo. Cliquem no botão Próximo.
Figura 41
Na segunda etapa da criação do Filtro, digite FiltroAdministrativo no campo Nome da Classe.

Selecione no campo Pacote o pacote meupacote.admin. Clique no botão Próximo.
Figura 42
Na terceira etapa do assistente, selecione em Nome do Filtro, o item FiltroAdministrativo e

clique no botão Editar.
Figura 43
Na caixa de diálogo Mapeamento do Filtro, em URL, adicione /faces/admin/*. Perceba que

estamos adicionando um filtro de segurança em um diretório chamado admin com tudo que
há dentro. Confirme no botão OK. E em seguida, confirme na caixa de diálogo Novo Arquivo
no botão Finalizar.
Figura 44
O NetBeans criará uma classe, mapeada inclusive por seu deployment descriptor (web.xml),
chamada de FiltroAdministrativo. Altere no trecho a seguir o código:
...
public void doFilter(ServletRequest request,
ServletResponse response,
FilterChain chain)
throws IOException, ServletException {
HttpSession session = ((HttpServletRequest)request).getSession();
String logado = (String)session.getAttribute("logado");
//verifica se logado não existe

if(logado==null){
//envia uma mensagem caso o usuário

//tente entrar em alguma área administrativa
//sem estar logar
session.setAttribute("msg","Efetue o login no sistema");
//redireciona para a página de login

((HttpServletResponse)response).sendRedirect("../Page1.jsp");
}else{
chain.doFilter(request, response);
}
}
...
O Filtro Servlet faz todos seus processos no método de doFilter, por esta razão fora nele que
nós adicionamos o código para que seja verificada a sessão chamada de ”logado”.
Caso a sessão não exista, ela retorna um valor null. Ocorrendo isso, o método sendRedirect é
chamado e a página de login e senha (Page1.jsp) é mostrada.
A configuração
Após criar o Filtro Servlet, será necessário configurarmos o tempo que a sessão permanecerá e
em que local será criada.
Na janela Projetos, expanda o item Arquivos de Configuração e dê um duplo clique em

web.xml.
Em Geral, no deployment descriptor, aberto no NetBeans, altere o Tempo-limite da Sessão

adicionando o número 30, que equivale a 30 minutos e tempo da sessão.
Expanda Parâmetros do Contexto e selecione o primeiro parâmetro, chamado de

javax.faces.STATE_SAVING_METHOD. Clique no botão Editar, logo abaixo.
Figura 45
Na caixa de diálogo Editar Parâmetro do Contexto, altere para client no campo Valor do
Parâmetro e confirme no botão OK.
Figura 46
Quando o estado da sessão é salvo no lado cliente, o JavaServer Faces cria um campo oculto
na página, transmitindo assim a sessão de um lado para o outro.
Salvem todas as alterações.
Rodando a aplicação
Execute a aplicação através do botão Executar o Projeto Principal ou pelo atalho F6.
Observe que se tentarmos entrar com um login e senha inválidos, haverá uma mensagem de
erro. O mesmo ocorre caso não seja preenchido nada em um dos dois campos ou nos dois ao
mesmo tempo.
Figura 47
Quando logar, você tem livre acesso a área administrativa. Inclusive pela barra de endereços.
Criando o código para o logout do sistema

O que resta agora é criar o código para remover a sessão quando clicarmos no link “Logout”.
Dêem um duplo clique no link criado na admin/Page2.jsp.
Figura 48
Adicionem o código mostrado a seguir:
public String logout_action() {

//expira a sessão
session.invalidate();
return "logout";
Com o método invalidade, sua sessão acaba e faz com que o usuário tenha que se logar
novamente.
Exibindo uma mensagem de erro disparada pelo Filtro

Quando o usuário estiver tentando entrar em uma área administrativa, diretamente pela barra
de endereços, não só podemos redirecioná-lo, como está ocorrendo atualmente, mas também
capturar a mensagem de erro lançada pelo Filtro e exibi-la.
if(logado==null){
//envia uma mensagem caso o usuário

//tente entrar em alguma área administrativa
//sem estar logar
session.setAttribute("msg","Efetue o login no sistema");
Voltando a Page1.jsp, na entrada de login e senha, clique no terceiro botão, Java, na parte
superior.
No método prerender e adicionem o código mostrado a seguir:

public void prerender() {
//exibe a mensagem caso o usuário tente entrar na área

//administrativa sem se logar
(HttpSession) fc.getExternalContext().getSession(false);
String msg = (String)session.getAttribute("msg");
if(msg!=null)
error(msg);
}
Salve e rode novamente a aplicação. Se tentarmos entrar em uma área protegida do sistema,
uma mensagem surgirá, avisando do problema.
Figura 49
E para que, esta mensagem não fique persistente:
Figura 50
Volte ao código do botão Logar e adicione o trecho mostrado a seguir:

//caso a sessão msg esteja com valor, a remove
if(session.getAttribute("msg")!=null)
session.removeAttribute("msg");
Com mais detalhes onde será posicionado:
...
if(senha.getText().equals((String)
usuariosDataProvider.getValue("usuarios.password"))){
//captura a sessão do contexto criado

//pelo JavaServer Faces do VWP

//caso a sessão msg esteja com valor, a remove

if(session.getAttribute("msg")!=null)
session.removeAttribute("msg");
//redireciona para a área administrativa

return "logado";
}
...
Referências
Em inglês e Português
http://www.netbeans.org/kb/55/vwp-index_pt_BR.html?1
Para aprender a utilizar o Visual Web Pack

Desenvolvendo aplicações Web com NetBeans IDE 5.5 – Edson Gonçalves – Editora Ciência
Moderna - 2007

Visual Web Pack

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Visual Web Pack

Enviado por

Direitos autorais:

Formatos disponíveis

Utilizando Visual Web Pack para criar uma área administrativa

Sobre o Tutorial de artigos ...............................................................................................3

Antes de começar ............................................................................................................3

Primeira Parte – Criando o projeto e a área administrativa ...............................................4

Iniciando um projeto com Visual Web Pack.............................................................................. 4

Criando o design de entrada da área administrativa ................................................................ 6

Adicionando as páginas da área administrativa...................................................................... 11

Segunda Parte – Criando a navegação ............................................................................ 14

Criando a navegação das páginas .......................................................................................... 14

Terceira Parte – O Banco de dados e a tabela.................................................................. 16

Criando o banco de dados no MySQL ..................................................................................... 16

Adicionando um usuário ao banco de dados no MySQL......................................................... 17

Criando a tabela no banco de dados ....................................................................................... 17

Quarta Parte – Criando a query e verificando o usuário................................................... 21

Criando a query para verificar o usuário e senha ................................................................... 21

Adicionando código ao botão Logar ....................................................................................... 24

Criando o Filtro .................................................................................................................... 25

Rodando a aplicação ........................................................................................................... 30

Criando o código para o logout do sistema ........................................................................ 30

Exibindo uma mensagem de erro disparada pelo Filtro ..................................................... 31

Em inglês e Português ......................................................................................................... 35

Para aprender a utilizar o Visual Web Pack ........................................................................ 35

Sobre o Tutorial de artigos

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

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

Além do banco de dados, também utilizaremos a ponte JDBC chamada Connector/J,

Primeira Parte – Criando o projeto e a área administrativa

Iniciando um projeto com Visual Web Pack

Na caixa de diálogo Novo Projeto, em Categorias selecione o item Web. Selecione em

Na segunda e última etapa do assistente, digite SistemaAdministrativo no campo Nome do

Criando o design de entrada da área administrativa

Desta vez o campo de texto ficará abaixo do rótulo adicionado.

Até o momento, possuiremos apenas os itens necessários para o login do usuário.

Nossa página deverá se parecer com a Figura 13 mostrada a seguir:

Selecionem o Painel de grade que adicionamos ao design da página e na janela Propriedades

Adicionando as páginas da área administrativa

Segunda Parte – Criando a navegação

Criando a navegação das páginas

Executando o mesmo processo, vamos arrastar do componente hyperlink1, da página

Na linha que liga as páginas admin/Page2.jsp à Page1.jsp, altere para logout.

Terceira Parte – O Banco de dados e a tabela

Criando o banco de dados no MySQL

Caso estejam utilizando o sistema operacional Linux, entrem no terminal e digitem a

Pressionem <ENTER> e digitem a senha, caso haja uma.

CREATE DATABASE administrator;

Ao pressionar <ENTER> vocês criarão o banco de dados chamado administrator. Caso já

Adicionando um usuário ao banco de dados no MySQL

GRANT ALL ON administrator.* TO linhadecodigo IDENTIFIED BY '1234';

Criando a tabela no banco de dados

Na caixa de diálogo Nova Conexão de Banco de Dados, selecionem no campo Nome o

Na URL do Banco de Dados completem como mostra a Figura a seguir:

Digite em Nome de Usuário e Senha o usuário e senha adicionados anteriormente na criação

Neste momento, podemos criar nossa tabela administrativa.

INSERT INTO usuarios (login, password) VALUES(‘linhadecodigo’,’123’);

Agora que temos o usuário, estamos prontos para codificar a aplicação.

Quarta Parte – Criando a query e verificando o usuário

Criando a query para verificar o usuário e senha

2 – Observem que na janela Esboço surgirá um componente chamado de

3 – Dentro de SessionBean1 aparecerá um componente chamado de usuariosRowSet,

Na caixa de diálogo Adicionar critérios de consulta, mantenha em Comparação o item

Adicionando código ao botão Logar

public String button1_action() {

//reinicia o Data Provider