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

Server Centric vs Client centric

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.

Simplificando as coisas…

Componentes ZK Site com exemplo dos componentes: http://www.zkoss.org/zkdemo/userguide/

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

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!

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.

ZUML

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

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

XML O ZUML é baseado em XML: http://docs.zkoss.org/wiki/ZUML_XML

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

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

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)

Outros... ZK Processing Instruction ZK Attributes ZK Elements 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

Ciclo de Vida

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

Gerando uma pagina HTML

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

ZK fazendo Ajax

Componente UI Componente Parte Visual Parte Java

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

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>

JPA

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

Data binding

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

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/

Dúvidas?

FIM