Advertisement

Aula 10 - Manipulando os principais elementos XHTML


1- Introdução 


Após conhecermos o JSF e aplicarmos no nosso projeto poderemos entender como utilizar os elementos no XHTML para gerar tabelas, formulários entre outros componentes de tela bastante úteis para a interação com o usuário. 

Claramente existem 1001 recursos diferentes que podem ser utilizados que não estarão presentes nesta aula. O objetivo dessa aula é introduzir a utilização destas ferramentas e mostrar um exemplo de CRUD usando estes recursos

2- Adicionando os namespaces


A primeira configuração necessária para utilizar os componentes do JSF no XHTML é declarar os namespaces. Os namespaces permitem que você utilize elementos que estendem as marcações do HTML básico. Estas marcações permitem a criação de elementos de formulário (botões, caixas de texto, etc...) e também de tabelas.

Declare o JSF HTML para elementos básicos do HTML:

xmlns:h="http://xmlns.jcp.org/jsf/html"

Declare o core do JSF para elementos mais complexos, por exemplo uma tabela de dados:

xmlns:f="http://xmlns.jcp.org/jsf/core"



3- Formulários de entrada

Os formulários por regra devem estar aninhados em uma tag <h:form></h:form>. Em geral os formulários de entrada são compostos por campos de entrada e um botão para submissão. 

 <h:form>
            <h:inputText value="#{gerenciarPessoa.pessoaAtual.id}"/>
            <h:inputText value="#{gerenciarPessoa.pessoaAtual.name}"/>
            <h:commandButton value="cadastrar pessoa" action="#{gerenciarPessoa.salvarPessoa()}"/>
        </h:form>

Quando utilizamos a #{ } estamos dizendo ao XHTML que deveremos utilizar métodos de um ManagedBean. Os ManagedBeans funcionam como uma camada que fica "por trás" do xhtml que possibilitam a troca fácil de informações entre a página e o back-end. 

O GerenciarPessoa é uma classe java anotada com @ManagedBean. Ao criar um ManagedBean é importante criar atributos a classe e criar os Getters e Setters.

package Views;

import Controlers.PessoaJpaController;
import Controlers.exceptions.NonexistentEntityException;
import Models.Pessoa;
import java.util.ArrayList;
import java.util.List;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class GerenciarPessoa {

    private Pessoa pessoaAtual = new Pessoa();
    private List<Pessoa> listaPessoas = new ArrayList<>();
    private PessoaJpaController controlPessoa = new PessoaJpaController(EmProvider.getInstance().getEntityManagerFactory());

    public GerenciarPessoa() {
    }

    public String gotoAdicionarPessoa() {
        return "CriarPessoa";
    }
    
    public String gotoEditarPessoa() {
        return "EditarPessoa";
    }

    public String gotoListarPessoas() {
        listarPessoas();
        return "ListarPessoas";
    }

    public String salvarPessoa() {
        controlPessoa.create(pessoaAtual);
        return "sucesso";
    }
    
    public String editarPessoa() {
        try {
            controlPessoa.edit(pessoaAtual);
        } catch (Exception ex) {
            Logger.getLogger(GerenciarPessoa.class.getName()).log(Level.SEVERE, null, ex);
        }
        return "ListarPessoas";
    }
    
    
    public String deletePessoa() {
        try {
            controlPessoa.destroy(pessoaAtual.getId());
            listarPessoas();
        } catch (NonexistentEntityException ex) {
            Logger.getLogger(GerenciarPessoa.class.getName()).log(Level.SEVERE, null, ex);
        }
        return "ListarPessoas";
    }
    
    public void listarPessoas() {
        listaPessoas = controlPessoa.findPessoaEntities();
    }

    public Pessoa getPessoaAtual() {
        return pessoaAtual;
    }

    public void setPessoaAtual(Pessoa pessoaAtual) {
        this.pessoaAtual = pessoaAtual;
    }

    public List<Pessoa> getListaPessoas() {
        return listaPessoas;
    }

    public void setListaPessoas(List<Pessoa> listaPessoas) {
        this.listaPessoas = listaPessoas;
    }
}

4- Datatables

As datatables é uma forma que os desenvolvedores encontraram de deixar o XHTML mais fluidos e apresentar os dados de forma fácil sem utilizar código java na camada de View. 

O primeiro passo é verificar se o xmlns (namespace está declarado corretamente - seção 1). O segundo passo é utilizar a tag <h:datatable> </h:datatable> para inicializar uma tabela.

<h:dataTable var="pessoa" value="#{gerenciarPessoa.listaPessoas}">
            <h:column>
                <f:facet name = "header">Name</f:facet> 
                    #{pessoa.name}
            </h:column>
            <h:column>
                <f:facet name = "header">Ações</f:facet>
                <h:form>
                    <h:commandButton value="Editar" action="#{gerenciarPessoa.gotoEditarPessoa()}">
                        <f:setPropertyActionListener target="#{gerenciarPessoa.pessoaAtual}" value="#{pessoa}"/>
                    </h:commandButton>
                    <h:commandButton value="Excluir" action="#{gerenciarPessoa.deletePessoa()}" >
                        <f:setPropertyActionListener target="#{gerenciarPessoa.pessoaAtual}" value="#{pessoa}"/>
                    </h:commandButton>
                </h:form>
            </h:column>
</h:dataTable>


Os primeiros atributos obrigatórios para uma datatable é o var e o value. No "var" colocamos um nome no qual a variável será disponibilizada dentro das tags do datatable. Já no target devemos inserir onde está a lista que a página deverá mostrar.

Outro ponto importante são os campos que colocamos de editar e excluir. O botão de editar aponta para um método do ManagedBean que direciona para a página de edição. Já o Excluir direciona para um método do ManagedBean que exclui o registro e recarrega a lista atualizada.





Nenhum comentário

Conta pra mim sua opinião!

Fale comigo