Primeiros Passos

Com o nosso ambiente configurado no artigo anterior, vamos adicionar algums funcionalidades a nossa tela e ver como o ZK Studio funciona.

O Zk Studio permite auto-complete dentro de arquivos .zul e possui alguns recursos interessantes como drag-and-drop de componentes para os arquivos ZUL através do ZUL Palette, visualização em árvore dos componentes dentro do Outline, manipular as propriedades de um componente selecionado dentro do Properties, renderização do arquivo zul dentro do ZUL Visual Editor e uma vizualização das versóes instaladas e exemplos de códigos através do Sample Codes.

Sabendo um pouco melhor como o ZK Studio é estruturado, vamos começar a modificar o nosso exemplo.
Com o Eclipse aberto, vamos mudar a perspectiva para a do ZK. No canto superior direto, clique no botão "Open Perspective" e escolha a do ZK.

Feito isso sua tela deve estar parecida com essa:

Feito isso vamos abrir o arquivo index.zul e editar alguns coisas:

<?page title="Hello World"?>
<window title="Minha Primeira Janela" border="normal" width="200px">
<label value="Hello World!" />
</window>

Troquei o atributo title da pagina e da window, e o value de label.
Rode o servidor, e a tela gerada deve ficar assim:

Em ZK, voce escreve em ZUML(ZK User Interface Markup Language), linguagem essa baseada em XML.
Cada atributo alterado, altera cada propriedade de um componente.
Algumas propriedades do componente Window:

Propriedade	Função	Valor
title	Define o título da janela	qualquer texto
border	Define o estilo de borda da janela	normal ou none (padrão)
height	Define a altura da janela	numero de pixels (Ex: 100px)
width	Define o comprimento da janela	numero de pixels (Ex: 100px)
closable	Define se ou não a janela pode ser fechada	true ou false
sizeable	Define se ou não a janela pode ser redimensionada	true ou false

Vamos alterar a nossa janela pra ficar com um comprimento de 100px, ser redimensionável e fechada. Com as mudanças feitas, basta voce recarregar a pagina. Deve ficar assim:

Tente redimensionsar e/ou fechar a janela.

Agora vamos adicionar uma botão e um evento, ficando assim:

<?page title="Hello World"?>
<window title="Minha Primeira Janela" border="normal" closable="true"
sizable="true" width="200px">
<label value="Hello World!" />
<button label="sayHello" onClick='alert("Hello World!")' />
</window>

Ficando assim:

O evento onClick é acionado quando o botão é clicado, gerando, nesse caso, um alert com o valor "Hello World!". A função alert() é um função global que gera um alerta, similar a função alert() presente no Javascript. O ZK possui alguns objetos e funções globais, mas isso será abordado em outro artigo.
Mas essa não é a única maneira de descrever como o evento vai ser tratado. Eis uma outra maneira:

<?page title="Hello World"?>
<window title="Minha Primeira Janela" border="normal" closable="true"
sizable="true" width="200px">
<label value="Hello World!" />
<button label="sayHello" onClick="sayHello()" />
<zscript>
void sayHello() {
Messagebox.show("Hello World!");
}
</zscript>
</window>

Dessa vez eu escrevo o código Java dentro de um zscript. Esse tipo de tag significa que voce pode escrever scripts, mas em vez de serem processador no cliente serão processados no servidor. O zscript aceita mais de um tipo linguagens, basta voce dizer qual no atribute language, sendo Java o padrão.
Podemos observar que dessa vez eu utilizei uma outra maneira de criar um alert através do objeto Messagebox, similar ao JOptionPane, podendo passar vários parametros nas funções caso eu queira uma mensagem tipo alerta ou error.
Agora, se quisessemos, por exemplo trocar uma tributo o nome do nosso label?
Podemos fazer isso acessando o componente pelo id. Para cada componente é gerado um id automaticamentetem, mas eu posso definiar uma, e nesse caso foi o que eu fiz :

<?page title="Hello World"?>
<window title="Minha Primeira Janela" border="normal" closable="true"
sizable="true" width="200px">
<label id="mylabel" value="Hello World!" />
<button label="sayHello" onClick="change()" />
<zscript>
void change() {
mylabel.value = "ZKBrasl";
}
</zscript>
</window>

Depois de o botão ter sido clicado:

O label foi alterado, sem muita dificuldade, com uma chamada de evento paracida com Java mas que por trás roda AJAX. :)

Veja que estamos alterando o atributo value do componente, mas poderiamos ter feito isso através do método setValue. Isso pode ser feito porque cada componente ZK é formado por uma parte visual e uma parte Java. Isso será abordado melhor mais em outro artigo.

O ZK tem suporte a EL (Express Language) através da sintaxe ${exp}. Vamos agora, definiar que o valor de um botão será o mesmo de um outro botão:

<?page title="Hello World"?>
<window title="Minha Primeira Janela" border="normal" closable="true"
sizable="true" width="200px">
<button id="button1" label value="sayHello" />
<button id="button2" label="${button1.label}" />
</window>

EL Será abordado melhor em outro artigo.

Até agora escrevemos os nosso códigos de tratamento de evento dentro de um arquivo .zul, mas e se quisesemos escrever em outro lugar?
Claro que podemos! O ZK tras um bom suporte ao padrão MVC, nesse caso voce deve implementar uma classe java para tratar os eventos. A classe deve estender GenericComposer.

<?page title="Hello World"?>
<window title="Minha Janela" border="normal" width="200px"
apply="view.MyComposer">
<button label="say Hello" forward="onSayHello" />
</window>

view.MyComposer

public class MyComposer extends GenericComposer {
public void onSayHello(Event evt) {
evt.getTarget().appendChild(new Label("Hello"));
}
}

Depois de o botão ter sido clicado:

Vimos um pouco mais como o ZK funciona, e como o ZK trata eventos de uma maneira simples e rápida.
Vimos alguns componentes simples, mas exitem vários outros.

Voce pode consultar uma demo dos componentes aqui:  http://www.zkoss.org/zkdemo/
No próximo artigo veremos um pouco mais de como o ZK funciona por dentro.

ATUALIZAÇÃO - 04/12/2010

Uma outra maneira mais simples na hora de tratar eventos e que eu costumo usar é fazer com que a minha classe onde eu trato os meus eventos estenda de GenericForwardComposer. Assim o nosso exemplo fica assim:

view.MyComposer

public class MyComposer extends GenericForwardComposer {

 Window win;
 
 public void onClick$btn(Event evt) {
  win.appendChild(new Label("Hello"));
 }
}

Dessa forma retiramos o atributo forward de button, colocamos um id nele e em window também.
Na classe, declaramos uma variável com nome similar ao id de window e do tipo Window. Dessa forma forma o ZK vai saber que aquela várial está se ligando a Window na parte de visão cujo id bate com o nome da variável e tipo também. O nome do método agora segue uma convenção de nomes para tratamentos de eventos: "event_name$component_id". Dessa forma quando o evento for disparada e redirecionado para essa classe, ele vai comparar o tipo de evento e depois o id do componente o qual  disparou o evento. Dessa forma o código fica mais limpo e máis fácil de manter.

Em geral os exemplos postados no blog irá utilizar uma abordagem mais parecida com essa.