ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em...
-
Upload
carla-de-paiva-casado -
Category
Documents
-
view
234 -
download
5
Transcript of ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em...
![Page 1: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/1.jpg)
ZKRIA com ZK Framework
![Page 2: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/2.jpg)
O que é ZK? ZK é um framework AJAX orientado a eventos, baseado
em componentes, open-source para desenvolvimento de aplicações WEB escrito em Java que permite a criação de interfaces ricas(RIA) com o usuário para aplicações web sem Javascript e poucos conhecimento de programação.
ZK possui a denominada abordagem server-centric na qual a sincronização de conteúdo de componentes e o pipelining de evento entre clientes e servidores são feitas automaticamente pelo motor e os códigos de canalização AJAX são completamente transparentes para os desenvolvedores de aplicativos web.
![Page 3: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/3.jpg)
Server Centric vs Client centric
Server-Centric Client-Centric
![Page 4: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/4.jpg)
Pontos Fortes Open Source: Zk é o principal framework open source Ajax +
Mobile. A comunidade de desenvolvedores ZK é extremamente ativa com mais de 20 traduções, mais de 100 artigos/blogs e mais de 100.000 linhas de código, mais de 1.300.000 downloads de mais de 190 paises.
Experiência Rica de Usuário: Mais de 200 componentes prontos. Vários componentes de terceiros: JFreeChart. JasperReports, Google Maps, FCKeditor, Timeline, ExtJS, Dojo e mais.
Baseado em padrões: ZK é um solução baseada em padrões Extensibilidade e customização: ZK é totalmente
personalizável e extensível com uma arquitetura modular e plug-and-play
Acesso Móvel: ZK estende o alcance de sua aplicação para os dispositivos móveis. ZK suporta Java Mobile, Android e vários navegadores móveis
Segurança: ZK é concebido desde sua criação para ser seguro.
![Page 5: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/5.jpg)
Simplificando as coisas…
![Page 6: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/6.jpg)
Componentes ZK Site com exemplo dos componentes:
http://www.zkoss.org/zkdemo/userguide/
![Page 7: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/7.jpg)
Configuração do ambiente JDK:
http://java.sun.com/javase/downloads/widget/jdk6.jsp Eclipse Galileo para Java EE:
http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/galileosr2
Tomcat 6: http://tomcat.apache.org/download-60.cgi
ZK Studio(Plugin para o Eclipse): http://www.zkoss.org/download/zkstudio.dsp
ZK 5.0.X: http://www.zkoss.org/download/zk.dsp
![Page 8: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/8.jpg)
Instalado o plugin do ZK no Eclipse Em Window Help -> Install New software Add...
Name: Zk Studio Location: http://www.zkoss.org/download/zkstudio.dsp
Selecione o plugin e mande instalar Depois de instalar, baixe a versão mais atual do ZK:
http://www.zkoss.org/download/zk.dsp Depois de baixado, em Window -> Preferences. ZK -> ZK
Packages Add File
Selecione o File Import, o local do arquivo do ZK Depois disso selecione esse pacote que voce instalou, apply
e ok Pronto!
![Page 9: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/9.jpg)
Primeiros passos Criação de um Projeto com ZK Configuração do servidor Iniciando a aplicação Primeiro exemplo… Projeto: Primeiros passos no site de comp2
Criação de uma view com um controlador. Demonstração do uso de MVC com o ZK.
![Page 10: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/10.jpg)
ZUML
![Page 11: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/11.jpg)
O que é? O ZK User Interface Markup Language (ZUML) é baseada
em XML Arquivos ZUML possuem extensão .zul
![Page 12: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/12.jpg)
Características Cada elemento ZK instrui ao ZK Loader qual componente
criar Uma propriedade ZK descreve um valor inicial a ser
atribuído ao componente criado Uma instrução de processamento ZK descreve como
processar a página inteira, como o título da página. XML Implicit Objects Expresion Language zscript ZK Processing Instruction ZK Attributes ZK Elements
![Page 13: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/13.jpg)
XML O ZUML é baseado em XML:
http://docs.zkoss.org/wiki/ZUML_XML
![Page 14: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/14.jpg)
Implicit Objects Objetos implícitos são muito parecidos com variáveis
globais tratadas pelo sistema. Você pode usá-lo para obter informações do sistema e do cliente. Além disso, é uma maneira de passar informações entre páginas. São realmente úteis para o desenvolvimento de uma aplicação web.
http://docs.zkoss.org/wiki/ZUML_Implicit_Objects
![Page 15: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/15.jpg)
ZScript O zscript permitem escrever código Java dentro ZUML,
para prototipagem rápida. Possui suporte a vários tipos de linguagens além de Java
http://docs.zkoss.org/wiki/Zscript
![Page 16: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/16.jpg)
Expression Language (EL)
Expression Language é uma linguagem de scripting. Através dela, o pode-se escrever código em ZUML para acessar componentes Java facilmente. Além disso, o desenvolvedor pode acessar componentes ZUML através de uma expressão clara e simples. EL pode acessar objetos implícitos também.
http://docs.zkoss.org/wiki/ZUML_Expression_Language_(EL)
![Page 17: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/17.jpg)
Outros... ZK Processing Instruction
http://docs.zkoss.org/wiki/ZUML_ZK_Processing_Instructions ZK Attributes
http://docs.zkoss.org/wiki/ZUML_ZK_Attributes ZK Elements
http://docs.zkoss.org/wiki/ZUML_ZK_Elements
![Page 18: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/18.jpg)
Ciclo de Vida
![Page 19: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/19.jpg)
O ciclo de vida de carregamento de uma página
A fase inicial da Page A fase de criação da Page A fase de processamento de eventos A fase de renderização
![Page 20: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/20.jpg)
Gerando uma pagina HTML
![Page 21: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/21.jpg)
O ciclo de vida de atualização de uma página
A fase de processamento de solicitação A fase de processamento de eventos A fase de renderezição
![Page 22: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/22.jpg)
ZK fazendo Ajax
![Page 23: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/23.jpg)
Componente UI Componente
Parte Visual Parte Java
![Page 24: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/24.jpg)
Desktop, Page e Componentes Um desktop é uma janela do navegador. É uma coleção de
páginas para atender a solicitação de uma mesma URL Uma página é uma coleção de componentes, que são
exibidos em uma determinada parcela do seu navegador. Um componente é um objeto de interface do usuário, por
exemplo: janela, botão ...
![Page 25: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/25.jpg)
ID Space<?page id="P"?><zk>
<window id="A"><hbox id="B"><button id="D" /></hbox><window id="C"><button id="E" /></window></window><hbox id="F"><button id="G" /></hbox>
</zk>
![Page 26: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/26.jpg)
JPA
![Page 27: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/27.jpg)
Integração com JPA Uso do arquivo META-INF\persistence.xml no source Configuração do arquivo zk.xml:
<preference><name>JpaUtil.PersistenceUnitName</name><value>comp2web_persistence_unit</value>
</preference><listener> <description>JPA "OpenEntityManagerInView"
Listener</description> <listener-
class>org.zkoss.zkplus.jpa.OpenEntityManagerInViewListener</listener-class>
</listener> Uso da classe: org.zkoss.zkplus.jpa.JpaUtil
![Page 28: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/28.jpg)
Data binding
![Page 29: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/29.jpg)
Conceito Básico Data binding é um mecanismo que automatiza o código
de cópia de dados entre os componentes de interface e fonte de dados. Os desenvolvedores só tem que informar ao gerenciador de data binding sobre as associações entre os componentes de interface e a fonte de dados. Em seguida, o gerenciador de data binding irá fazer o trabalho de carregar(carregar dados da fonte de dados para componentes de interface do usuário) e salvar(guardar dados de componente de UI para a fonte de dados) automaticamente.
Projeto de exemplo: DataBinding
![Page 30: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/30.jpg)
Referências: Guia do Desenvolvedor:
http://docs.zkoss.org/wiki/Developer's_Guide Referências de componentes(Versão 5.0.X):
http://books.zkoss.org/wiki/ZK_Component_Reference ZK Java API:
http://www.zkoss.org/javadoc/latest/zk/
![Page 31: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/31.jpg)
Dúvidas?
![Page 32: ZK RIA com ZK Framework. O que é ZK? ZK é um framework AJAX orientado a eventos, baseado em componentes, open-source para desenvolvimento de aplicações.](https://reader035.fdocumentos.tips/reader035/viewer/2022062306/5706384a1a28abb8238f557a/html5/thumbnails/32.jpg)
FIM