Arquivo de Códigos - Artigos e Tutoriais - JavaServer Faces - Construindo um sistema de login de usuários (passo-a-passo) usando JavaServer Faces

	Precisa de um freelancer, códigos-fonte e exemplos completos? Bem-vindo(a) ao meu site. Além de realizar alguns serviços como freelancer eu tenho alguns códigos-fonte e exemplos completos de Java, Delphi, PHP, Python, C/C++, Hibernate, JPA, Spring, JSP, Servlets, Ruby, Ruby On Rails e muitas outras linguagens e frameworks. Veja como falar comigo clicando aqui.
	Fechar esta janela

Artigos & Tutoriais | Dicas & Truques | Contrate Nossa Consultoria | Downloads | Quem Somos

Arquivo de Códigos - Página Inicial

Códigos-fonte

» Códigos-fonte e exemplos completos

Linguagens

» ActionScript

» DHTML - Dynamic HTML

» Java Servlets

» JSP - Java Server Pages

Bancos de Dados

Frameworks

» JSF - Java Server Faces

» Ruby On Rails

» Zend Framework

Container/Servidor

» Apache Tomcat

» Apache Web Server

Ferramentas

» iTextSharp (iText#)

Referęncias

Serviços On-Line

» Qual é meu IP?

» Tabela Cores HTML I

» Tabela Cores HTML II

» Lista de Mime Types

» Códigos Teclas Virtuais

Usuários On-Line

Visitantes: 133

PHP

O que há de novo no PHP 5?

40 dicas e truques sobre como trabalhar com datas e horas em PHP

60 dicas e truques sobre como trabalhar com strings e caracteres em PHP

PHP e a Orientação a Objetos - POO (Curso Completo)

DHTML

Curso completo de DHTML para iniciantes

CSS

Como definir uma imagem de fundo fixa na página

Definindo uma imagem de fundo para botões HTML

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.

Clique para voltar para a página anterior

Arquivo de Códigos - Página Inicial

Veja dicas, truques e anotações de Apache Web Server

Veja dicas, truques e anotações de outras linguagens

CSS - Cascading Style Sheets - Como definir a cor de fundo de um elemento usando nomes de cores

C# (CSharp) - Como remover espaços em excesso de uma string

Perl - Como adicionar um novo elemento (ou outro array) no final de um array

PHP - Como obter a lista de drivers de conexão PDO disponíveis

PHP - Usando a funçăo empty() para determinar se uma variável está vazia (năo possui nenhum conteúdo)

PHP - Como obter as dimensőes (tamanho) de uma imagem usando PHP

PHP - Obter o timestamp da requisição da página e converter para data e hora no formato curto

VB.NET - Como obter a quantidade de dias em um determinado mês e ano

Java - Obter a data completa formatada

Adobe Flex - Aprenda a formatar datas e horas em Flex usando a classe DateFormatter

http://www.arquivodecodigos.net
:: Arquivo de Códigos - Softwares e Consultoria em Programação ::

Todo o conteúdo deste site, quando não devidamente observado, pertence a seus idealizadores e não
poderá ser usado para outras finalidades senão estudo e aprimoramento de técnicas de programação.
Certifique-se de ler as notas legais antes de proceder com o acesso e leitura do
conteúdo disponibilizado nestas páginas.

Fale Conosco: (62) 3261-7018 / (62) 8185-0734

Desenvolvedor Responsável: Osmar J. Silva

Site Meter