Escolar Documentos
Profissional Documentos
Cultura Documentos
Uma lista de verificao de consideraes e etapas para rapidamente transformar seu aplicativo da Web em um aplicativo em nuvem Resumo: Voc construiu um aplicativo com base na Web, mas precisa torn-lo compatvel e eficiente em um ambiente em nuvem. Quais etapas preciso seguir para converter o aplicativo em um aplicativo SaaS maduro, de mltiplos arrendatrios e pronto para nuvem? O autor utiliza um aplicativo da Web de amostra, discute as consideraes e alteraes necessrias para torn-lo um sucesso na nuvem e mostra as etapas necessrias para coloc-lo l. Ento, como um bnus, demonstra o software que sua empresa desenvolveu para fornecer uma abordagem de "plug-in" a mltiplos arrendatrios. Imagine que voc tem um aplicativo que est vendendo no mercado. Voc v o aviso e percebe que Software as a Service (SaaS) em uma infraestrutura em nuvem a maneira como o setor est orientado. Voc sabe que precisa dele e seus prprios clientes podem j estar pressionando para oferecer uma verso SaaS do seu produto. O desafio fazer a converso para SaaS rapidamente, de maneira eficiente e mantendo ou melhorando a lucratividade. H muitas diferenas que precisam ser consideradas para um aplicativo SaaS versus um aplicativo da Web regular. Algumas delas so tcnicas e outras esto relacionadas mudana no modelo de negcios ao qual uma empresa precisa se adaptar ao entregar SaaS.
Treb Ryan, CEO, OpSource Alcanamos um custo incrivelmente efetivo (baixo) de seat para computao... temos o menor custo no segmento de mercado de SaaS (como resultado de mltiplos arrendatrios). Lars Dalgaard, CEO, SuccessFactors Hoje, ASP um retorno tentador. Entretanto, a abordagem de datacenter na nuvem ainda segrega clientes usando um modelo de um nico arrendatrio, o que significa que ainda muito dispendiosa para operar e, portanto, para comprar. Zach Neson, CEO, NetSuite Nossa margem bruta foi acima de 70% (devido a mltiplos arrendatrios). Mltiplos arrendatrios para ns realmente importante... cria um modelo muito mais eficiente Tim Wallace, CEO, iPipeline Mltiplos arrendatrios o que limita o ganho no jogo do SaaS Henry Olson, ex-CEO, Edge Dynamics Mltiplos arrendatrios possibilita que todo um modelo de assinatura funcione... Jeff Kaplan, CEO, THINKStrategies
distribu-las sobre um grande nmero de aplicativos,suavizando as variaes e tornando o investimento e hardware mais previsvel e gerencivel. Agora vamos ver as etapas gerais para converter um aplicativo da Web mais tradicional em um aplicativo ativado para SaaS.
Pode-se argumentar que o primeiro modelo no realmente de mltiplos de arrendatrios, mas frequentemente usado em uma nuvem com servidores de virtualizao e promovido como uma forma de mltiplos arrendatrios. Na realidade, ele insuficiente e possui apenas vantagens marginais sobre o antigo modelo ASP com hardware dedicado. O nvel mais eficiente aquele no qual os aplicativos de fato compartilham um banco de dados e a lgica de negcios do aplicativo. Alcanar isso pode ser um processo oneroso que requer alteraes ao esquema de banco de dados para adicionar um identificador de arrendatrio para toda tabela e visualizao, bem como reescrever todo acesso SQL para adicionar os critrios de arrendatrios aos filtros. Faltando um local no cdigo onde precisa ocorrer que compromete a segurana de dados do aplicativo. Alm das instncias de acesso de dados que ocorrem no aplicativo, pode haver outros aplicativos, como gravadores de relatrio ou aplicativos de utilitrio que tambm devem ser modificados para incluir a filtragem de arrendatrio necessria para manter os dados de arrendatrios individuais acessveis apenas queles arrendatrios em particular. O tipo de acesso que no diretamente do aplicativo em si apresenta problemas que devem ser controlados. Se qualquer usurio autorizado puder gravar um relatrio, ele deve ser impedido de acessar os dados que no pertenam ao arrendatrio do qual eles fazem parte.
Inscrio de autoatendimento
Seu aplicativo deve estar disponvel com algum nvel de inscrio de autoatendimento, mesmo se for simplesmente um mecanismo de solicitao que resulte em um processo de negcios para adicionar um arrendatrio ao aplicativo.
Assinatura e faturamento
Voc deve fornecer um mecanismo de assinatura e faturamento. Uma vez que os aplicativos SaaS por design envolvem uma srie de pagamentos com base em fatores como nmero de usurios por arrendatrio, opes de aplicativo e talvez durao de uso, deve haver uma maneira de rastrear e gerenciar informaes de faturamento que estejam acessveis aos administradores do arrendatrio.
ID do usurio e autenticao
Voc precisa fornecer um mecanismo de suporte identificao do usurio e autenticao que permita a identificao exclusiva dos usurios. Porque mltiplos arrendatrios permite que todos os usurios que se conectam ao sistema sejam identificados para determinar a qual arrendatrio pertencem, deve haver um relacionamento definitivo que permita que os usurios sejam identificados como pertencendo a um arrendatrio em particular. Esse relacionamento usurioarrendatrio so as informaes chave usadas para restringir os dados que podem ser acessados pelo usurio. Os endereos de e-mail so uma maneira tpica de fazer isso de modo que a singularidade seja garantida e os indivduos possam ser reconhecidos e identificados como pertencendo a um arrendatrio em particular.
H muitos mecanismos de identificao e mtodos de integrao com eles, ento um mecanismo flexvel para permitir que um usurio seja identificado essencial. Frequentemente necessrio que um arrendatrio em particular possa utilizar seu LDAP existente ou outro servio de diretrio ou mecanismo de autenticao para dar suporte a conexo nica ao aplicativo SaaS. Embora esse tipo de autenticao externa do usurio seja importante, responsabilidade do aplicativo SaaS estabelecer que o usurio identificado seja um membro do arrendatrio alegado.
Escala horizontal/vertical
Recursos de infraestrutura em nuvem oferecem muitas oportunidades para fazer esse tipo de escalabilidade acontecer dinamicamente e de maneira automatizada, para fornecer os recursos quando necessrio e escalar de volta os recursos quando os acordos de nvel de servio (SLAs) de desempenho puderem ser cumpridos com menos recursos. Esse recurso elstico algo que deve ser ajustado para responder precisamente da maneira necessria para fornecer o servio sem fornecer recursos que sero subutilizados: A escala horizontal normalmente empregada para a camada do servio de aplicativos. A escala vertical normalmente empregada para a camada do banco de dados.
outros aplicativos. Alguns desses outros aplicativos podem estar fora dos aplicativos (no controlado pelo provedor do SaaS). Nem todas as arquiteturas SaaS so projetadas com acessibilidade com aplicativos externos em mente. Esses outros aplicativos poderiam ser aplicativos desenvolvidos pela prpria empresa que precisem acessar ou compartilhar dados; poderiam ser ferramentas analticas e de gravao de relatrio que minam os dados para tendncias. Mesmo ferramentas utilitrias usadas pelos administradores de bancos de dados podem ser preocupaes de segurana se os arrendatrios puderem us-las para acessar, ou, pior ainda, manipular dados que no pertencem a eles. Uma arquitetura de melhor prtica para SaaS deve considerar que nem todo o acesso a dados pode estar sob controle do aplicativo; deve haver mecanismos estabelecidos para permitir que os dados sejam protegidos para cada arrendatrio, no importa se o acesso atravs do aplicativo SaaS ou de algum aplicativo externo.
exigente. Mas a escalabilidade necessria de aplicativos SaaS tem o potencial de superar as habilidades da escala vertical, ento a prxima etapa em escalabilidade de banco de dados envolve ter um recurso de armazenamento em cluster. A habilidade de fazer esse tipo de armazenamento em cluster no ambiente em nuvem pode influenciar na escolha do banco de dados. Por exemplo, o DB2 pode ser selecionado por sua habilidade de executar em uma variedade de sistemas operacionais que fornecem escala vertical e por sua flexibilidade de escolhas para escalabilidade atravs de mltiplas instncias de armazenamento em cluster e redundncia. Por exemplo, um cluster DB2 HADR (High Availability Disaster Recovery) pode ser configurado na nuvem.
aplicativo de mltiplos arrendatrios tpico, em uma verso SaaS de mltiplos arrendatrios. Etapa 1. Transformar o esquema de banco de da dos em um modelo abstrato A pilha tpica para um aplicativo da Web semelhante Figura 1; um aplicativo comunica-se com um banco de dados, frequentemente atravs de uma camada de persistncia de dados como Hibernate. Figura 1. Pilha de aplicativo da Web tpico na nuvem
Para transformar um aplicativo em um aplicativo de mltiplos arrendatrios , o banco de dados precisa ser reprojetado para ter campos adicionais para gerenciar os dados de identificao do arrendatrio que sero precisos para permitir que os dados sejam filtrados pelo arrendatrio. O aplicativo SaaS-Factory usado para ler o esquema do banco de dados de aplicativo existente Ele ento cria um modelo desse banco de dados, que subsequentemente usado para gerar um novo banco de dado no MySQL que tem o campo adicional TenantID nas tabelas. Neste momento, diversas tabelas adicionais, incluindo uma para informaes do arrendatrio , que so usadas pelo Servidor Multi-Tenant, so criadas. Figura 2. Criando o esquema do banco de dados MetaModel
Porque o Banco de dados MetaModel tem uma aparncia exatamente igual do aplicativo original
cm as mesmas tabelas e campos, o aplicativo original pode continuar a interagir com o Banco de dados MetaModel exatamente da mesma maneira que fazia com o banco de dados MySQL, O banco de dados real subjacente ao modelo pode ser gerado com o campo adicional TenantID necessrio para um aplicativo de mltiplos arrendatrios. O Banco de dados MetaModel uma abstrao apenas e no detm de fato nenhum dado: um simples modelo. Consequentemente, quando o banco de dados real gerado, no h motivo para que no possa ser gerado em qualquer Relational Database Management System (RDBMS) suportado. Isso pode ser til para casos em que o ISV deseja alterar a pilha de tecnologia escolhendo um RDBMS diferente, talvez DB2 para tirar vantagem de alguns recursos ou melhorar o desempenho para o aplicativo.
banco de dados compartilhado seja sempre estritamente mantida. Mesmo quando um aplicativo externo, como o ReportWriter conecta-se, os dados que ele pode ver ainda so restringidos queles adequados para o arrendatrio em questo. Porque sabemos quem efetuou o login, no importa de qual aplicativo, sabemos qual arrendatrio ele pertence e os filtros adequados so aplicados. Porque a manipulao das instrues SQL feita aps terem sido enviadas para o Banco de dados MetaModel e o arrendatrio do usurio conhecido, o Corent Agile Controller pode interceptar e realizar operaes mais sofisticadas, incluindo procurar processos e configuraes especficos do arrendatrio. , portanto, possvel realizar aes especficas por arrendatrio, mesmo substituindo uma conexo de banco de dados diferente, de modo que um arrendatrio poderia usar um banco de dados DB2 embora todos os outros estejam usando um banco de dados MySQL. Ou um arrendatrio poderia ter manipulao de SQL adicional para restringir os dados que poderia recuperar aos registros inseridos no mais que 90 dias antes. Todas essas personalizaes por arrendatrio podem ser feitas atravs do Agile Rules Engine integrado no Servidor Multi-Tenant sem quaisquer alteraes ao cdigo do aplicativo original.
Toda a converso do aplicativo jBilling foi realizada com apenas algumas pequenas alteraes ao aplicativo, principalmente relacionadas a aprimorar a autenticao para incluir informaes do arrendatrio nas informaes da sesso e para alterar a conexo do banco de dados para apontar para o servidor de Mltiplos Arrendatrios. possvel ver o resumo de alteraes do jBilling em um dos seguintes: Aplicativo original Nmero de arquivos de origem: 897 (Java e jsp) Total de linhas de cdigo: 76.621 Aplicativo convertido Nmero de arquivos de origem adicionados: 2 (modelo padro) Linhas de cdigo modificadas: menos de 100 Alteraes da lgica de negcios do aplicativo: zero A converso do jBilling levou menos de uma semana, incluindo toda a anlise e preparao para determinar onde o cdigo precisava ser modificado. Muitas das alteraes foram simples alteraes de uma linha repetitivas em uma srie de cdigo Java para acesso do JDBC, o que desnecessrio se uma camada de persistncia de banco de dados como Hibernate for usada. Etapa 4. Implementar o novo aplicativo SaaS de mltiplos arrendatrios para a nuvem O SaaS-Factory agora pode ser usado para implementar um aplicativo SaaS para um servidor designado, incluindo servidores na nuvem. Depois de selecionar um servidor para o aplicativo e o banco de dados, o banco de dados de destino gerado (como um banco de dados MySQL em um servidor Windows para nosso aplicativo jBilling) e o aplicativo do Servidor Multi-Tenant totalmente configurado implementado como um conjunto de arquivos .WAR para o servidor de aplicativos selecionado. O Servidor Multi-Tenant funciona com qualquer continer J2EE moderno e foi certificado para o WebSphere Application
Server. O aplicativo implementado agora capaz de lidar com mltiplos arrendatrios. Entretanto, o aplicativo original no ter uma interface de administrao e gerenciamento para gerenciar arrendatrios ou monitorar um aplicativo de mltiplos arrendatrios. O SaaS-Factory tambm pode gerar e instalar um aplicativo parceiro chamado SaaS-Cockpit que fornece esses servios de mltiplos arrendatrios bsicos. Tem acesso ao mesmo MetaModel Database que um aplicativo principal e tem telas de administrao para fornecer arrendatrios, atribuindo contas de Administradores de Arrendatrios e configurando os parmetros bsicos das diversas configuraes de aplicativo por arrendatrio que esto disponveis. H tambm instalaes de administrao para monitorar e relatar arrendatrios e seus usurios. Uma vez que uma das caractersticas comuns de aplicativos SaaS a necessidade de rastrear assinaturas e faturamento de arrendatrios, esto disponveis instalaes para fazer faturamento ou integrao com sistemas de faturamento externos. Figura 4. A estrutura para implementar seu novo aplicativo SaaS para a nuvem
Esse nvel de implementao bastante bsico no que concerne implementaes SaaS. As caractersticas dos aplicativos permanecem intactas aps tipos padro de cenrios de implementao e converso, incluindo o uso de ferramentas de gerenciamento na nuvem para criar modelos e propagar instncias do aplicativo, podem ser usadas para implementar uma arquitetura operacional que atenda as necessidades do aplicativo para escalabilidade, elasticidade, resilincia e redundncia. Um aplicativo SaaS tpico pode ter um conjunto de servidores de aplicativos acessados atravs de um balanceador de carga e conectados a um servidor de banco de dados. O servidor do banco de dados em si pode ser implementado como um cluster com os servidores de banco de dados mltiplos fornecendo redundncia e escalabilidade. O IBM DB2 oferece diversas tecnologias e configuraes que podem ser usadas para obter resilincia e tempos de recuperao garantidos, bem como permitindo que a carga no banco de dados seja distribuda.
As configuraes do DB2 HADR (High Availability Disaster Recovery) podem fornecer tanto resilincia de disponibilidade quanto algum balanceamento de carga atravs do uso do modo secundrio como um banco de dados somente leitura. A tecnologia IBM pureScale e o Tivoli System Automation (TSA) permite um ambiente de banco de dados em cluster com mltiplos ns que compartilham a carga de processamento, mas esses tm mais restries sobre as configuraes do sistema operacional e hardware. A tendncia na disponibilidade de banco de dados e failover est se tornando mais sofisticada para aplicativos SaaS porque o nmero de clientes/arrendatrios afetados por quaisquer indisponibilidade maior que aquele no software no local do cliente tradicional (Figura 5). Figura 5. Arquitetura de implementao SaaS para operaes em nuvem resilientes escalveis
A tendncia para recursos que possibilitem que o aplicativo execute continuamente mesmo atravs de reorganizaes offline de dados, evolues de esquema, atualizaes de verso e variaes de carga pesada. A tecnologia pureScale da IBM est migrando do mundo do z System para AIX e Linux e possibilitando o tipo de manipulao de capacidade e tempo de atividade anteriormente reservados para ambientes de mainframe dedicados.
Concluso
A evoluo do segmento de mercado da tecnologia informao para SaaS est a caminho e como voc pode ter suposto, j est comeando a causar algumas mudanas importantes na paisagem. A computao em nuvem est crescendo a taxas acima de qualquer outra onda de TI e SaaS o condutor para esse crescimento. Essa transio est forando as empresas a repensar a organizao de negcios e desenvolver novas maneiras de pensar sobre a entrega de servios em um mundo de TI centrado em nuvem. Para fornecedores de software, h uma urgncia crescente de entender, preparar-se para e realizar a transio para que no sejam deixados para trs no rastro de poeira digital da histria. O modelo SaaS-on-a-cloud diferencia-se do modelo tradicional de fornecedores de software tanto em consideraes tcnicas quanto de negcios. Essas diferenas fazem a transio para SaaS um empreendimento de maior risco para ISVs. Para reduzir o risco e acelerar o tempo para
comercializar, os ISVs podem tirar vantagem de tecnologias, produtos e parceiros comprovados para auxiliar na transio.
Agradecimentos
Contribuies, ideias e sugestes e revises para este artigo foram generosamente fornecidas por Mike Oliver, Rob Brown, Mark Joncich, Kaiser Saeed e Feyzi Fatehi; e assistncia de edio de Aimee Dean. Muito obrigado.
Sobre o autor
Com um histrico do desenvolvimento de software, arquitetura, operaes globais e gerenciamento para empresas na lista da Fortune 500 Scott Chate da Corent Technology est experimentando o outro lado do setor de TI em uma organizao empreendedora com tecnologia inovadora. Atravs de desenvolvimento de produto e consultoria em gerenciamento na Oracle, TransCanada PipeLines, IBM e Mercer, ele criou e implementou solues inovadoras usando tecnologias emergentes para entregar eficincia, gerenciar riscos e possibilitar oportunidades.
Resumo: ZK, uma estrutura de software livre de Asynchronous JavaScript + XML (Ajax) escrita em cdigo Java, permite criar um aplicativo de Internet rica habilitado para Web 2.0, sem que seja necessrio escrever uma nica linha de cdigo JavaScript. As estruturas tpicas de Ajax, como Dojo, tm bibliotecas JavaScript que expem determinadas APIs para a realizao de chamadas baseadas em Ajax. ZK, por outro lado, usa um definio meta baseada em XML para definir a interface do usurio. A traduo para o cdigo HTML ocorre ento quando essa pgina 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.
Introduo possvel pensar no ZK como sendo anlogo 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 marcao chamada ZUML, que usada para criar interfaces do usurio ricas em recursos. A lgica de negcios pode ser escrita por meio de cdigo 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 usurio. Parece interessante? Primeiro, deixe-me descrever os itens anteriores com um pouco mais de detalhes: XHTML: Extensible Hypertext markup language, ou XHTML, um combinao de HTML e XML. O XHTML acrescenta a capacidade e a flexibilidade do HTML extensibilidade do XML. A Listagem 1 fornece um exemplo de cdigo XHTML. Listagem 1. Cdigo 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 marcao desenvolvida pelo Mozilla, e um aplicativo XML usado para descrever interfaces grficas do usurio. 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 cdigo 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 usurio 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 cdigo ZUML. Listagem 3. Cdigo de exemplo ZUML
<window title="Hello ZUML" border="normal"> Hello World! </window>
Obtendo o ZK bastante fcil obter e instalar o ZK. A documentao sobre as bibliotecas e sobre a configurao da estrutura de pastas foi muito bem definida no site de documentao do ZK. (Consulte Recursos para encontrar um link.) Ento, obter o ZK, incluindo executar o aplicativo hello world, deveria ser simples. Por que ZK? ZK uma implementao direta do Ajax ou, em outras palavras, um modelo centralizado no servidor. diferente de outras estruturas que o expem aos complexos detalhes das realizaes de chamadas Ajax. Alm disso, as chamadas Ajax exigem amplo uso e conhecimento de JavaScript para a manipulao de Document Object Model (DOM) no navegador (cliente) e para a sincronizao de dados durante a comunicao cliente/servidor. Com o ZK, voc fica protegido dessas complexidades e pode se concentrar na lgica de negcios. Dentre outros benefcios do ZK esto: Rico conjunto de interfaces do usurio Acesso ao servio da Web Ligao de dados do componente Linguagem de marcao simples mas poderosa, o ZUML Alta capacidade de manuteno e extenso porque no h cdigo do cliente Alta usabilidade Maior produtividade para o desenvolvedor
ZK em ao Para compreender como o ZK funciona, vamos ver um exemplo real. Este exemplo o aplicativo Manage Customer, por meio do qual o usurio pode executar vrias operaes como adicionar um novo cliente, editar dados do cliente e excluses recuperveis de entradas do cliente no banco de dados. Mas, antes de comear com o cdigo, explicarei algumas telas da interface do usurio que foram geradas usando o ZK. Aps tratar das telas, descreverei a arquitetura do ZK, que um mecanismo subjacente para a gerao dessa notvel interface do usurio. Por fim, descreverei os detalhes do nvel de cdigo e os parmetros de configurao usados para este aplicativo. A Figura 1 mostra a tela inicial do aplicativo Manage Customer.
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 excluso. Os dados na grade pode ser classificados (em ordem crescente ou decrescente) clicando no boto ao lado dos nomes das colunas. A classificao ativada para as colunas ID (int), Name (String) e Active Date (Data). Posteriormente neste artigo, explicarei como customizar a classificao usando um objeto Comparator. A paginao tambm ativada para este aplicativo, como mostrado na parte inferior da tela. A pgina est habilitada para mostrar 5 registros por vez, junto com a capacidade de moverse para a prxima pgina ou diretamente para uma pgina especfica. Figura 2. Barra de menus na parte superior
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 opo de registrar um novo cliente e sair do aplicativo. Agora que voc viu alguns fluxos do usurio 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 usurio automaticamente dispararem eventos no servidor por meio do Client Engine. Em contrapartida, os componentes em execuo no servidor atualizam a visualizao para que haja correspondncia com o cliente. O cliente (navegador), age simplesmente como uma visualizao, enquanto o aplicativo executado no servidor e tem total acesso a recursos como banco de dados, servios da Web etc. Consequentemente, as preocupaes com segurana so mnimas.
H trs componentes principais em uma estrutura ZK. Como mostrado na Figura 3, esses componentes so o ZK Client Engine, ZK Loader, e o ZK Update Engine. ZK Client Engine: Este o lado do cliente do ZK, que envia solicitaes ao servidor para obter respostas correspondentes do ZK. Essas respostas, por sua vez, so usadas pelo mecanismo para atualizar o DOM no navegador. ZK Loader: Este componente gera uma pgina HTML com base em um URL que solicitado pelo cliente. ZK Update Engine: Tambm conhecido como Asynchronous Update (AU) Engine. Este componente responsvel por receber a solicitao Ajax e atualizar os atributos correspondentes no componente ZK para que o Client Engine possa atualizar a visualizao no navegador. Figura 3. A arquitetura do ZK
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 responsvel por monitorar eventos do lado do cliente e por enviar e receber as Solicitaes ZK e as Respostas ZK para o servidor. O Client Engine aciona eventos com base nas aes do usurio, como onChange, onClick etc. Esses eventos chamam o ZK Update Engine, que atualiza as propriedades dos componentes ZK e responde ao Client Engine. Aps receber esta resposta, o Client Engine atualiza a rvore DOM no navegador para que o usurio possa obter a visualizao atualizada. Aplicativo Manage Customer usando o ZK Em seguida, passarei a descrever os detalhes da criao de um aplicativo de exemplo para gerenciar clientes. Uso o IDE Eclipse para demonstrar a criao do aplicativo, mas qualquer IDE que voc escolher dever funcionar. A ideia bsica criar um projeto de aplicativo da Web dinmico e apont-lo para o tempo de execuo do servidor do aplicativo que, neste caso, o tempo de execuo do Apache Tomcat. Aps a configurao do novo projeto e do tempo de execuo, replique a estrutura de pastas conforme mostrado na Figura 4.
A estrutura do diretrio do aplicativo Manage Customer segue a mesma estrutura de diretrio padro descrita na Figura 4. Observe que o ncleo dos arquivos para este aplicativo est contido na pasta WebContent. Na pasta WebContent temos os seguintes subdiretrios: META-INF Este contm as informaes credenciais do banco de dados para conexo com o banco de dados MySQL. WEB-INF Este inclui a pasta da biblioteca que contm os arquivos JAR ZK necessrios para a execuo do aplicativo. O diretrio tambm inclui o arquivo web.xml, que descreve a origem de dados. Alm disso, todos os arquivos zul e HTML associados esto contidos dentro da pasta WebContent. Esses arquivos atuam como a parte de visualizao do aplicativo, fornecendo o contedo dinmico e esttico ao aplicativo da Web. O arquivo de exemplo zkManageCustomer.zip (consulte a seo Download) contm a verso compactada do aplicativo. Tambm esto includos os arquivos de metadados exigidos pelo Eclipse para que seja possvel a importao 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 boto direito do mouse, mostra ao usurio a opo de criar um novo servidor. Esse servidor pode ser usado para gerenciar o servidor de aplicativos a partir do IDE do Eclipse. Aps a configurao do novo servidor, os recursos recentemente criados precisam ser configurados no servidor. A configurao desse servidor implementa os recursos que so criados durante o curso do desenvolvimento. Configurao do Tomcat e do MySQL O programa do exemplo configurado para funcionar com o Tomcat e o MySQL. No entanto, voc
no 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 mudanas no cdigo de conexo. Para conectar o Tomcat ao banco de dados MySQL, necessrio definir uma referncia de recurso. Este elemento especifica o nome da referncia de conexo fbrica de um gerenciador de recursos. Nesse caso, seria a conexo do banco de dados especificada por jdbc/mysql, que do tipo javax.sql.DataSource. Listagem 4. Conexo fbrica 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> . . .
Tambm preciso definir um recurso de conexo no arquivo context.xml da pasta WebContent/META-INF. Esse arquivo contm propriedades como nome do driver, nome da jndi, nome do usurio, senha, tipo de dados e o URL. Listagem 5. Definio 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 configurao muito semelhante quela descrita para o MySQL. Aqui est um exemplo mostrando a configurao da conexo fbrica de um gerenciador de recursos em web.xml: . . .
Resumo do aplicativo
Uma breve descrio do aplicativo foi apresentada anteriormente neste artigo. O aplicativo Manage Customer oferece as funes de: Pgina do console que permite operaes do usurio, incluindo uma visualizao de todos os clientes Adio de novos clientes Edio dos clientes existentes Possibilidade de excluso de clientes (excluso recupervel) A Figura 5 mostra a pgina de console do aplicativo. A visualizao padro mostra a lista de clientes no banco de dados. Figura 5. A tela do console
A tela do console mostra uma lista de todos os clientes registrados. Alm da lista de clientes, o usurio tambm tem a possibilidade de classificar os dados com base no ID ou no Nome. O arquivo index.zul tem vrios atributos, como borderlayout, menubar, menu e
menupopup, sendo que todos definem a aparncia 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 rtulo 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. Tambm definido o atributo para fazer a caixa de dilogo modal, closable e assim por diante. Alm disso, includo um menu de sada que fecha o aplicativo. O menubar, juntamente com os atributos definidos, fornece a este aplicativo a aparncia 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 funo de paginao pode ser ativada usando o atributo mold de listbox. Alm disso, a classificao baseada nos cabealhos das colunas pode ser definida ativando auto no atributo de classificao de listheader. O objeto myList uma lista de objetos Customer, que so compostos por atributos como id,name, date e o deleted flag do Cliente. O servio retorna esta lista que, em seguida, iterada pelo ZK usando "each =myList". Os rtulos listcell
mostram ento cada atributo do objeto customer na listbox. Alm disso, para habilitar a funo de edio, anexado um mtodo showEdit ao evento onClick. A caixa de dilogo de registro do cliente implementada como uma grade com valores obrigatrios para o Nome do cliente e os Dados. Listagem 11. Cdigo da grade da caixa de dilogo 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 restries obrigatrias para a caixa de dilogo so especificadas usando "no empty" como atributo da restrio. O ZK tambm oferece a capacidade de definir restries customizadas. Quando o boto Save clicado, anexado um mtodo Java chamado submit() a este evento. Este mtodo submit() recebe o nome e o valor de data fornecidos pelo usurio e os define em um objeto customer recentemente criado. Este objeto ento passado ao servio para adio ao banco de dados. A Listagem 12 mostra este cdigo. Listagem 12. Cdigo Java para o boto 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(); }
A Figura 7 mostra uma tela para editar o nome ou a data do cliente, junto com a opo de excluso recupervel. Figura 7. Tela Editar/Excluir
O mecanismo de edio muito semelhante definio do cdigo de registro do cliente. Informe novos valores de nome, data e o sinalizador de excluso para que o servio de atualizao atualize o registro no banco de dados. Se desejar configurar ajuda adicional, possvel usar o cdigo na Listagem 11 para criar um elemento pop-up. Listagem 13. Cdigo 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 benefcios do ZK so 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 criao deste exemplo de projeto. Figura 8. ZUL Visual Editor
Resumo Este artigo descreveu os recursos do ZK, uma estrutura Ajax de software livre escrita em cdigo 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 marcao, poderosas ferramentas de desenvolvimento e uma excelente documentao, alm de ser um software livre e uma estrutura Ajax acionada por eventos. Devido a tudo isso, o ZK est se tornando uma opo popular para o desenvolvimento de aplicativos de Internet rica de baixo custo. Download da Aplicao : http://www.ibm.com/developerworks/apps/download/index.jsp? contentid=469637&filename=zkManageCustomers.zip&method=http&locale=pt_BR
Introduo
O ZK anlogo ao Ajax sem JavaScript. uma estrutura poderosa composta de um mecanismo acionado por eventos baseado em Ajax, um conjunto rico de componentes XHTML e XUL e a linguagem de marcao ZUML para criao de interfaces com o usurio repletas de recursos. Neste artigo, aprenda sobre Contextos e Injeo de Dependncia (CDI) para o modelo de programao da plataforma Java EE em relao estrutura ZK. Este artigo desenvolvido com base no aplicativo de exemplo em Aplicativos de Internet rica que usam o ZK: Uma estrutura Ajax de software livre", um artigo que explora o poder do ZK. Usando ZK e CDI, possvel estender o aplicativo de exemplo real e detalhado para o gerenciamento de clientes. possvel fazer o download do cdigo de origem do aplicativo neste artigo. JSR-299 e CDI Java Specification Request (JSR) 299, ou CDI Java, um padro Java para gerenciamento de ciclo de vida de injeo de dependncia e contextual. Atravs do padro, um conjunto de servios que facilitam e limpam o desenvolvimento de aplicativos definido. Os servios fornecem: Interao dos objetos atravs de um mecanismo de notificao de eventos Injeo de dependncia de tipo seguro Mtodos de ciclo de vida para objetos stateful ligados aos contextos Um interceptor "decorator" para conectar o interceptor aos objetos Uma interface com o provedor de servio (SPI) para desenvolver extenses mveis
Como o CDI enfatiza o loose coupling e uma linguagem fortemente tipada, o bean no precisa estar ciente de certos aspectos como implementao, modelo de encadeamento ou ciclo de vida. Esses aspectos podem variar com base na implementao, sem afetar o cliente de forma alguma. O loose coupling facilita a manuteno do cdigo e o torna extensvel. ZK e CDI O CDI do ZK, fornecido pela estrutura ZK, fornece integrao contnua com o CDI para expor servios de CDI na estrutura ZK. Ele permite aos desenvolvedores corporativos a integrao de aplicativos dirigidos por CDI, com um frontend Ajax abrangente e poderoso fornecido pelo ZK. O uso conjunto do CDI e do ZK facilmente preenche a lacuna entre a camada da Web do Java EE e o Java EE. A extenso de CDI do ZK permite o uso contnuo dos recursos de CDI no modelo de programao ZK. Alm dos recursos de CDI integrados, as extenses de CDI do ZK fornecem os seguintes recursos para facilitar o desenvolvimento. Resolvedor de varivel customizada/resolvedor EL Resolve beans gerenciados por CDI dentro da tag <zscript />, uma expresso EL ( $ {...}) e uma expresso de ligao de dados com anotaes de ZK (@{}) por seu nome EL. Escopos customizados de ZK Alm dos escopos de CDI integrados (Session, Request, Application e Conversation), essa extenso fornece mais cinco escopos de ZK: Desktop, Page, Execution, IdSpace e Component. Componentes de ZK como beans gerenciados Permitem a injeo de componentes de ZK em beans gerenciados, como criadores ZK. Manipuladores de evento de UI usando anotao customizada de ZK e modelo de notificao de eventos fornecido por CDI Permitem a anotao de qualquer mtodo com anotao customizada de ZK e a transformao para um mtodo de manipulador de eventos
A extenso de CDI do ZK baseada no Weld, que uma implementao de referncia da especificao JSR-299 que define CDI (consulte a seo Recursos para obter mais informaes).
O cdigo ZUL na Listagem 2 acessa o bean HelloWorld usando seu nome EL padronizado, helloWorld. Listagem 2. Nome EL padro
<?variable-resolver class="org.zkoss.zkplus.cdi.DelegatingVariableResolver"?> <window title="ZK + CDI: Hello World" width="300px" border="normal"> My CDI-injected bean says: ${helloWorld.text} </window>
O ZK fornece uma diretiva de resolvedor de varivel <?variable-resolver ?> . possvel us-la para especificar uma classe de resolvedor a ser usada pelo avaliador EL do ZK (${...}), o componente de ligao anotado do ZK (@{...}) e o interpretador <zscript> para resolver variveis desconhecidas. Um recurso da extenso de CDI do ZK um resolvedor EL customizado chamado DelegatingVariableResolver, que pode ser usado para resolver um bean gerenciado
HelloWorld por seu nome EL em uma expresso EL unificada. No arquivo index.zul na Listagem 2, um componente de janela simples definido e exibe um campo de texto da classe HelloWorld usando a expresso EL ${helloWorld.text} . Durante a fase de renderizao ZUL, quando o analisador ZUL encontrar essa expresso EL, ele ir usar o DelegatingVariableResolver especificado no <?variable-resolver ?> para resolver a instncia de bean helloWorld. Como o HelloWorld agora um bean gerenciado de continer, o continer dever fornecer uma instncia de bean HelloWorld. Ao usar a instncia bean retornada pelo continer, ${helloWorld.text} ser avaliado. A avaliao resultante do mtodo getText() retorna a cadeia de caractere "Hello World", conforme mostrado na Figura 1. Figura 1. HelloWorld
Os clientes registrados no aplicativo so listados. A lista uma grade, com colunas para o ID, o nome do cliente, a data ativa e o sinalizador de excluso. Os dados na grade podem ser classificados (na ordem crescente ou decrescente) clicando no boto perto dos nomes das colunas. A classificao foi ativada para as colunas ID (nmero inteiro), Name (cadeia de caractere) e Active Date (Data). A paginao tambm foi ativada para esse aplicativo, conforme mostrado na parte inferior da tela. A pgina foi configurada para mostrar 5 registros por vez. Os usurios podem ir para a prxima pgina ou diretamente para uma pgina especfica. A Figura 3 mostra a barra superior do aplicativo Manage Customer.
A barra de menus implementada usando o widget menubar do ZK. Ele inclui uma opo para registrar um novo cliente e sair do aplicativo.
A estrutura de diretrio do aplicativo Manage Customer segue o mesmo padro mostrado na Figura 4. Os arquivos principais desse aplicativo esto contidos na pasta WebContent, com os seguintes subdiretrios: META-INF contm as informaes de credenciais do banco de dados para conexo com o banco de dados MySQL. WEB-INF inclui a pasta da biblioteca que contm os arquivos JAR do ZK necessrios para a execuo do aplicativo. Ela tambm inclui trs arquivos de configurao. beans.xml, que indica as classes de bean do aplicativo que esto disponveis para injeo. web.xml, que descreve a origem de dados, os servlets do ZK e as configuraes do Weld. zk.xml, que pode conter configuraes especficas do ZK. Todos os outros arquivos ZUL e HTML associados esto contidos na pasta WebContent. Esses arquivos atuam como a parte de visualizao do aplicativo, fornecendo o contedo dinmico e esttico para o aplicativo da Web. O arquivo de amostra zkManageCustomer.zip (consulte a seo Download) contm a verso compactada do aplicativo. Ele tambm inclui os arquivos de metadados necessrios para o Eclipse ser importado diretamente para o IDE de forma contnua. A perspectiva do Java 2 Platform, Enterprise Edition (J2EE) no Eclipse possui uma guia de servidor que, quando clicada com o boto direito do mouse, exibe uma opo para a criao de um novo servidor. Esse servidor pode ser usado para gerenciar o servidor de aplicativos do IDE Eclipse. Depois da configurao do novo servidor, os recursos recm-criados precisam ser configurados no servidor. Essa configurao do servidor implementa os recursos criados durante o curso do desenvolvimento. Configurando o MySQL O programa de exemplo configurado para trabalhar com o Tomcat e o MySQL. No entanto, no deve haver dificuldade para execut-lo em outro servidor de aplicativo ativado para CDI. Como o exemplo usa JDBC, deve funcionar com qualquer banco de dados SQL suportado, como o DB2 Express-C, com apenas algumas modificaes no cdigo de conexo. Para conectar o Tomcat ao banco de dados MySQL, necessrio definir uma referncia de recurso. Esse elemento especifica o nome de uma referncia de conexo fbrica do gerenciador de recursos, conforme mostrado na Listagem 3. Neste caso, seria a conexo com o banco de dados especificada pelo jdbc/mysql, que do tipo javax.sql.DataSource . Listagem 3. Defina uma referncia de recurso
<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>
Tambm necessrio definir um recurso de conexo no arquivo context.xml na pasta WebContent/META-INF. Esse arquivo contm propriedades como o nome do driver, o nome JNDI,
o nome de usurio, a senha, o tipo de dados e a URL. Listagem 4. Defina um recurso de conexo
<Resource driverClassName="com.mysql.jdbc.Driver" maxActive="4" maxIdle="2" maxWait="5000" auth="Container" name="jdbc/mysql" password="as1008" type="javax.sql.DataSource" url="jdbc:mysql://localhost:3306/customer" username="root"/>
O banco de dados do cliente possui uma nica tabela que pode ser criada executando o script da Listagem 5. Listagem 5. Crie uma tabela
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') );
Ativando o suporte para a extenso de CDI do ZK Para aproveitar a extenso de CDI do ZK, copie o arquivo zkcdi.jar (na distribuio binria da extenso de CDI do ZK) na pasta WEB-INF/lib do seu projeto de aplicativo da Web. O zkcdi.jar deve ser usado como uma biblioteca do aplicativo da Web. Ativando o suporte para Weld para o Tomcat Para ativar o suporte para Weld para o Tomcat: 1. Especifique o ouvinte do servlet Weld (usado para fazer o boot do Weld e controlar suar interaes com as solicitaes) no arquivo WEB-INF/web.xml na raiz da Web como:
<listener> <listener-class>org.jboss.weld.environment.servlet.Listener</listener-class> </listener> <listener> <listener-class>org.jboss.weld.el.WeldELContextListener</listener-class> </listener>
2. O Tomcat possui um JNDI somente leitura, ento o Weld no pode conectar automaticamente a SPI de extenso BeanManager. Para conectar o BeanManager no JNDI, preciso preencher o META-INF/context.xml na raiz da Web com os seguintes contedos para disponibiliz-lo para a sua implementao como:
<Resource name="BeanManager" auth="Container" type="javax.enterprise.inject.spi.BeanManager" factory="org.jboss.weld.resources.ManagerObjectFactory" />
<resource-env-ref> <description>Object factory for the CDI Bean Manager</description> <resource-env-ref-name>BeanManager</resource-env-ref-name> <resource-env-ref-type>javax.enterprise.inject.spi.BeanManager </resource-env-ref-type> </resource-env-ref>
3. Inclua um arquivo beans.xml vazio na pasta WEB-INF para ativar a injeo de dependncia pelo CDI. Para obter instrues similares de configurao do Weld com outros servidores de aplicativos e ambiente, consulte a seo Recursos. Estendendo o aplicativo O aplicativo Manage Customers fornece as seguintes funes: Um painel para operaes do usurio, incluindo uma visualizao de todos os clientes Adio de novos clientes Edio dos clientes existentes Excluso de clientes (excluso recupervel)
A Figura 2 mostra o painel com uma lista de todos os clientes registrados. O usurio pode classificar os dados com base no ID ou no Nome. O arquivo index.zul possui vrios atributos que definem a aparncia e o ambiente do aplicativo como borderlayout, menubar, menue menupopup. Listagem 6. Defina a aparncia
<?page id="manageCust" title="Manage Customers" cacheable="false" language="xul/html" zscriptLanguage="Java" contentType="text/html;charset=UTF-8"?> <?variable-resolver class="org.zkoss.zkplus.cdi.DelegatingVariableResolver"?> <zk> <window id="win" border="normal" width="810px" minheight="300" apply="${manageCustomer}"> <caption label="Manage Customers"/> <borderlayout height="30px"> <north border="none"> <menubar id="menubar" width="800px"> <menu label="Manage Customers"> <menupopup> <menuitem id="add" label="Register New Customer"> </menuitem> <menuseparator /> <menuitem id="exit" label="Exit" onClick="win.detach()" /> </menupopup> </menu> </menubar> </north> </borderlayout> <listbox id="customerList" mold="paging" pageSize="5" multiple="true" width="800px"> <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?" />
Diferente da implementao anterior do Manage Customer, esse exemplo usa uma abordagem MVC do ZK para separar a visualizao do controlador. O arquivo index.zul contm somente a parte da visualizao do aplicativo, enquanto o cdigo do controlador escrito separadamente na classe do criador ManageCustomer. Isso permite o aproveitamento dos recursos de CDI do ZK. Com a abordagem MVC do ZK, um controlador pode ser aplicado para um componente especfico usando o atributo apply . O exemplo usa essa tcnica para aplicar o ManageCustomer ao componente da janela principal do painel. Ele tambm demonstra o uso da diretiva de resolvedor de varivel para o DelegatingVariableResolver e uma expresso EL para aplicar a instncia de bean gerenciado ManageCustomer fornecida pelo continer. Existem dois componentes principais na pgina do painel. O menu na parte superior possui dois itens de submenu: Register New Customer e Exit. Menubar um componente menubar do ZK com dois componentes-filho menuitem do ZK com os IDs add e exit. A tabela listando os clientes que esto atualmente no banco de dados. A tabela do exemplo um componente listbox do ZK cujo ID o customerList. Os cabealhos da coluna da tabela so definidos pelos componentes-filho listheader da caixa de listagem customerList . At agora, voc explorou os componentes que definem a UI do painel, mas e os dados? Quando a caixa de listagem customerList ser preenchida? Veja a classe do controlador ManageCustomer mostrada na Listagem 7. Listagem 7. ManageCustomer
@Named @SessionScoped public class ManageCustomer extends GenericComposer implements Serializable { @Inject @SessionScoped CustomerService custSvc; @Inject @ComponentId("customerList") private transient Listbox customerList; /** * Set up list of all customers on the dashboard * @param component */ public void doAfterCompose(Component component) throws Exception { super.doAfterCompose(component); List myList = custSvc.getAllCustomers(); ListModelList lm = new ListModelList(myList); customerList.setModel(lm); customerList.setItemRenderer(new CustomersListboxRenderer()); } ...
Primeiro, marque a classe de bean ManageCustomer com o qualificador @Named , permitindo o acesso atravs de uma expresso EL unificada. Isso foi demonstrado no componente de janela do
arquivo index.zul com o valor do atributo apply de "${manageCustomer}". A prxima etapa usar o recurso de injeo de dependncia do tipo seguro de CDI para injetar o bean CustomerService dentro do controlador ManageCustomer . O bean CustomerService uma classe do utilitrio que implementa mtodos de acesso ao banco de dados para incluso, atualizao, remoo e recuperao de informaes do cliente. possvel fazer isso especificando um campo CustomerService dentro da classe ManageCustomer e anotando o campo com @javax.inject.Inject. Conforme a especificao do CDI, sempre que a instncia de bean ManageCustomer for instanciada por um continer, a instncia de bean CustomerService ser autoinjetada nele. Nesse momento, necessrio acessar a caixa de listagem customerList para preench-la com todos os dados do cliente. O exemplo usa a classe do utilitrio GenericComposer fornecida pela extenso de CDI do ZK. Estenda a classe ManageCustomer com org.zkoss.cdi.util.GenericComposer, permitindo dessa forma a injeo automtica dos componentes-filho do componente da janela na classe do controlador ManageCustomer . A injeo automtica dos componentes do ZK requer o uso do qualificador @org.zkoss.cdi.inject.ComponentId com o mesmo ID de componente especificado no arquivo index.zul. Alm disso, de acordo com a especificao de extenso do CDI do ZK, o valor do membro qualificador ComponentId deve corresponder ao nome do campo. Por exemplo: para injetar a caixa de listagem customerList no ManageCustomer, use:
@Inject @ComponentId("customerList") private transient Listbox customerList;
Agora hora de colocar alguns dados na caixa de listagem. O preenchimento dos dados precisa ser feito antes da pgina ser renderizada no navegador do cliente. O GenericComposer do tipo Composer e precisa do mtodo doAfterCompose() . Esse um mtodo de retorno de chamada que chamado depois que todos os componentes so compostos. Ele permite a ocorrncia do preenchimento de dados da caixa de listagem do cliente aps a renderizao, mas antes da composio de todos os componentes ZUL. Ainda necessrio chamar o doAfterCompose() do GenericComposer antes de qualquer coisa no mtodo doAfterCompose() substitudo. Registre um cliente novo O que acontece quando algum clica em "Register New Customer" (o item de menu Add na barra de menus do painel do Manage Customer)? Depois de clicado, ele deveria apresentar a janela Enter Customer Data e salvar os dados de entrada como um novo registro de cliente no banco de dados. Para fazer isso, preciso primeiro ter um mtodo de identificador de eventos no controlador ManageCustomer para um item de menu "add" de evento onClick . possvel fazer isso facilmente usando o qualificador @org.zkoss.cdi.event.Events definido pela extenso de CDI do ZK e um modelo de notificao de eventos definido pelo CDI. Defina um mtodo registerNewCustomer() simples, conforme mostrado na Listagem 8. Listagem 8. Defina um mtodo registerNewCustomer()
public void registerNewCustomer(@Observes @Events("add.onClick") MouseEvent evt) throws Exception { Window win1 = (Window)Executions.createComponents("addCustomer.zul", null, null); win1.doModal(); win1.setTitle("Enter Customer Data"); win1.setClosable(true); win1.setMaximizable(true); }
O exemplo usa a anotao @javax.enterprise.event.Observes para o parmetro do mtodo do tipo MouseEvent, que um tipo de evento do ZK. Isso transformar o mtodo registerNewCustomer() em um mtodo observador (um mtodo que observa um tipo MouseEvent). Sempre que um evento do tipo MouseEvent for publicado pelo CDI, esse mtodo ser notificado. Podem existir vrios eventos do tipo MouseEvent, ento como diferenci-los? nessa parte que o qualificador @Events usado. O qualificador @Events pode ser fornecido com um valor de membro para indicar o tipo de evento que ser notificado para o mtodo. O valor de membro @Events pode ser especificado na forma de um ID de componente seguido pelo nome do evento. Por exemplo: para o item de menu Add do evento onClick , o qualificador @Events pode ser fornecido com um valor "add.OnClick" , conforme mostrado na Listagem 7. Qual a sequncia de eventos quando o item de menu "Register New Customer" clicado? Primeiro, um evento do ZK to tipo MouseEvent enviado para o servidor. A estrutura do ZK ir receber esse evento. Em seguida, a extenso de CDI do ZK ir publicar/acionar um evento de CDI com o qualificador @Events apropriado, juntamente com um valor de membro do tipo MouseEvent . O CDI ir notificar os mtodos que esto observando sobre o tipo MouseEvent com o qualificador @Events exato e o valor de membro. Listagem 9. Inclua clientes
<?page title="Add Customer" contentType="text/html;charset=UTF-8"?> <?variable-resolver class="org.zkoss.zkplus.cdi.DelegatingVariableResolver"?> <zk> <window id="addCustomerWin" title="Register New Customer" border="normal" apply="${addCustomer}"> <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 id="saveBtn" label="Save" /> <button id="cancelBtn" label="Cancel" onClick="addCustomerWin.detach()"/> </row> </rows> </grid> </window> </zk>
Depois de ser chamado, o mtodo registerNewCustomer() simplesmente cria um novo componente de janela usando o addCustomer.zul e o torna uma janela de dilogo modal. A Figura 5 mostra um exemplo.
Similar pgina index.zule, o exemplo usa a diretiva <?variable-resolver ?> e o DelegatingVariableResolver para aplicar o bean gerenciado AddCustomer como um controlador para o componente da janela addCustomerWin . A caixa de dilogo Register Customer implementada como uma grade com os valores obrigatrios para o nome do cliente e a data. A implementao AddCustomer similar classe ManageCustomer . O bean CustomerService injetado usando o qualificador @Inject ; os componentes-filho do addCustomerWin tambm so injetados automaticamente usando os qualificadores @Inject e @ComponentId , conforme mostrado na Listagem 10. Listagem 10. Inclua cliente
@Named @SessionScoped public class AddCustomer extends GenericComposer implements Serializable { @Inject @SessionScoped CustomerService custSvc; @Inject @ComponentId("customerName") private transient Textbox customerName; @Inject @ComponentId("date") private transient Datebox date; @Inject @ComponentId("saveBtn") private transient Button saveBtn; }
Como o mtodo registerNewCustomer() na classe ManageCustomer , o exemplo implementa o mtodo observador saveNewCustomerDetails() , conforme descrito na Listagem 11. Listagem 11. Salve os detalhes do cliente novo
public void saveNewCustomerDetails( @Observes @Events("saveBtn.onClick") MouseEvent evt, @New Customer newCustomer) throws Exception { newCustomer.setName(customerName.getValue()); java.util.Date utilDate = date.getValue(); java.sql.Date sqlDate = new java.sql.Date(utilDate.getTime()); newCustomer.setDate(sqlDate); custSvc.addCustomer(newCustomer); Executions.getCurrent().sendRedirect("index.zul"); evt.getTarget().getParent().detach(); }
Sempre que o boto Save (saveBtn) for clicado, o mtodo saveNewCustomerDetails() notificado do MouseEvent onClick correspondente. Esse mtodo tambm possui um parmetro adicional do tipo Customer. Ele anotado com o qualificador @New porque, de acordo com a especificao do CDI, uma nova instncia do bean Customer injetada automaticamente no parmetro todas as vezes que esse mtodo observado. Edite/exclua clientes (com recuperao) O usurio pode acessar a tela Edit Customer selecionando qualquer linha de cliente no painel do Manage Customer, conforme mostrado na Figura 6. Figura 6. Edit Customer
Similar ao mtodo registerNewCustomer() , o exemplo define o mtodo observador editCustomer() que @Observes um SelectEventdo ZK, que enviado sempre que um listitem for selecionado na caixa de listagem. Listagem 12. Edit customer
public void editCustomer( @Observes @Events("customerList.onSelect") SelectEvent evt) throws Exception { Listitem selectedCustomer = customerList.getSelectedItem(); String custId = ((Listcell) (selectedCustomer.getChildren().get(0))).getLabel(); Map<String, String> args = new HashMap<String, String>(); args.put("custId", custId); Window win2 = (Window) Executions.createComponents("editCustomer.zul", null, args); win2.doModal(); win2.setTitle("Enter Customer Data"); win2.setClosable(true); win2.setMaximizable(true); }
A implementao da classe do controlador EditCustomer para o componente de janela editCustomerWin do editCustomer.zul muito similar ao AddCustomer. Para evitar repeties, ela no descrita neste artigo. possvel fazer o download do cdigo desse aplicativo, da fonte da classe EditCustomer e do
arquivo editCustomer.zul.
Resumo
Neste artigo, voc explorou o ZK, uma estrutura Ajax de software livre escrita no cdigo Java e na especificao JSR-299 Contextos e Injeo de Dependncia. A extenso de CDI do ZK possui recursos que permitem o uso do CDI no modelo de programao do ZK. Foi usado um exemplo real simples em execuo no Apache Tomcat com conexo ao banco de dados MySQL. A estrutura do ZK possui um conjunto rico de componentes, uma linguagem de marcao, ferramentas de desenvolvimento poderosas e uma excelente documentao. Ela uma estrutura de Ajax de software livre acionada por eventos. O CDI, conforme definido pela especificao JSR-299 da plataforma Java EE 6, tambm fornece um conjunto de recursos poderosos, como a injeo de dependncia do tipo seguro, um modelo de notificao de eventos e um SPI para desenvolver extenses portteis. A extenso de CDI do ZK integra o modelo de programao do ZK com CDI, permitindo o desenvolvimento contnuo de aplicativos corporativos do Java EE 6.