ZK RIA com ZK Framework.

Apresentação em tema: "ZK RIA com ZK Framework."— Transcrição da apresentação:

1 ZK RIA com ZK Framework

2 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.

3 Server Centric vs Client centric

4 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 linhas de código, mais de 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.

5 Simplificando as coisas…

6 Componentes ZK Site com exemplo dos componentes:

7 Configuração do ambiente
JDK: Eclipse Galileo para Java EE: developers/galileosr2 Tomcat 6: ZK Studio(Plugin para o Eclipse): ZK 5.0.X:

8 Instalado o plugin do ZK no Eclipse
Em Window Help -> Install New software Add... Name: Zk Studio Location: Selecione o plugin e mande instalar Depois de instalar, baixe a versão mais atual do ZK: 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!

9 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.

10 ZUML

11 O que é? O ZK User Interface Markup Language (ZUML) é baseada em XML
Arquivos ZUML possuem extensão .zul

12 Características Expresion Language zscript ZK Processing Instruction
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

13 XML O ZUML é baseado em XML:

14 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.

15 ZScript http://docs.zkoss.org/wiki/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

16 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.

17 Outros... ZK Processing Instruction ZK Attributes ZK Elements
ZK Attributes ZK Elements

18 Ciclo de Vida

19 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

20 Gerando uma pagina HTML

21 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

22 ZK fazendo Ajax

23 Componente UI Componente Parte Visual Parte Java

24 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 ...

25 ID Space <?page id="P"?> <zk> <window id="A"> <hbox id="B"> <button id="D" /> </hbox> <window id="C"> <button id="E" /> </window> <hbox id="F"> <button id="G" /> </zk>

26 JPA

27 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

28 Data binding

29 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

30 Referências: Guia do Desenvolvedor:
Referências de componentes(Versão 5.0.X): ZK Java API:

31 Dúvidas?

32 FIM