projeto webjava web crud com jsf prof fernando gomes 4 precisamos adicionar as libs do nosso...

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 1

PROJETO WEB: Este projeto faz o cadastro de Clientes numa tabela do MySQL e, em uma única página JSF, mostra um formulário de cadastro de Cliente, lista os clientes cadastrados com paginação, e permite que os registros de clientes sejam alterados ou excluídos. Estrutura do projeto depois de finalizado:

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 2

Para criar esse projeto: Clicar no menu File -> New -> Dynamic Web Project

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 3

Feito isso, clicamos em Next na próxima tela, e chegamos na tela abaixo, onde devemos marcar a opção Generate web.xml deployment descriptor. Depois clicamos em Finish.

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 4

Precisamos adicionar as LIBs do nosso projeto. Elas se encontram no nosso COTIJAVADRIVER.

Todo o conteúdo do diretório PrimeFaces 5.0, para habilitar o uso do Primefaces e de seus temas;

mysql-connector-java-5.1.23-bin.jar do diretório Mysql-5.1.23, para habilitar o uso do MySQL via Driver JDBC.

Vamos criar 3 pacotes: control, persistence e entity, onde vamos ter as classes do nosso sistema. Para criar um novo pacote clique em Java Resources e depois, clique com o botão direito em src [abaixo de Java Resources].

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 5

Depois escolha New -> Package.

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 6

Dê o nome control e clique em Finish.

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 7

Depois, repita o processo para os outros pacotes.

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 8

No pacote persistence, precisamos criar o script de criação do Banco de Dados. Para criar o script, clicamos com o botão direito no nome do pacote persistence e selecionamos New -> Other.

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 9

Escolhemos “File” e clicamos Next. Na tela seguinte, damos o nome script.sql e clicamos em Finish.

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 10

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 11

script.sql create database bdUM; use bdUM; create table cliente(id int primary key auto_increment, nome varchar(50), email varchar(50) unique); insert into cliente (id, nome, email) values (null, 'fernando', 'fernando@gmail.com'), (null, 'lu', 'lu@gmail.com'), (null, 'ju', 'ju@gmail.com'), (null, 'belem', 'belem@gmail.com'); Apenas uma tabela: id é chave primária inteiro auto incrementável; nome tem tamanho 50 e email 250 e precisa ser único. ________________________________________________________________ Agora, precisamos criar os DAOs, que vão viabilizar a comunicação com o banco de dados para as operações básicas de busca, inserção e alteração na tabela cliente.

DAO.java package persistence; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; public class Dao { Connection con; PreparedStatement stmt; ResultSet rs; public void open() throws Exception {

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 12

Class.forName("com.mysql.jdbc.Driver"); con = DriverManager.getConnection("jdbc:mysql://localhost:3306/bdUM ", "root", ""); } public void close() throws Exception { con.close(); } } Um DAO tipicamente utiliza 3 objetos:

Connection con; PreparedStatement stmt; ResultSet rs; E utiliza dois métodos: open() e close() – ambos precisam lançar exceção, para podermos saber se houve algum problema na conexão com o banco de dados. No método open(), primeiro, o DAO carrega o Driver do MySQL:

Class.forName("com.mysql.jdbc.Driver"); Em seguida, passa para o objeto con a conexão com o banco de dados.

con = DriverManager.getConnection("jdbc:mysql://localhost:3306/bdUM", "root", ""); O método close() apenas encerra a conexão com o banco de dados. Os dois outros objetos declarados e o próprio objeto con vão ser utilizados na classe ClienteDao que herda Dao.

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 13

Precisamos construir a classe ClienteDao, que vai herdar Dao e utilizar-se dos métodos open e close. A classe ClienteDao também vai utilizar os objetos da classe Dao para fazer acesso ao banco de dados.

ClienteDao.java package persistence; import java.util.ArrayList; import java.util.List; import entity.Cliente; public class ClienteDao extends Dao { public void create(Cliente c) throws Exception { open(); stmt = con.prepareStatement("insert into cliente values (null,?,?)"); stmt.setString(1, c.getNome()); stmt.setString(2, c.getEmail()); stmt.execute(); close(); } public List<Cliente> findAll() throws Exception { open(); stmt = con.prepareStatement("select * from cliente order by id desc"); rs = stmt.executeQuery(); List<Cliente> lista = new ArrayList<Cliente>(); while (rs.next()) { Cliente c = new Cliente(); c.setId(rs.getInt(1)); c.setNome(rs.getString(2));

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 14

c.setEmail(rs.getString(3)); lista.add(c); } close(); return lista; } public Cliente findByCode(Integer cod) throws Exception { open(); stmt = con.prepareStatement("select * from cliente where id=?"); stmt.setInt(1, cod); rs = stmt.executeQuery(); Cliente c = null; if (rs.next()) { c = new Cliente(); c.setId(rs.getInt(1)); c.setNome(rs.getString(2)); c.setEmail(rs.getString(3)); } close(); return c; } public void delete(Integer cod) throws Exception { open(); stmt = con.prepareStatement("delete from cliente where id = ?"); stmt.setInt(1, cod); stmt.execute(); close(); } public void update(Cliente c) throws Exception {

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 15

open(); stmt = con.prepareStatement("update cliente set nome = ?, email = ? where id = ?"); stmt.setString(1, c.getNome()); stmt.setString(2, c.getEmail()); stmt.setInt(3, c.getId()); stmt.execute(); close(); } } ClienteDao possui 5 métodos: findAll, findByCode, create, delete e update. Dois [create e update] recebem um objeto da classe Cliente como parâmetro, dois [delete e findByCode] recebem um Integer que corresponde ao id do cliente, e um método [findAll] não recebe parâmetro nenhum. Todos os métodos lançam exceção porque precisamos saber se houve algum problema na comunicação ou na execução de instruções no banco de dados. O método update abre a conexão com o banco da dados, e utiliza o objeto stmt para criar o comando SQL de update na tabela cliente. O update é feito pelo comando SQL que atualiza nome e/ou email de um cliente cujo id é passado pela página JSF onde se encontra o botão "Atualizar", como veremos adiante. Feito o update, a conexão com o banco de dados é fechada através de uma chamada do método close. O método findAll() não recebe parâmetros. Abrimos a conexão com o banco de dados, através da chamada do método open; utilizamos o objeto stmt para preparar o comando SQL select * from cliente order by id desc na tabela cliente; este comando recupera todos os registros da tabela cliente; a ordem decrescente por id permite que visualizemos os registros mais recentes primeiro; recebemos o resultado da busca no objeto rs; e instanciamos uma lista de objetos da classe Cliente com os dados recuperados da tabela cliente. Retornamos essa lista e fechamos a conexão com o banco de dados. O método findByCode recebe um Integer com o id do cliente e executa praticamente o mesmo q o método findAll - a diferença é que retorna apenas um objeto da classe Cliente e não uma lista. [Este método não vai ser utilizado no nosso projeto, foi descrito aqui apenas para ilustrar como seria sua construção.]

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 16

o método create recebe um objeto da classe Cliente e o envia para o banco de dados, criando mais um registro na tabela clientes. Detalhe, o id precisa ser null porque o próprio MySQL já atribui um novo valor ao id, a cada registro inserido. O método delete recebe um Integer que corresponde ao id do registro do cliente na tabela de clientes e exclui esse registro da tabela. ________________________________________________________________ Criado o pacote entity, criamos a classe Cliente. Essa classe deve ser Serializável. Serialização em Java é o processo que permite que um objeto seja transformado em uma sequência de bytes, e é útil quando precisamos enviar objetos pela rede, salvar no disco, ou quando utilizamos Data Access Objects [DAO] e JDBC para interagir com Bancos de Dados.

Cliente.java package entity; import java.io.Serializable; public class Cliente implements Serializable { private static final long serialVersionUID = 1L; private Integer id; private String nome; private String email; public Cliente() { } public Cliente(Integer id, String nome, String email) { this.id = id; this.nome = nome; this.email = email; }

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 17

@Override public String toString() { return "Cliente [id=" + id + ", nome=" + nome + ", email=" + email + "]"; } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getNome() { return nome; } public void setNome(String nome) { this.nome = nome; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } } Agora, precisamos criar o ManagedBean que irá receber, via formulário html, os dados para criação, alteração, consulta e exclusão de registros da tabela cliente. No pacote control, criamos a classe ControlBean.

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 18

ControlBean.java package control; import java.io.Serializable; import java.util.List; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; import javax.faces.context.FacesContext; import entity.Cliente; import persistence.ClienteDao; @ManagedBean(name = "mb") @RequestScoped public class ControlBean implements Serializable { private static final long serialVersionUID = 1L; private Cliente cliente; private List<Cliente> clientes; public List<Cliente> getClientes() { try { clientes = new ClienteDao().findAll(); } catch (Exception e) { e.printStackTrace(); } return clientes; } public void setClientes(List<Cliente> clientes) { this.clientes = clientes; }

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 19

{ cliente = new Cliente(); } public ControlBean() { } public Cliente getCliente() { return cliente; } public void setCliente(Cliente cliente) { this.cliente = cliente; } public void gravar() { FacesContext fc = FacesContext.getCurrentInstance(); try { new ClienteDao().create(cliente); cliente = new Cliente(); fc.addMessage("form1", new FacesMessage("Dados Gravados!!!")); } catch (Exception e) { fc.addMessage("form1", new FacesMessage("Erro: " + e.getMessage())); } } public void excluir() { FacesContext fc = FacesContext.getCurrentInstance(); try { new ClienteDao().delete(cliente.getId()); cliente = new Cliente(); fc.addMessage("form2", new FacesMessage("Registro Excluído!!!")); } catch (Exception e) { fc.addMessage("form2", new FacesMessage("Erro: " + e.getMessage()));

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 20

} } public void alterar() { FacesContext fc = FacesContext.getCurrentInstance(); try { new ClienteDao().update(cliente); cliente = new Cliente(); fc.addMessage(null, new FacesMessage("Dados Alterados!!!")); } catch (Exception e) { fc.addMessage(null, new FacesMessage("Erro: " + e.getMessage())); } } } A classe ControlBean tem 2 anotações: @ManagedBean(name = "mb") - essa anotação diz que a classe é um ManagedBean, ou seja, é um JavaBean gerenciado pelo framework JSF. Também associa o nome mb a essa classe. É através do nome mb que as páginas JSF vão fazer acesso aos métodos dessa classe. @RequestScoped - essa anotação diz que o escopo de um objeto da classe ControlBean é o escopo Request, ou seja, uma vez atendida a requisição feita pela página JSF, o contexto enviado ao ManagedBean e o contexto enviado como resposta não são mantidos no servidor, por exemplo, como variáveis de sessão. ControlBean precisa ser uma classe Serializável. Vamos construir apenas seu contrutor vazio. ControlBean possui 2 atributos apenas - uma lista de Clientes e um objeto da classe Cliente. Porque o ControlBean vai fazer acesso aos métodos de ClienteDao e retornar, para a página JSF, exatamente o que retorna o ClienteDao. E ClienteDao só retorna um objeto da Classe cliente ou uma lista de Clientes. Criamos o bloco anônimo abaixo:

{

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 21

cliente = new Cliente(); } Esse bloco anônimo é necessário para inicializarmos um objeto da classe Cliente sempre que ControlBean receber uma solicitação via formulário html. Não inicializamos a lista de clientes porque nunca vamos receber uma lista de clientes como parâmetro. Criamos os getters e setters para a classe ControlBean. No método getClientes(), instanciamos a lista de clientes de ControlBean com a lista de clientes retornada pelo método findAll() de ClienteDao, porque já sabemos que é a única possibilidade de ClienteDao retornar uma lista de clientes. A chamada ao método findAll() é feita dentro de um bloco try/catch porque precisamos saber se houve alguma falha ou exceção na comunicação entre ControlBean e ClienteDao. O método gravar() cria um objeto da Classe FacesContext, recebe os dados da página JSF, e instancia o objeto cliente - atributo da classe ControlBean com os dados recebidos. FacesContext contém o contexto da nossa aplicação de acordo com as requisições e respostas feitas ao ManagedBean e gerenciadas pelo framework JSF. Esse contexto é o estado de nossa aplicação e é alterado a cada requisição/resposta feita via página JSF. Dentro de um bloco try/catch, o método gravar chama o método create de ClienteDao, feita a gravação, "zera" o objeto cliente instanciando esse objeto com new Cliente(), e envia para a página JSF a mensagem "Dados Gravados!!!" via Expression Language. Precisamos "zerar" o objeto cliente para o formulário da página JSF não receber de volta os dados enviados - dessa forma, o formulário aparece em branco depois de feita a gravação do cliente. Os métodos alterar e excluir funcionam exatamente da mesma maneira que o método gravar. A única diferença é que no método alterar, a Expression Language enviada não está associada a nenhuma mensagem específica na página JSF, veremos porque mais adiante.

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 22

Antes de criarmos a página JSF de nosso sistema, precisamos habilitar o JSF. Primeiro clique com o botão direito no projeto e selecione Properties.

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 23

Depois, clique em Java Server Faces e em seguida, clicamos em Further Configuration Available...

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 24

Na tela seguinte, deixamos marcada a opção Disable Library Configuration, e adicionamos *.jsf na caixa de texto URL Mapping Patterns. Se essa caixa de texto estiver com algum conteúdo, selecionamos e apagamos, para adicionar *.jsf, clicamos em add e digitamos *.jsf na tela seguinte.

Também precisamos adicionar algumas linhas no web.xml para habilitarmos o tema que vamos utilizar em nosso projeto. Em web.xml, acima da tag <servlet>, adicionamos as linhas abaixo:

<context-param> <param-name>primefaces.THEME</param-name> <param-value>cupertino</param-value> </context-param> No caso, selecionamos o tema cupertino. Para mais temas, acesse: https://www.primefaces.org/themes/

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 25

Finalmente, precisamos criar a página JSF do nosso sistema. Devemos criar uma página XHTML que irá conter as tags que o framework JSF irá utilizar para renderizar a página JSF. No navegador, vamos ver uma página JSF sendo exibida, mas trabalhamos com um arquivo XHTML. Para criar uma nova página XHTML, repetimos o que foi descrito no início desse documento, para a criação do arquivo script.sql. Clicamos com o botão direito em WEB-INF, dentro de WebContent [veja a imagem "Estrutura do projeto depois de finalizado" na 1ª página desse documento], depois selecionamos New -> Other; Na tela seguinte digitamos HTML onde digitamos File quando criamos script.sql; A opção HTML File irá aparecer, então selecionamos e clicamos Next; Na tela seguinte damos nome o nome sistema ao arquivo e renomeamos sua extensão para .xhtml, depois clicamos Next;

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 26

Na tela seguinte, escolhemos a primeira opção [conforme mostrado abaixo] e clicamos finish.

No arquivo criado, apagamos todas as TAGS "ui" geradas, dessa forma ficamos apenas com as tags DOCTYPE e html. A partir daí, criamos o nosso arquivo XHTML.

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 27

sistema.xhtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"> <h:head></h:head> <h:body> <p:panel header="CRUD com JSF"> <h:form id="form1"> <p:panelGrid columns="5"> <h:outputText value="Nome" /> <p:inputText value="#{mb.cliente.nome}" required="true" /> <h:outputText value="Email" /> <p:inputText value="#{mb.cliente.email}" required="true" /> <p:commandButton value="Gravar" action="#{mb.gravar}" update=":form1,:form2" ajax="true"> </p:commandButton> </p:panelGrid> <p:message for="form1" /> <p:growl></p:growl> </h:form> </p:panel> <p:panel header="Consultar Cliente"> <h:form id="form2"> <p:dataTable value="#{mb.clientes}" var="linha" paginator="true" rows="4"> <p:column headerText="id"> <h:outputText value="#{linha.id}" /> </p:column>

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 28

<p:column headerText="nome"> <h:outputText value="#{linha.nome}" /> </p:column> <p:column headerText="email"> <h:outputText value="#{linha.email}" /> </p:column> <p:column headerText="Operacao" style="text-align:center;"> <p:commandButton value="Excluir" action="#{mb.excluir}" ajax="true" update=":form1,:form2"> <f:setPropertyActionListener value="#{linha}" target="#{mb.cliente}"></f:setPropertyActionListener> </p:commandButton> <p:commandButton value="Alterar" onclick="PF('dlg2').show();" update=":form3" ajax="true"> <f:setPropertyActionListener value="#{linha}" target="#{mb.cliente}"></f:setPropertyActionListener> </p:commandButton> </p:column> </p:dataTable> <p:message for="form2" /> <p:growl></p:growl> </h:form> <p:dialog header="Alterar Cliente" widgetVar="dlg2" modal="true" hideEffect="fade" height="200"> <h:form id="form3"> <p:panelGrid columns="2"> <h:outputText value="Nome" /> <p:inputText value="#{mb.cliente.nome}" required="true" /> <h:outputText value="Email" /> <p:inputText value="#{mb.cliente.email}" required="true" /> <p:inputText value="#{mb.cliente.id}" type="hidden" /> <p:commandButton value="Alterar Dados" action="#{mb.alterar}"

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 29

update=":form1,:form2" ajax="true" onclick="PF('dlg2').hide();"> </p:commandButton> </p:panelGrid> <p:growl></p:growl> </h:form> </p:dialog> </p:panel> </h:body> </html> Na tag html, além dos mapeamentos gerados, precisamos incluir o mapeamento xmlns:p="http://primefaces.org/ui para podermos utilizar as tags do primefaces. A página é dividida em dois paineis, o primeiro tem o formulário de cadastro de cliente. Os campos do formulário contém os dados que vão instanciar o objeto da classe Cliente utilizado no ManagedBean ControlBean. O 1º formulário possui um botão que quando clicamos, ele envia os dados para o método gravar, do ManagedBean: action="#{mb.gravar}" Em resposta, a página recebe a mensagem de Dados Gravados, ou de erro, via Expression Language e ainda exibe essa mesma mensagem num pop up - a primeira tag abaixo assinala onde irá aparecer a mensagem, logo abaixo do form de cadastro de cliente; a segunda tag abaixo assinala que a mensagem irá aparecer em um pop up: <p:message for="form1" /> mensagem via expression language <p:growl></p:growl> mesma mensagem em pop up Porque zeramos o objeto cliente após o cadastro, o formulário aparece em branco. No segundo painel da página, o cliente cadastrado aparece no topo da lista paginada, porque ordenamos a query de findAll, em ClienteDao, para exibir os dados por ordem decrescente de id. * * *

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 30

O Segundo painel da página mostra os clientes cadastrados numa lista paginada e contém os botões de alteração e exclusão de clientes. No caso de alteração de cliente, o sistema abre uma caixa de diálogo, onde os dados do cliente são mostrado e podem ser alterados. Essa caixa de diálogo está na tag <p:dialog header="Alterar Cliente" widgetVar="dlg2" modal="true" hideEffect="fade" height="200"> Quando damos o submit no formulário com os dados alterados, a caixa de diálogo se fecha, e a lista de clientes aparece modificada. Como a alteração de cliente foi feita em uma caixa de diálogo, a mensagem de Dados Alterados apenas aparece em pop up porque a caixa se fecha assim que damos submit. Note que todos os botões commandButton de todos os formulários possuem o atributo ajax="true" e todos esses botões comandam a atualização de algum formulário da página. Dessa forma, todo evento disparado por todo botão automaticamente reflete uma mudança nos dados exibidos.

Tela do sistema ao iniciar

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 31

Cadastro de cliente

Cadastro realizado com sucesso

Java Web

CRUD com JSF

Prof Fernando Gomes

WWW.COTIINFORMATICA.COM.BR 32

Alteração de cliente [nome alterado]

Alteração realizada com sucesso