Online Training

Tutorial Passo a Passo

Este é um tutorial introdutório para os novos usuários do ZK. Vamos desenvolver uma aplicação web simples com um banco de dados, e explicá-la passo a passo. Apesar deste tutorial ser indicado para novos usuários do ZK, é necessário um pouco de experiência com a linguagem Java. E, isto é tudo que você precisa saber para desenvolver uma aplicação web com Ajax utilizando o ZK.

Neste tutorial nós assumimos que você tenha instalado o JDK (1.4 or superior), e um container servlet (ex.Tomcat).

Este tutorial esta dividido em 2 partes,

  • Parte 1, apresentação (UI - User Interface)
  • Parte 2, fazendo o link entre a apresentação e o banco de dados

Se você esta interessado em desenvolver sua própria aplicação, você deveria ler também este artigo sobre como configurar o ambiente de desenvolvimento.

A primeira aplicação ZK - Lista de Tarefas (To-Do List)

Imagine que nós precisamos de uma aplicação onde serão salvos eventos ou tarefas que iremos fazer no futuro, para ajudar um pouco a nossa memória. Então vamos desenvolver uma pequena aplicação web com um banco de dados. O banco de dados Java (HSQL DB) é adotado, pois não requer a instalação de um servidor de banco de dados.

De uma olhada nesta aplicação   Demo ao Vivo

  1. Faça o download do arquivo todo.zip, e descompacte, nele existe um arquivo .war e uma pasta
  2. Faça o deploy da aplicação no Tomcat, basta copiar o arquivo todo.war para a pasta $TOMCAT_HOME/webapps/. O tomcat fará o resto do trabalho.
  3. Copie a pasta hsqldb (arquivos de banco de dados) para a pasta raiz do seu ambiente de desenvolvimento.(ex.C:\)
  4. Inicie o Tomcat.
  5. Abra o seu navegador e visite http://localhost:8080/todo/todo.zul (o número da porta depende da configuração do seu Tomcat), e você deverá ver o mesmo conteúdo mostrado na figura abaixo.

Todas as Possibilidades

  • Digite as informações relativas a um exemplo, e clique no botão Add para inserir um registro no banco de dados.
  • Selecione qualquer linha na tabela para mostrar as informações nos campos abaixo, para serem alteradas pelo usuário, então clique no botão Update para atualizar seus dados.
  • Selecione qualquer linha na tabela, e clique no botão Delete para remover do banco o registro selecionado.

Camada de Apresentação (UI - User Interface)

Seu primeiro componente ZK

O primeiro passo é criar um arquivo cuja extensão seja zul, digamos todo.zul, e coloque este arquivo dentro a pasta raiz da sua aplicação web, por exemplo $TOMCAT_HOME/webapps/ProjectName/. Declarar um componente ZK é como declarar um componente HTML, declare o seu primeiro componente window como o exemplo abaixo,


<window title="To do list" width="640px" border="normal">
</window>

Então inicie o Tomcat e com o seu navegador visite a página http://localhost:8080/todo/todo.zul. O resultado é mostrado abaixo, uma window com o título “To do List”.

Tudo no ZK é um componente, então você pode trocar o título, largura, e a borda do componente window de acordo com a sua preferência. É bastante simples e intuitivo. Tente alterar estes atributos e veja os resultados.

Relação Hierárquica entre os componentes do ZK

Vamos tentar enriquecer esta página com mais componentes. Como nós precisamos mostrar os dados em forma de tabela, podemos declarar um componente listbox que serve para mostrar dados dentro de um componente (ou tag) window como é mostrado a seguir,


<window title="To do list" width="640px" border="normal">
 <listbox id="box" multiple="true" rows="4">
  </listbox>
</window>

Neste exemplo, o componente listbox se tornou um componente filho do componente window. Sim, existe uma relação hierárquica entre os componentes do ZK, logo, você encontrará uma exceção do tipo UI caso declare um componente no contexto errado, por exemplo, declarar um componente window como filho do componente listbox.

Componentes de Agrupamento (Nested)

Na declaração do componente listbox, usamos o atributo id com o valor (“box”) para poder identificar esta listbox para que possamos usar “box” para referenciar a listbox. Além disso, a listbox é um componente de agrupamento, que suporta dois tipos de componentes filho, listhead (aka: coluna da tabela), e listitem (aka: linha da tabela).


<window title="To do list" width="640px" border="normal">
 <listbox id="box" multiple="true" rows="4">
  <listhead>
   </listhead>
   <listitem>
   </listitem>
 </listbox>
</window>

Ainda não terminamos, vamos declarar três componentes listheader dentro da tag listhead, pois precisamos de três colunas nesta tabela, incluindo “Item”, “Priority”, e “Date” como é mostrado abaixo,


<window title="To do list" width="640px" border="normal">
<listbox id="box" multiple="true"  rows="4">
  <listhead>
   <listheader label="Item" />
      <listheader label="Priority" width="50px" />
      <listheader label="Date" width="90px" />
  </listhead>
  <listitem>
  </listitem>
 </listbox>
</window>

O resultado do código é mostrado na figura abaixo

Como temos três colunas na tabela, cada linha requer também três campos. Declare três componentes listcell dentro da tag listitem.


<window title="To do list" width="640px" border="normal">
<listbox id="box" multiple="true"  rows="4">
  <listhead>
   <listheader label="Item" />
   <listheader label="Priority" width="50px" />
   <listheader label="Opened" width="90px" />
  </listhead>
  <listitem>
   <listcell/>
      <listcell/>
      <listcell/>
  </listitem>
 </listbox>
</window>
Esta é a estrutura de agrupamento do componente listbox, 

+listbox 
  +listhead
    listheader
  +listitem
    listcell

Componentes de Entrada (Input)

Além de mostrar as informações dos eventos na listbox, nós precisamos cadastrar novos eventos, que inclui o nome do evento (event name) sendo um campo de texto, a prioridade do evento (event priority) sendo um campo numérico, e a data do evento (event date) sendo um campo de dada. Então declaramos uma textbox, uma intbox, e uma datebox dentro da tag window,


<window title="To do list" width="640px" border="normal">
<listbox id="box" multiple="true"  rows="4">
  <listhead>
   <listheader label="Item" />
   <listheader label="Priority" width="50px" />
   <listheader label="Opened" width="90px" />
  </listhead>
  <listitem>
   <listcell/>
   <listcell/>
   <listcell/>
  </listitem>
 </listbox>
  <listcell/>
  Item:<textbox id="name" cols="50" />
    Priority:<intbox id="priority" cols="1" />
    Date:<datebox id="date" cols="8"/>
    <button label="Add" width="36px" height="24px"/>
    <button label="Update" width="46px" height="24px"/>
    <button label="Delete" width="46px" height="24px"/> 
</window>

O resultado do código é mostrado na figura abaixo,

Componente de Visualização (Layout)

Para diferenciar os componentes de entrada do componente listbox, nós declaramos o componente groupbox para agrupar os componentes de entrada, que desenhará uma borda ao redor dos componentes de entrada.


<window title="To do list" width="640px" border="normal">
<listbox id="box" multiple="true"  rows="4">
  <listhead>
   <listheader label="Item" />
   <listheader label="Priority" width="50px" />
   <listheader label="Opened" width="90px" />
  </listhead>
  <listitem>
   <listcell/>
   <listcell/>
   <listcell/>
  </listitem>
 </listbox>
    <groupbox>
              <caption label="Event" />
       Item: <textbox id="name" cols="50" />
       Priority: <intbox id="priority" cols="1" />
       Date: <datebox id="date" cols="8">
       <button label="Add" width="36px" height="24px"/>
       <button label="Update" width="46px" height="24px"/>
       <button label="Delete" width="46px" height="24px"/>
    </groupbox>
</window>

Além do componente groupbox, declaramos o componente caption para mostrar um label “Event” no topo do componente groupbox, e o componente caption funciona como o elemento legent do HTML. O resultado é mostrado abaixo,

Até agora a parte de apresentação esta completa, o próximo passo é fazer o link entre a página com os dados no banco de dados.

Veja a Parte 2.