54 http://www.linuxmagazine.com.br

AN

ÁLIS

E

Crie belos aplicativos para a Internet com ZK 5

InteratividadeCom o ZK 5, os desenvolvedores podem manter um único formato de arquivo para criar interfaces atraentes e belos aplicativos para a Internet baseados em Ajax.por Marcel Hilzinger

Os usuários adoram aplicati-vos para a internet (RIA – Rich Internet Application).

Conteúdos ativos como listas reor-ganizáveis e gracinhas como arrastar e soltar enriquecem a experiência do usuário. Os RIAs aproximam os aplicativos web dos aplicativos nor-mais, além de evitar que o usuário faça muitas instalações. Porém, os desenvolvedores pagam um preço por esse poder: os aplicativos Ajax só funcionam como uma combinação de componentes de várias linguagens de programação.

A estrutura da página é montada em HTML, com folhas de estilos (CSS) enriquecendo o visual, JavaScript exe-cutado no navegador e, por fim, uma linguagem de programação como o

PHP ou Java no servidor. Porém, os navegadores interpretam os detalhes do HTML, do CSS e do JavaScript de maneiras diferentes. Os desenvolvedo-res que precisam testar seus aplicativos enfrentam mais obstáculos que um programador de aplicativos de desktop.

Uma ferramenta como o ZK [1] oferece uma alternativa a esse di-lema. A biblioteca permite que os programadores desenvolvam RIAs como se estes fossem aplicativos de desktop normais. Não há necessidade de se preocupar com a distribuição do aplicativo entre o navegador e o servidor, nem se preocupar com detalhes de HTML, JavaScript ou CSS. O ZK se encarrega de tudo e oferece vários recursos para montar sites com widgets e layout individual.

Seleção de layoutElementos como bordas, caixas e tabelas estão disponíveis para o pro-jeto da página. A coleção de widgets inclui elementos para títulos e listas simples, além de componentes mais complexos como árvores, gráficos ou mapas do Google Maps. A página de demonstração do ZK [2] oferece uma noção geral dos widgets (figura 1).

O ZK é particularmente útil para manipular os dados do usuário com o mouse ou o teclado. Para um apli-cativo Ajax, o programador precisa desenvolver um código para o clien-te em JavaScript e um código para o servidor em uma linguagem dife-rente. No pior dos casos, a lógica do aplicativo é distribuída nos dois lados. O ZK mantém a lógica do aplicativo em seu devido lugar: no servidor. A transferência de dados e a atualiza-ção da interface são controladas pelo ZK e o desenvolvedor não precisa se preocupar com elas. Ao invés disso, o programador pode se dedicar ao desenvolvimento da lógica do apli-cativo juntamente com a interface.

CamadasComo podemos ver na figura 2, um aplicativo ZK contém quatro camadas. O código localiza-se no servidor; ele gera a interface com os widgets ZK e controla os eventos e a lógica do aplicativo. Os desenvolvedores pro-

Figura 1 O aplicativo de demonstração do ZK dá exemplos de vários compo-nentes e de opções de layout.

55

| ANÁLISEAjax

Linux Magazine #69 | Agosto de 2010

gramam a interface em Java ou em ZUML (ZK User Interface Markup Language), uma linguagem baseada em XML usando o XUL do Firefox [3]. A linguagem ZUML define a interface e controla as seleções, en-tradas do teclado e outros eventos. Os programadores podem embarcar a lógica do aplicativo diretamente no arquivo ZUML ou incluí-la em clas-ses Java separadas. Além disso, o ZK também suporta outras linguagens, como JavaScript, Python ou Ruby.

De maneira similar ao Sewing, o servidor de bibliotecas do ZK segue o princípio do MVC (Model-View-Controller), focalizado na visuali-zação do aplicativo, montando a interface e enviando eventos. Essa abordagem explica porque não há restrições à lógica do aplicativo e ao modelo subjacente. Dessa maneira, é possível até integrar componentes já conhecidos e confiáveis tais como Hibernate ou JEE. A biblioteca ZK reside entre o aplicativo e o servidor. Ela usa o aplicativo para o transporte ao navegador baseado em HTTP e envia eventos do navegador para o código do aplicativo.

Essa parte da ferramenta ZK foi desenvolvida em Java e é executada em um container de servlet, como o Apache Tomcat [4], ou em um servi-dor JEE, como o Glassfish [5]. Essas ferramentas usam o HTTP para en-viar o aplicativo para o navegador, e o dispositivo cliente ZK usa então o JavaScript para montar o site para o aplicativo. O dispositivo cliente envia também eventos do navegador para o servidor e atualiza o site.

Primeira escolhaAo fazer um aplicativo, o desen-volvedor pode confiar na API ZK e deixar o resto com a biblioteca (fi-gura 3). No lado esquerdo há uma lista de bairros eleitorais. Os dados do exemplo se baseiam nos resultados da eleição alemã de Hamburgo em 2009. O aplicativo mostra informações

detalhadas dos distritos com base em uma seleção feita e a porcentagem de votos aparece no gráfico.

Um arquivo para tudoO arquivo ZUML, que você pode baixar em [6] contém parte da lógica do aplicativo, o layout e o controle do evento. Para uma demonstra-ção, o layout da página utiliza vários métodos; aplicativos reais iriam se restringir a uma seleção. Um layout simples com título e data está defi-nido na linha 3, borderlayout, com um descendente north e um center. Esse código usa caixas verticais (vbox) e horizontais (hbox) para o container

de layout, a lista e o formulário. O layout do formulário está na linha 42 sendo apresentado como uma tabela. Além dessas três variantes, o ZK pos-sui mais opções, incluindo até layouts para portais com elementos móveis.

Na linha 16, o código abastecerá a lista exibida à esquerda. A classe Java ElectionResults2009 carrega a conta-gem de votos em um arquivo CSV. O atributo getDistricts() devolve uma lista com um objeto Java por bairro.

O container zscript na linha 16 agrupa o código Java para que seja carregado e executado no servidor enquanto a página é construída. O container listbox na linha 25 descreve

Figura 2 As bibliotecas ZK criam aplicativos baseados no navegador com descrições XML ou Java.

Figura 3 O aplicativo de demonstração mostra o resultado das eleições em um distrito sem buscas no servidor. Quando o usuário faz uma nova seleção, o ZK recalcula o diagrama.

56 http://www.linuxmagazine.com.br

ANÁLISE | Ajax

o widget da seleção na interface. O aplicativo usa o atributo model para apontar para a lista previamente car-regada como um modelo de dados e a preenche com containers listitem, cada um com um bairro.

Elementos label como os da linha 49 cuidam de uma representação detalhada dos bairros. O elemen-to à direita usa a sintaxe @{varia‑ble_name.attribute_name} para ligar um nome de bairro a um container. Nesse exemplo, a variável district contém o objeto, e o label contém o valor do atributo voting_district. Devido à definição de selectedItem = “@{district}” na linha 26, o ZK atualiza a variável sempre que o u-suário fizer uma seleção na listbox. Isso mantém os detalhes exibidos na tela atualizados.

Atualização da páginaLogicamente, soluções programa-das em PHP ou JSP podem gerar um HTML com atributos de obje-tos – mas apenas quando a página é construída. O ZK, em compensação, cria um página HTML com funções e efeitos RIA. O código facilmente atualiza o gráfico, ligando updatePie() à listbox na linha 27 e atualizando o gráfico sempre que a página recebe um evento onSelect.Do ponto de vista do desenvolvedor, o ZK é apenas um projeto web JSP normal: em vez de programar em JSP e Java, ZUML e Java são usados, apoiados nas bibliotecas ZK [7]. O arquivo zk‑bin‑5.0.1.tar.gz contém vários arquivos Java; a documentação em PDF que acompanha os arquivos explica como instalá-los no servidor. Os usuários de Eclipse possuem uma opção mais fácil e podem simples-mente carregar o plugin ZK Studio com o Update Manager. Um wizard ajuda a configurar o projeto de de-senvolvimento. O ZK Studio inclui também um editor WYSIWYG.

O software está disponível em muitas versões e sob várias licenças.

A versão 5 básica lançada no início deste ano, conhecida como Edição da Comunidade (CE – Community Edition), está disponível agora sob a LGPL [8], enquanto que a versão 3 estava disponível sob a GPL. O ZK CE 5 possui todos os componentes. Calendários, planilhas e layouts mais complexos encontram-se apenas nas edições Professional (PE) e Enterprise (EE), ambas com licença proprietá-ria com um preço de 250 dólares por desenvolvedor sem suporte ou 600 dólares com suporte.

Biblioteca unificada para a webA biblioteca ZK realmente oferece belos aplicativos para internet. De-senvolvedores que usam o Swing ou o Eclipse RCP irão se acostumar rapidamente ao ZK.

A combinação de um arquivo ZUML com o código Java, particu-larmente, oferece uma abordagem passo a passo para o desenvolvimen-to de aplicativos. O fato do ZK estar restrito à visualização de um apli-cativo é de fato uma coisa boa, pois ele não impõe nenhuma exigência específica ou restrição ao modelo e ao controle. A lógica do aplicativo é de fácil integração.

Essa abordagem é usada pelos próprios desenvolvedores do ZK para integrar widgets como o Goo-gle Maps, o Smile Timeplots [9] ou Astra Charts [10] ao ZK. O programa também é útil como uma bibliote-ca básica. Aplicativos profissionais, com uma grande quantidade de lógica podem, portanto, ser porta-dos para magníficas interfaces web sem se emaranhar nos meandros do Ajax. n

Gostou do artigo?Queremos ouvir sua opinião. Fale conosco em cartas@linuxmagazine.com.br

Este artigo no nosso site: http://lnm.com.br/article/3742

Mais informações

[1] ZK RIA: http://www.zkoss.org/

[2] Demo: http://zkoss.org/zkdemo/userguide

[3] Mozilla XUL: https://developer.mozilla.org/En/XUL

[4] Apache Tomcat: http://tomcat.apache.org

[5] Aplicativo Glassfish: https://glassfish.dev.java.net

[6] Download do arquivo demo.zuml: http://www.lnm.com.br/issues/69/demozuml.zip

[7] Download do Zk 5 CE: http://www.zkoss.org/download/zk.dsp

[8] Licenças ZK: http://zkoss.org/license/

[9] Simile Timeplot: http://simile.mit.edu/timeplot/

[10] Componentes Astra Flash: http://developer.yahoo.com/flash/astra‑flash