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.
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.
