Ajax e DWR

Franklin Samir – FISL 2006 – franklin@portaljava.com

Agenda
 O que é Ajax?  Por que usar Ajax/JavaScript?  Cases

O Framework DWR Setup Dicas
 Depurador  DWR integrado com Spring

21/04/06

Presentation

page 2

O que NÃO é Ajax?
• Não é time de futebol, nem detergente...

21/04/06

Presentation

page 3

O que é Ajax?

?
21/04/06 Presentation page 4

Introdução  Não é apenas uma tecnologia. 2005  AJAX = DHTML + XHR 21/04/06 Presentation page 5 . são várias tecnologias:      XHTML e CSS Document Object Model (DOM) XML XMLHttpRequest (XHR) JavaScript  Significa Asynchronous JavaScript And Xml » Jesse James Garrett.

 Também pode ser usado comoutras linguagens de programação como PHP. etc 21/04/06 Presentation page 6 . como veremos a seguir.Ajax é Java?  Não!  Ajax é JavaScript rodando em browsers modernos. Ruby.  Encaixa-se perfeitamente com Java.

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. Necessidade de passar aplicações tipicamente desktop para a web. 21/04/06 Presentation page 7 . O único limite é a criatividade.Motivações – Porque usar Ajax Crescimento exponencial de aplicações na web.

Trabalhoso. difícil de depurar e sem um editor adequado. Frameworks JavaScript também. JavaScript Orientado a Objetos era pouco conhecido.Por que não usávamos JavaScript? Porque era visto apenas com uma linguagem validação para formulários HTMLweb. 21/04/06 Presentation page 8 .

Javascript muito além de validação de formulários..Por que passar a usar JavaScript? Forte apelo visual para aplicações web.. Disponibilidade de editores. Migrar aplicações desktop para a web. bibliotecas e depuradores de alta qualidade. Adicionar diferencial aos web-sites. 21/04/06 Presentation page 9 .

php?title =Main_Page  Depuração difícil  Nada funciona se o browser estiver com js desabilitado 21/04/06 Presentation page 10 .  Regras de controle na camada cliente e uso massivo de Facades.org/wiki/index.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.  Não faz parte de nenhuma especificação oficial http://ajaxpatterns.

Como funciona o XHR ValidateServlet provê a lógica de validação 21/04/06 Presentation page 11 .

Modelo MVC vs Ajax(XHR) 21/04/06 Presentation page 12 .

 Prende atenção do usuário com poucos cliques do mouse.Benefícios principais  Resposta mais rápida.  Resposta rápida poder ser um diferencial importante em relação a um concorrente.  Maior iteratividade.  Economiza banda do servidor.  Mini aplicativos sem necessidade de plug-ins.  Substitui os pesados Flashs e Java Applets 21/04/06 Presentation page 13 .

 “Revolução é quando você consegue ser diferente .0  Composto de tecnologias antigas. .  Insere maneiras diferentes de realizar tarefas e interagir com o usuário.  Não há revolução Tecnológica. quando os usuários sentem-se realizados.que o seu concorrente em momentos onde todo mundo diz que o ‘limite’ foi atingido.  No prática. admirados pela qualidade do serviço prestado”.(Rafael Steil) 21/04/06 Presentation page 14 . a revolução é feita por quem quebram paradigmas e introduzem padrões  Flickr e GMail são dois ótimos exemplos.e melhor .Revolução?  Chamado de Web 2.

Todos aqueles recursos encontrados nos sites do Google são feitos com Ajax. O mais engraçado é que o Google tem incomodado a Microsoft. com uma tecnologia criada pela própria Microsoft. 21/04/06 Presentation page 15 .Cases Sem dúvida o Google é a empresa que mais tem se beneficiado com Ajax.

não mais pelos administradores.Google IG -http://google.com/ig  Portal Customizável pelo usuário.  Divs flutuantes e Drag’nDrop 21/04/06 Presentation page 16 .

Deferencial graças ao Ajax.Gmail  Carro chefe do Google em sua caminhada para “dominar o mundo”. 21/04/06 Presentation page 17 .

Google Maps  Mapas totalmente interativos  Um dos web-sites mais impressionante que a web já conheceu. 21/04/06 Presentation page 18 .

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

js com funções para tratar as respostas. list). 21/04/06 Presentation page 20 .  Gera dinamicamente classes JavaScript baseado em classes Java.  Provê a DWRUtil.addOptions(“ListId”.  Ex:DWRUtil.  Gera dinamicamente uma class AjaxService pra tratar código server side.  JavaScript que envia requests e atualiza a página dinâmicamente.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.

Arquitetura 21/04/06 Presentation page 21 .

.  Orientado a Objetos  Suporte a segurança  É Cross-browser  Boa documentação  Depurador embarcado  Diversos componentes para GUI  É o framework mais usado segundo o Google 21/04/06 Presentation page 22 .. Servlets e outros.Características principais do DWR  Fácil de configurar e usar  Developer friendly  Integregra-se ferramentas do mercado. Hibernate. como Spring.

DWR setup  Adicionar o dwr.xml para especificar:  Diz quais classes podem ser manipuladas (marshall)  Diz quais métodos podem ser acessados  Usar  http://localhost:8080/<app>/dwr 21/04/06 Presentation page 23 .jar ao classpath  Adicionar DWRServlet ao web.xml  Criar o dwr.

dwr.DWRServlet</servletclass> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>dwr-invoker</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping> 21/04/06 Presentation page 24 .xml <servlet> <description>Direct Web Remoter Servlet</description> <display-name>DWR Servlet</display-name> <servlet-name>dwr-invoker</servlet-name> <servlet-class>uk.ltd.getahead.Web.

xml no /WEB-INF <dwr> <allow> <create creator="new" javascript="SayHello"> <param name="class" value="com.SayHello" /> <include method="sayHello" /> </create> </allow> </dwr> 21/04/06 Presentation page 25 .portaljava.dwr.

} }  Código Js gerado automaticamente: function SayHello() { } SayHello. callback).Classe Java e código Js gerado  Classe Java Simples (POJO) public class SayHello { public String sayHello(String name){ return "Hello " + name. callback){ DWREngine. 'sayHello'. 'SayHello'._execute('/Ajax/dwr'. p0. } 21/04/06 Presentation page 26 .sayHello = function(p0.

sayHello(mous eOver.Página HTML <script src="/dwr/interface/SayHello.js"/> <div id="main"> <p> Chamada simples ao DWR: <BR> <div id="hello_name" onmouseover="SayHello." /> AJAX Tutorial </div> </p> </div> 21/04/06 Presentation page 27 .innerHTML).js"/> <script src="/dwr/engine. $('hello_name').

DWR com Spring  Creator para “pegar” objetos no contexto do Spring <dwr> <allow> <create creator="spring" javascript="Validator"> <param name="beanName" value="emailValidator"/> <include method="validateName" /> <include method="validateUserId" /> <include method="validateEmail" /> </create> </allow> </dwr> 21/04/06 Presentation page 28 .

visto antes. 21/04/06 Presentation page 29 .Converters  É possível criar os próprios Converters  Exemplo é o converter do Spring.

MyConverter"/> </init> 21/04/06 Presentation page 30 . InboundContext inctx) throws ConversionException. InboundVariable data. OutboundVariable convertOutbound(Object data.portaljava.Converters  Implementar: public interface MyConverter { void setConverterManager(ConverterManager config).dwr. Object convertInbound(Class paramType. }  Declarar: <init> <converter id=“mine" class=“com. OutboundContext outctx) throws ConversionException.

remove()  Use creators para adicionar regras de nível de acesso(JAAS)  Use Interceptor para aumentar a segurança (Spring Security interceptors.Segurança  Todos os métodos da classe são expostos por padrão  Use include/exclude para cada método  Use regras de segurança sobre as URLs do DWR. ACEGI)  Desabilite o debug mode em ambientes de produção!!! 21/04/06 Presentation page 31 . Negar acesso de usuário ao /dwr/User.  Ex.

removeAllRows(element). 21/04/06 Presentation page 32 .toDescriptiveString(val)  Método toString()        DWRUtil.useLoadingMessage() DWRUtil.setValue(element.js"></script>  Utilidades oferecidas:  $(‘id’)  DWRUtil.addRows(element. data. …) DWRUtil.DWRUtils.removeAllOptions(element) DWRUtil.addOptions(list) DWRUtil.js  Incluir o arquivo nas páginas: <script type="text/javascript" src="/dwr/util. val) DWRUtil.getValue(element) DWRUtil.

MVC  È possível manter Model/View/Controller?  Sim! Mas não é uma tarefa fácil.  Não há restrições quanto ao objeto que terá seus métodos invocados (usando JSON ou DWR)  Expor um View Object – ex: um POJO (Pattern ViewHelper)  POJOs como controller não combinam com Struts/WW/Spring.Ajax vs. Sick! 21/04/06 Presentation page 33 .

Vejamos alguns plug-ins para Eclipse. com syntax highlighting. Não espere encontrar ótimos editores. code complete e debugger integrado.Editores Você vai programar bastante em JS Use um bom editor Uma rápida busca no google retorna dezenas de editores. 21/04/06 Presentation page 34 .

js Eclipse 21/04/06 Presentation page 35 .

WebTools js Editor 21/04/06 Presentation page 36 .

hacksrus.com/~ginda/venkman 21/04/06 Presentation page 37 .Depuradores  http://www.

com 21/04/06 Presentation page 38 .Dúvidas? ? Franklin Samir franklin@portaljava.

php  Ajaxian – http://www.http://tacos.http://www.pdf 21/04/06 Presentation page 39 .http://www.com/Ajax  Tacos Tapestry .org/rico/yahooSearch.trimpath. Dez 2005 (Rafael Steil)  Effective Java .http://trimpath.us .us/  Rico: http://openrico.org/wiki/index.html  Script.aculo.aculo.com/project/wiki/TrimQuery  AMASS Storage http://codinginparadise.com  Revista Mundo Java.us .aculo.aculo.com/franklin/artigos/ajax_e_dwr.page  Slides na web: http://portaljava.us  Mir.com/project/wiki/  Ajax Patterns http://ajaxpatterns.html  JS templates .sourceforge.ajaxian.org/projects/storage/README.Referências  SQL no cliente .net/index.robsanheim.http://script.http://mir.

RSJUG  R.org.rsjug.  Arquivos:  http://www.S.org/listas.org  2 grandes eventos anuais  Cerca de 320 participantes  Listas de discussão:  Inscrição: java-l-subscribe@rsjug.do 21/04/06 Presentation page 40 .rsjug. Java Users Group  http://www.org  Lista de colaboradores:  colaboradores-subscribe@rsjug.

Portal Java.com  O Maior portal de Java do Brasil  http://www.portaljava. Interessados devem mandar e-mail para info@portaljava.000 usuários cadastrados  Procuramos por novos voluntários.com 21/04/06 Presentation page 41 .com.br  Mais de 22.