JSF – Tutorial RichFaces + Hibernate + MySQL – CRUD completo (parte 5)

Este é o quinto post referente à nossa aplicação JSF completa utilizando RichFaces + Hibernate + MySQL na prática.

Dando continuidade ao desenvolvimento da parte visual da nossa aplicação, adicionarei as regras de navegação, CSS, máscaras para os campos, validadores, conversores e Ajax.

Estrutura do projetoestrutura_parte5

Códigos

index.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="StyleSheet" type="text/css" href="/jsf/style/estilos.css" media="screen" />
<script type="text/javascript" src="/jsf/resources/jquery.maskedinput-1.2.1.js"></script>
</head>

<body>
<f:view>
 <h:form>
 <h:messages />
 <fieldset>
 <legend>Cadastro de Pessoas Físicas</legend>
     <h:panelGrid>
         <h:commandLink value="Adicionar pessoa" action="toCadastraPessoa" />
         <h:commandLink value="Pesquisar pessoa" action="toPesquisaPessoa" />
         <h:commandLink value="Remover pessoa" action="toRemovePessoa" />
         <h:commandLink value="Atualizar pessoa" action="toAtualizaPessoa" />
     </h:panelGrid>
 </fieldset>
 </h:form>
</f:view>
</body>
</html>

atualizaPessoa.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib prefix="rich" uri="http://richfaces.ajax4jsf.org/rich"%>
<%@ taglib prefix="a4j" uri="http://richfaces.org/a4j"%>
<%@ taglib prefix="stella" uri="http://stella.caelum.com.br/faces"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link rel="StyleSheet" type="text/css" href="/jsf/style/estilos.css" media="screen" />
 <script type="text/javascript" src="/jsf/resources/jquery.maskedinput-1.2.1.js"></script>
</head>

<body>
<f:view>
 <h:form>
 <a4j:keepAlive beanName="pessoaMB" />
 <fieldset><legend>Atualização de Dados</legend> 

 <rich:dataTable value="#{pessoaMB.pessoas}" var="fisica" rows="10" id="fisicas"
    width="100%" cellspacing="0" cellpadding="0" border="1">
 <h:column>
 <f:facet name="header">
 <h:outputText value="NOME" />
 </f:facet>
 <h:outputText value="#{fisica.nome}" />
 </h:column>

 <h:column>
 <f:facet name="header">
 <h:outputText value="E-MAIL" />
 </f:facet>
 <h:outputText value="#{fisica.email}" />
 </h:column>

 <h:column>
 <f:facet name="header">
 <h:outputText value="CPF" />
 </f:facet>
 <h:outputText value="#{fisica.cpf}" />
 </h:column>

 <h:column>
 <f:facet name="header">
 <h:outputText value="DATA NASC." />
 </f:facet>
 <h:outputText value="#{fisica.dataNascimento}">
 <f:convertDateTime pattern="dd/MM/yyyy" />
 </h:outputText>
 </h:column>

 <h:column>
 <f:facet name="header">
 <h:outputText value="CELULAR" />
 </f:facet>
 <h:outputText value="#{fisica.telefoneCelular}" />
 </h:column>

 <h:column>
 <f:facet name="header">
 <h:outputText value="Exclusão"/>
 </f:facet>

 <a4j:commandLink reRender="panelGridInputs">
 <h:outputText value="Selecionar"/>
 <f:setPropertyActionListener  value="#{fisica}" target="#{pessoaMB.pessoa}"/>
 </a4j:commandLink>

 </h:column>

 <f:facet name="footer">
 <rich:datascroller />
 </f:facet>
 </rich:dataTable>

 <rich:messages/>

 <a4j:region id="regiaoAjax">
 <a4j:status id="sts">
 <f:facet name="start">
 <h:graphicImage value="/images/ajax-loader.gif" />
 </f:facet>
 </a4j:status>
 </a4j:region>

 <h:panelGrid columns="2" id="panelGridInputs">
 <h:outputLabel for="nome" value="Nome "  />
 <h:inputText id="nome" value="#{pessoaMB.pessoa.nome}" style=" width : 254px;"/>

 <h:outputLabel for="email" value="E-mail "  />
 <h:inputText id="email" value="#{pessoaMB.pessoa.email}" style=" width : 249px;">
 <f:validator validatorId="emailValidator"/>
 </h:inputText>

 <h:outputLabel for="cpf" value="CPF "  />
 <h:inputText id="cpf" validatorMessage="CPF inválido!" value="#{pessoaMB.pessoa.cpf}" size="60" style=" width : 106px;">
 <rich:jQuery selector="#cpf" query="mask('999.999.999-99')" timing="onload"/>
 <stella:validateCPF formatted="true"/>
 </h:inputText>

 <h:outputLabel for="dataNasc" value="Data Nascimento: "  />
 <h:inputText id="dataNasc" validatorMessage="Data de nascimento com formato inválido!"
     value="#{pessoaMB.pessoa.dataNascimento}" size="60" style=" width : 75px;">
 <f:convertDateTime pattern="dd/MM/yyyy" />
 <rich:jQuery selector="#dataNasc" query="mask('99/99/9999')" timing="onload"/>
 </h:inputText> 

 <h:outputLabel for="telCel" value="Tel. Celular "  />
 <h:inputText id="telCel" value="#{pessoaMB.pessoa.telefoneCelular}">
 <rich:jQuery selector="#telCel" query="mask('(99) 9999-9999')" timing="onload"/>
 </h:inputText>

 <a4j:commandButton value="Atualizar" action="#{pessoaMB.merge}" styleClass="botoes" status="sts" reRender="fisicas"/>
 <a4j:commandButton value="Voltar" immediate="true" action="toIndex" styleClass="botoes"/>
 </h:panelGrid>
 </fieldset>

 </h:form>
</f:view>
</body>
</html>

cadastraPessoa.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib prefix="rich" uri="http://richfaces.ajax4jsf.org/rich"%>
<%@ taglib prefix="stella" uri="http://stella.caelum.com.br/faces"%>
<%@ taglib prefix="a4j" uri="http://richfaces.org/a4j"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link rel="StyleSheet" type="text/css" href="/jsf/style/estilos.css" media="screen" />
 <script type="text/javascript" src="/jsf/resources/jquery.maskedinput-1.2.1.js"></script>
</head>

<body>
<f:view>
 <h:form>
 <rich:messages/>

 <fieldset>
 <legend>Cadastro de Pessoa</legend>
 <a4j:region id="regiaoAjax">
 <a4j:status id="sts">
 <f:facet name="start">
 <h:graphicImage value="/images/ajax-loader.gif" />
 </f:facet>
 </a4j:status>
 </a4j:region>

 <h:panelGrid columns="2" id="inputs">
 <h:outputLabel for="nome" value="Nome "  />
 <h:inputText id="nome" value="#{pessoaMB.pessoa.nome}" styleClass="edit" size="40" />

 <h:outputLabel for="email" value="E-mail "  />
 <h:inputText id="email" value="#{pessoaMB.pessoa.email}" required="true" requiredMessage="Campo e-mail obrigatório!" styleClass="edit" size="30">
 <f:validator validatorId="emailValidator"/>
 </h:inputText>

 <h:outputLabel for="cpf" value="CPF "  />
 <h:inputText id="cpf" value="#{pessoaMB.pessoa.cpf}" styleClass="edit" size="11">
 <rich:jQuery selector="#cpf" query="mask('999.999.999-99')" timing="onload"/>
 <stella:validateCPF formatted="true"/>
 </h:inputText>

 <h:outputLabel for="dataNasc" value="Data Nascimento "  />
 <h:inputText id="dataNasc" validatorMessage="Data de nascimento com formato inválido!" value="#{pessoaMB.pessoa.dataNascimento}" styleClass="edit" size="10" >
 <f:convertDateTime pattern="dd/MM/yyyy" />
 <rich:jQuery selector="#dataNasc" query="mask('99/99/9999')" timing="onload"/>
 </h:inputText>

 <h:outputLabel for="telCel" value="Tel. Celular "  />
 <h:inputText id="telCel" value="#{pessoaMB.pessoa.telefoneCelular}" styleClass="edit" size="10">
 <rich:jQuery selector="#telCel" query="mask('(99) 9999-9999')" timing="onload"/>
 </h:inputText>

 <a4j:commandButton value="Inserir" action="#{pessoaMB.save}" status="sts" reRender="inputs" styleClass="botoes"/>
 <a4j:commandButton value="Voltar" immediate="true" action="toIndex" styleClass="botoes"/>
 </h:panelGrid>
 </fieldset>
 </h:form>
</f:view>
</body>
</html>

pesquisaPessoa.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib prefix="rich" uri="http://richfaces.ajax4jsf.org/rich"%>
<%@ taglib prefix="a4j" uri="http://richfaces.org/a4j"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link rel="StyleSheet" type="text/css" href="/jsf/style/estilos.css" media="screen" />
</head>

<body>
<f:view>

 <h:form>
 <a4j:keepAlive beanName="pessoaMB" />
 <h:messages/>

 <fieldset>
 <legend>Pesquisa de Pessoas</legend>
 <h:panelGrid columns="2">

 <h:outputLabel for="nomeLabel" value="Digite o nome: " />
 <h:inputText id="nomeInput" value="#{pessoaMB.pessoa.nome}" style=" width : 321px;" />

 <h:commandButton value="Pesquisar" action="#{pessoaMB.pesquisaByNome}" styleClass="botoes"/>
 <h:commandButton value="Voltar" immediate="true" action="toIndex" styleClass="botoes"/>
 </h:panelGrid>

 <h:panelGrid columns="2" id="panelGridInputs">
 <h:outputLabel for="nome" value="Nome "  />
 <h:inputText id="nome" readonly="true" value="#{pessoaMB.pessoa.nome}" style=" width : 254px;"/>

 <h:outputLabel for="email" value="E-mail "  />
 <h:inputText id="email" readonly="true" value="#{pessoaMB.pessoa.email}" style=" width : 249px;"/>

 <h:outputLabel for="cpf" value="CPF "  />
 <h:inputText id="cpf" readonly="true" validatorMessage="CPF inválido!" value="#{pessoaMB.pessoa.cpf}"
    size="60" style=" width : 106px;"/>

 <h:outputLabel for="dataNasc" value="Data Nascimento: "  />
 <h:inputText id="dataNasc" readonly="true" validatorMessage="Data de nascimento com formato inválido!"
   value="#{pessoaMB.pessoa.dataNascimento}" size="60" style=" width : 75px;">
 <f:convertDateTime pattern="dd/MM/yyyy" />
 </h:inputText> 

 <h:outputLabel for="telCel" value="Tel. Celular "  />
 <h:inputText id="telCel" readonly="true" value="#{pessoaMB.pessoa.telefoneCelular}" />
 </h:panelGrid>
 </fieldset>
 </h:form>
</f:view>
</body>
</html>

removePessoa.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib prefix="rich" uri="http://richfaces.ajax4jsf.org/rich"%>
<%@ taglib prefix="a4j" uri="http://richfaces.org/a4j"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link rel="StyleSheet" type="text/css" href="/jsf/style/estilos.css" media="screen" />
</head>

<body>
<f:view>
 <h:form>
 <fieldset><legend>Remoção de Pessoas</legend>
 <rich:dataTable value="#{pessoaMB.pessoas}" var="fisica" rows="10" id="fisicas"
width="100%" cellspacing="0" cellpadding="0" border="1">
 <h:column>
 <f:facet name="header">
 <h:outputText value="NOME" />
 </f:facet>
 <h:outputText value="#{fisica.nome}" />
 </h:column>

 <h:column>
 <f:facet name="header">
 <h:outputText value="E-MAIL" />
 </f:facet>
 <h:outputText value="#{fisica.email}" />
 </h:column>

 <h:column>
 <f:facet name="header">
 <h:outputText value="CPF" />
 </f:facet>
 <h:outputText value="#{fisica.cpf}" />
 </h:column>

 <h:column>
 <f:facet name="header">
 <h:outputText value="DATA NASC." />
 </f:facet>
 <h:outputText value="#{fisica.dataNascimento}">
 <f:convertDateTime pattern="dd/MM/yyyy" />
 </h:outputText>
 </h:column>

 <h:column>
 <f:facet name="header">
 <h:outputText value="CELULAR" />
 </f:facet>
 <h:outputText value="#{fisica.telefoneCelular}" />
 </h:column>

 <h:column>
 <f:facet name="header">
 <h:outputText value="Exclusão"/>
 </f:facet>

 <a4j:commandLink action="#{pessoaMB.delete}" status="sts" reRender="fisicas" >
 <h:outputText value="Excluir"/>
 <f:setPropertyActionListener value="#{fisica.id}" target="#{pessoaMB.id}" />
 </a4j:commandLink>
 </h:column>

 <f:facet name="footer">
 <rich:datascroller />
 </f:facet>
 </rich:dataTable>

 <a4j:region id="regiaoAjax">
 <a4j:status id="sts">
 <f:facet name="start">
 <h:graphicImage value="/images/ajax-loader.gif" />
 </f:facet>
 </a4j:status>
 </a4j:region>

 <h:commandButton value="Voltar" immediate="true" action="toIndex" styleClass="botoes"/>
 </fieldset>
 </h:form>
</f:view>
</body>
</html>

Navigation Rules

navigationRules

Importando o projeto

  1. Baixe o projeto atualizado >>aqui<<;
  2. Descompacte o projeto no seu workspace;
  3. No Eclipse vá em: File –> Import –> General – Existing Projects into Workspace –> Next –> Selecione o projeto descompactado no workspace –> Finish.

Criando o banco de dados

  1. Com o MySQL instalado e configurado com usuário: root e senha: root crie um novo schema com o nome de jsf.
  2. Execute a classe br.com.serjaum.util.GerarTabelas.java. Essa classe criará as tabelas que foram mapeadas no arquivo hibernate.cfg.xml, no caso a classe Pessoa terá uma tabela correspondente com o nome de pessoa no nosso banco de dados.

Resultado

indexcadastraPessoaatualizaPessoapesquisaPessoaremovePessoa

Espero ter ajudado!


6 Comentários on “JSF – Tutorial RichFaces + Hibernate + MySQL – CRUD completo (parte 5)”

  1. Vinicius Fernandes disse:

    Cara, ajudou muito mesmo esse tutorial! Gostei e recomendo!

  2. katia disse:

    adorei a explição… muito bom

  3. Olá!
    Como poderia ser feito uma tela de login, para que somente o Zé da Silva tenha acesso aos dados. Como se fosse um caso de um cadastro em uma loja virtual, onde a gente mesmo altera o nosso cadastro?

    Obrigado!
    Eduardo.

  4. Jeo disse:

    Gostei bastante do artigo espero que continue fazendo este trabalho e sucesso para equipe toda…

  5. welder disse:

    Brother se não fosse pedir demais, você tbm poderia postar os vo’s e os been’s;
    muito bom seu material.
    obrigado por compartilhar.


Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s