sábado, 5 de julho de 2008

Tagged under: , , ,

ZK: Ajax sem JavaScript no NetBeans - Parte 3

Estamos chegando à terceira e última parte do nosso tutorial sobre o uso do ZK no NetBeans. Vamos continuar alterando o projeto criado na parte 1 e evoluído na parte 2, finalizando uma Lista de Tarefas 100% funcional.

Vamos começar alterando o arquivo index.zul, para permitir inclusão, exclusão e alteração de tarefas. A versão final está listada a seguir, com negrito destacando as modificações relativas ao apresentado na parte 2. Adicionamos um groupbox contendo textbox, intbox e datebox, para permitir atribuir valores ao Nome da Tarefa, Prioridade e Data, respectivamente. Aos botões Incluir, Excluir e Salvar estão associados os respectivos métodos que serão acionados no evento onClick. Além disso, ao selecionar uma linha do listbox, o evento onSelect irá disparar o método selecionar().
<?xml version="1.0" encoding="UTF-8"?>
<window title="Lista de Tarefas" width="800px" border="normal">
<zscript src="ListaTarefas.zs"/>
<listbox id="box" multiple="true" rows="4" onSelect="selecionar()">
<listhead>
<listheader label="Tarefa"/>
<listheader label="Prioridade" width="90px"/>
<listheader label="Data" width="90px"/>
</listhead>
<listitem forEach="${listaTarefas}" value="${each}">
<listcell label="${each.nome}"/>
<listcell label="${each.prioridade}"/>
<listcell label="${each.dataTarefaAsString}"/>
</listitem>
</listbox>
<groupbox>
Tarefa:
<textbox id="nome" cols="30" />
Prioridade:
<intbox id="prioridade" cols="1" />
Data:
<datebox id="dataT" cols="8"/>
<button label="Incluir" width="60px" height="24px" onClick="incluir()" />
<button label="Salvar" width="60px" height="24px" onClick="salvar()" />
<buTton label="Excluir" width="60px" height="24px" onClick="excluir()" />
</groupbox>
</window>
Você deve ter observado que o código Java do zcript está agora em um arquivo separado. Para criá-lo no NetBeans, clique no nome do projeto com o botão direito e escolha New -> Other -> Web -> ZS File e clique em Next. Nomeie o arquivo como ListaTarefas.zs e clique em Finish.

Criando um arquivo ZS no NetBeans

O novo arquivo será criado na pasta Web Pages e deve ter o conteúdo abaixo. Infelizmente a versão atual REM, o plugin ZK para o NetBeans que estamos utilizando, ainda não provê code completion para arquivos ZS, portanto o editor mostrará o código Java como num arquivo texto comum (no Ubuntu, a tecla ENTER não funcionou, então tive que usar o Ctrl+Enter para inserir novas linhas).
import javabahia.beans.Tarefa;
import javabahia.dao.TarefaDAO;
import java.text.SimpleDateFormat;

TarefaDAO tarefaDAO = new TarefaDAO();
List listaTarefas = tarefaDAO.listar();

void incluir(){
//insere no banco de dados
Tarefa novaTarefa = new Tarefa(nome.value, prioridade.value.intValue(), dataT.value);
tarefaDAO.incluir(novaTarefa);

//sincroniza a variável listaTarefas com os dados do banco
listaTarefas = tarefaDAO.listar();

//insere um novo Tarefa na listbox
Listitem li = new Listitem();
li.setValue(novaTarefa);
li.appendChild(new Listcell(nome.value));
li.appendChild(new Listcell(prioridade.value.toString()));
li.appendChild(new Listcell(new SimpleDateFormat("dd/MM/yyyy").format(dataT.value)));
box.appendChild(li);
}

void salvar(){
//atualiza o banco de dados
Tarefa editTarefa = (Tarefa)box.selectedItem.value;
editTarefa.setNome(nome.value);
editTarefa.setPrioridade(prioridade.value);
editTarefa.setDataTarefa(dataT.value);
tarefaDAO.salvar(editTarefa);

//atualiza a listbox
List children = box.selectedItem.children;
((Listcell)children.get(0)).label = nome.value;
((Listcell)children.get(1)).label = prioridade.value.toString();
((Listcell)children.get(2)).label = new SimpleDateFormat("dd/MM/yyyy").format(dataT.value);
}

void excluir(){
tarefaDAO.excluir((Tarefa)box.selectedItem.value);
box.removeItemAt(box.getSelectedIndex());
limpar();
}

void selecionar(){
nome.value = ((Tarefa)box.selectedItem.value).getNome();
prioridade.value = ((Tarefa)box.selectedItem.value).getPrioridade();
dataT.value = ((Tarefa)box.selectedItem.value).getDataTarefa();
}

void limpar(){
nome.value = null;
prioridade.value = null;
dataT.value = null;
}
Os métodos incluir(), salvar(), excluir() e selecionar() são acionados pelos código já mostrado em index.zul e são bem auto-explicativos, portanto me reservarei ao direito de não entrar em detalhes (Você poderá encontrar maiores explicações no tutorial original, que utilizamos como base). Logo no início é instanciado o novo TarefaDAO, que ainda não havíamos criado, necessários para fazer "a ponte" entre as camadas de interface e persistência. Eis o seu código, que deve estar localizado no package javabahia.dao.
package javabahia.dao;

import java.util.List;
import javabahia.beans.Tarefa;
import javax.persistence.EntityManager;
import org.zkoss.zkplus.jpa.JpaUtil;

public class TarefaDAO {
private static EntityManager em = JpaUtil.getEntityManager("ListaTarefasPU");

public List listar() {
return em.createQuery("SELECT t FROM Tarefa t").getResultList();
}
public void excluir(Tarefa t) { em.remove(t); }
public void incluir(Tarefa t) { salvar(t); }
public void salvar(Tarefa t) {
em.getTransaction().begin();
em.persist(t);
em.getTransaction().commit();
}
}
Estamos quase prontos. pois ainda falta criar um construtor adicional para a classe Tarefa, necessário para adicionar novas tarefas. Ao invés de digitar da maneira tradicional, vamos usar um recurso do NetBeans. Estando com o código aberto, escolha o menu Source -> Insert Code, selecione Generate / Constructor. Marque Nome, Prioridade e Tarefa e clique em Generate.

Gerando um construtor adicional para a classe Tarefa

Agora sim, não falta mais nada. Execute sua aplicação e você verá a tela a seguir, com funcionamento semelhante a este demo ao vivo. O código-fonte deste tutorial está disponível para download neste link do javabahia.dev.java.net.

Uma aplicação completa feita no NetBeans usando o ZK

Se o ZK despertou seu interesse, sugiro dar uma olhada no Developers Guide, que possui uma documentação fundamentada e abrangente. Consulte também site do ZK e, é claro, nosso inseparável Google. Espero que lhe tenha sido útil e até o próximo tutorial!

4 comentários:

Jonas Dias disse...

Olá,
Muito legal esse guia do ZK que vocês fizeram!
Eu fiz a aplicação aqui e funcionou bem, mas com um pequeno porém.
Os dados não são, de fato, atualizados no banco aqui. Quando eu atualizo a página, a listbox volta a listar os valores originais inseridos, que estão intocados no JavaDB.

Se eu alterar uma das entradas já existentes e salvar, quando eu atualizo a página, as alterações persistem. Entretanto, as novas inserções desaparecem.

Além disso, o banco sempre permanece intocado. Tentei fazer em.flush() e em.getTransaction().commit(), mas não funciona por não ter nenhuma transação ativa.

Alguma coisa deve estar faltando e eu não me dei conta.

Podem me ajudar??

Obrigado,
Jonas.

Jonas Dias disse...

Desculpe esse flooding. Voltei aqui porqueu consegui resolver o problema.

Para que os dados sejam alterados no banco, o ideal é que nos métodos incluir() e salvar() da classe TarefaDAO você coloque isso:

em.getTransaction().begin();
em.persist( t);
em.getTransaction().commit();

ao invés do em.persist() somente.
Dessa forma, as alterações são salvadas diretamente no banco.
Pode-se pensar numa forma de melhorar isso para não ter que acessar o banco a cada alteração de repente. Mas segue essa dica já.

Abraços,
Jonas

Unknown disse...

Obrigado Jonas! Você está certo! Já corrigimos o código da forma sugerida por você, tanto no post quanto no arquivo para download.

Anônimo disse...

O framework é bom mas essa abordagem de utilização não!
Para obter um melhor aproveitamento dele tem que usar o conjunto ZK + Spring + JPA/Hibernate.
E isso não é fácil....
Também trabalhar no modelo MVC seria legal....