EntityManager em = JPAUtil.getEntityManager(); em.getTransaction().begin(); em.persist(automovel); em.getTransaction().commit(); } }
Um último passo, extremamente importante, é fecharmos a EntityManager que foi aberta, dessa forma, não mantemos recursos em uso desnecessariamente: public void salva() {
// conseguimos a EntityManager EntityManager em = JPAUtil.getEntityManager(); em.getTransaction().begin(); em.persist(automovel); em.getTransaction().commit(); em.close(); }
Pronto, com isso conseguimos persistir o primeiro automóvel a partir da nossa aplicação JSF. É importante notar que o código escrito pouco difere do desenvolvido no capítulo2. No decorrer do livro, aprenderemos melhores formas de se trabalhar com esse código de persistência e também como fazer um controle de transações mais transparente e simplificado.
3.7
Liste os dados com o dataTable
Uma vez que temos os dados gravados no banco de dados, precisamos mostrá-los para os usuários. Portanto, vamos exibi-las em uma tabela, que listará todos os auto- móveis que estão gravados no banco de dados. Ao final do desenvolvimento, teremos uma tela parecida com a figura3.5.
Casa do Código Capítulo 3. Primeiros passos com o JSF
Figura 3.5: Listagem de Automóveis
O primeiro passo para a construção dessa tabela é criarmos um novoxhtml, que podemos chamar de listaAutomoveis.xhtml. Esse arquivo possui o mesmo cabeçalho importando a Tag do JSF que o formulário de cadastro:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"> <h:body>
</h:body> </html>
Agora podemos construir a tabela com o JSF através de um novo componente, o dataTable. Como o próprio nome diz, o objetivo desse componente é exibir dados tabulares, também conhecidos como grids. O dataTableprecisa que seja fornecido um objeto para ele, através do atributo value, que no nosso caso será uma lista com os elementos que devem ser usados na listagem.
A lista com os elementos deve ser recuperada de um Managed Bean e, como con- tinuamos trabalhando com automóveis, utilizaremos o mesmoAutomovelBeande antes. Dessa forma, precisamos ligar o valuedo dataTablecom uma lista de au- tomóveis no AutomovelBean. O primeiro passo, é criarmos a lista no Managed Bean e seu respectivo getter, que fará a consulta no banco de dados:
@ManagedBean
public class AutomovelBean {
private Automovel automovel = new Automovel(); private List<Automovel> automoveis;
public List<Automovel> getAutomoveis() {
3.7. Liste os dados com o dataTable Casa do Código EntityManager em = JPAUtil.getEntityManager();
Query q = em.createQuery("select a from Automovel a", Automovel.class);
this.automoveis = q.getResultList(); em.close();
return automoveis; }
// método salva(), getter e setter do automovel }
Códigos de persistência dentro do Managed Bean Muitos desenvolvedores são contra colocar códigos que envolvam JDBC, JPA e queries do banco de dados dentro de classes que auxiliam no trabalho com o framework, como o Managed Bean. Justamente para esses casos, diversos desenvolvedores tendem a usar classes para encap- sular essas tarefas, fazendo o papel de um DAO (Data Access Object) ou um repositório.
Na seção4.2vamos ver como fazer essa organização.
Agora que temos o método getAutomoveisque devolve a lista recém buscada do banco de dados, podemos apontar o dataTablepara ele:
<h:dataTable value="#{automovelBean.automoveis}" />
Para montarmos essa tabela, vamos precisar dizer quais colunas queremos e quais informações deverão ser mostradas nelas. Então, vamos definir uma variável que vai identificar cada um dos automóveis buscados para serem exibidos. Vamos chamar essa variável de automovelpelo atributo vardo dataTable:
<h:dataTable value="#{automovelBean.automoveis}" var="automovel"/> Agora, dentro dessa tabela, podemos criar a primeira coluna, através da Tag h:columne colocar o conteúdo que deverá ser mostrado dentro dela:
Casa do Código Capítulo 3. Primeiros passos com o JSF <h:column>
#{automovel.marca} </h:column>
</h:dataTable>
Pronto, já temos uma tabela que, quando a tela é acessada, mostra uma lista com a marca de cada um dos automóveis cadastrados. Para criar novas colunas, bastaria repetir blocos da Tag h:column:
<h:dataTable value="#{automovelBean.automoveis}" var="automovel"> <h:column> #{automovel.marca} </h:column> <h:column> #{automovel.modelo} </h:column> <!-- outros colunas --> </h:dataTable>
Nesse instante, temos uma tabela como a mostrada pela figura3.6:
Figura 3.6: Listagem de Automóveis sem borda e cabeçalho
Note que ficou confuso distinguir o que cada uma das colunas representa. Não temos uma identificação do que a cada uma delas se refere. Para resolver esse pro- blema, podemos adicionar uma borda para separar cada célula e um cabeçalho a cada coluna para identificar seu conteúdo.
Adicionar a borda é mais simples, então faremos isso primeiro. Como nossa preocupação, por enquanto, não é layout, basta adicionar border="1"na nossa h:dataTable.
3.7. Liste os dados com o dataTable Casa do Código <h:dataTable value="#{automovelBean.automoveis}" var="automovel"
border="1"> <!-- colunas aqui dentro -->
</h:dataTable>
Com essa alteração o resultado será como na figura3.7.
Figura 3.7: Listagem de Automóveis com borda e sem cabeçalho
Agora sim vamos adicionar o cabeçalho de cada coluna. Para isso, precisamos modificar uma característica do h:column, que é o seu cabeçalho. Essas caracterís- ticas que os componentes possuem, que não necessariamente são visuais, são o que chamamos de facetas, as quais podemos modificar através de um novo componente chamado facet.
O objetivo do faceté apenas mudar a característica de um outro componente, no caso o h:column, e não necessariamente gerar código HTML. Justamente por isso, essa Tag não fica sob o namespace h. Precisamos importá-la de outro lugar. A partir desse momento, temos que usar a Taglib coredo JSF, que é quem possui as Tags que não geram conteúdo HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"> <h:body>
<h:dataTable value="#{automovelBean.automoveis}" var="automovel" border="1">
<!-- colunas aqui dentro --> </h:dataTable>
</h:body> </html>
Casa do Código Capítulo 3. Primeiros passos com o JSF Pronto, agora que importamos a nova Taglib por meio do prefixo f, podemos usar a Tag facetindicando qual a característica que será alterada, que nesse caso é o cabeçalho da coluna:
<h:column>
<f:facet name="header"> Marca
</f:facet>
#{automovel.marca} </h:column>
Quando fazemos os cabeçalhos para todas as colunas, temos uma tela como a da figura3.8.
Figura 3.8: Listagem de Automóveis com borda e cabeçalho
Se quiséssemos, poderíamos mudar mais características, como um rodapé, atra- vés da facetchamadafooter. Cada componente pode possuir facetas diferentes, portanto é importante ficar atento no momento de usá-lo.