Ajax e DWR - Apostilas - Informática, Notas de estudo de Informática

Baixe Ajax e DWR - Apostilas - Informática e outras Notas de estudo em PDF para Informática, somente na Docsity!

Ajax e DWR Franklin Samir – FISL 2006 – [email protected]

Agenda

 (^) O que é Ajax?  (^) Por que usar Ajax/JavaScript?  (^) Cases

O Framework DWR

Setup

Dicas

 (^) Depurador  (^) DWR integrado com Spring

O que é Ajax?

Introdução

 (^) Não é apenas uma tecnologia, são várias tecnologias:  (^) XHTML e CSS  (^) Document Object Model (DOM)  (^) XML  (^) XMLHttpRequest (XHR)  (^) JavaScript  (^) Significa Asynchronous JavaScript And Xml » Jesse James Garrett, 2005  (^) AJAX = DHTML + XHR

Motivações – Porque usar Ajax

Crescimento exponencial de aplicações na

web.

Necessidade de passar aplicações

tipicamente desktop para a web.

Atualizar páginas web com novos dados

sem o temível “Refresh”

Browser passa a fornecer uma aplicação e

não mais apenas conteúdo.

O único limite é a criatividade.

Por que não usávamos JavaScript?

Porque era visto apenas com uma

linguagem validação para formulários

HTMLweb.

JavaScript Orientado a Objetos era

pouco conhecido.

Frameworks JavaScript também.

Trabalhoso, difícil de depurar e sem

um editor adequado.

Desvantagens

 (^) Código fonte desprotegido  (^) Programadores desavisados podem expor métodos importantes por engano  (^) Parte da Lógica de Negócios visível  (^) Adiciona complexidade na arquitetura da aplicação.  (^) Regras de controle na camada cliente e uso massivo de Facades.  (^) Não faz parte de nenhuma especificação oficial http://ajaxpatterns.org/wiki/index.php?title =Main_Page  (^) Depuração difícil  (^) Nada funciona se o browser estiver com js desabilitado

Como funciona o XHR

ValidateServlet provê a lógica de validação

Benefícios principais

 (^) Resposta mais rápida.  (^) Resposta rápida poder ser um diferencial importante em relação a um concorrente.  (^) Prende atenção do usuário com poucos cliques do mouse.  (^) Economiza banda do servidor.  (^) Maior iteratividade.  (^) Mini aplicativos sem necessidade de plug-ins.  (^) Substitui os pesados Flashs e Java Applets

Revolução?

Chamado de Web 2.

Composto de tecnologias antigas.

Não há revolução Tecnológica.

Insere maneiras diferentes de realizar tarefas e

interagir com o usuário.

No prática, a revolução é feita por quem

quebram paradigmas e introduzem padrões

Flickr e GMail são dois ótimos exemplos.

“Revolução é quando você consegue ser

diferente - e melhor - que o seu concorrente

em momentos onde todo mundo diz que o

‘limite’ foi atingido; quando os usuários

sentem-se realizados, admirados pela

qualidade do serviço prestado”. .(Rafael Steil)

Google IG -http://google.com/ig

Portal Customizável pelo usuário, não mais

pelos administradores.

Divs flutuantes e Drag’nDrop

Gmail

 (^) Carro chefe do Google em sua caminhada para “dominar o mundo”. Deferencial graças ao Ajax.

Exemplo de XHR puro

 //Código manual com XMLHttpRequest function test(){ // Não-IE if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } // Internet Explorer else if (window.ActiveXObject) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp .open("GET", "/meuServlet",true); xmlhttp .onreadystatechange=function() { if( xmlhttp .readyState == 4 && xmlhttp .status == 200) {//números malucos response = xmlhttp .responseText; processResponse(response); } } xmlhttp .send(null); }

O que é o DWR

 (^) Biblioteca Java e Open Source para construção de web-sites com Ajax  (^) Dividido em dois componentes:  (^) Java Servlet que processa requests e devolve a resposta pro browser.  (^) JavaScript que envia requests e atualiza a página dinâmicamente.  (^) Gera dinamicamente classes JavaScript baseado em classes Java.  (^) Gera dinamicamente uma class AjaxService pra tratar código server side,  (^) Provê a DWRUtil.js com funções para tratar as respostas.  (^) Ex:DWRUtil.addOptions(“ListId”, list);