ZK Framework. Utilizando Ajax sem Javascript

(1)

N

Utilizando Ajax sem Javascript

ZK Framework

Thiago Baesso Procaci

(thiagoprocaci@gmail.com):

é bacharel em Ciência da Computação pela Universidade Federal de Juiz de Fora. Atualmente trabalha como analista de sistemas na Petrobras.

os últimos anos, as tecnologias utilizadas em aplicações web apresentaram uma notável evolução. Inicialmente tinham-se aplicações cujas camadas de visão eram compostas somente por páginas HTML estáticas que, com o decorrer do tempo, foram gradativamente evoluindo para páginas HTML dinâmicas (DHTML), páginas utilizando Flash, Ap-plets e, por fim, para páginas que incorporavam o uso de Ajax (Asynchronous Javascript and XML). A tecnologia Ajax veio para dar uma nova vida às aplicações web, pois permitiu que elas tivessem um nível de interatividade (usuário x sistema) equiparável às aplicações desktop. Além disso, ao contrário do uso Applets ou Flash, Ajax é baseado nos padrões do browser e Javascript fazendo desnecessária a utilização de algum tipo de plug-in para que a aplicação funcione.

Pode-se entender Ajax como uma próxima geração de DHTML, uma vez que a tecnologia é forte-mente dependente de Javascript para capturar eventos disparados por alguma ação do usuário e NBOJQVMBSBSFQSFTFOUBÎÍPWJTVBMEFVNBQÈHJOB EPDVNFOUNPEFMPCKFDUo%0.EJOBNJDBNFOUF Com a maturação da tecnologia Ajax, surgiram vários frameworks baseados nela, sendo o ZK um deles. A ideia principal do ZK Framework é facilitar a incorporação de Ajax nas aplicações web de-senvolvidas em Java, de maneira a dispensar qualquer conhecimento de Javascript. Essa facilidade é oriunda dos mecanismos internos do ZK que geram código Javascript de forma transparente para o desenvolvedor. Além desses mecanismos, o ZK possui uma linguagem de marcação, similar ao )5.- WPMUBEBQBSBPVTVÈSJP EFOPNJOBEB;,6TFS*OUFSGBDF.BSLVQ-BOHVBHFo;6.-RVFPGF-rece uma maneira simples e intuitiva de criar interfaces para aplicações web. São essas facilidades que, de fato, diferenciam o ZK das demais tecnologias e ferramentas baseadas em Ajax.

Este artigo objetiva demonstrar alguns conceitos relacionados ao ZK e apresentar uma aplicação exemplificando seu uso.

(2)

Cada vez mais se faz necessário que as aplicações web sejam intuitivas e fáceis de usar. Esta necessidade está diretamente ligada à camada de visão de tais aplicações. Porém, a criação de aplicações com interfaces ricas exige esforços cada vez maiores. Essa exigência muitas vezes desvia o foco do desenvolvimento que deveria ser, na maior parte do tempo, nas regras de negócio. Com efeito, surgem diversas ferramentas tentando facilitar essa tarefa, sendo uma delas o ZK Framework. Neste artigo, será mostrado como se pode criar aplicações web com interfaces ricas de maneira simples, rápida, sem Javascript e com pouca programação.

'JHVSB;6.-

Figura 2. Arquitetura ZK.

**;,6TFS*OUFSGBDF.BSLVQ-BOHVBHFo;6.-Entendendo o funcionamento do**

ZK Framework

Como já foi citado anteriormente, o ZK Framework possui uma lingua-gem de marcação, chamada ZUML, cujo objetivo é facilitar a construção de interfaces web. A figura 1 ilustra o uso da ZUML para a definição de alguns componentes de interface, tais como grid, textbox, datebox, cap-tcha etc. Note que, através do código ZUML da figura 1, é possível com pouco esforço construir uma interface amigável e rica para a aplicação, com todo o código HTML, Javascript e CSS de uma página gerados a partir da ZUML.

Outro ponto importante é a possibilidade de configurar os atributos dos componentes através da ZUML. Por exemplo, de acordo com a figura 1, foi definido que o componente decimalbox (caixa de texto que aceita somente números decimais) assumirá valores “nos moldes” definidos pelo atributo “format”.

Em síntese, pode-se entender ZUML como uma linguagem de marcação de mais alto nível para facilitar criação de interfaces ricas.

Para entender melhor o funcionamento do ZK é necessário compreender um pouco de sua arquitetura, ou seja, suas partes e como elas se comu-nicam. Basicamente o ZK é composto por três importantes módulos que são os responsáveis por incorporar Ajax a uma aplicação. Esses módulos são: o ZK loader, ZK AU (asynchronous update) engine e ZK client engine. Um detalhe importante é que o ZK loader e o ZK AU engine rodam no “lado do servidor” e são compostos por um conjunto de servlets Java. Em contrapartida, o ZK client engine roda no “lado do cliente” e é composto por código Javascript. A figura 2 ilustra a arquitetura do ZK.

A interação entre esses módulos que compõem a arquitetura ocorre através dos seguintes passos (enumerados na figura 2):

1. sempre que 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 requi-sitada) e cria objetos no servidor que permitirão a manipulação da interface da página. Por exemplo, se for definido no código ZUML que uma determinada página terá um grid (como na figura 1), o ZK loader irá gerar o HTML correspondente ao grid e também irá criar um objeto no servidor que permitirá a manipulação do HTML que

DOM ZK client engine ZK loader Servidor ZK AU engine Internet Resposta Página HTML Requisição Ajax Requisição URL 1 2 3 5 4 Atualiza Objetos Cria Browser

(3)

Configurações de ambiente

corresponde a esse grid;

2. em seguida, o ZK loader envia a página HTML gerada para o cliente juntamente com o ZK client engine. Com já foi citado, o ZK client engine irá residir no “lado do cliente” e será responsável por moni-torar os eventos disparados pelo browser;

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 loca-lizado no servidor;

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; 5. assim que o ZK client engine recebe a resposta, ele atualiza a

repre-sentação visual da página (DOM).

Esses passos mostram o funcionamento do ZK e são repetidos enquanto o usuário navegar pela página.

Na maioria dos frameworks Ajax existentes na comunidade, o servidor tem um papel passivo. Um servidor tem um papel passivo quando ele é responsável somente por fornecer dados à visão, receber e aceitar re-quisições do cliente. Essa “comunicação Ajax” entre cliente e um servidor passivo é complexa e requer muito código Javascript para que ela ocorra (sem mencionar os problemas de compatibilidade entre Javascript e bro-wsers). Em contrapartida, o ZK dá a solução para esses problemas através da criação de objetos no lado do servidor. Esses objetos que ficam no servidor tornam fácil a “comunicação Ajax” uma vez que toda a manipu-lação da visão pode ser feita através deles, dispensando a programação Javascript e eventuais problemas de compatibilidade.

Daqui pra frente será desenvolvida uma pequena aplicação para de-monstrar mais claramente alguns conceitos do framework apresentados.

Injetando Ajax em uma aplicação

utilizando o ZK

Neste momento, será mostrado o funcionamento básico do ZK através de uma pequena aplicação de exemplo. Juntamente com a construção dessa aplicação será elucidado todos os conceitos do framework que foram apresentados anteriormente. Para isso, será utilizado o servidor de aplicação Apache Tomcat 6.0 e a IDE Eclipse Europa.

Para começar, é preciso criar um novo projeto. No Eclipse, basta abrir o menu file conforme mostrado na figura 3.

Em seguida, será aberta uma tela para escolher o tipo de aplicação que TFSÈEFTFOWPMWJEB/PDBTPEPFYFNQMP TFMFDJPOF%ZOBNJD8FC1SPKFDU (figura 4) e clique no botão Next.

Na sequência, dê um nome para o projeto (no caso do exemplo será zkdemo) e selecione a combo Target RunTime para Apache Tomcat v6.0 (figura 5). Depois, clique no botão Finish que o projeto estará criado.

Uma vez criado o projeto, é necessário configurar o ambiente para que o ZK funcione. Para isso, faça o download da última versão do ZK Framework em http://www.zkoss.org/download/ e extraia os jars para a QBTUB8&#*/'MJCEPQSPKFUP1PSmN ÏOFDFTTÈSJPDPOmHVSBSPXFCYNM do projeto, cuja configuração é mostrada na Listagem 1.

Figura 3. Criando novo projeto.

'JHVSB%ZOBNJD8FC1SPKFDU

(4)

<web-app>

Used to cleanup when a session is destroyed

</description>

<display-name>ZK Session Cleaner</display-name>

<listener-class>

org.zkoss.zk.ui.http.HttpSessionListener

</listener-class>

</listener>

<description>ZK loader for evaluating ZK pages</description>

<servlet-name>zkLoader</servlet-name>

<servlet-class>

org.zkoss.zk.ui.http.DHtmlLayoutServlet

</servlet-class>

<init-param>

<param-name>update-uri</param-name>

<param-value>/zkau</param-value>

</init-param>

<load-on-startup>1</load-on-startup>

</servlet>

<servlet-mapping>

<url-pattern>*.zul</url-pattern>

</servlet-mapping>

<servlet-mapping>

<url-pattern>*.zhtml</url-pattern>

</servlet-mapping>

<description>The asynchronous update engine for ZK</description>

<servlet-name>auEngine</servlet-name>

<servlet-class>

org.zkoss.zk.au.http.DHtmlUpdateServlet

</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>auEngine</servlet-name>

<url-pattern>/zkau/*</url-pattern>

</servlet-mapping> <mime-mapping>

<mime-type>image/gif</mime-type>

</mime-mapping>

<mime-mapping>

<mime-type>text/html</mime-type>

</mime-mapping>

<mime-mapping>

</mime-mapping>

<mime-mapping>

<mime-type>image/jpeg</mime-type>

</mime-mapping>

<mime-mapping>

<mime-type>image/jpeg</mime-type>

</mime-mapping>

<mime-mapping>

<zk>

<window title=”Minha Primeira Aplicação ZK” border=”normal”

width=”400px” use=”com.mundoj.view.HelloWindow”

id=”helloWindow”>

</window> </zk>

<mime-type>application/x-javascript</mime-type>

</mime-mapping>

<mime-mapping>

<mime-type>image/png</mime-type>

</mime-mapping>

<mime-mapping>

<mime-type>text/plain</mime-type>

</mime-mapping>

<mime-mapping>

<mime-type>text/xml</mime-type>

</mime-mapping>

<mime-mapping>

<extension>zhtml</extension>

</mime-mapping>

<mime-mapping>

</mime-mapping>

</web-app>

Listagem 1. Preparando web.xml.

Listagem 2. hello.zul.

Construindo a aplicação

A partir deste ponto, já podemos começar a efetivamente desenvolver a aplicação de exemplo. Vale ressaltar que esse exemplo inicial objetiva somente mostrar o funcionamento básico do ZK e alguns conceitos envolvidos.

Nessa seção, vamos começar a construir nosso exemplo. O primeiro passo é criar a tela de interação com o usuário, que será definida através EB;6.-1BSBJTTP WBNPTDSJBSPBSRVJWPIFMMP[VMEFOUSPEBQBTUB8FC-Content do projeto. Esse arquivo deverá conter o código da Listagem 2.

Basicamente essa tela inicial será composta por uma janela (componen-te window da ZUML) que irá con(componen-ter uma caixa de (componen-texto (componen(componen-te textbox) e um botão (componente button). É importante salientar que a extensão .zul é a utilizada para os arquivos que contêm código ZUML.

(5)

package com.mundoj.view;

import org.zkoss.zul.Textbox;

import org.zkoss.zul.Window;

@SuppressWarnings(“serial”)

publicclass HelloWindow extends Window { publicvoidchangeTextboxValue() {

Textbox textbox = (Textbox) getFellow(“textbox”);

if (textbox.getValue().equals(“Hello World!”))

textbox.setValue(“Welcome!”);

else

textbox.setValue(“Hello World!”);

} }

Listagem 3. HelloWindow.java.

Note que, através da Listagem 2, foram configurados vários atributos para os componentes. Por exemplo, no caso da componente window, definimos que ela terá o título “Minha Primeira Aplicação ZK”, o id “hello-8JOEPXwFUD&NVNDPNQPOFOUF QPEFTFUBNCÏNEFmOJSBDMBTTF+BWB que irá manipulá-lo através do atributo “use”. Observe que no compo-nente window da Listagem 2, o atributo “use” aponta para a classe Hello-8JOEPXRVFTFFODPOUSBOPQBDPUFDPNNVOEPKWJFXEPQSPKFUP"TTJN BUSBWÏTEBDMBTTF)FMMP8JOEPX GPJEFmOJEBBBÎÍPRVFTFSÈSFBMJ[BEBOP onClick do botão através do método changeTextboxValue. A Listagem 3 NPTUSBPDØEJHPEBDMBTTF)FMMP8JOEPX

Com as definições das Listagens 2 e 3, já pode ser iniciada a aplicação e visualizá-la no browser através da URL http://localhost:8080/zkdemo/ hello.zul. A figura 6 mostra como será a interface gerada após iniciar a aplicação.

Figura 6. Minha Primeira Aplicação ZK.

Figura 8. Comportamento da Aplicação com o ZK.

Agora que temos a aplicação rodando, vamos entender como ocorre o funcionamento dela. O comportamento da aplicação resume-se so-mente na mudança do texto contido na textbox. Sempre que o usuário clicar em “Trocar Valor”, o texto da textbox será modificado (figura 7) de )FMMP8PSMEQBSB8FMDPNFFWJDFWFSTB"JEFJBEFTTFDPNQPSUBNFOUP simples é tornar fácil o entendimento de como ocorre a manipulação da visão com o ZK. Mais adiante serão mostrados alguns comportamentos mais sofisticados.

Figura 7. Comportamento da aplicação.

Com já foi dito, para cada componente de interface definido em código ZUML, o ZK cria um objeto no servidor que permitirá a manipulação da visão. No caso do exemplo, a cada requisição de um cliente, são criados três objetos no servidor: um para a manipulação da window, um para a textbox e um para o button. Cada um desses objetos criados possui um identificador que pode ser definido através do atributo id (como no código ZUML da Listagem 2) ou gerado automaticamente pelo ZK.

Eventualmente surge a necessidade de personalizar o comportamento de um componente, como no caso do componente window do exemplo. Para que isso ocorra, basta criar uma classe que estenda a classe que EFTDSFWFPDPNQPOFOUFOP;, WJEF-JTUBHFNo)FMMP8JOEPXFYUFOET 8JOEPX"TTJNQPEFNTFUFSDPNQPSUBNFOUPTQFSTPOBMJ[BEPTEFDBEB componente através da adição de métodos, atributos etc.

7PMUBOEPËDMBTTF)FMMP8JOEPX RVFSFQSFTFOUBBFOUJEBEFDVKBJOTUÉODJB irá manipular a janela e todos os componentes que estão dentro dela, no método changeTextboxValue foi definida a ação que será acionada quando o botão for clicado. Através deste método, vê-se claramente que o objeto que manipula o componente textbox foi recuperado através do id e, em seguida, seu texto (valor) é modificado. A figura 8 mostra o que ocorre “por trás das cenas” no exemplo quando é clicado o botão “Trocar Valor”.

Os passos enumerados de 1 a 8 da figura 8 são explicados abaixo: 1. o usuário clica no botão “Trocar Valor”;

2. o evento Javascript onClick é disparado; 3. o ZK client engine captura o evento;

4. o ZK client engine envia o evento para o servidor via requisição Ajax;

5. o ZK AU engine recebe o evento e aciona os objetos que serão os responsáveis para executar a ação (trocar o texto);

6. assim que a ação for executada e os objetos forem atualizados, o ZK AU engine é notificado;

7. o ZK AU engine envia a resposta para o ZK client engine com o que deve ser atualizado na página;

8. o ZK client engine atualiza a página (troca o texto).

Resumidamente, o ZK client engine e o ZK AU engine trabalham juntos para manter a sincronia entre os elementos das páginas (DOM) e os obje-tos do servidor para que toda a comunicação Ajax torne uma tarefa fácil para o desenvolvedor.

(6)

<zk>

<window title=”Comportamentos Sofisticados do ZK Framework”

border=”normal” width=”800px”

use=”com.mundoj.view.ZKDemoWindow” id=”zkDemoWindow”>

<vbox>

</menupopup>

</menu>

</menupopup>

</menu>

</menubar>

<label>Veja como é fácil usar o ZK</label>

<grid>

<rows>

<row>

Nome:

</row>

<row>

Idade:

</row>

<row>

Data Nascimento:

</row>

<row>

Nacionalidade:

</listitem>

</listitem>

</listitem>

</listitem> </listbox> </row> </rows> </grid> <hbox>

<attribute name=”onClick”>{

Messagebox.show(“Ajax sem Javascript”,

“ZK Framework”, Messagebox.OK, Messagebox.INFORMATION); } </attribute> </button> </hbox> </vbox> <separator/> </window> </zk> Listagem 4. zkdemo.zul.

Comportamentos mais sofisticados

Na seção anterior, foi mostrado um exemplo simples do uso do ZK bus-cando explicitar os conceitos que foram introduzidos do framework. Nes-sa seção, vamos mostrar o uso de alguns componentes mais sofisticados do ZK, de maneira a ressaltar seu poder.

Para começar o exemplo, vamos criar o arquivo zkdemo.zul dentro da QBTUB8FC$POUFOUEPQSPKFUP&TTFBSRVJWPEFWFSÈDPOUFSPDØEJHPEB Listagem 4.

7BNPTEFmOJSUBNCÏNBDMBTTF;,%FNP8JOEPXRVFTFSÈSFTQPOTÈWFM por manipular a window definida na Listagem 4. O código da ZKDemo-8JOEPXÏNPTUSBEPOB-JTUBHFN

(7)

Uma vez tendo os códigos das Listagens 4 e 5, pode-se visualizar a aplicação-exemplo em http://localhost:8080/zkdemo/zkdemo.zul. As figuras 9 e 10 mostram como ficará a interface desse exemplo.

Em linhas gerais, o exemplo busca ilustrar o uso de outros componentes do ZK e ainda mostrar a facilidade que ele traz para construção interfa-ces. Rapidamente construímos uma tela com menus, grid, messagebox, chat (gráfico), datebox, entre outros, com pouca programação e nenhum uso de Javascript. Basicamente, o exemplo se trata de um pequeno ca-dastro de pessoas em que, à medida que são cadastradas, pode-se obter a relação das nacionalidades delas através de um gráfico. O exemplo também apresentou uma forma de incorporar menus em uma janela e como apresentar mensagens para o usuário.

Não vamos entrar em detalhes sobre o funcionamento do exemplo, uma vez que ele segue todos os conceitos do framework que já foram apre-sentados. A ideia é simplesmente que o exemplo sirva como referência inicial para quem desejar aprofundar no assunto e começar a utilizar o ZK. Os fontes estão disponíveis para download no site da revista.

'JHVSB&YFNQMP;,oDPNQPSUBNFOUPTPmTUJDBEP package com.mundoj.view; import java.util.Date; import org.zkoss.zul.Chart; import org.zkoss.zul.Datebox; import org.zkoss.zul.Intbox; import org.zkoss.zul.Listbox; import org.zkoss.zul.SimplePieModel; import org.zkoss.zul.Textbox; import org.zkoss.zul.Window; import com.mundoj.dao.PessoaDao; import com.mundoj.dao.PessoaDaoImpl; import com.mundoj.model.Pessoa; @SuppressWarnings(“serial”)

publicclass ZKDemoWindow extends Window {

private PessoaDao pessoaDao = PessoaDaoImpl.getInstance(); private Textbox nomeTextbox;

private Intbox idadeIntbox; private Datebox nascimentoDatebox; private Listbox nacionalidadeListBox; private Chart chart;

// Executado durante a criacao da window publicvoidonCreate() {

// pega as referencias de objetos que manipulam a tela

nomeTextbox = ((Textbox) getFellow(“nome”));

idadeIntbox = ((Intbox) getFellow(“idade”));

nascimentoDatebox = ((Datebox) getFellow(“data”));

nacionalidadeListBox = ((Listbox) getFellow(“nacionalidade”));

}

// Salva os dados de pessoa publicvoidsave() {

Stringnome = nomeTextbox.getValue();

Integer idade = idadeIntbox.getValue();

DatedataNascimento = nascimentoDatebox.getValue();

String nacionalidade = nacionalidadeListBox.getSelectedItem().getLabel();

Pessoapessoa = newPessoa();

pessoa.setNome(nome);

pessoa.setIdade(idade);

pessoa.setDataNascimento(dataNascimento);

pessoa.setNacionalidade(nacionalidade);

pessoaDao.save(pessoa);

clean();

}

// Mostra grafico das nacionalidades da pessoas salvas publicvoidshowChart() {

if (chart == null) {

chart = newChart();

appendChild(chart);

}

chart.setId(“grafico”);

SimplePieModel model = newSimplePieModel();

chart.setModel(model);

model.setValue(“BRASILEIRO”, pessoaDao.

getByNacionalidade(“Brasileiro”).size());

model.setValue(“AMERICANO”, pessoaDao.

getByNacionalidade(“Americano”).size());

model.setValue(“INGLES”, pessoaDao.getByNacionalidade(“Ingles”).size());

model.setValue(“OUTRO”, pessoaDao.getByNacionalidade(“Outro”).

size());

}

// Limpa tela privatevoidclean() {

nomeTextbox.setRawValue(null);

idadeIntbox.setRawValue(null);

nascimentoDatebox.setRawValue(null);

nacionalidadeListBox.setSelectedIndex(0);

} }

(8)

"S UJHPt;,' SBNF X PS Lo6 UJMJ[BOEP"KBYTFN+B WBTDS fr amew orks exist en tes na comunidade , o ZK possui limitaç ões . A mais polêmica delas é sobr e um possív el uso ex cessiv o de memória no ser vidor devido à criação de objet os par a manipulação de pág inas . Alguns pr ofissionais da ár ea alegam que quando um sist ema nec essita altamen te escalá vel o ZK não dev e ser usado . P or ém sabe -se que cada caso é um caso e que sempr e an tes de iniciar qualquer desen volvimen de sof tw ar e é nec essário analisar se dev e ou não utilizar est e ou aquele fr amew ork . O fa to é que o ZK é um fr amew ork muit o poder oso e pode ag ilizar bas tan te algumas tar efas que faz em par te do desen volvimen to de sof tw O utr o pon to positiv o do ZK é com relação a sua equipe de desen volvi men to que está sempr e muit o ativ a e buscando constan temen te me lhor ar o fr amew ork em todos os sen tidos (per formanc e, documen tação OP WBTGVODJPOBMJEBEFTFU Dt 'JHVS B &Y FNQMP ;, o .FTTBHFCP Y

C

o

n

si

d

er

aç

õ

es

fi

n

ai

s

Nest e ar tigo foi apr esen tado o ZK Fr amew ork , mostr ando seus conc ei -tos e um pouc o de sua utilização . Buscamos salien tar a facilidade que o ZK of er ec e par a a construção de in ter fac es ricas dur an te o pr oc esso de desen volvimen to de sof tw ar e. É eviden te que , assim como todos R efer ências t IUUQX X X [L PTT PS H t ;, o" KBYXJUIPVU +BW BTDSJQU ' SBNF X PSL )FOS Z$IFO 3PCCJF $IFOH