Zk Framework

7,277 views
7,090 views

Published on

Published in: Technology, Education
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
7,277
On SlideShare
0
From Embeds
0
Number of Embeds
2,210
Actions
Shares
0
Downloads
308
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Zk Framework

  1. 1. Autor: Thiago Baesso Procaci ZK - Utilizando Ajax sem Javascript
  2. 2. <ul><li>Roteiro: </li></ul><ul><li>Apresentar conceitos do Framework; </li></ul><ul><li>Exemplificar o uso. </li></ul>
  3. 3. <ul><li>Porque utilizar o ZK ? </li></ul><ul><li>Necessidade de aplicações com interfaces ricas; </li></ul><ul><li>Interfaces ricas  grandes esforços; </li></ul><ul><li>Esforços com interfaces ricas  possível desvio do foco do desenvolvimento (regras de negócio). </li></ul>Propósito do ZK: Tornar o desenvolvimento de interfaces web simples. Em outras palavras, facilitar a confecção de interfaces ricas.
  4. 4. Evolução das páginas web Páginas HTML Estáticas Páginas HTML Dinâmicas (DHTML) Páginas com Flash, Applets Páginas com uso de Ajax
  5. 5. <ul><li>Um pouco sobre Ajax </li></ul><ul><li>Pode-se entender como a próxima geração do DHTML; </li></ul><ul><li>Forte dependência de Javascript para capturar eventos e manipular a representação visual de uma página; </li></ul><ul><li>Não depende de algum tipo de plugin para que a aplicação funcione (ao contrário de Flash e Applets); </li></ul><ul><li>Maior interação (usuário x sistema). </li></ul>
  6. 6. <ul><li>Com a maturação da tecnologia Ajax.. </li></ul><ul><li>Aparecimento de vários frameworks (como o ZK); </li></ul><ul><li>O ZK Framework.. </li></ul><ul><li>Facilita a incorporação de Ajax na aplicações Java Web; </li></ul><ul><li>Dispensa conhecimentos de Javascript; </li></ul><ul><li>Possui uma linguagem de marcação (similar ao HTML) denomidade ZUML. </li></ul><ul><li>Gera código Javascript, HTML através da ZUML </li></ul>
  7. 7. <ul><li>ZK User Interface Markup Language - ZUML </li></ul><ul><li>Linguagem de marcação de mais alto nível; </li></ul><ul><li>Define a interface através de componentes (ex. Grid, datebox, captcha); </li></ul><ul><li>Interface amigável com todo HTML, Javascript e CSS gerados a partir da ZUML. </li></ul>
  8. 8. Possibilidade de configurar atributos (como na decimalbox). O input gerado assumirá valores nos moldes do atributo format Exemplo ZUML
  9. 9. <ul><li>Funcionamento do ZK (Arquitetura) </li></ul><ul><li>O ZK possui 3 módulos responsáveis por incorporar Ajax a uma aplicação: </li></ul><ul><li>ZK loader; </li></ul><ul><li>ZK AU ( asynchronous update ) engine; </li></ul><ul><li>ZK client engine. </li></ul>Ressaltando que o que ZK loader e o ZK AU engine rodam do lado do servidor e são compostos por Servlets Java. O ZK cliente engine é composto por cógido Javascript (roda no lado do cliente).
  10. 11. 1 : Sempre um cliente faz a requisição de uma página através da URL, o ZK loader interpreta a requisição, gera a página HTML correspondente (baseado no código ZUML referente à URL requisitada) e cria objetos no servidor que permitirão a manipulação da interface da página.
  11. 12. 2: Em seguida, o ZK loader envia a página HTML gerada para o cliente juntamente com o ZK client engine. O ZK client engine irá residir no “lado do cliente” e será responsável por monitorar os eventos disparados pelo browser.
  12. 13. 3: Se qualquer evento for disparado no cliente, o ZK client engine irá enviá-lo (através de uma requisição Ajax) para o ZK AU engine localizado no servidor.
  13. 14. 4: O ZK AU engine recebe a requisição Ajax, atualiza os objetos que manipulam os componentes de interface e retorna uma resposta para o cliente, relatando as modificações que página deverá sofrer.
  14. 15. 5: Assim que o ZK client engine recebe a resposta, ele atualiza a representação visual da página
  15. 16. <ul><li>Funcionamento do ZK (resumo) </li></ul><ul><li>ZK loader  carrega página; </li></ul><ul><li>ZK AU engine e ZK client engine  tornam fácil a comunicação Ajax (objetos no servidor dispensam a programação Javascript); </li></ul><ul><li>Qualquer componente definido em ZUML terá um objeto para a manipulação da visão no servidor. </li></ul>Vantagem: O ZK prevê vários problemas de compatibilidade entre browsers.
  16. 17. <ul><li>Injetando Ajax em uma aplicação com o ZK </li></ul><ul><li>Exemplo prático ressaltando conceitos apresentados. </li></ul><ul><li>Ambiente </li></ul><ul><li>Eclipse Ganymede; </li></ul><ul><li>Tomcat 6.0. </li></ul>
  17. 18. Novo projeto no eclipse
  18. 19. Escolhendo o tipo de aplicação (Dynamic Web Project)
  19. 20. Nome do projeto: zkdemo Servidor: Apache Tomcat
  20. 21. <ul><li>Configurações Finais </li></ul><ul><li>Fazer download do ZK em http://www.zkoss.org/download/ e extrair os jars para a pasta WEB-INF/lib do projeto. </li></ul><ul><li>Configurar o web.xml (vide user guide – copiar e colar). </li></ul>Já podemos começar a desenvolver o nosso exemplo inicial e rever os conceitos apresentados de forma prática.
  21. 22. Pacotes e classes do exemplo hello.zul  arquivo com o código ZUML da página. HelloWindow.java  classe java que irá manipular a página hello.zul Obs.: A extensão .zul é a utilizada para os arquivos que contêm código ZUML.
  22. 23. HelloWindow.java hello.zul
  23. 24. Atributo use aponta para HelloWindow HelloWindow.java hello.zul
  24. 25. Atributo use aponta para HelloWindow Ação do botão HelloWindow.java hello.zul
  25. 26. Atributo use aponta para HelloWindow Recupera o objeto que manipula a textbox através do id Ação do botão Manipula valor da textbox HelloWindow.java hello.zul
  26. 27. Aplicação Funcionando Só acessar  http://localhost:8080/zkdemo/hello.zul
  27. 28. Entendendo o Funcionando
  28. 29. <ul><li>Dica para desenvolvedores </li></ul><ul><li>Utilizar o ZK Studio. </li></ul>Plug-in do eclipse que facilita o desenvolvimento de aplicações que utilizam o ZK
  29. 30. Configurando o ZK Studio Vá no menu help e clique em Software Updates
  30. 31. Clique em Add Site Configurando o ZK Studio
  31. 32. Configurando o ZK Studio Adicione em location: http://studioupdate.zkoss.org/studio/update
  32. 33. Configurando o ZK Studio Selecione a url do ZK Studio e clique em install
  33. 34. <ul><li>Referências </li></ul><ul><li>http://www.zkoss.org/ </li></ul><ul><li>ZK – Ajax without Javascript Framework; Henry Chen, Robbie Cheng (2007) </li></ul><ul><li>Revista Mundo Java - edição 36 </li></ul>

×