|
Arquivo de Códigos - Página Inicial
|
| Você
está aqui:
Inicio
-> Tutoriais
-> JavaServer Faces |
|
|
Construindo um sistema de login
de usuários (passo-a-passo) usando JavaServer Faces |
1 - O que é JavaServer
Faces?
No decorrer dos últimos anos, o Java se estabeleceu
como a tecnologia de ponta para o desenvolvimento de aplicações
web. Desenvolvedores estão usando tecnologias tais como
Servlets e JSP
para desenvolver aplicações web robustas e de
escalabilidade suportada com grande sucesso. Mas,
à medida que as aplicações web se tornam
mais complexas, alguns desenvolvedores saem em busca dos bons
e velhos frameworks de interface gráfica do usuário
(GUI) com seus conjuntos de componentes ricos e poderosos e
seu modelo de desenvolvimento guiado por eventos. Servlets
e JSP têm nos servido bem, mas a natureza sem estado do
HTTP e seu modelo simples de requisição/resposta
força os desenvolvedores a travar uma guerra com os detalhes
que são gerenciados nos bastidores por frameworks GUI
tais como AWT/Swing, o framework GUI padrão para Java.
Para tornar mais fácil o desenvolvimento de
sofisticadas interfaces de usuário para aplicações
web, projetos open source e empresas comerciais desenvolveram
frameworks que se aproximam o máximo dos frameworks GUI
tradicionais. Alguns exemplos notáveis são o Barracuda,
da Enhydra, O Tapestry, da Apache, o UIX da Oracle e o JATO,
da Sun. Na primavera de 2001, um grupo Java Community Process
(JCP) foi formado com representantes da maioria destes esforços
a fim de criar um uma solução padrão que
todos os frameworks pudessem usar. O resultado é JavaServer
Faces. A versão 1.0 da especificação foi
lançada em março de 2004.
2 - O que preciso para desenvolver em JavaServer Faces?
Para desenvolver em JavaServer Faces você precisa
no mínimo de:
a) O Java Development Kit (SDK). A versão
mais recente pode ser baixada de http://www.java.sun.com.
b) Um servidor web ou container que suporte Servlet
2.5 e JavaServer Pages 2.1. Para este artigo nós usamos
o Tomcat 6.0, que pode ser baixado de http://tomcat.apache.org/download-60.cgi.
c) Uma implementação do JavaServer Faces.
A versão mais recente durante a autoria deste tutorial
é 1.2 e pode ser baixada de http://java.sun.com/javaee/javaserverfaces/download.html
O passo seguinte é criar uma aplicação
web para iniciar o projeto que vamos desenvolver. Acesse o artigo
Estrutura
básica de uma aplicação web desenvolvida
em Java se você ainda não sabe como
montar a estrutura de uma aplicação web usando
tecnologias Java. Em seguida vá ao diretório lib
da implementação JSF que você baixou e copie
todo o seu conteúdo (jsf-api.jar, jsf-impl.jar, etc)
para a pasta lib de sua aplicação web. Certifique-se
também de incluir os arquivos jstl.jar e standard.jar.
3 - Desenvolvendo o projeto proposto
Vamos botar a mão na massa agora. O que vamos desenvolver
é um sistema de login de usuários. O usuário
informará seu nome e senha e a aplicação
web verificará se os dados são válidos
e o direcionará para uma página de sucesso ou
erro. É um projeto básico, mas, se bem entendido,
abrirá as portas para o desenvolvimento de aplicações
mais complexas. Vale lembrar também que a leitura e entendimento
de todos os conceitos apresentados neste artigo servirão
de base para o entendimento dos demais.
Basicamente uma aplicação web usando JSF é
composta de páginas HTML, JSP, Servlets (se necessário),
JavaBeans, Classes de negócios e os arquivos de configuração
faces-config.xml e web.xml. Vamos começar criando o JavaBean
que nos permitirá passar os dados informados pelo usuário
da parte view (visão) da aplicação para
a parte model (modelo). Se você ainda não se sente
confortável com o modelo MVC, clique
aqui e veja nosso artigo sobre este assunto.
Segue o código para UsuarioBean:
Código para UsuarioBean.java
package estudos;
public class UsuarioBean{
private String nome;
private String senha;
public String getNome(){
return this.nome;
}
public void setNome(String no){
this.nome = no;
}
public String getSenha(){
return this.senha;
}
public void setSenha(String se){
this.senha = se;
}
public String verificarUsuario(){
if(Utilidades.isUsuarioValido(nome,
senha))
return "sucesso";
else
return "erro";
}
}
Não compile este JavaBean ainda. Antes revise-o cuidadosamente
e veja que é um JavaBean comum, ou seja, o fato de o
usarmos com JSF não adiciona nada de extraordinário
em sua estrutura. Observe agora o método verificarUsuario:
public String verificarUsuario(){
if(Utilidades.isUsuarioValido(nome, senha))
return "sucesso";
else
return "erro";
}
Aqui nós fazemos uma chamada ao método estático
isUsuarioValido da classe Utilidades. Resolvi acrescentar isso
para lembrá-lo que o código que lida com a camada
lógica de sua aplicação deve estar concentrado
em classes reutilizáveis, ou seja, a mesma classe que
usamos para autenticar um usuário em JSF pode também
ser usada com uma aplicação Swing. Sendo assim,
vamos escrever e compilar a classe Utilidades:
Código para Utilidades.java
package estudos;
public class Utilidades{
public static boolean isUsuarioValido(
String usuario, String senha){
String user = "osmar";
String pass = "1234";
if((usuario.equals(user)) &&
(senha.equals(pass)))
return true;
return false;
}
}
Veja que temos apenas um método estático que retorna
true ou false dependendo dos valores fornecidos para usuário
e senha. Aqui o nome de usuário e senha já estão
definidos. Na prática, estes valores seriam verificados
em uma base de dados. Compile esta classe e coloque-a no pasta
estudos dentro da pasta classes no diretório WEB-INF
da aplicação. Compile agora o JavaBean e coloque-o
também na pasta estudos. Veja que, na hora de compilar
o JavaBean, devemos fazer referência à classe Utilidades.
Se você estiver compilando diretamente na aplicação,
a dica abaixo poderá ajudá-lo:
javac -cp C:\Tomcat6\webapps\login\WEB-INF\classes
C:\Tomcat6\webapps\login\WEB-INF\classes\estudos\UsuarioBean.java
Pronto! Voltemos nossa atenção agora para o arquivo
web.xml (do diretório WEB-INF):
Código para web.xml
<?xml version="1.0"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">
<display-name>Login JSF</display-name>
<description>Aplicacao de login usando JSF</description>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
Este arquivo web.xml possui algumas seções
que merecem destaque. Para que uma aplicação JSF
funcione, é preciso que o Servlet Faces esteja atento
à tudo que acontece. Assim, é preciso que ele
seja iniciado juntamente com a aplicação. Isso
é feito na seção:
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
Outra ponto importante é direcionar as atividades da
aplicação para este servlet. Veja:
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
Aqui nós definimos que o servlet deverá ouvir
todas as requisições que chegarem a partir de
URLs contendo o prefixo "faces". Finalmente a seção:
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
define a página que será chamada quando acessarmos
http://localhost:8080/login. Assim, vamos criar esta página
agora:
Código para index.html
<html>
<head>
<meta http-equiv="Refresh" content= "0; URL=login.faces"/>
<title>Login JSF</title>
</head>
<body>
<h3>A aplicação já vai ser iniciada.
Aguarde.</h3>
</body>
</html>
Salve esta página como index.html na
raiz da aplicação. Veja que tudo que fazemos aqui
é direcionar o navegador para a URL login.faces.
Hora de criarmos o arquivo faces-config.xml
(que deverá estar no diretório WEB-INF):
Código para faces-config.xml
<?xml version="1.0"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
version="1.2">
<managed-bean>
<managed-bean-name>usuarioBean</managed-bean-name>
<managed-bean-class>estudos.UsuarioBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
<navigation-rule>
<from-view-id>/login.jsp</from-view-id>
<navigation-case>
<from-outcome>sucesso</from-outcome>
<to-view-id>/sucesso.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>erro</from-outcome>
<to-view-id>/erro.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
Este arquivo contém seções importantes
e que devem ser bem entendidas. Começando com:
<managed-bean>
<managed-bean-name>usuarioBean</managed-bean-name>
<managed-bean-class>estudos.UsuarioBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
Nesta seção nós definimos o nome do JavaBean
usado para armazenar o nome de usuário e senha. Veja
que fornecemos também o nome da classe e seu pacote,
assim como o escopo do bean. O valor session indica que o JavaBean
estará disponível durante toda a sessão
do usuário.
Em seguida temos as regras de navegação. É
aqui que JSF mostra todo o seu poder. Você ainda se lembra
do método verificarUsuario da classe UsuarioBean?
public String verificarUsuario(){
if(Utilidades.isUsuarioValido(nome, senha))
return "sucesso";
else
return "erro";
}
Este método retorna uma string que será usada
para definir a navegação pela aplicação.
Se o valor retornado for "sucesso", podemos ver nas
regras de navegação que o usuário será
direcionado para a página sucesso.jsp. Se o retorno for
"erro", o usuário será direcionado para
erro.jsp.
Vamos agora escrever a página de login:
Código para login.jsp
<html>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"
%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"
%>
<f:view>
<head>
<title>Login de Usuários
Usando JSF</title>
</head>
<body>
<h:form>
<h3>Por favor informe seu nome
e senha:</h3>
<table>
<tr>
<td>Nome:</td>
<td><h:inputText
value="#{usuarioBean.nome}"/></td>
</tr>
<tr>
<td>Senha:</td>
<td><h:inputSecret
value="#{usuarioBean.senha}"/></td>
</tr>
<tr>
<td colspan="2"><h:commandButton
value="Login"
action="#{usuarioBean.verificarUsuario}"/></td>
</tr>
</table>
</h:form>
</body>
</f:view>
</html>
Se este é realmente seu primeiro contato com JavaServer
Faces, algumas observações aqui se fazem necessárias.
As linhas:
<%@ taglib uri="http://java.sun.com/jsf/core"
prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"
%>
importam as bibliotecas de tags JSF core e html com os prefixos
"f" e "h", respectivamente. A biblioteca
core contém as tags que independem da tecnologia usada
para renderizar o aspecto visual da aplicação.
A biblioteca html, por sua vez, contém as tags usadas
para gerar marcação HTML.
Todas as tags JSF devem estar contidas em uma tag f:view. A
tag h:form denota um formulário HTML. Dentro do formulário
temos as tags que representam os controles. Veja a caixa de
texto usada para informar o nome do usuário:
<h:inputText value="#{usuarioBean.nome}"/>
Observe que a propriedade value da caixa de texto está
amarrada à propriedade nome do JavaBean usuarioBean.
O mesmo ocorre com a caixa de senha:
<h:inputSecret value="#{usuarioBean.senha}"/>
O botão de envio do formulário está amarrado
ao método verificarUsuario do JavaBean:
<h:commandButton
value="Login" action="#{usuarioBean.verificarUsuario}"/>
Quando o botão é clicado, as propriedades do JavaBean
é atualizado de acordo com os valores dos campos e o
método verificarUsuario é chamado. Ele retornará
uma string que será comparada com as regras de navegação
no arquivo faces-config.xml. Dessa forma o usuário será
enviado a uma página de sucesso ou erro. Veja agora o
código para a página de sucesso:
Código para sucesso.jsp:
<html>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"
%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"
%>
<f:view>
<head>
<title>Login de Usuários
Usando JSF</title>
</head>
<body>
<h:form>
<h3>
<h:outputText
value="#{usuarioBean.nome}"/>,
seu
login foi efetuado com sucesso!
</h3>
</h:form>
</body>
</f:view>
</html>
Veja que aqui nós usamos a tag h:outputText para exibir
o nome do usuário:
<h:outputText value="#{usuarioBean.nome}"/>
Isso é perfeitamente possível, uma vez que o bean
usuarioBean está na sessão e pode ser acessado
a partir de qualquer página da aplicação.
Veja agora o código para erro.jsp:
Código para erro.jsp:
<html>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"
%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"
%>
<f:view>
<head>
<title>Sistema de Login de Usuários</title>
</head>
<body>
<h:form>
<h3>Nome de usuário
ou senha não confere!</h3>
</h:form>
</body>
</f:view>
</html>
Veja que está é um página bem simples.
Nem precisávamos da declaração das bibliotecas
de tags. Mas, vamos deixar assim mesmo.
Pronto! A aplicação já está pronta
para ser executada. Direcione seu navegador para http://localhost:8080/login
e terá o resultado mostrado abaixo:
Experimente digitar qualquer coisa e pressionar o botão
Login. Você será levado à página
de erro. Informe os dados corretos e será levado à
página de sucesso. E, para que ninguém reclame,
a aplicação completa pode
ser baixada aqui. |
| |
|
|
| |
|
| |
|
Códigos-fonte 
Bancos de Dados
Usuários On-Line
Veja dicas, truques e anotações de 
PHP - 
