ZK Brasil

ZK Brasil
http://zkbrasil.blogspot.com.br/
mais
Prximo blog
TERA-FEIRA, 1 DE MARO DE 2011
SEGUIDORES Participar deste site

Google Friend Connect
ZK 5.0.6
A nova verso do ZK j est disponvel para download aqui. Como toda verso nova do ZK h sempre introduo de novas funcionalidades. Entre esses recursos novos esto: 1. Gerao de contedo customizado para SEO(Search Engine Optimization) onde agora possvel gerar um contedo especfico que pode ser usado pelos indexadores de busca e transparentes ao usurios. 2. Efeitos customizados quando mostrar oun esconder um widget atrvez de uma maneira simples sem uso de JavaScript. Voce pode encontrar mais novidades aqui.
Postado por Felipe Costa s 02:07 1 comentrios
Membros (29)
J um membro?
ARQUIVO DO BLOG
Recomende isto no Google
2011 (2) Maro (2) ZK 5.0.6 Construo de interfaces
Marcadores: ZK
Construo de interfaces
Neste artigo vou continuar a falar sobre alguns fundamentais do ZK, como feita a construo dos componentes, de que forma possvel faz-lo e como anexar os componentes a uma pgina e ser abordado tambm o conceito de Desktop e Page. Mas antes gostaria de pautar alguns conceitos importantes: 1. JSON(JavaScript Object Notation) - Um formato leve para intercmbio de dados computacionais. Outro link. 2. JSP(Java Server Pages) - Uma tecnologia similar ao ASP da Microsoft ou PHP utilizada para desenvolvimento de aplicaes web baseada em Java. Outro link. Esse artigo foi baseado nos textos do site do ZK: http://books.zkoss.org/wiki/ZK_Essentials/Introduction_to_ZK /Component_Based_UI http://books.zkoss.org /wiki/ZK_Developer%27s_Reference/UI_Composing/Component-based_UI
2010 (5)
MARCADORES
Fundamentos do ZK ZK (6)
QUEM SOU EU
Rio de Janeiro, Rio de Janeiro, Brazil Graduando em Cincia da Computao da UFRJ JavaBlackBelt Visualizar meu perfil completo
Viso Geral
Cada objeto de interface representado como um componente (Component). Assim, compor componentes trata-se da montagem de componentes. Para alterar a interface basta modificar os estados e a relao dos componentes. Por exemplo, como mostrado abaixo, declaramos um componente Window, permitindo borda(border = "normal") e definindo sua largura em 250 pixels. Foram adicionados 2 componentes Button Window.
1 de 23
26/02/2013 11:13
ZK Brasil
Os componentes so declarados usando ZUML, em um arquivo ZUL, os quais so analisados por um poderoso parser XML do ZK. Os componentes declarados so criados como POJO(Plain Old Java Objects) na JVM no servidor. Suponha que temos uma pgina ZUL que descreve uma rvore de componentes como o seguinte:
Trust Rating
<button label="Hello" /> <button label="Good-bye" />
90%
zkbrasil.blogspot.com.br
A pgina com base ZUL renderiza uma janela com dois botes, como mostrado na imagem abaixo:
A marcao em ZUL equivalente a seguinte declarao POJO em Java:
Window win = new Window(); win.setTitle("ZKBrasil"); win.setBorder("normal"); win.setWidth("250px"); Button helloBtn = new Button(); helloBtn.setLabel("Hello"); helloBtn.setParent(win); Button byeBtn = new Button(); byeBtn.setLabel("Good-bye"); byeBtn.setParent(win);
Os componentes no servidor so depois traduzidos para instrues (em JSON) necessrias para a criao de widget(objetos JavaScript) e enviado ento para o cliente.
Related Searches: Free Java | Sun Java | Function Call | Event Listeners
Class Names
2 de 23
26/02/2013 11:13
ZK Brasil
Como voc pode notar, h duas maneiras de declarar um componente, atravs de XML ou Java puro: 1. XML Os componentes so declaradas em arquivos com a extenso ".zul". Uma pgina ZUL interpretada dinamicamente no servidor, podemos imaginar como um JSP capacitado com recursos Ajax. Por exemplo, aqui ns criamos um novo arquivo ajax.zul, e vamos implementar um pequeno exemplo de que a entrada do usurio no Textbox refletido no label abaixo instantaneamente quando o Textbox perde o foco:
<textbox id="txtbx" onChange="lbl.value = txtbx.value"/> <label id="lbl"/>
Trust Rating
90%
A marcao declarada acima renderiza o simples programa abaixo:
2. Java Os componentes poderiam ser declarados totalmente em Java tambm: package org.zkoss.zkdemo; import org.zkoss.zk.ui.Page; import org.zkoss.zk.ui.GenericRichlet; import org.zkoss.zul.*; public class TestRichlet extends GenericRichlet { //Richlet// public void service(Page page) { final Window win = new Window("ZKBrasil", "normal", false); win.setWidth("250px"); Vlayout vl = new Vlayout(); vl.setParent(win); final Textbox txtbx = new Textbox(); txtbx.setParent(vl); final Label lbl = new Label(); lbl.setParent(vl); txtbx.addEventListener("onChange", new EventListener(){ @Override public void onEvent(Event event) throws Exception { lbl.setValue(txtbx.getValue()); } });
win.setPage(page); } } Related Searches: Free Java | Sun Java | Function Call | Event Listeners
Class Names
3 de 23
26/02/2013 11:13
ZK Brasil
Mais informaes sobre Richlets podem ser encontradas aqui. Alm disso, voce pode mistur-las se quiser.
Estruturao dos Componentes

Como uma estrutura de rvore, um componente tem no mximo um pai, enquanto ele pode ter vrios filhos. Alguns componentes aceitam apenas tipos especficos de componentes como filhos, como por exemplo, o componente Grid aceita apenas os componentes Columns, Rows e Foot. Outros no permitem nenhum tipo de componente, como por exemplo, o componente Textobox. Um componente sem nehum pai chamado de componente raiz (root componente). Mltiplos componentes razes so permitidos em cada pgina, embora no seja comum. Note que, se voce estiver usando ZUML, h uma limitao imposta pelo prprio XML: Exatamente uma raiz no documento permitida. Para especificar vrias razes, necessrio inserir os componentes utilizando tag zk como raiz a qual uma tag especial que no cria componentes. Por exemplo:
Trust Rating
90%
 <div/> 
Componentes Filhos A maioria das colees retornado por um componente, como Component.getChildren(), so de componentes "vivos", ou seja, existe algum componente adicionado na pgina. Significa que voce pode adicionar um componente, remover um componente ou remover todos. Por exemplo, para retirar todas os filhos, voce pode faz-lo atravs da seguinte declarao:
comp.getChildren().clear();
A qual equivalente a:
for (Iterator it = comp.getChildren().iterator(); it.hasNext();) { it.next(); it.remove();
No entanto, isso tambm significa que o seguinte cdigo no ir funcionar, pois a exceo ConcurrentModificationExceptionser lanada.
for (Iterator it = comp.getChildren().iterator(); it.hasNext();) ((Component)it.next()).detach();
Ordenao Um exemplo menos sutil: ordenao de componentes filhos. A seguinte declarao falha porque a lista contm todos os componentes "vivos" e um componente ser retirado quando movermos para outroCall local. | Event Listeners Related Searches: Free Java ns | Sun Java ele | Function
Class Names
4 de 23
26/02/2013 11:13
ZK Brasil
Collections.sort(comp.getChildren());
Mais precisamente, um componente tem no mximo um pai e ele tem apenas um ponto na lista dos filhos. Isso significa que a lista na verdade um conjunto (nenhum elemento duplicado permitido). Por outro lado, Collections.sort() no consegue tratar um conjunto corretamente. Assim, temos que copiar a lista para outra lista ou vetor, e orden-la. Components.sort(List, Comparator) apenas uma maneira simples de reduzir o trabalho.
Desktop, Pgina e Componente

Imagine que os componentes so atores em um jogo, ento a pgina a fase onde os componentes desempenham os seus papis. Uma pgina (Page) um suporte de espao em uma janela do navegador, onde os componentes ZK podem ser anexados e desanexados. A pgina no um componente, no implementa a interface Component, mas uma coleo de componentes e apenas os componentes ligados a uma pgina esto disponveis no cliente. Uma pgina criada automaticamente quando usurio requisita um recurso como uma pgina ZUL. Um desktop (Desktop) uma coleo de pginas. Ela representa a janela do navegador (ou um tab ou um frame do navegador). Voc pode imaginar que um desktop representa uma requisio HTTP independente.
Trust Rating
90%
Um desktop tambm o escopo lgico que uma aplicao pode acessar em uma requisio. Cada vez que uma requisio enviada a partir do cliente, ela associado ao desktop a que ele pertence. O pedido passado para DesktopCtrl.service(AuRequest, boolean) e, em seguida encaminhado para ComponentCtrl.service(AuRequest, boolean). Significa tambm que a aplicao no pode acessar componentes em vrios desktops ao mesmo tempo. Um desktop e uma pgina so criados automaticamente quando o ZK Loader carrega uma pgina ZUML ou chama um richlet(Richlet.service(Page)). A segunda pgina criada quando o componente Include inclui outra pgina com o modo defer. Por exemplo, duas pginas sero criadas se o seguinte for visitado.
 <include src="another.zul" mode="defer"/> 
Repare que se o modo no for especificado (ou seja, o modo instant), o incluide
Class Names
5 de 23
26/02/2013 11:13
ZK Brasil
componentes criados por another.zul como seus componentes filhos prprios.
<include src="another.zul"/> 
equivalente a seguinte declarao (exceto div no um proprietrio do espao, veja abaixo)
<div> <zscript> execution.createComponents("another.zul", self, null); </zscript> </div>
Trust Rating
90%
Anexar um componente a uma pgina

Um componente est disponvel no cliente somente se ele est anexado a uma pgina. Por exemplo, a janela criada a seguir no estar disponvel no cliente.
Window win = new Window(); win.appendChild(new Label("foo"));
Um componente um objeto POJO. Se voc no tem qualquer referncia a ele, ele vai ser reciclado quando a JVM iniciar o Garbage Collection. H duas maneiras de anexar um componente de uma pgina: 1. Acrescent-o como um filho de outro componente que j est conectado a uma pgina (Component.appendChild(Componente), Component.insertBefore(Componente, Componente), ou Component.setParent(Componente)). 2. Chamar Component.setPage(Page) para anex-lo a uma pgina diretamente. tambm a maneira de fazer um componente se tornar um componente raiz.
Uma vez que um componente pode ter no mximo um pai e ser anexado no mximo a uma pgina, desanexado automaticamente a partir do pai ou da pgina anterior quando ele anexado a outro componente ou pgina. Por exemplo, b ser um filho de win2 e win1 no ter nenhum filho no final.
Window win1 = new Window; Button b = new Button(); win1.appendChild(b); win2.appendChild(b); //implica desanexar b de win1
Desanexar um componente a uma pgina

Para desanexar da pgina, voc poderia chamar comp.setParent(null), se no for um componente raiz, ou comp.setPage(null), se for um componente raiz. Component.detach() um atalho para desanexar um componente sem saber se
Class Names
6 de 23
26/02/2013 11:13
ZK Brasil
Invalidar um componente
Quando um componente anexado a uma pgina, o componente e todos os seus descendentes sero renderizados. Por outro lado, quando um estado de um componente anexado alterado, apenas o estado alterado enviado ao cliente para atualizao (para melhor desempenho). Embora seja raro, voc poderia chamar Component.invalidate() para forar o componente e seus descendentes a serem renderizados novamente(O ZK Update Engine ir enfileirar os comandos update e Invalidate, e otimiz-los antes de enviar de volta ao cliente para uma melhor performace). Existem apenas algumas razes para invalidar um componente:
1. Se voc estiver adicionando vrios componentes filhos, pelo menos mais de 20, o desempenho ser melhor se voc invalidar o componente pai. Embora o resultado da resposta Ajax possa ser grande, o navegador mais eficiente em substituir uma rvore DOM do que a adicionar elementos DOM. 2. Se um componente tem um bug que uma atualizao no atualiza a rvore DOM corretamente, voc pode invalidar o seu componente pai, que geralmente resolve o problema (Qualquer tipo de bug pode ser relatado no forum da comunidade. Se confirmado, ele ser resolvido na prxima verso).
Trust Rating
90%
No guarde referncias de componentes adicionados a uma Pgina em campos estticos

Como descrito acima, um desktop um escopo lgico que a aplicao pode acessar ao atender a uma requisio. Em outras palavras, a aplicao no pode desanexar um componente de um desktop para outro desktop. Isso normalmente acontece quando referenciado um componente acidentalmente. Por exemplo, o cdigo a seguir lanar exceo se ele for carregado vrias vezes:

e foo.Foo definido a seguir:
package foo; import org.zkoss.zk.ui.*; import org.zkoss.zul.*; public class Foo implements org.zkoss.zk.ui.util.Composer { private static Window main; //Errado! No guarde em um campo esttico public void doAfterCompose(Component comp) { if (main == null) main = new Window(); comp.appendChild(main); } }
A exceo parecida com essa:
Class Names
7 de 23
26/02/2013 11:13
ZK Brasil
org.zkoss.zk.ui.UiException: The parent and child must be in the same desktop: org.zkoss.zk.ui.AbstractComponent.checkParentChild(AbstractComponent.java:1057) org.zkoss.zk.ui.AbstractComponent.insertBefore(AbstractComponent.java:1074) org.zkoss.zul.Window.insertBefore(Window.java:833) org.zkoss.zk.ui.AbstractComponent.appendChild(AbstractComponent.java:1232) foo.Foo.doAfterCompose(Foo.java:10)
Clonando Componentes
Todos os componentes so clonveis (java.lang.Cloneable). simples replicar componentes invocando Component.clone().
main.appendChild(listbox.clone());
Trust Rating
Note: um clone de profundidade. Ou seja, todos componentes filhos e descendentes so clonados, tambm. O componente retornado por Component.clone() no pertence a nenhuma pgina e ele no tem um pai tambm. Voc deve anex-lo manualmente, se necessrio. O ID ser preservado, se houver. Assim, voc no pode anexar o componente retornado para o mesmo espao de ID, sem modificar o ID, se houver. Da mesma forma, todos os componentes so serializveis (java.io.Serializable). Como a clonagem, todos os filhos e descendentes so serializados. Se voc serializa um componente e, em seguida, deserializ-lo de volta, o resultado o mesmo que chamar Component.clone()(Mas a performace de executar Component.clone() muito maior).
90%
Marcadores: Fundamentos do ZK, ZK
SBADO, 4 DE DEZEMBRO DE 2010
Arquitetura do ZK
Neste artigo, irei abordar sobre a arquitetura do ZK. Mas antes disso, gostaria de falar sobre alguns conceitos importantes: 1. POJO(Plain Old Java Objects) - So objetos Java que no dependem da herana de interfaces ou classes de frameworks externos. Outro link. 2. JavaScript - Linguagem de script interpretada pelo borwser. 3. DOM(Document Object Model) - Conveno criada peloa w3school, independente de plataforma e linguagem, para acessarem e manipularem elementos XML, HTML e XHTML atravs de objetos. 4. AJAX(Asynchronous Javascript And XML) - Significa o uso de tecnologias como JavaScript e XML, providenciadas pelo navegador, para tornar as pginas Web mais interativas com os usurios, atravs de requisies asscronas. Esse artigo foi baseado no texto do site do ZK: http://books.zkoss.org /wiki/ZK_Developer's_Reference/Architecture_Overview
Class Names
8 de 23
26/02/2013 11:13
ZK Brasil
mostra uma viso a nvel de aplicao, a segunda mostra uma viso a nvel de componente. Viso geral da arquitetura:
Trust Rating
Viso do desenvolvedor da aplicao:

O ZK possui uma arquitetura server-centric(centrada no servidor), isso quer dizer que a aplicao ZK roda no servidor. Ela pode acessar os recursos backend, montar a interface com os componentes, ouvir a atividades do usurio, e ento manipular componentes para atualizar a interface. Tudo feito no lado do servidor. A sincronizao dos estados dos componetes entre o browser e o servidor feito automaticamente pelo ZK, e transparente pela aplicao. Quando executada no servidor, a aplicao pode acessar a stack completa da tecnologia Java. Atividades do usurio so, incluindo AJAX e Server Push, abstraidas para objetos de eventos. A interface so compostas por componentes tipos POJO. Essa a abordagem mais produtiva para desenvolver uma moderna aplicao web. A partir do ZK 5, foi introduzido uma mundaa na arquitetura chamada de Server+Client Fusion. Assim a sua aplicao no para no servidor. possvel melhorar a interatividade de sua aplicao atravs da adio opicional de funcionalidades do lado do cliente(client-side), como o tratamento de evento pelo lado do cliente, efeitos visuais customizados, e at mesmo compor interfaces sem a codificao no lado do servidor. A verso 5 permite a fuso perfeita do servidor e cliente.Assim, voce pode ter o melhor dos 2 mundos: produtividade e flexibilidade. Um artigo ser escrito mais tarde abordando o Server+Client Fusion.
90%
Viso do desenvolvedor de componente:

Cada objeto de interface no ZK consiste de um componente e um widget. Um componente um objeto Java sendo executando no servidor o qual representa um objeto de interface o qual pode ser manipulado por uma aplicao Java. Um componente possui todos os comportamentes de objeto de interface exceto a parte visual. Um widget um objeto Javascript sendo executado no cliente. Esse objeto representa o objeto de interface o qual interage com o usurio. Por isso, um widget geralmente poussi uma aparencia visual, e manipula eventos ocorridos no cliente. O relacionamento entre um componete e um widget um um-pra-um. Mas, se um componente no anexado a uma pgina, ele no possuir um widgt correspondente no cliente. Por outro lado, permitada a aplicao instanciar widgets no cliente diretamente sem o componente correspondente. funo do componente sincronizar os estados e distribuir a carga. O ZK Client Engine and update Engine trabalham juntos para propocionar um elegante e robusto canal para simplificar a implementao. Por exemplo, assuma que voce queira implementar um componente que Related Searches: Free Java | Sun Java | Function Call | Event Listeners
Class Names
9 de 23
26/02/2013 11:13
ZK Brasil
permite o usurio clicar sobre um elemento DOM para mostrar alguma informao detalhada de um componente. Existe pelo menos 2 abordagens para essa implementao. Primeiro, ns podemos carregar a informao detalhada para o cliente quando o widget instanciado, e ento mostrar o detalhe via cdigo client-side. Alternativamente, ns podemos preferir no carregar a informao do detalhe logo de comeo, e ento enviar uma requisio de volta ao servidor para preencher o detalhe quando o usurio clicar. Obviamente, a primeira abordagem requer mais largura de banda para a requisio inicial mas possui uma resposta rpida quando o usurio clicar. Porm, isso geralmente transparente para o desenvolvedor da apicao, e a implementao do componente pode ser aperfeioada conforme a fase de desenvolvimento da aplicao.
Fluxo de Execuo do carregamento de uma pgina:

Trust Rating
1. Quando um usurio digita uma URL ou clica num link no browser, uma requisio enviada para o servidor web. Se a URL requisitada corresponde ao padro de URL configurado do ZK(isso pode ser customizado), o ZK loader ento invocado para servir a essa requisio. 2. O ZK loader carrega a pgina especificada e interpreta-a para criar os componentes especificos de acordo com a pgina. 3. Depois de interpretar a pgina toda, o ZK loader renderiza o resultado em uma pgina HTML. A pgina HTML ento enviada de volta ao browser acompanhada do ZK Client Engine. 4. O ZK Client Engine renderiza os widgets em elementos DOM e insere os elementos DOM na rvore DOM do borwser para torn-los visveis ao usurio. 5. Logo, o ZK Client Engine fica no browser para servir as requisies feitas pelo usurio. Se ele vai para outra pgina, o fluxo de execuo comea novamente. Se ele vai enviar uma requisio AJAX de volta, outro fluxo de execuo comea conforme descito no prximo item. O ZK Client Engine escrito em JavaScript. Browsers iro fazer cache do Z Client Engine, logo ele geralmente enviado apenas uma vez no primeiro acesso.
90%
Fluxo de Execuo ao servir uma requisio AJAX:

1. O fluxo de execuo iniciado pelo widget ou pela aplicao; geralmente causado por uma atividade do usurio(ou requisitos da aplicao). Isso geralmente feito por enviar uma evento do lado do cliente(Event) para um widget (Widget.fire(Event, int)). 2. O evento ento propagado ao pai do widget, ao pai do pai, e finalmente ao ZK Client Engine(Um widget pode escolher parar essa propagao atravs de Event.stop(Map)). 3. Se necessrio, o ZK Client Engine envia uma requisio AJAX para o ZK Update engine no servidor( Do ponto de vista do servidor, uma requisio AJAX apenas outra requisio HTTP). 4. Ao receber uma requisio AJAX, o ZK Update Engine invoca o ComponentCtrl.service(AuRequest, boolean) para o tratamento da requisio. 5. A manipulao com o componente. Mas, geralmente feita a atualizao dos estados, se necessrio, e ento notifica a aplicao enviando eventos( Events.postEvent(Event)). 6. Se algum evento for enviado, o ZK Update Engine processar eles um-por-um invocando os events listeners, se houver. 7. O event listener, provido por uma aplicao, pode escolher atualizar os recursos de backend, atualizar os componentes ou postar outros eventos. Related Searches: Free Java | Sun Java | Function Call | Event Listeners
Class Names
10 de 23
26/02/2013 11:13
ZK Brasil
8. Finalmente, o ZK Update Engine recolhe todas as atualizaes de componentes, incluindo mudanas nos estados, attachment e detachment. Otimiz-os, e depois envia de volta uma coleo de comandos de volta ao cliente. 9. O ZK Client Engine avalia cada um desses comandos para atualizar o widget de acordo com cada um. E, os widgets atualizaro a rvore DOM do browser para torn-los disponveis para o usurio.
Quando enviar uma requisio AJAX:

Quando o ZK Client Engine recebe um evento propagado pelo lado do cliente(Event), ele decidir se e quando enviar o mesmo de volta ao servidor para processamento adicional. 1. Se existe um event listener no adivel(deferrable) registrado no servidor, o pedido enviado imediatamente. Um event listener no adivel um event listener (EventListener) que no implementa Deferrable. Por padro, (sem implementar Deferrable) todo o evento enviado imediatamente ao servidor quando ele acionado no cliente. 2. Se existe um event listener adivel registrado no servidor, a requisio ser colocado numa fila no cliente e ser enviada quando outro evento for acionado e um event listener no adivel for registrado por ele. Para tornar um listener adivel, voce deve implementar Deferrable e retornar true para isDeferrable(). 3. Se o widget declarar o evento o evento como importante(ComponentCtrl.CE_IMPORTANT), o evento ser adicionado na fila para ser enviado depois tambm. 4. Se no for nenhum dos casos acima ou o widget no tem nenhum componente corresponde no servidor, o evento cancelado. Os eventos adiveis so usados para melhorar o desempenho, minimizando o trfego entre o cliente e o servidor. comumente usado por events listener que mantm estados da aplicao, ao invs de gerar respostas visuais. Bem galera essa uma breve viso da arquitetura do ZK.. No prximo artigo irei falar de mais alguns conceitos importantes.
Trust Rating
90%
+1 Recomende isto no Google
Marcadores: Fundamentos do ZK, ZK
SEXTA-FEIRA, 5 DE NOVEMBRO DE 2010
Primeiros Passos
Com o nosso ambiente configurado no artigo anterior, vamos adicionar algums funcionalidades a nossa tela e ver como o ZK Studio funciona. O Zk Studio permite auto-complete dentro de arquivos .zul e possui alguns recursos interessantes como drag-and-drop de componentes para os arquivos ZUL atravs do ZUL Palette, visualizao em rvore dos componentes dentro do Outline, manipular as propriedades de um componente selecionado dentro do Properties, renderizao do arquivo zul dentro do ZUL Visual Editor e uma vizualizao das verses instaladas e exemplos de cdigos atravs do Sample Codes. Sabendo um pouco melhor como o ZK Studio estruturado, vamos comear a modificar o nosso exemplo. Com o Eclipse aberto, vamos mudar a perspectiva para a do ZK. No canto superior direto, clique no boto "Open Perspective" e escolha a do ZK. Related Searches: Free Java | Sun Java | Function Call | Event Listeners
Class Names
11 de 23
26/02/2013 11:13
ZK Brasil
Feito isso sua tela deve estar parecida com essa:
Feito isso vamos abrir o arquivo index.zul e editar alguns coisas:
<?page title="Hello World"?> <window title="Minha Primeira Janela" border="normal" width="200px"> <label value="Hello World!" /> </window>
Trust Rating
90%
Troquei o atributo title da pagina e da window, e o value de label. Rode o servidor, e a tela gerada deve ficar assim:
Em ZK, voce escreve em ZUML(ZK User Interface Markup Language), linguagem essa baseada em XML. Cada atributo alterado, altera cada propriedade de um componente. Algumas propriedades do componente Window: Propriedade title border height width closable sizeable Funo Define o ttulo da janela Define o estilo de borda da janela Define a altura da janela Define o comprimento da janela Define se ou no a janela pode ser fechada Define se ou no a janela pode ser redimensionada Valor qualquer texto normal ou none (padro) numero de pixels (Ex: 100px) numero de pixels (Ex: 100px) true ou false true ou false
Vamos alterar a nossa janela pra ficar com um comprimento de 100px, ser redimensionvel e fechada. Com as mudanas feitas, basta voce recarregar a pagina. Deve ficar assim:
Class Names
12 de 23
26/02/2013 11:13
ZK Brasil
Tente redimensionsar e/ou fechar a janela. Agora vamos adicionar uma boto e um evento, ficando assim:
<?page title="Hello World"?> <window title="Minha Primeira Janela" border="normal" closable="true" sizable="true" width="200px"> <label value="Hello World!" /> <button label="sayHello" onClick='alert("Hello World!")' /> </window>
Trust Rating
90%
Ficando assim:
O evento onClick acionado quando o boto clicado, gerando, nesse caso, um alert com o valor "Hello World!". A funo alert() um funo global que gera um alerta, similar a funo alert() presente no Javascript. O ZK possui alguns objetos e funes globais, mas isso ser abordado em outro artigo. Mas essa no a nica maneira de descrever como o evento vai ser tratado. Eis uma outra maneira:
<?page title="Hello World"?> <window title="Minha Primeira Janela" border="normal" closable="true" sizable="true" width="200px"> <label value="Hello World!" /> <button label="sayHello" onClick="sayHello()" /> <zscript> void sayHello() { Messagebox.show("Hello World!"); } </zscript> </window>
Dessa vez eu escrevo o cdigo Java dentro de um zscript. Esse tipo de tag significa que voce pode escrever scripts, mas em vez de serem processador no cliente sero processados no servidor. O zscript aceita mais de um tipo linguagens, basta voce dizer qual no atribute language, sendo Java o padro. Podemos observar que dessa vez eu utilizei uma outra maneira de criar um alert atravs do objeto Messagebox, similar ao JOptionPane, podendo passar vrios parametros nas funes caso eu queira uma mensagem tipo alerta ou error. Agora, se quisessemos, por exemplo trocar uma tributo o nome do nosso label? Podemos fazer isso acessando o componente pelo id. Para cada componente gerado um id automaticamentetem, mas eu posso definiar uma, e nesse caso Related Searches: Free Java | Sun Java | Function Call | Event Listeners
Class Names
13 de 23
26/02/2013 11:13
ZK Brasil
<?page title="Hello World"?> <window title="Minha Primeira Janela" border="normal" closable="true" sizable="true" width="200px"> <label id="mylabel" value="Hello World!" /> <button label="sayHello" onClick="change()" /> <zscript> void change() { mylabel.value = "ZKBrasl"; } </zscript> </window>
Trust Rating
90%
Depois de o boto ter sido clicado:
O label foi alterado, sem muita dificuldade, com uma chamada de evento paracida com Java mas que por trs roda AJAX. :) Veja que estamos alterando o atributo value do componente, mas poderiamos ter feito isso atravs do mtodo setValue. Isso pode ser feito porque cada componente ZK formado por uma parte visual e uma parte Java. Isso ser abordado melhor mais em outro artigo. O ZK tem suporte a EL (Express Language) atravs da sintaxe ${exp}. Vamos agora, definiar que o valor de um boto ser o mesmo de um outro boto:
<?page title="Hello World"?> <window title="Minha Primeira Janela" border="normal" closable="true" sizable="true" width="200px"> <button id="button1" label value="sayHello" /> <button id="button2" label="${button1.label}" /> </window>
EL Ser abordado melhor em outro artigo. At agora escrevemos os nosso cdigos de tratamento de evento dentro de um arquivo .zul, mas e se quisesemos escrever em outro lugar? Claro que podemos! O ZK tras um bom suporte ao padro MVC, nesse caso voce deve implementar uma classe java para tratar os eventos. A classe deve estender GenericComposer.
<?page title="Hello World"?> Related Searches: Free Java | Sun Java | Function Call | Event Listeners
Class Names
14 de 23
26/02/2013 11:13
ZK Brasil
apply="view.MyComposer"> <button label="say Hello" forward="onSayHello" /> </window>
view.MyComposer public class MyComposer extends GenericComposer { public void onSayHello(Event evt) { evt.getTarget().appendChild(new Label("Hello")); } }
Trust Rating
90%
Depois de o boto ter sido clicado:
Vimos um pouco mais como o ZK funciona, e como o ZK trata eventos de uma maneira simples e rpida. Vimos alguns componentes simples, mas exitem vrios outros. Voce pode consultar uma demo dos componentes aqui: http://www.zkoss.org /zkdemo/ No prximo artigo veremos um pouco mais de como o ZK funciona por dentro.
ATUALIZAO - 04/12/2010 Uma outra maneira mais simples na hora de tratar eventos e que eu costumo usar fazer com que a minha classe onde eu trato os meus eventos estenda de GenericForwardComposer. Assim o nosso exemplo fica assim:
view.MyComposer public class MyComposer extends GenericForwardComposer { Window win; public void onClick$btn(Event evt) { win.appendChild(new Label("Hello")); } }
Class Names
15 de 23
26/02/2013 11:13
ZK Brasil
Dessa forma retiramos o atributo forward de button, colocamos um id nele e em window tambm. Na classe, declaramos uma varivel com nome similar ao id de window e do tipo Window. Dessa forma forma o ZK vai saber que aquela vrial est se ligando a Window na parte de viso cujo id bate com o nome da varivel e tipo tambm. O nome do mtodo agora segue uma conveno de nomes para tratamentos de eventos: "event_name$component_id". Dessa forma quando o evento for disparada e redirecionado para essa classe, ele vai comparar o tipo de evento e depois o id do componente o qual disparou o evento. Dessa forma o cdigo fica mais limpo e mis fcil de manter. Em geral os exemplos postados no blog ir utilizar uma abordagem mais parecida com essa.
Trust Rating
Marcadores: ZK
90%
TERA-FEIRA, 2 DE NOVEMBRO DE 2010
Configurando o ZK
Neste artigo irei abordar a configurao do Eclipse e o ZK Studio, plugin pro Eclipse, para trabalhar com o ZK. Ferramentas necessrias: 1. JDK 6 2. Eclipse Helios Java EE 3. Tomcat 7 4. Algum browser, recomendo o Firefox. 5. ZK 5.0.5, verso da data deste artigo. 6. ZK Studio Aps a instalao do JDK, baixe o Eclipse, e descompacte no local que preferir. No meu caso foi escolhido o caminho C:\Java\eclipse, com worspace em C:\Java\workspace. Feito isso, baixe o tomcat 7 e descompacte para C:\Java\tomcat. Abra o Eclipse. No menu navegue para Window -> Show View -> Other... , ou no canto inferior esquerdo clique no boto "Show View as fast view", e procure por Servers. Com a janela aberta, clique com o boto direito dentro da janela e v para New -> Server. Nessa janela escolha o Tomcat v7.0 Server e clique next.
Class Names
16 de 23
26/02/2013 11:13
ZK Brasil
Trust Rating
90%
Na Janela seguinte, procure pelo diretrio do Tomcat 7 e clique em finish.
Feito isso vamos baixar o ZK Studio. navegue at Help -> Install New Software.... Nessa Janela voce clicar em Add..., para adicionar uma nova url de busca de plugins para o Eclipse. Em Name, coloque o nome de ZK Studio e Location o url para download descrita no site. Feito isso, o Eclipse ir buscar o plugin. Escolha o plugin ZK Studio e instale.
Class Names
17 de 23
26/02/2013 11:13
ZK Brasil
Trust Rating
Antes de criar um projeto v em Window -> Preferences, escolha o item ZK e depois ZK Packages. Voce notar que a verso utilizada a 3.6.3. Baixe a ltima verso do ZK, na janela anterior escolha clique em Add File/ Directory..., depois em File Import. Escolha o local onde est o arquivo .zip da verso do ZK e depois em finish. Marque a opo da verso mais nova. O ZK Studio no atualiza a verso do ZK sozinho, ento a cada nova verso que voce deseja instalar voce deve realizar esse procedimento, permitido que voce tenha projetos ZK com verso diferentes basta voce configurar cada projeto separadamente. A cada novo projeto, o Eclipse ir gerar com a verso escolhida aqui
90%
Clique em apply e depois finish. Voce pode notar que no Project Explorer existe as 2 verses das libs:
Class Names
18 de 23
26/02/2013 11:13
ZK Brasil
Trust Rating
90%
Feito isso, vamos criar um novo projeto ZK. V em File -> New -> Other... e escolha ZK Project. O nome do nosso projeto vai ser HelloWorld:
Note que ele mostra a verso do ZK utilizada e o servidor a ser utilizado, podendo ser configurado antes de cada projeto. Lembre-se de selecionar a verso 2.5 do Dynamic web module, e clique em Finish. Feito isso vamos analisar melhor o projeto gerado:
Class Names
19 de 23
26/02/2013 11:13
ZK Brasil
Trust Rating
90%
Em Java Resources ficam as classes Java, arquivos XML, arquivos texto, etc. Dentro de WebContent fica os arquivos que iro sero responveis pela vista como os arquivos ZUL. No projeto gerado temos 2 : index e o timeout. Quando um url enviada para o servidor, o servidor ir processar e devolver o arquivo index por padro, mas isso pode ser configurado para enviar outro arquivo. Como estamos trabalhando com uma aplicao AJAX, existe um tempo de resposta para a pagina. Quando tenta-se acessar um componente e gerado um evento mas o tempo de resposta acabou, o servidor processa e devolve a pagina timeout com uma resposta, tambm podemos configurar a mensagem de timeout e o tempo de resposta. Nessa pasta podemos ter outras pastas, contendo outros arquivos .zul, .html, .css, .js, imagens, entre outras coisas. Dentro da pasta WEB-INF temos todas as libs usadas no projeto e os arquivos web.xml e zk.xml, usados para configurar nossa aplicao. Se precisarmos adicionar alguma lib extra, basta adicionar na pasta lib. Agora vamos iniciar a aplicao. COm o boto direito na projeto, seleciona Run As -> Run on Server. Ir aparecer uma tela pra voce escolher o servidor o qual voce deseja rodar a apicao. No nosso caso o tomcat j est selecionado, ento basta clicar em Finish. Voce pode marcar uma opo que permite que ele sempre rode dentro do servidor selecionado, se preferir. Feito isso temos, nossa primeira aplicao funcioando:
ATUALIZAO - 03/12/2010 Na imagem de criao de projeto ZK aparece um warning dizendo que precisa do JDK instalado. Para resolver isso basta ir em Window->Preferences e depois navegue para Java -> Installed JREs. Escolha a verso da jre instalada e clique em edit. Em JRE home basta colocar o caminho do JDK, no meu caso est em C:\Java\jdk1.6.0_20. Se quiser renomear o nome de jre para jdk fique a vontade. Related Searches: Free Java | Sun Java | Function Call | Event Listeners
Class Names
20 de 23
26/02/2013 11:13
ZK Brasil
Feito isso no vai mais aparacer aquele warning.
Postado por Felipe Costa s 14:20
0 comentrios
+1 Recomende isto no Google
Marcadores: ZK
SEGUNDA-FEIRA, 1 DE NOVEMBRO DE 2010
O que o ZK?
Inicio a minha srie de postagens falando mais sobre o que o ZK: O ZK um framework orientado a eventos para desenvolvimento web baseado em AJAX de cdigo aberto. Permitindo o desenvolvimento de interfaces ricas para aplicaes web com pouca programao e um custo de desenvolvimento reduzido, tal como as antigas aplicaes desktop. O ZK utiliza uma linguagem de meta-definio baseada em XML (ZUML) para definir a interface do usurio traduzindo para cdigo HTML quando a pgina solicitada pelo cliente. O ZK foi o primeiro projeto AJAX + mobile no SourceForge.net, acumulou 1.500.000 downloads, e foi referenciado por mais de 4.000 web sites desde o lanamento da primeira verso em 2005.
Trust Rating
90%
O ZK possui quase tudo feito de bandeja: Diversos componentes prontos: Tabbox, grid, listbox, tree, menu, combobox, bandbox, datebox, chart, hbox, vbox, window, slider, paging, audio, image, timer, include, iframe, etc Drag-and-drop suportado por todos componentes Menu de Contexto e Tooltips customizaveis suportado por todos componentes Ordenao Customizada de listbox, grid etc Auto-preenchimento para combobox Load on demand sem escrever nenhuma linha de cdigo Live data ou Load on demand para listbox Todos componentes so clonveis e serializveis Validao e formatao para componentes de entrada de dados, com suporte completo a uso de expresses regulares e $#,##0 100% API Java para os componentes Google Maps, FCKeditor, DOJO e Timeline Componente Tree com paginao Server push, chamado de reverse-ajax, permite o servidor enviar dados para clientes ativos, ou seja, facilmente capaz de se desenvolver sistema de CHAT. Em adio, componentes TreeModel, Timebox e Flash Modelo server-side e baseado em eventos Mais de 20 eventos suportados; onChange, onChanging, onScroll, onSelect, on Show, onZIndex, etc Todos os eventos so processados no servidor Todos os eventos esto sincronizados. No possui problema de Racing Condition Scripting usando expresses EL. Inclui, mas no limitado, a Java, Javascript, Ruby, Groovy e Python Mudanas noa interface do usurio sem necessidade de restarting da aplicao Anotaes que permite uma pgina acessar a base de dados sem escrever cdigo Java
Class Names
21 de 23
26/02/2013 11:13
ZK Brasil
Facilidade em encapsular componentes puramente componentes do ZK usando 100% a API Java Dialogos Modais verdadeiramente server-side Internacionalizao MVEL plug-in
clientes
como
Facilidade de utilizao Simplicidade um dos valores de base do ZK. Outra facilidades que se encontra nesse framework, a disponibilidade com que a sua equipa de desenvolvedores est disposta a ajudar. A criao de novos/customizados componentes bastante simples e a documentao muito boa e bem detalhada.
Independncia de plataforma O ZK Mobile possui vrios componentes j de bandeja: listbox, listitem, textbox, image, label, command, datebox, decimalbox, intbox, frame O ZK suporta os seguintes browsers: Internet Explorer 6/7+, Firefox 1+, Safari 2+, Mozilla 1+, Opera 9+ and Camino 1+. Escreve uma vez e rode em todos os browsers sem problemas de compatibilidade. Roda em qualquer web Server que suporta Servlet 2.3+ e JVM 1.4+
Trust Rating
90%
Licena A licena padro do ZK LGPL. No entanto, existem licenas pagas os componentes mais avanados que segue o mesmo padro do famoso MySQL.
Integrao com outros frameoworks Possui integrao com outros frameworks, como Spring, Hibernate, JSP, JSF. ExtJs, Google Maps, FCKeditor, DOJO e Timeline.
Enfim, muitas coisas ficaram por analisar. Com muitos componentes j prontos, AJAX imbutido, integrao com frameworks populares, suporte da comunidade e open-source, torna o ZK uma exelente escolha para o desenvolvimento de aplicaes web.
Postado por Felipe Costa s 23:49
3 comentrios
Marcadores: ZK
SBADO, 18 DE SETEMBRO DE 2010
Primeiro Post...
Ol a todos! Assim estreio a minha participao no meu primeiro Blog! rs Esse blog tem como objeto falar sobre o framework RIA ZK, coisas relacionadas a Java e desenvolvimento de software. Espero abordar tanto o basico quanto o avanado na parte de desenvolvimento web com o ZK. That's all folkes!
Class Names
22 de 23
26/02/2013 11:13
ZK Brasil
Incio
Assinar: Postagens (Atom)
Modelo Picture Window. Tecnologia do Blogger.
Trust Rating
90%
Related Searches: Free Java | Sun Java | Function Call | Event Listeners | Java Programmers
Class Names
23 de 23
26/02/2013 11:13

ZK Brasil

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ZK Brasil

Uploaded by

Copyright:

Available Formats

ZK Brasil

TERA-FEIRA, 1 DE MARO DE 2011

SEGUIDORES Participar deste site

Recomende isto no Google

2011 (2) Maro (2) ZK 5.0.6 Construo de interfaces

<button label="Hello" /> <button label="Good-bye" />

A marcao em ZUL equivalente a seguinte declarao POJO em Java:

<textbox id="txtbx" onChange="lbl.value = txtbx.value"/> <label id="lbl"/>

A marcao declarada acima renderiza o simples programa abaixo:

Estruturao dos Componentes

for (Iterator it = comp.getChildren().iterator(); it.hasNext();) { it.next(); it.remove();

for (Iterator it = comp.getChildren().iterator(); it.hasNext();) ((Component)it.next()).detach();

Desktop, Pgina e Componente

componentes criados por another.zul como seus componentes filhos prprios.

<include src="another.zul"/>

equivalente a seguinte declarao (exceto div no um proprietrio do espao, veja abaixo)

<div> <zscript> execution.createComponents("another.zul", self, null); </zscript> </div>

Anexar um componente a uma pgina

Window win = new Window(); win.appendChild(new Label("foo"));

Desanexar um componente a uma pgina

No guarde referncias de componentes adicionados a uma Pgina em campos estticos

Instancia e executa foo.Foo -->

e foo.Foo definido a seguir:

A exceo parecida com essa:

Recomende isto no Google

Marcadores: Fundamentos do ZK, ZK

SBADO, 4 DE DEZEMBRO DE 2010

Viso do desenvolvedor da aplicao:

Viso do desenvolvedor de componente:

Fluxo de Execuo do carregamento de uma pgina:

Fluxo de Execuo ao servir uma requisio AJAX:

Quando enviar uma requisio AJAX:

+1 Recomende isto no Google

Marcadores: Fundamentos do ZK, ZK

SEXTA-FEIRA, 5 DE NOVEMBRO DE 2010

Feito isso sua tela deve estar parecida com essa:

Feito isso vamos abrir o arquivo index.zul e editar alguns coisas:

Depois de o boto ter sido clicado:

apply="view.MyComposer"> <button label="say Hello" forward="onSayHello" /> </window>

Depois de o boto ter sido clicado:

Recomende isto no Google

TERA-FEIRA, 2 DE NOVEMBRO DE 2010

Na Janela seguinte, procure pelo diretrio do Tomcat 7 e clique em finish.

Feito isso no vai mais aparacer aquele warning.

Postado por Felipe Costa s 14:20

+1 Recomende isto no Google

SEGUNDA-FEIRA, 1 DE NOVEMBRO DE 2010

Postado por Felipe Costa s 23:49

Recomende isto no Google

SBADO, 18 DE SETEMBRO DE 2010

Recomende isto no Google

Modelo Picture Window. Tecnologia do Blogger.

You might also like