Professional Documents
Culture Documents
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
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)
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
hello.zul
HelloWindow.java
hello.zul
HelloWindow.java
Atributo use aponta para HelloWindow Ao do boto Recupera o objeto que manipula a textbox atravs do id
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.
ZK Framework
Configurando o ZK Studio
Configurando o ZK Studio
ZK Framework
Configurando o ZK Studio
Configurando o ZK Studio
ZK Framework
Referncias
http://www.zkoss.org/ ZK Ajax without Javascript Framework; Henry Chen, Robbie Cheng (2007) Revista Mundo Java - edio 36