ZK Framework

ZK - Utilizando Ajax sem Javascript

Autor: Thiago Baesso Procaci

ZK Framework
Roteiro:
Apresentar conceitos do Framework; Exemplificar o uso.

ZK Framework
Propsito do ZK:
Tornar o desenvolvimento de interfaces web simples. Em outras palavras, facilitar a confeco de interfaces ricas.

Porque utilizar o ZK ?
Necessidade de aplicaes com interfaces ricas;
Interfaces ricas grandes esforos; Esforos com interfaces ricas possvel desvio do foco do desenvolvimento (regras de negcio).

ZK Framework
Evoluo das pginas web
Pginas HTML Estticas

Pginas HTML Dinmicas (DHTML)

Pginas com Flash, Applets

Pginas com uso de Ajax

ZK Framework
Um pouco sobre Ajax
Pode-se entender como a prxima gerao do DHTML; Forte dependncia de Javascript para capturar eventos e manipular a representao visual de uma pgina; No depende de algum tipo de plugin para que a aplicao funcione (ao contrrio de Flash e Applets); Maior interao (usurio x sistema).

ZK Framework
Com a maturao da tecnologia Ajax..
Aparecimento de vrios frameworks (como o ZK);

O ZK Framework..
Facilita a incorporao de Ajax na aplicaes Java Web; Dispensa conhecimentos de Javascript; Possui uma linguagem de marcao (similar ao HTML) denomidade ZUML. Gera cdigo Javascript, HTML atravs da ZUML

ZK Framework
ZK User Interface Markup Language - ZUML
Linguagem de marcao de mais alto nvel; Define a interface atravs de componentes (ex. Grid, datebox, captcha); Interface amigvel com todo HTML, Javascript e CSS gerados a partir da ZUML.

Exemplo ZUML

Possibilidade de configurar atributos (como na decimalbox). O input gerado assumir valores nos moldes do atributo format

ZK Framework
Funcionamento do ZK (Arquitetura)
O ZK possui 3 mdulos responsveis por incorporar Ajax a uma aplicao: ZK loader; ZK AU (asynchronous update) engine; ZK client engine.
Ressaltando que o que ZK loader e o ZK AU engine rodam do lado do servidor e so compostos por Servlets Java.
O ZK cliente engine composto por cgido Javascript (roda no lado do cliente).

1 : Sempre um cliente faz a requisio de uma pgina atravs da URL, o ZK loader interpreta a requisio, gera a pgina HTML correspondente (baseado no cdigo ZUML referente URL requisitada) e cria objetos no servidor que permitiro a manipulao da interface da pgina.

2: Em seguida, o ZK loader envia a pgina HTML gerada para o cliente juntamente com o ZK client engine. O ZK client engine ir residir no lado do cliente e ser responsvel por monitorar os eventos disparados pelo browser.

3: Se qualquer evento for disparado no cliente, o ZK client engine ir envi-lo (atravs de uma requisio Ajax) para o ZK AU engine localizado no servidor.

4: O ZK AU engine recebe a requisio Ajax, atualiza os objetos que manipulam os componentes de interface e retorna uma resposta para o cliente, relatando as modificaes que pgina dever sofrer.

5: Assim que o ZK client engine recebe a resposta, ele atualiza a representao visual da pgina

ZK Framework
Funcionamento do ZK (resumo)
ZK loader carrega pgina; ZK AU engine e ZK client engine tornam fcil a comunicao Ajax (objetos no servidor dispensam a programao Javascript); Qualquer componente definido em ZUML ter um objeto para a manipulao da viso no servidor.
Vantagem: O ZK prev vrios problemas de compatibilidade entre browsers.

ZK Framework
Injetando Ajax em uma aplicao com o ZK
Exemplo prtico ressaltando conceitos apresentados.

Ambiente
Eclipse Ganymede; Tomcat 6.0.

ZK Framework
Novo projeto no eclipse

ZK Framework
Escolhendo o tipo de aplicao (Dynamic Web Project)

Nome do projeto: zkdemo

Servidor: Apache Tomcat

ZK Framework
Configuraes Finais
Fazer download do ZK em http://www.zkoss.org/download/ e extrair os jars para a pasta WEB-INF/lib do projeto. Configurar o web.xml (vide user guide copiar e colar).

J podemos comear a desenvolver o nosso exemplo inicial e rever os conceitos apresentados de forma prtica.

ZK Framework
Pacotes e classes do exemplo
hello.zul arquivo com o cdigo ZUML da pgina. HelloWindow.java classe java que ir manipular a pgina hello.zul

Obs.: A extenso .zul a utilizada para os arquivos que contm cdigo ZUML.

HelloWindow.java

hello.zul

HelloWindow.java

Atributo use aponta para HelloWindow

hello.zul

HelloWindow.java

Atributo use aponta para HelloWindow Ao do boto

hello.zul

HelloWindow.java

Atributo use aponta para HelloWindow Ao do boto Recupera o objeto que manipula a textbox atravs do id

Manipula valor da textbox hello.zul

ZK Framework
Aplicao Funcionando

S acessar http://localhost:8080/zkdemo/hello.zul

ZK Framework
Entendendo o Funcionando

ZK Framework
Dica para desenvolvedores
Utilizar o ZK Studio.

Plug-in do eclipse que facilita o desenvolvimento de aplicaes que utilizam o ZK

ZK Framework
Configurando o ZK Studio

V no menu help e clique em Software Updates

Configurando o ZK Studio

Clique em Add Site

ZK Framework
Configurando o ZK Studio

Adicione em location: http://studioupdate.zkoss.org/studio/update

Configurando o ZK Studio

Selecione a url do ZK Studio e clique em install

ZK Framework
Referncias
http://www.zkoss.org/ ZK Ajax without Javascript Framework; Henry Chen, Robbie Cheng (2007) Revista Mundo Java - edio 36