SlideShare uma empresa Scribd logo
Autor: Thiago Baesso  Procaci ZK - Utilizando Ajax sem Javascript
[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],Propósito do ZK: Tornar o desenvolvimento de interfaces web simples.  Em outras palavras, facilitar a confecção de interfaces ricas.
Evolução das páginas web  Páginas HTML Estáticas Páginas HTML Dinâmicas (DHTML) Páginas com Flash, Applets Páginas com uso de Ajax
[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object]
Possibilidade de configurar atributos (como na decimalbox).  O input gerado assumirá valores nos moldes do atributo format Exemplo ZUML
[object Object],[object Object],[object Object],[object Object],[object Object],Ressaltando que o que ZK loader e o ZK AU engine rodam do lado do servidor e são compostos por Servlets Java. O ZK cliente engine é composto por cógido Javascript (roda no lado do cliente).
 
1 : Sempre um cliente faz a requisição de uma página através da URL, o ZK loader interpreta a requisição, gera a página HTML correspondente (baseado no código ZUML referente à URL requisitada) e cria objetos no servidor que permitirão a manipulação da interface da página.
2: Em seguida, o ZK loader envia a página HTML gerada para o cliente juntamente com o ZK client engine. O ZK client engine irá residir no “lado do cliente” e será responsável por monitorar os eventos disparados pelo browser.
3: Se qualquer evento for disparado no cliente, o ZK client engine irá enviá-lo (através de uma requisição Ajax) para o ZK AU engine localizado no servidor.
4: O ZK AU engine recebe a requisição Ajax, atualiza os objetos que manipulam os componentes de interface e retorna uma resposta para o cliente, relatando as modificações que página deverá sofrer.
5: Assim que o ZK client engine recebe a resposta, ele atualiza a representação visual da página
[object Object],[object Object],[object Object],[object Object],Vantagem:  O ZK prevê vários problemas de compatibilidade entre browsers.
[object Object],[object Object],[object Object],[object Object],[object Object]
Novo projeto no eclipse
Escolhendo o tipo de aplicação (Dynamic Web Project)
Nome do projeto: zkdemo Servidor: Apache Tomcat
[object Object],[object Object],[object Object],Já podemos começar a desenvolver o nosso exemplo inicial e rever os conceitos apresentados de forma prática.
Pacotes e classes do exemplo hello.zul    arquivo com o código ZUML da página. HelloWindow.java    classe java que irá manipular a página hello.zul Obs.: A extensão .zul é a utilizada para os arquivos que contêm código ZUML.
HelloWindow.java hello.zul
Atributo use aponta para HelloWindow HelloWindow.java hello.zul
Atributo use aponta para HelloWindow Ação do botão HelloWindow.java hello.zul
Atributo use aponta para HelloWindow Recupera o objeto que manipula a textbox através do id Ação do botão Manipula valor da textbox HelloWindow.java hello.zul
Aplicação Funcionando Só acessar    http://localhost:8080/zkdemo/hello.zul
Entendendo o Funcionando
[object Object],[object Object],Plug-in do eclipse que facilita o desenvolvimento de aplicações que utilizam o ZK
Configurando o ZK Studio Vá no menu help e clique em Software Updates
Clique em Add Site Configurando o ZK Studio
Configurando o ZK Studio Adicione em location: http://studioupdate.zkoss.org/studio/update
Configurando o ZK Studio Selecione a url do ZK Studio e clique em install
[object Object],[object Object],[object Object],[object Object]

Mais conteúdo relacionado

Mais procurados

Introduction to Eclipse IDE
Introduction to Eclipse IDEIntroduction to Eclipse IDE
Introduction to Eclipse IDE
Muhammad Hafiz Hasan
 
Hybrid Mobile App
Hybrid Mobile AppHybrid Mobile App
Hybrid Mobile App
Palani Kumar
 
Ppt of soap ui
Ppt of soap uiPpt of soap ui
Ppt of soap ui
pkslide28
 
Selenium ppt
Selenium pptSelenium ppt
Selenium ppt
Aneesh Rangarajan
 
Automation Testing with Test Complete
Automation Testing with Test CompleteAutomation Testing with Test Complete
Automation Testing with Test Complete
Vartika Saxena
 
Appium.pptx
Appium.pptxAppium.pptx
Appium.pptx
SameerAlam82
 
Android performance
Android performanceAndroid performance
Android performance
Godfrey Nolan
 
Vitualisation
VitualisationVitualisation
Vitualisation
Priya_Srivastava
 
Selenium Interview Questions and Answers For Freshers And Experienced | Edureka
Selenium Interview Questions and Answers For Freshers And Experienced | EdurekaSelenium Interview Questions and Answers For Freshers And Experienced | Edureka
Selenium Interview Questions and Answers For Freshers And Experienced | Edureka
Edureka!
 
Eclipse introduction IDE PRESENTATION
Eclipse introduction IDE PRESENTATIONEclipse introduction IDE PRESENTATION
Eclipse introduction IDE PRESENTATION
AYESHA JAVED
 
Xpath in Selenium | Selenium Xpath Tutorial | Selenium Xpath Examples | Selen...
Xpath in Selenium | Selenium Xpath Tutorial | Selenium Xpath Examples | Selen...Xpath in Selenium | Selenium Xpath Tutorial | Selenium Xpath Examples | Selen...
Xpath in Selenium | Selenium Xpath Tutorial | Selenium Xpath Examples | Selen...
Edureka!
 
AngularJS
AngularJSAngularJS
PPT on Food Runner App.pptx
PPT on Food Runner App.pptxPPT on Food Runner App.pptx
PPT on Food Runner App.pptx
AshutoshSingh502936
 
Test automation principles, terminologies and implementations
Test automation principles, terminologies and implementationsTest automation principles, terminologies and implementations
Test automation principles, terminologies and implementations
Steven Li
 
PRESENTATION_CHAABA_AYOUB_ING5_ISI.pptx
PRESENTATION_CHAABA_AYOUB_ING5_ISI.pptxPRESENTATION_CHAABA_AYOUB_ING5_ISI.pptx
PRESENTATION_CHAABA_AYOUB_ING5_ISI.pptx
MoulayAyoubChaaba
 
Appium an introduction
Appium   an introductionAppium   an introduction
Appium an introduction
Vivek Shringi
 
Need for automation testing
Need for automation testingNeed for automation testing
Need for automation testing
99tests
 
Android & iOS Automation Using Appium
Android & iOS Automation Using AppiumAndroid & iOS Automation Using Appium
Android & iOS Automation Using Appium
Mindfire Solutions
 
Ajax presentation
Ajax presentationAjax presentation
Ajax presentation
Bharat_Kumawat
 
Chapter 1. java programming language overview
Chapter 1. java programming language overviewChapter 1. java programming language overview
Chapter 1. java programming language overview
Jong Soon Bok
 

Mais procurados (20)

Introduction to Eclipse IDE
Introduction to Eclipse IDEIntroduction to Eclipse IDE
Introduction to Eclipse IDE
 
Hybrid Mobile App
Hybrid Mobile AppHybrid Mobile App
Hybrid Mobile App
 
Ppt of soap ui
Ppt of soap uiPpt of soap ui
Ppt of soap ui
 
Selenium ppt
Selenium pptSelenium ppt
Selenium ppt
 
Automation Testing with Test Complete
Automation Testing with Test CompleteAutomation Testing with Test Complete
Automation Testing with Test Complete
 
Appium.pptx
Appium.pptxAppium.pptx
Appium.pptx
 
Android performance
Android performanceAndroid performance
Android performance
 
Vitualisation
VitualisationVitualisation
Vitualisation
 
Selenium Interview Questions and Answers For Freshers And Experienced | Edureka
Selenium Interview Questions and Answers For Freshers And Experienced | EdurekaSelenium Interview Questions and Answers For Freshers And Experienced | Edureka
Selenium Interview Questions and Answers For Freshers And Experienced | Edureka
 
Eclipse introduction IDE PRESENTATION
Eclipse introduction IDE PRESENTATIONEclipse introduction IDE PRESENTATION
Eclipse introduction IDE PRESENTATION
 
Xpath in Selenium | Selenium Xpath Tutorial | Selenium Xpath Examples | Selen...
Xpath in Selenium | Selenium Xpath Tutorial | Selenium Xpath Examples | Selen...Xpath in Selenium | Selenium Xpath Tutorial | Selenium Xpath Examples | Selen...
Xpath in Selenium | Selenium Xpath Tutorial | Selenium Xpath Examples | Selen...
 
AngularJS
AngularJSAngularJS
AngularJS
 
PPT on Food Runner App.pptx
PPT on Food Runner App.pptxPPT on Food Runner App.pptx
PPT on Food Runner App.pptx
 
Test automation principles, terminologies and implementations
Test automation principles, terminologies and implementationsTest automation principles, terminologies and implementations
Test automation principles, terminologies and implementations
 
PRESENTATION_CHAABA_AYOUB_ING5_ISI.pptx
PRESENTATION_CHAABA_AYOUB_ING5_ISI.pptxPRESENTATION_CHAABA_AYOUB_ING5_ISI.pptx
PRESENTATION_CHAABA_AYOUB_ING5_ISI.pptx
 
Appium an introduction
Appium   an introductionAppium   an introduction
Appium an introduction
 
Need for automation testing
Need for automation testingNeed for automation testing
Need for automation testing
 
Android & iOS Automation Using Appium
Android & iOS Automation Using AppiumAndroid & iOS Automation Using Appium
Android & iOS Automation Using Appium
 
Ajax presentation
Ajax presentationAjax presentation
Ajax presentation
 
Chapter 1. java programming language overview
Chapter 1. java programming language overviewChapter 1. java programming language overview
Chapter 1. java programming language overview
 

Destaque

É Hora de criar sua própria engine de jogos?
É Hora de criar sua própria engine de jogos?É Hora de criar sua própria engine de jogos?
É Hora de criar sua própria engine de jogos?
José Farias
 
Desenvolvimento de aplicações para o Google App Engine
Desenvolvimento de aplicações para o Google App EngineDesenvolvimento de aplicações para o Google App Engine
Desenvolvimento de aplicações para o Google App Engine
Campus Party Brasil
 
Tk03 Google App Engine Fr
Tk03 Google App Engine FrTk03 Google App Engine Fr
Tk03 Google App Engine Fr
Valtech
 
Oficina Python e Google App Engine
Oficina Python e Google App EngineOficina Python e Google App Engine
Oficina Python e Google App Engine
Rodrigo Amaral
 
Palestra "Teste de Invasão com o Nmap Scripting Engine"" FISL 13
Palestra "Teste de Invasão com o Nmap Scripting Engine"" FISL 13 Palestra "Teste de Invasão com o Nmap Scripting Engine"" FISL 13
Palestra "Teste de Invasão com o Nmap Scripting Engine"" FISL 13
Clavis Segurança da Informação
 
DNUG2015 Frühjahrskonferenz: Brücken bauen, Grenzen überwinden: Domino im Dia...
DNUG2015 Frühjahrskonferenz: Brücken bauen, Grenzen überwinden: Domino im Dia...DNUG2015 Frühjahrskonferenz: Brücken bauen, Grenzen überwinden: Domino im Dia...
DNUG2015 Frühjahrskonferenz: Brücken bauen, Grenzen überwinden: Domino im Dia...
JRibbeck
 
Google App Engine - INTRO
Google App Engine - INTROGoogle App Engine - INTRO
Google App Engine - INTRO
Beyram Ben Elghali
 
Nuxeo WebEngine : Etude de cas
Nuxeo WebEngine : Etude de casNuxeo WebEngine : Etude de cas
Nuxeo WebEngine : Etude de cas
Damien Metzler
 
An introduction to Google's App Engine
An introduction to Google's App EngineAn introduction to Google's App Engine
An introduction to Google's App Engine
Stefan Sperber
 
b2performance berth
b2performance berthb2performance berth
b2performance berth
ITB Berlin
 
Google Cloud Platform. Google App Engine
Google Cloud Platform. Google App Engine Google Cloud Platform. Google App Engine
Google Cloud Platform. Google App Engine
Kwaye Kant
 
Search Engine Friendly Design (SEFD) - SMX München 2014
Search Engine Friendly Design (SEFD) - SMX München 2014Search Engine Friendly Design (SEFD) - SMX München 2014
Search Engine Friendly Design (SEFD) - SMX München 2014
Daniel Herndler
 
Google App Engine. Zwei Jahre im Produktiveinsatz
Google App Engine. Zwei Jahre im ProduktiveinsatzGoogle App Engine. Zwei Jahre im Produktiveinsatz
Google App Engine. Zwei Jahre im Produktiveinsatz
Per Fragemann
 
Google App Engine For Java
Google App Engine For JavaGoogle App Engine For Java
Google App Engine For Java
tcouery
 
FACT-Finder Webinar Recommendation Engine 2.0
FACT-Finder Webinar Recommendation Engine 2.0FACT-Finder Webinar Recommendation Engine 2.0
FACT-Finder Webinar Recommendation Engine 2.0
Omikron Data Quality GmbH
 
WordPress State of the Word 2012
WordPress State of the Word 2012WordPress State of the Word 2012
WordPress State of the Word 2012
photomatt
 
Google App Engine
Google App EngineGoogle App Engine
Google App Engine
Publicis Sapient Engineering
 
Introduction à Google App Engine - WAQ 2011
Introduction à Google App Engine - WAQ 2011Introduction à Google App Engine - WAQ 2011
Introduction à Google App Engine - WAQ 2011jimmybourassa
 
Cours Search Marketing - 1 Introduction - IAE Lille
Cours Search Marketing -  1 Introduction - IAE LilleCours Search Marketing -  1 Introduction - IAE Lille
Cours Search Marketing - 1 Introduction - IAE Lille
Renaud JOLY
 
Cloud & Google app engine Presentation by Ngiambus Marcus
 Cloud & Google app engine Presentation  by Ngiambus Marcus Cloud & Google app engine Presentation  by Ngiambus Marcus
Cloud & Google app engine Presentation by Ngiambus Marcus
Marc NGIAMBA
 

Destaque (20)

É Hora de criar sua própria engine de jogos?
É Hora de criar sua própria engine de jogos?É Hora de criar sua própria engine de jogos?
É Hora de criar sua própria engine de jogos?
 
Desenvolvimento de aplicações para o Google App Engine
Desenvolvimento de aplicações para o Google App EngineDesenvolvimento de aplicações para o Google App Engine
Desenvolvimento de aplicações para o Google App Engine
 
Tk03 Google App Engine Fr
Tk03 Google App Engine FrTk03 Google App Engine Fr
Tk03 Google App Engine Fr
 
Oficina Python e Google App Engine
Oficina Python e Google App EngineOficina Python e Google App Engine
Oficina Python e Google App Engine
 
Palestra "Teste de Invasão com o Nmap Scripting Engine"" FISL 13
Palestra "Teste de Invasão com o Nmap Scripting Engine"" FISL 13 Palestra "Teste de Invasão com o Nmap Scripting Engine"" FISL 13
Palestra "Teste de Invasão com o Nmap Scripting Engine"" FISL 13
 
DNUG2015 Frühjahrskonferenz: Brücken bauen, Grenzen überwinden: Domino im Dia...
DNUG2015 Frühjahrskonferenz: Brücken bauen, Grenzen überwinden: Domino im Dia...DNUG2015 Frühjahrskonferenz: Brücken bauen, Grenzen überwinden: Domino im Dia...
DNUG2015 Frühjahrskonferenz: Brücken bauen, Grenzen überwinden: Domino im Dia...
 
Google App Engine - INTRO
Google App Engine - INTROGoogle App Engine - INTRO
Google App Engine - INTRO
 
Nuxeo WebEngine : Etude de cas
Nuxeo WebEngine : Etude de casNuxeo WebEngine : Etude de cas
Nuxeo WebEngine : Etude de cas
 
An introduction to Google's App Engine
An introduction to Google's App EngineAn introduction to Google's App Engine
An introduction to Google's App Engine
 
b2performance berth
b2performance berthb2performance berth
b2performance berth
 
Google Cloud Platform. Google App Engine
Google Cloud Platform. Google App Engine Google Cloud Platform. Google App Engine
Google Cloud Platform. Google App Engine
 
Search Engine Friendly Design (SEFD) - SMX München 2014
Search Engine Friendly Design (SEFD) - SMX München 2014Search Engine Friendly Design (SEFD) - SMX München 2014
Search Engine Friendly Design (SEFD) - SMX München 2014
 
Google App Engine. Zwei Jahre im Produktiveinsatz
Google App Engine. Zwei Jahre im ProduktiveinsatzGoogle App Engine. Zwei Jahre im Produktiveinsatz
Google App Engine. Zwei Jahre im Produktiveinsatz
 
Google App Engine For Java
Google App Engine For JavaGoogle App Engine For Java
Google App Engine For Java
 
FACT-Finder Webinar Recommendation Engine 2.0
FACT-Finder Webinar Recommendation Engine 2.0FACT-Finder Webinar Recommendation Engine 2.0
FACT-Finder Webinar Recommendation Engine 2.0
 
WordPress State of the Word 2012
WordPress State of the Word 2012WordPress State of the Word 2012
WordPress State of the Word 2012
 
Google App Engine
Google App EngineGoogle App Engine
Google App Engine
 
Introduction à Google App Engine - WAQ 2011
Introduction à Google App Engine - WAQ 2011Introduction à Google App Engine - WAQ 2011
Introduction à Google App Engine - WAQ 2011
 
Cours Search Marketing - 1 Introduction - IAE Lille
Cours Search Marketing -  1 Introduction - IAE LilleCours Search Marketing -  1 Introduction - IAE Lille
Cours Search Marketing - 1 Introduction - IAE Lille
 
Cloud & Google app engine Presentation by Ngiambus Marcus
 Cloud & Google app engine Presentation  by Ngiambus Marcus Cloud & Google app engine Presentation  by Ngiambus Marcus
Cloud & Google app engine Presentation by Ngiambus Marcus
 

Semelhante a Zk Framework

Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)
Julian Cesar
 
Jsf
JsfJsf
Laszlo, Framework focado em MVC
Laszlo, Framework focado em MVCLaszlo, Framework focado em MVC
Laszlo, Framework focado em MVC
raquelcarsi
 
Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009
Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009
Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009
Ramon Durães
 
ODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQuery
Marketing Digital ODIG
 
Aplicações Realtime em Android | Fisl 15 | GuMobileRS
Aplicações Realtime em Android | Fisl 15 | GuMobileRSAplicações Realtime em Android | Fisl 15 | GuMobileRS
Aplicações Realtime em Android | Fisl 15 | GuMobileRS
Jackson F. de A. Mafra
 
Programação para Web II: Estrutura de um projeto Java Web
Programação para Web II: Estrutura de um projeto Java WebProgramação para Web II: Estrutura de um projeto Java Web
Programação para Web II: Estrutura de um projeto Java Web
Alex Camargo
 
JavaServer Faces
JavaServer FacesJavaServer Faces
JavaServer Faces
armeniocardoso
 
Tw Dwr 2007 Ap01
Tw Dwr 2007 Ap01Tw Dwr 2007 Ap01
Tw Dwr 2007 Ap01
Milfont Consulting
 
Web Services
Web ServicesWeb Services
Web Services
Igor Gonalves
 
Gwt
GwtGwt
AngularJS Components - Semana da Informática 2016
AngularJS Components - Semana da Informática 2016AngularJS Components - Semana da Informática 2016
AngularJS Components - Semana da Informática 2016
Diego Melo
 
Grails
GrailsGrails
Grails
Alex Guido
 
Desenvolvimento Ágil com Grails.
Desenvolvimento Ágil com Grails.Desenvolvimento Ágil com Grails.
Desenvolvimento Ágil com Grails.
Alex Guido
 
Introdução ao Adobe Flex
Introdução ao Adobe FlexIntrodução ao Adobe Flex
Introdução ao Adobe Flex
Rafael Nunes
 
1409243945064
14092439450641409243945064
1409243945064
Fábio Junior
 
Apache Wicket - Desenvolvimento WEB orientado a componentes
Apache Wicket - Desenvolvimento WEB orientado a componentesApache Wicket - Desenvolvimento WEB orientado a componentes
Apache Wicket - Desenvolvimento WEB orientado a componentes
CI&T
 
AngularJS com ASP.NET MVC 4 - Binding, Eventos, Ajax, Validações e Rotas
AngularJS com ASP.NET MVC 4 - Binding, Eventos, Ajax, Validações e RotasAngularJS com ASP.NET MVC 4 - Binding, Eventos, Ajax, Validações e Rotas
AngularJS com ASP.NET MVC 4 - Binding, Eventos, Ajax, Validações e Rotas
Ildyone Martins
 
Ajaxificando
AjaxificandoAjaxificando
Ajaxificando
Milfont Consulting
 
Jsf – Java Sever Faces
Jsf – Java Sever FacesJsf – Java Sever Faces
Jsf – Java Sever Faces
bielgott
 

Semelhante a Zk Framework (20)

Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)
 
Jsf
JsfJsf
Jsf
 
Laszlo, Framework focado em MVC
Laszlo, Framework focado em MVCLaszlo, Framework focado em MVC
Laszlo, Framework focado em MVC
 
Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009
Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009
Introdução ao ASP.NET 3.5 - Campus Party Brasil 2009
 
ODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQuery
 
Aplicações Realtime em Android | Fisl 15 | GuMobileRS
Aplicações Realtime em Android | Fisl 15 | GuMobileRSAplicações Realtime em Android | Fisl 15 | GuMobileRS
Aplicações Realtime em Android | Fisl 15 | GuMobileRS
 
Programação para Web II: Estrutura de um projeto Java Web
Programação para Web II: Estrutura de um projeto Java WebProgramação para Web II: Estrutura de um projeto Java Web
Programação para Web II: Estrutura de um projeto Java Web
 
JavaServer Faces
JavaServer FacesJavaServer Faces
JavaServer Faces
 
Tw Dwr 2007 Ap01
Tw Dwr 2007 Ap01Tw Dwr 2007 Ap01
Tw Dwr 2007 Ap01
 
Web Services
Web ServicesWeb Services
Web Services
 
Gwt
GwtGwt
Gwt
 
AngularJS Components - Semana da Informática 2016
AngularJS Components - Semana da Informática 2016AngularJS Components - Semana da Informática 2016
AngularJS Components - Semana da Informática 2016
 
Grails
GrailsGrails
Grails
 
Desenvolvimento Ágil com Grails.
Desenvolvimento Ágil com Grails.Desenvolvimento Ágil com Grails.
Desenvolvimento Ágil com Grails.
 
Introdução ao Adobe Flex
Introdução ao Adobe FlexIntrodução ao Adobe Flex
Introdução ao Adobe Flex
 
1409243945064
14092439450641409243945064
1409243945064
 
Apache Wicket - Desenvolvimento WEB orientado a componentes
Apache Wicket - Desenvolvimento WEB orientado a componentesApache Wicket - Desenvolvimento WEB orientado a componentes
Apache Wicket - Desenvolvimento WEB orientado a componentes
 
AngularJS com ASP.NET MVC 4 - Binding, Eventos, Ajax, Validações e Rotas
AngularJS com ASP.NET MVC 4 - Binding, Eventos, Ajax, Validações e RotasAngularJS com ASP.NET MVC 4 - Binding, Eventos, Ajax, Validações e Rotas
AngularJS com ASP.NET MVC 4 - Binding, Eventos, Ajax, Validações e Rotas
 
Ajaxificando
AjaxificandoAjaxificando
Ajaxificando
 
Jsf – Java Sever Faces
Jsf – Java Sever FacesJsf – Java Sever Faces
Jsf – Java Sever Faces
 

Último

TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
Momento da Informática
 
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdfDESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
Momento da Informática
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
WELITONNOGUEIRA3
 
Certificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdfCertificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdf
joaovmp3
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
Momento da Informática
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
TomasSousa7
 

Último (6)

TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
 
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdfDESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
 
Certificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdfCertificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdf
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
 

Zk Framework

  • 1. Autor: Thiago Baesso Procaci ZK - Utilizando Ajax sem Javascript
  • 2.
  • 3.
  • 4. Evolução das páginas web Páginas HTML Estáticas Páginas HTML Dinâmicas (DHTML) Páginas com Flash, Applets Páginas com uso de Ajax
  • 5.
  • 6.
  • 7.
  • 8. Possibilidade de configurar atributos (como na decimalbox). O input gerado assumirá valores nos moldes do atributo format Exemplo ZUML
  • 9.
  • 10.  
  • 11. 1 : Sempre um cliente faz a requisição de uma página através da URL, o ZK loader interpreta a requisição, gera a página HTML correspondente (baseado no código ZUML referente à URL requisitada) e cria objetos no servidor que permitirão a manipulação da interface da página.
  • 12. 2: Em seguida, o ZK loader envia a página HTML gerada para o cliente juntamente com o ZK client engine. O ZK client engine irá residir no “lado do cliente” e será responsável por monitorar os eventos disparados pelo browser.
  • 13. 3: Se qualquer evento for disparado no cliente, o ZK client engine irá enviá-lo (através de uma requisição Ajax) para o ZK AU engine localizado no servidor.
  • 14. 4: O ZK AU engine recebe a requisição Ajax, atualiza os objetos que manipulam os componentes de interface e retorna uma resposta para o cliente, relatando as modificações que página deverá sofrer.
  • 15. 5: Assim que o ZK client engine recebe a resposta, ele atualiza a representação visual da página
  • 16.
  • 17.
  • 18. Novo projeto no eclipse
  • 19. Escolhendo o tipo de aplicação (Dynamic Web Project)
  • 20. Nome do projeto: zkdemo Servidor: Apache Tomcat
  • 21.
  • 22. Pacotes e classes do exemplo hello.zul  arquivo com o código ZUML da página. HelloWindow.java  classe java que irá manipular a página hello.zul Obs.: A extensão .zul é a utilizada para os arquivos que contêm código ZUML.
  • 24. Atributo use aponta para HelloWindow HelloWindow.java hello.zul
  • 25. Atributo use aponta para HelloWindow Ação do botão HelloWindow.java hello.zul
  • 26. Atributo use aponta para HelloWindow Recupera o objeto que manipula a textbox através do id Ação do botão Manipula valor da textbox HelloWindow.java hello.zul
  • 27. Aplicação Funcionando Só acessar  http://localhost:8080/zkdemo/hello.zul
  • 29.
  • 30. Configurando o ZK Studio Vá no menu help e clique em Software Updates
  • 31. Clique em Add Site Configurando o ZK Studio
  • 32. Configurando o ZK Studio Adicione em location: http://studioupdate.zkoss.org/studio/update
  • 33. Configurando o ZK Studio Selecione a url do ZK Studio e clique em install
  • 34.