Curso de Programação Web com Java

Como usar os principais elementos XHTML

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

Adicionando os namespaces XHTML

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”


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;
    }
}

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.

 

 

Esse post foi modificado em 9 de abril de 2021 11:50

Tags JavaXHTML
19 de novembro de 2018 16:55
Deixar um Comentário

Post Relacionados

This website uses cookies.