Para continuar deve ter seguido o  2º post da série, no post anterior criamos os “Daos” e começamos a implementar o “ClienteBean”.

Então abra o arquivo index.xhtml e cole o esse código:

<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:form id="form">
            <p:button id="btnCli" value="GERENCIAR CLIENTE" outcome="views/cliente" /> <!-- botão que chama a view cliente-->
        </h:form>
    </h:body>
</html>


Agora crie a view(“tela“) para inserir e apresentar os registros, lá no diretorio “views” crie um novo arquivo “*.xhtml” chamado cliente e crie os campos do nosso formulário, a tabela para apresentar os dados e um modal para confirmação de exclusão, comentário mais específicos fiz no código.

Código cliente.xhtml:

<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Cliente</title>
    </h:head>
    <h:body>
        <h:form id="form">
            <!--       Panel somente para deixar com um cara melhor nosso
            cadastro-->
       <p:panel header="CLIENTE">
       <p:messages />
         <h:panelGrid columns="2">
            <h:outputLabel value="NOME:" for="nome" />
            <!--                    veja o value chamando o Bean 
            depois o objeto cliente e o atributo nome e assim segue os próximos-->
            <p:inputText id="nome" label="nome" value="#{clienteBean.cliente.nome}" maxlength="14" size="40"  />
            <!--Essa parte vamos fazer em breve para somente adicionar CPF ou CNPJ nunca os dois-->
            <h:outputLabel value="TIPO DE DOCUMENTO:"  for="cpf-cnpj"/>                                 
            <h:selectOneRadio id="cpf-cnpj" label="cpf-cnpj" >
                <f:selectItem itemLabel="CNPJ" />
                <f:selectItem itemLabel="CPF" />                     
            </h:selectOneRadio>

            <h:outputLabel value="CPF:" for="cpf" />
            <p:inputText id="cpf" label="cpf" value="#{clienteBean.cliente.cpf}" maxlength="14" size="40"  />                    

            <h:outputLabel value="CNPJ:" for="cnpj" />
            <p:inputText id="cnpj" label="cnpj" value="#{clienteBean.cliente.cnpj}" maxlength="14" size="40"  />

            <h:outputLabel value="ENDEREÇO:" for="end" />
            <p:inputText id="end" label="end" value="#{clienteBean.cliente.endereco}" maxlength="14" size="40"  />

            <h:outputLabel value="NÚMERO" for="nro" />
            <p:inputText id="nro" label="nro" value="#{clienteBean.cliente.numero}" maxlength="14" size="40"  />

            <h:outputLabel value="TELEFONE:" for="tel" />
            <p:inputText id="tel" label="tel" value="#{clienteBean.cliente.telefone}" maxlength="14" size="40"  />

            <h:outputLabel value="ESTADO" for="uf" />
            <p:inputText id="uf" label="uf" value="#{clienteBean.cliente.estado}" maxlength="14" size="40"  />

            <h:outputLabel value="MUNICÍPIO:" for="mun" />
            <p:inputText id="mun" label="mun" value="#{clienteBean.cliente.municipio}" maxlength="14" size="40"  />
            <!--Botão com utiliando a propriedade ActionListener executando o metodo salvar sem nenhuma regra de navegação, e atualizando todo o form, veja mais em http://codeerror.wordpress.com/2009/06/01/jsf-actionlistener-outra-possibilidade/-->
            <p:commandButton id="btnSalvar" value="SALVAR" actionListener="#{clienteBean.salvar}" update="form" />
          </h:panelGrid>

            <!--criando minha tabela, incluido no value a lista de cliente, definino um variavel de acesso para cada registro, para acessar um unico registro-->
            <p:dataTable id="tabela" value="#{clienteBean.clientes}" var="cli" emptyMessage="Nenhum registro incluido." paginator="true" rows="10">
                <!--                    Definindo o cabeçalho da Tabela-->
                <f:facet name="header">  
                    Lista de Clientes  
                </f:facet>
                <!--Criando uma coluna para receber um determinando dado que tem em um objeto da nossa lista, nesse caso nome de cliente-->
                <p:column headerText="NOME" style="text-align: center">
                    <!--Aqui onde acesso o objeto cli.nome e apresentamos na tabela, e assim com os seguintes-->
                    <h:outputText value="#{cli.nome}" />
                </p:column>
                <p:column headerText="CPF/CNPJ" style="text-align: center">
                    <!--nesse tem dois pois posso ter CPF ou CNPJ, vai aparecer os dois se tiver, pois não tratamos isso ainda-->
                    <h:outputText value="#{cli.cpf} #{cli.cnpj}" />
                </p:column>
                <p:column headerText="TELEFONE" style="text-align: center">
                    <h:outputText value="#{cli.telefone}" />
                </p:column>
                <p:column headerText="CIDADE - ESTADO" style="text-align: center">
                    <!--Coloquei os dois para termos melhor visualização do municipio e estado, isso é por cada um-->
                    <h:outputText value="#{cli.municipio} - #{cli.estado}" />
                </p:column>
                <p:column headerText="ALTERAR - EXCLUIR" style="text-align: center">
                    <!--Abaixo o botão editar com uma Action do nosso metodo editar que criamos no Bean-->
                    <p:commandButton action="#{clienteBean.editar}" value="EDITAR" title="Editar" ajax="false"  >
                        <!-- Abaixo temos o setPropertyActionListener que é utilizado para pegar o objeto cli e setar no objeto cliente la no nosso bean, para editarmos-->
                        <f:setPropertyActionListener value="#{cli}" target="#{clienteBean.cliente}" />
                    </p:commandButton>
                    <!-- Abaixo temos o botão excluir com a propriedade onclick contendo o nome do modal e acessando um método de abri-lo que é o show, também existe o hide que é para feixa-lo.-->
                    <p:commandButton value="EXCLUIR" title="Excluir" onclick="confirmation.show()" style="margin-left: 5px" >
                        <!-- Abaixo temos o setPropertyActionListener que é utilizado para pegar o objeto cli e setar no objeto cliente la no nosso bean, para posteriomente excluirmos-->
                        <f:setPropertyActionListener value="#{cli}" target="#{clienteBean.cliente}" />
                    </p:commandButton>
                </p:column>
            </p:dataTable>
        </p:panel>
        </h:form>   
        <!-- Abaixo temos um modal de confirmação de exclusão repare que ele é fora do form principal, pois se colocarmos dentro podemos ter alguns problemas com isso.-->
        <h:form id="dlg">
            <p:confirmDialog message="Deseja realmente excluir este registro?" hideEffect="explode" header="Aviso" severity="alert" widgetVar="confirmation" modal="true">
                <!--caso seja sim chamo o metodo excluir, e fecho o modal com o oncomplete, tenho o process que estou dizendo para processar o form, e update para atualizar a tabela-->
                <p:commandButton id="btnSim" value="Sim" oncomplete="confirmation.hide();" actionListener="#{clienteBean.excluir}" process="@form" update="form:tabela" />
                <!--caso seja não somente fecha o modal-->
                <p:commandButton id="btnNao" value="Não" onclick="confirmation.hide();" type="button"/>
            </p:confirmDialog>
        </h:form>
    </h:body>
</html>

Repare no detalhe que para eu acessar minhas variáveis do objeto no “Bean”, utilizo o “value” #{nomeDoMeuBean.Objeto.VariavelDoObjeto} ex:#{clienteBean.cliente.nome}, e assim temos acesso ao getter e setter da variável nome.

Continuando com o “ClienteBean”, temos os métodos construtor, salvar, editar e excluir, vamos implementa-los, como na view, fiz o código e fui comentando cada linha, para ficar somente em um arquivo.

Código do ClienteBean:

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package br.com.cliente.controllers;

import br.com.cliente.daos.ClienteDao;
import br.com.cliente.daos.ClienteDaoImpl;
import br.com.cliente.models.Cliente;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.ActionEvent;

/**
 *
 * @author Thiago Marques
 */
@ManagedBean
@SessionScoped 
public class ClienteBean implements Serializable {

    private Cliente cliente = new Cliente();
    private List<Cliente> clientes = new ArrayList<Cliente>();
    private ClienteDao dao = new ClienteDaoImpl();

    /** Creates a new instance of ClienteBean */
    public ClienteBean() {
        clientes = dao.consultar(); // busca todos registros do banco e popula a lista de clientes
    }

    public void salvar(ActionEvent event) {
        dao.save(cliente); // salvando no banco de dados
        cliente = new Cliente(); // criando um novo objeto para caso for inserir novamente
        clientes = dao.consultar();// busca os dados no banco após salvar para apresentar na tabela
    }

    public void editar() {
        cliente = dao.getById(cliente.getIdCliente()); // busca no banco de dados qual registro que vai ser alterado.
    }

    public void excluir() {
        dao.delete(cliente); // deleta do banco o cliente que está no objeto cliente, que foi setado na view.
        clientes = dao.consultar();// busca os dados no banco após excluir para apresentar na tabela
    }

    public Cliente getCliente() {
        return cliente;
    }

    public void setCliente(Cliente cliente) {
        this.cliente = cliente;
    }

    public List<Cliente> getClientes() {
        return clientes;
    }

    public void setClientes(List<Cliente> clientes) {
        this.clientes = clientes;
    }
}

Agora execute o projeto e teste todas funcionalidades que definimos no início(Caso Fique desorganizado o formulário, retire os comentário que voltará ao normal.), ainda falta implementarmos o item do CPF e CNPJ, para deixar incluir somente um ou o outro, e quando buscar do banco selecionar o que vier e setar no campo correspondente, vou deixar como desafio para voces implementar, é simples, uma dica esse atributo a ser utilizado não será persistido no banco de dados.

Veja uma imagem do final com o projeto executado:

Tela final do projeto

Tela final do projeto

E também vmaos melhorar esse projeto, usar outro escopo, implementar outros frameworks, com o tempo iremos melhorando, validade e tudo mais, e quem tiver sugestões também serão bem-vindas.

Agradeço a todos, espero que tenha ajudado.. dúvidas podem colocar ai embaixo que vou respondendo, caso não tenha explicado bem alguma parte estarei à disposição.

Anúncios