Aplicativos de Internet rica que usam o ZK

Uma estrutura Ajax de software livre

ZK, uma estrutura de software livre de Asynchronous JavaScript + XML (Ajax) escrita em código Java™, permite criar um aplicativo de Internet rica habilitado para Web 2.0, sem que seja necessário escrever uma única linha de código JavaScript. As estruturas típicas de Ajax, como Dojo, têm bibliotecas JavaScript que expõem determinadas APIs para a realização de chamadas baseadas em Ajax. ZK, por outro lado, usa um definição meta baseada em XML para definir a interface do usuário. A tradução para o código HTML ocorre então quando essa página é solicitada pelo cliente. Este artigo apresenta você ao ZK e fornece um exemplo real do seu uso sendo executado em Apache Tomcat e conectado a um banco de dados MySQL.

Mr. Sachin K Mahajan, Software Developer, WSO2 Inc

Sachin tem um diploma de Mestrado da University of Utah, em Salt Lake City, EUA. Ele trabalhou em empresas grandes e pequenas nos Estados Unidos e Índia, executando várias funções técnicas e gerenciais. Sachin trabalha atualmente na divisão Lotus do IBM Software Group.


nível de autor Contribuidor do
        developerWorks

05/Jan/2010

Introdução

É possível pensar no ZK como sendo análogo ao Ajax, mas sem JavaScript. Ele é composto por um mecanismo baseado em Ajax e acionado por eventos, um rico conjunto de componentes XHTML e XUL e uma linguagem de marcação chamada ZUML, que é usada para criar interfaces do usuário ricas em recursos. A lógica de negócios pode ser escrita por meio de código Java diretamente integrado em seu aplicativo, e que é acionado com base em eventos ou componentes. A recurso mais poderoso do ZK é seu rico conjunto de bibliotecas de controle para o desenvolvimento de interfaces do usuário. Parece interessante?

Primeiro, deixe-me descrever os itens anteriores com um pouco mais de detalhes:

  • XHTML: Extensible Hypertext markup language, ou XHTML, é um combinação de HTML e XML. O XHTML acrescenta a capacidade e a flexibilidade do HTML à extensibilidade do XML. A Listagem 1 fornece um exemplo de código XHTML.
    Listagem 1. Código de exemplo XHTML
    		<?xml version="1.0" encoding="iso-8859-1"?> 
    		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  Transitional//EN" 
    		"DTD/xhtml1-transitional.dtd"> 
    		<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">  
    		<head>  
    		<title>Hello ZK</title>  
    		</head>  
    		<body>  
    		<h1>Introducing XHTML</h1>  
    		</body>  
    		</html>
  • XUL: XML User Interface language, ou XUL, (pronuncia-se "Zul") é uma linguagem de marcação desenvolvida pelo Mozilla, e um aplicativo XML usado para descrever interfaces gráficas do usuário. O XUL tem a capacidade de criar elementos como controles de entrada, barras de ferramentas, menus, árvores, atalhos de teclado e assim por diante. A Listagem 2 mostra um exemplo de código XUL.
    Listagem 2. Código de exemplo XUL
    		<?xml version="1.0"?> 
    		<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
    		<window id="main" title="My App" width="300" height="300" 
    		xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">    
    		<caption label="Hello World"/>    </window>
  • ZUML: ZK User Interface Markup Language, ou ZUML, é usado para definir a interface do usuário rica. Como é baseado em XML, cada elemento descreve o componente e o atributo descreve o valor do componente. A Listagem 3 dá um exemplo de código ZUML.
    Listagem 3. Código de exemplo ZUML
    <window title="Hello ZUML" border="normal"> Hello World! </window>

Obtendo o ZK

É bastante fácil obter e instalar o ZK. A documentação sobre as bibliotecas e sobre a configuração da estrutura de pastas foi muito bem definida no site de documentação do ZK. (Consulte Recursos para encontrar um link.) Então, obter o ZK, incluindo executar o aplicativo hello world, deveria ser simples.

Por que ZK?

ZK é uma implementação direta do Ajax — ou, em outras palavras, um modelo centralizado no servidor. É diferente de outras estruturas que o expõem aos complexos detalhes das realizações de chamadas Ajax. Além disso, as chamadas Ajax exigem amplo uso e conhecimento de JavaScript para a manipulação de Document Object Model (DOM) no navegador (cliente) e para a sincronização de dados durante a comunicação cliente/servidor. Com o ZK, você fica protegido dessas complexidades e pode se concentrar na lógica de negócios. Dentre outros benefícios do ZK estão:

  • Rico conjunto de interfaces do usuário
  • Acesso ao serviço da Web
  • Ligação de dados do componente
  • Linguagem de marcação simples mas poderosa, o ZUML
  • Alta capacidade de manutenção e extensão porque não há código do cliente
  • Alta usabilidade
  • Maior produtividade para o desenvolvedor

ZK em ação

Para compreender como o ZK funciona, vamos ver um exemplo real. Este exemplo é o aplicativo Manage Customer, por meio do qual o usuário pode executar várias operações como adicionar um novo cliente, editar dados do cliente e exclusões recuperáveis de entradas do cliente no banco de dados. Mas, antes de começar com o código, explicarei algumas telas da interface do usuário que foram geradas usando o ZK. Após tratar das telas, descreverei a arquitetura do ZK, que é um mecanismo subjacente para a geração dessa notável interface do usuário. Por fim, descreverei os detalhes do nível de código e os parâmetros de configuração usados para este aplicativo.

A Figura 1 mostra a tela inicial do aplicativo Manage Customer.

Figura 1. Página de índice do aplicativo Manage Customer
Manage Customers application showing a spreadsheet view of the data including ID, Name, Active Date and whether the account is deleted.

A Figura 1 mostra a lista de clientes registrados no aplicativo. A lista é mostrada como uma grade, com colunas para um ID, o nome do cliente, a data ativa e o sinalizador de exclusão. Os dados na grade pode ser classificados (em ordem crescente ou decrescente) clicando no botão ao lado dos nomes das colunas. A classificação é ativada para as colunas ID (int), Name (String) e Active Date (Data). Posteriormente neste artigo, explicarei como customizar a classificação usando um objeto Comparator. A paginação também é ativada para este aplicativo, como mostrado na parte inferior da tela. A página está habilitada para mostrar 5 registros por vez, junto com a capacidade de mover-se para a próxima página ou diretamente para uma página específica.

Figura 2. Barra de menus na parte superior
Screenshot of the menu shows Register New Customer and Exit

A Figura 2 mostra a barra superior do aplicativo Manage Customer. Isso é implementado usando o widget de barra de menus do ZK. Ele inclui a opção de registrar um novo cliente e sair do aplicativo.

Agora que você viu alguns fluxos do usuário do aplicativo de exemplo, vamos passar aos detalhes da arquitetura do ZK.

Aspectos internos do ZK

Um aplicativo do ZK comporta-se de forma semelhante a um aplicativo desktop pelo fato de as atividades do usuário automaticamente dispararem eventos no servidor por meio do Client Engine. Em contrapartida, os componentes em execução no servidor atualizam a visualização para que haja correspondência com o cliente. O cliente (navegador), age simplesmente como uma visualização, enquanto o aplicativo é executado no servidor e tem total acesso a recursos como banco de dados, serviços da Web etc. Consequentemente, as preocupações com segurança são mínimas.

Há três componentes principais em uma estrutura ZK. Como mostrado na Figura 3, esses componentes são o ZK Client Engine, ZK Loader, e o ZK Update Engine.

  • ZK Client Engine: Este é o lado do cliente do ZK, que envia solicitações ao servidor para obter respostas correspondentes do ZK. Essas respostas, por sua vez, são usadas pelo mecanismo para atualizar o DOM no navegador.
  • ZK Loader: Este componente gera uma página HTML com base em um URL que é solicitado pelo cliente.
  • ZK Update Engine: Também conhecido como Asynchronous Update (AU) Engine. Este componente é responsável por receber a solicitação Ajax e atualizar os atributos correspondentes no componente ZK para que o Client Engine possa atualizar a visualização no navegador.
Figura 3. A arquitetura do ZK
Architectural drawing of ZK showing the Browser and the Server. The client and server talk to each other through request/response

Mecanismo do fluxo, conforme descrito na Figura 3:

  • O ZK Loader serve o HTML, incluindo o CSS, o JavaScript e assim por diante, com base no URL solicitado pelo cliente. Isso inclui o ZK Client Engine, que é responsável por monitorar eventos do lado do cliente e por enviar e receber as Solicitações ZK e as Respostas ZK para o servidor.
  • O Client Engine aciona eventos com base nas ações do usuário, como onChange, onClick etc.
  • Esses eventos chamam o ZK Update Engine, que atualiza as propriedades dos componentes ZK e responde ao Client Engine.
  • Após receber esta resposta, o Client Engine atualiza a árvore DOM no navegador para que o usuário possa obter a visualização atualizada.

Aplicativo Manage Customer usando o ZK

Em seguida, passarei a descrever os detalhes da criação de um aplicativo de exemplo para gerenciar clientes. Uso o IDE Eclipse para demonstrar a criação do aplicativo, mas qualquer IDE que você escolher deverá funcionar.

A ideia básica é criar um projeto de aplicativo da Web dinâmico e apontá-lo para o tempo de execução do servidor do aplicativo que, neste caso, é o tempo de execução do Apache Tomcat.

Após a configuração do novo projeto e do tempo de execução, replique a estrutura de pastas conforme mostrado na Figura 4.

Figura 4. A estrutura do diretório
A package view of zkManageCustomers, src Customer.java and CustomerService.java, then under WebContent addCustomer.zul, editCustomer.zul, index.zul and timeout.zul.

A estrutura do diretório do aplicativo Manage Customer segue a mesma estrutura de diretório padrão descrita na Figura 4.

Observe que o núcleo dos arquivos para este aplicativo está contido na pasta WebContent. Na pasta WebContent temos os seguintes subdiretórios:

  • META-INF – Este contém as informações credenciais do banco de dados para conexão com o banco de dados MySQL.
  • WEB-INF – Este inclui a pasta da biblioteca que contém os arquivos JAR ZK necessários para a execução do aplicativo. O diretório também inclui o arquivo web.xml, que descreve a origem de dados.
  • Além disso, todos os arquivos zul e HTML associados estão contidos dentro da pasta WebContent. Esses arquivos atuam como a parte de visualização do aplicativo, fornecendo o conteúdo dinâmico e estático ao aplicativo da Web.

O arquivo de exemplo zkManageCustomer.zip (consulte a seção Download) contém a versão compactada do aplicativo. Também estão incluídos os arquivos de metadados exigidos pelo Eclipse para que seja possível a importação direta para o IDE.

A perspectiva da plataforma Java 2, Enterprise Edition (J2EE) no Eclipse tem uma guia do servidor que, quando clicada com o botão direito do mouse, mostra ao usuário a opção de criar um novo servidor. Esse servidor pode ser usado para gerenciar o servidor de aplicativos a partir do IDE do Eclipse.

Após a configuração do novo servidor, os recursos recentemente criados precisam ser configurados no servidor. A configuração desse servidor implementa os recursos que são criados durante o curso do desenvolvimento.


Configuração do Tomcat e do MySQL

O programa do exemplo é configurado para funcionar com o Tomcat e o MySQL. No entanto, você não deve encontrar problemas ao executá-lo em outro servidor de aplicativos Java, incluindo o WebSphere. Uma vez que o exemplo usa JDBC, deve funcionar com qualquer banco de dados SQL suportado, como o DB2 Express-C, com apenas pequenas mudanças no código de conexão.

Para conectar o Tomcat ao banco de dados MySQL, é necessário definir uma referência de recurso. Este elemento especifica o nome da referência de conexão fábrica de um gerenciador de recursos. Nesse caso, seria a conexão do banco de dados especificada por jdbc/mysql, que é do tipo javax.sql.DataSource.

Listagem 4. Conexão fábrica do gerenciador de recursos no web.xml
	. . .
	<resource-ref>
	      <description>DB Connection</description>
	      <res-ref-name>jdbc/mysql</res-ref-name>
	      <res-type>javax.sql.DataSource</res-type>
	      <res-auth>Container</res-auth>
	</resource-ref>
	. . .

Também é preciso definir um recurso de conexão no arquivo context.xml da pasta WebContent/META-INF. Esse arquivo contém propriedades como nome do driver, nome da jndi, nome do usuário, senha, tipo de dados e o URL.

Listagem 5. Definição do contexto em context.xml
	. . .
	<Context>
	<Resource driverClassName="com.mysql.jdbc.Driver" 
	maxActive="4" maxIdle="2" maxWait="5000" auth="Container" 
	name="jdbc/mysql" password="" type="javax.sql.DataSource" 
	url="jdbc:mysql://localhost:3306/customer" username="root"/>
	</Context>
	. . .

O banco de dados do cliente tem uma única tabela que pode ser criada executando o script mostrado na Listagem 6.

Listagem 6. Script para criar o banco de dados
	use customer;
	CREATE TABLE `customer` (
	  `ID` int(11) NOT NULL AUTO_INCREMENT,
	  `name` varchar(255) DEFAULT NULL,
	  `date` date DEFAULT NULL,
	  `deleted` tinyint(1) DEFAULT '0',
	  PRIMARY KEY (`ID`)
	);

Ajustando o aplicativo para funcionar com o DB2

Para conectar o Tomcat a um banco de dados DB2-Express C ou a outro banco de dados da variante DB2, a configuração é muito semelhante àquela descrita para o MySQL. Aqui está um exemplo mostrando a configuração da conexão fábrica de um gerenciador de recursos em web.xml: . . .

Listagem 7. Conexão fábrica do gerenciador de recursos em web.xml
. . .
DB Connection 
jdbc/db2db 
javax.sql.DataSource 
Container 
. . .

Para a definição do contexto, veja um típico exemplo: . . .

Listagem 8. Definição do contexto
. . .
maxActive="4" maxIdle="2" maxWait="5000" auth="Container" 
name="jdbc/db2db" password="" type="javax.sql.DataSource" 
url="jdbc:db2://localhost:(port)/customer" username="db2admin"/>
. . .

Resumo do aplicativo

Uma breve descrição do aplicativo foi apresentada anteriormente neste artigo. O aplicativo Manage Customer oferece as funções de:

  • Página do console que permite operações do usuário, incluindo uma visualização de todos os clientes
  • Adição de novos clientes
  • Edição dos clientes existentes
  • Possibilidade de exclusão de clientes (exclusão recuperável)

A Figura 5 mostra a página de console do aplicativo. A visualização padrão mostra a lista de clientes no banco de dados.

Figura 5. A tela do console
Screenshot of the dashboard screen showing a spreadsheet-style layout of data.

A tela do console mostra uma lista de todos os clientes registrados. Além da lista de clientes, o usuário também tem a possibilidade de classificar os dados com base no ID ou no Nome.

O arquivo index.zul tem vários atributos, como borderlayout, menubar, menu e menupopup, sendo que todos definem a aparência e os recursos do aplicativo.

Listagem 9. Arquivo index.zul
<menubar id="menubar" width="800px">
 <menu label="Manage Customers">
   <menupopup>
     <menuitem label="Register New Customer">
      <attribute name="onClick"><![CDATA[
        Window win = (Window) Executions.createComponents("addCustomer.zul", null, null);
        win.doModal();
        win.setTitle("Enter Customer Data");
        win.setClosable(true);
        win.setMaximizable(true);
        ]]></attribute>
     </menuitem>
    <menuseparator />
   <menuitem label="Exit" onClick="win.detach()" />
 </menupopup>
</menu>
</menubar>

Conforme mostrado na Listagem 9, menubar é definido com o rótulo do menu para o registro de novos clientes. Quando este menu é clicado, (onClick) o objeto Window é instanciado por meio do objeto Executions usando outro zul chamado addCustomer. Também é definido o atributo para fazer a caixa de diálogo modal, closable e assim por diante. Além disso, é incluído um menu de saída que fecha o aplicativo. O menubar, juntamente com os atributos definidos, fornece a este aplicativo a aparência e os recursos de um aplicativo rich client.

A Listagem 10 mostra como a tabela é preenchida usando um elemento listbox, onde é definido um modelo no qual o elemento da tabela é preenchido.

Listagem 10. Elemento da caixa de listagem de exemplo definindo a tabela
	<listbox id="customerList" model="@{myList}" mold="paging" pageSize="5"
		multiple="true" width="800px" rows="${custCount}">
	  <listhead sizable="true">
	    <listheader label="Id" sort="auto(id)"/>
	    <listheader label="Name" sort="auto(name)"/>
	    <listheader label="Active Date" sort="auto(date)"/>
	    <listheader label="Deleted?" />
	  </listhead>
	    <listitem self="@{each=myList}" onClick="showEdit(self.getLabel())">
	      <listcell label="@{myList.id}" />
	      <listcell label="@{myList.name}" />
	      <listcell label="@{myList.date}" />
	      <listcell label="@{myList.deleted}"/>
	    </listitem>
	</listbox>

A função de paginação pode ser ativada usando o atributo mold de listbox. Além disso, a classificação baseada nos cabeçalhos das colunas pode ser definida ativando auto no atributo de classificação de listheader. O objeto myList é uma lista de objetos Customer, que são compostos por atributos como id,name, date e o deleted flag do Cliente. O serviço retorna esta lista que, em seguida, é iterada pelo ZK usando "each =myList". Os rótulos listcell mostram então cada atributo do objeto customer na listbox.

Além disso, para habilitar a função de edição, é anexado um método showEdit ao evento onClick.

A caixa de diálogo de registro do cliente é implementada como uma grade com valores obrigatórios para o Nome do cliente e os Dados.

Listagem 11. Código da grade da caixa de diálogo do cliente.
	<grid fixedLayout="true" width="450px">
	  <rows>
	    <row>
	      <label value="Customer Name" />
	      <textbox id="customerName" constraint="no empty" />
	    </row>
	    <row>
	      <label value="Date" />
	      <datebox id="date" constraint="no empty"/>
	      </row>
	    <row>
	    <button label="Save" onClick="submit()" />
	    <button label="Cancel" onClick="addCustomerWin.detach()" />
	    </row>
	   </rows>
	</grid>

As restrições obrigatórias para a caixa de diálogo são especificadas usando "no empty" como atributo da restrição. O ZK também oferece a capacidade de definir restrições customizadas.

Quando o botão Save é clicado, é anexado um método Java chamado submit() a este evento. Este método submit() recebe o nome e o valor de data fornecidos pelo usuário e os define em um objeto customer recentemente criado. Este objeto é então passado ao serviço para adição ao banco de dados. A Listagem 12 mostra este código.

Listagem 12. Código Java para o botão Save
void submit() throws Exception {
     Customer cust = new Customer();
     cust.setName(customerName.getValue());
     java.util.Date utilDate = date.getValue();
     java.sql.Date sqlDate = new java.sql.Date(utilDate.getTime());
     cust.setDate(sqlDate);
     com.test.services.CustomerService custSvc = new com.test.services.CustomerService();
     custSvc.addCustomer(cust);
     Executions.getCurrent().sendRedirect("index.zul");
     addCustomerWin.detach();
}
Figura 6. Registrar cliente
Screenshot shows data entry pop-up for customer with a data authentication message that Customer Name must have a value.

A Figura 7 mostra uma tela para editar o nome ou a data do cliente, junto com a opção de exclusão recuperável.

Figura 7. Tela Editar/Excluir
Screenshot of the application with a pop-up data entry screen filled with data and a checkbox

O mecanismo de edição é muito semelhante à definição do código de registro do cliente. Informe novos valores de nome, data e o sinalizador de exclusão para que o serviço de atualização atualize o registro no banco de dados. Se desejar configurar ajuda adicional, é possível usar o código na Listagem 11 para criar um elemento pop-up.

Listagem 13. Código para o elemento pop-up
	<row>
	  <label value="Delete?"/>
	    <hbox>
	      <checkbox id="deleted" name="deleted" checked="${cust.deleted}"/>
	      <label value="whats this?" style="font:9;cursor:help;valign:center"
	       popup="help"/>
	    </hbox>
	    <popup id="help" width="400px">
	    <html>Checking this box will enable soft delete of the record.</html>
	    </popup>
	</row>

Ferramentas de desenvolvimento para ZK

Os maiores benefícios do ZK são suas ferramentas. Um exemplo é o ZK-Studio (um plug-in do Eclipse), que é usado como um ambiente de desenvolvimento integrado. Ele inclui recursos como ZUL Editor, ZUL Visual Editor, ZK Style Designer e o DB Form Builder. A Figura 8 mostra o ZUL Visual Editor, que foi usado para a criação deste exemplo de projeto.

Figura 8. ZUL Visual Editor
Screenshot of the ZUL visual editor showing a typical text editor

Resumo

Este artigo descreveu os recursos do ZK, uma estrutura Ajax de software livre escrita em código Java. O artigo usou um simples exemplo real executado em Apache Tomcat e conectado a um banco de dados MySQL. A estrutura ZK tem um rico conjunto de componentes, linguagem de marcação, poderosas ferramentas de desenvolvimento e uma excelente documentação, além de ser um software livre e uma estrutura Ajax acionada por eventos. Devido a tudo isso, o ZK está se tornando uma opção popular para o desenvolvimento de aplicativos de Internet rica de baixo custo.


Download

DescriçãoNomeTamanho
Sample applicationzkManageCustomers.zip67KB

Recursos

Aprender

Obter produtos e tecnologias

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Software livre
ArticleID=469637
ArticleTitle=Aplicativos de Internet rica que usam o ZK
publish-date=01052010