Como usar os principais elementos XHTML

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.

 

 

 

Vinicius dos Santos

Apenas um apaixonado por Ciência da Computação e forma com que ela pode transformar vidas!

Deixe uma resposta