Ajax e DWR

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 NO Ajax?
No time de futebol, nem detergente...
21/04/06
Presentation
page 3
O que Ajax?
?
21/04/06 Presentation page 4
Introduo
No apenas uma tecnologia, so vrias tecnologias:
XHTML e CSS Document Object Model (DOM) XML XMLHttpRequest (XHR) JavaScript
Significa Asynchronous JavaScript And Xml

Jesse James Garrett, 2005
AJAX = DHTML + XHR
21/04/06
Presentation
page 5
Ajax Java?
No! Ajax JavaScript rodando em browsers modernos. Encaixa-se perfeitamente com Java, como veremos a seguir. Tambm pode ser usado comoutras linguagens de programao como PHP, Ruby, etc
21/04/06
Presentation
page 6
Motivaes Porque usar Ajax

Crescimento exponencial de aplicaes na web. Necessidade de passar aplicaes tipicamente desktop para a web. Atualizar pginas web com novos dados sem o temvel Refresh Browser passa a fornecer uma aplicao e no mais apenas contedo. O nico limite a criatividade.
21/04/06
Presentation
page 7
Por que no usvamos JavaScript? Porque era visto apenas com uma linguagem validao para formulrios HTMLweb. JavaScript Orientado a Objetos era pouco conhecido. Frameworks JavaScript tambm. Trabalhoso, difcil de depurar e sem um editor adequado.
21/04/06
Presentation
page 8
Por que passar a usar JavaScript?
Forte apelo visual para aplicaes web. Migrar aplicaes desktop para a web. Javascript muito alm de validao de formulrios... Disponibilidade de editores, bibliotecas e depuradores de alta qualidade. Adicionar diferencial aos web-sites.
Desvantagens
Cdigo fonte desprotegido Programadores desavisados podem expor mtodos importantes por engano Parte da Lgica de Negcios visvel Adiciona complexidade na arquitetura da aplicao. Regras de controle na camada cliente e uso massivo de Facades. No faz parte de nenhuma especificao oficial http://ajaxpatterns.org/wiki/index.php?title =Main_Page Depurao difcil Nada funciona se o browser estiver com js desabilitado
21/04/06
Presentation
page 10
Como funciona o XHR

ValidateServlet prov a lgica de validao
21/04/06
Presentation
page 11
Modelo MVC vs Ajax(XHR)
21/04/06
Presentation
page 12
Benefcios principais
Resposta mais rpida. Resposta rpida poder ser um diferencial importante em relao a um concorrente. Prende ateno do usurio 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
21/04/06
Presentation
page 13
Revoluo?
Chamado de Web 2.0 Composto de tecnologias antigas. No h revoluo Tecnolgica. Insere maneiras diferentes de realizar tarefas e interagir com o usurio. No prtica, a revoluo feita por quem quebram paradigmas e introduzem padres Flickr e GMail so dois timos exemplos. Revoluo quando voc consegue ser diferente - e melhor - que o seu concorrente em momentos onde todo mundo diz que o limite foi atingido; quando os usurios sentem-se realizados, admirados pela qualidade do servio prestado. .(Rafael Steil)
21/04/06
Presentation
page 14
Cases Sem dvida o Google a empresa que mais tem se beneficiado com Ajax. Todos aqueles recursos encontrados nos sites do Google so feitos com Ajax. O mais engraado que o Google tem incomodado a Microsoft, com uma tecnologia criada pela prpria Microsoft.
Google IG -http://google.com/ig
Portal Customizvel pelo usurio, no mais pelos administradores. Divs flutuantes e DragnDrop
21/04/06
Presentation
page 16
Gmail
Carro chefe do Google em sua caminhada para dominar o mundo. Deferencial graas ao Ajax.
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
Exemplo de XHR puro

//Cdigo manual com XMLHttpRequest
function test(){ // No-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) {//nmeros malucos response = xmlhttp.responseText; processResponse(response); } } xmlhttp.send(null); }
O que o DWR
Biblioteca Java e Open Source para construo 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 pgina dinmicamente.
Gera dinamicamente classes JavaScript baseado em classes Java. Gera dinamicamente uma class AjaxService pra tratar cdigo server side, Prov a DWRUtil.js com funes para tratar as respostas.
Ex:DWRUtil.addOptions(ListId, list);
Arquitetura
21/04/06
Presentation
page 21
Caractersticas principais do DWR

Fcil de configurar e usar Developer friendly Integregra-se ferramentas do mercado, como Spring, Hibernate, Servlets e outros... Orientado a Objetos Suporte a segurana Cross-browser Boa documentao Depurador embarcado Diversos componentes para GUI o framework mais usado segundo o Google
21/04/06 Presentation
page 22
DWR setup
Adicionar o dwr.jar ao classpath Adicionar DWRServlet ao web.xml Criar o dwr.xml para especificar:
Diz quais classes podem ser manipuladas (marshall) Diz quais mtodos podem ser acessados
Usar
http://localhost:8080/<app>/dwr
21/04/06
Presentation
page 23
Web.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.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>
dwr.xml no /WEB-INF
<dwr> <allow> <create creator="new" javascript="SayHello"> <param name="class" value="com.portaljava.SayHello" /> <include method="sayHello" /> </create> </allow> </dwr>
21/04/06
Presentation
page 25
Classe Java e cdigo Js gerado

Classe Java Simples (POJO) public class SayHello { public String sayHello(String name){ return "Hello " + name; } } Cdigo Js gerado automaticamente: function SayHello() { } SayHello.sayHello = function(p0, callback){ DWREngine._execute('/Ajax/dwr', 'SayHello', 'sayHello', p0, callback); }
21/04/06
Presentation
page 26
Pgina HTML
<script src="/dwr/interface/SayHello.js"/> <script src="/dwr/engine.js"/> <div id="main"> <p> Chamada simples ao DWR: <BR> <div id="hello_name" onmouseover="SayHello.sayHello(mous eOver, $('hello_name').innerHTML);" /> AJAX Tutorial </div> </p> </div>
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
Converters
possvel criar os prprios Converters Exemplo o converter do Spring, visto antes.
21/04/06
Presentation
page 29
Converters
Implementar: public interface MyConverter { void setConverterManager(ConverterManager config); Object convertInbound(Class paramType, InboundVariable data, InboundContext inctx) throws ConversionException; OutboundVariable convertOutbound(Object data, OutboundContext outctx) throws ConversionException; } Declarar: <init> <converter id=mine" class=com.portaljava.dwr. MyConverter"/> </init>
21/04/06
Presentation
page 30
Segurana
Todos os mtodos da classe so expostos por padro Use include/exclude para cada mtodo Use regras de segurana sobre as URLs do DWR. Ex. Negar acesso de usurio ao /dwr/User.remove() Use creators para adicionar regras de nvel de acesso(JAAS) Use Interceptor para aumentar a segurana (Spring Security interceptors, ACEGI) Desabilite o debug mode em ambientes de produo!!!
21/04/06
Presentation
page 31
DWRUtils.js
Incluir o arquivo nas pginas: <script type="text/javascript" src="/dwr/util.js"></script> Utilidades oferecidas:
$(id) DWRUtil.toDescriptiveString(val)
Mtodo toString()
DWRUtil.useLoadingMessage() DWRUtil.setValue(element, val) DWRUtil.getValue(element) DWRUtil.addOptions(list) DWRUtil.removeAllOptions(element) DWRUtil.addRows(element, data, ) DWRUtil.removeAllRows(element);
21/04/06
Presentation
page 32
Ajax vs. MVC

possvel manter Model/View/Controller? Sim! Mas no uma tarefa fcil. No h restries quanto ao objeto que ter seus mtodos invocados (usando JSON ou DWR) Expor um View Object ex: um POJO (Pattern ViewHelper) POJOs como controller no combinam com Struts/WW/Spring. Sick!
21/04/06
Presentation
page 33
Editores
Voc vai programar bastante em JS Use um bom editor Uma rpida busca no google retorna dezenas de editores, com syntax highlighting, code complete e debugger integrado. No espere encontrar timos editores. Vejamos alguns plug-ins para Eclipse.
21/04/06
Presentation
page 34
js Eclipse
21/04/06
Presentation
page 35
WebTools js Editor
21/04/06
Presentation
page 36
Depuradores
http://www.hacksrus.com/~ginda/venkman
21/04/06
Presentation
page 37
Dvidas?
?
Franklin Samir
franklin@portaljava.com
21/04/06
Presentation
page 38
Referncias
SQL no cliente - http://trimpath.com/project/wiki/TrimQuery AMASS Storage http://codinginparadise.org/projects/storage/README.html JS templates - http://www.trimpath.com/project/wiki/ Ajax Patterns http://ajaxpatterns.org/wiki/index.php Ajaxian http://www.ajaxian.com Revista Mundo Java, Dez 2005 (Rafael Steil) Effective Java - http://www.robsanheim.com/Ajax Tacos Tapestry - http://tacos.sourceforge.net/index.html Script.aculo.us - http://script.aculo.us Mir.aculo.us - http://mir.aculo.us/ Rico: http://openrico.org/rico/yahooSearch.page Slides na web: http://portaljava.com/franklin/artigos/ajax_e_dwr.pdf
21/04/06
Presentation
page 39
RSJUG
R.S. Java Users Group http://www.rsjug.org 2 grandes eventos anuais Cerca de 320 participantes Listas de discusso:
Inscrio: java-l-subscribe@rsjug.org
Lista de colaboradores:
colaboradores-subscribe@rsjug.org.
Arquivos:
http://www.rsjug.org/listas.do
21/04/06
Presentation
page 40
Portal Java.com
O Maior portal de Java do Brasil http://www.portaljava.com.br Mais de 22.000 usurios cadastrados Procuramos por novos voluntrios. Interessados devem mandar e-mail para info@portaljava.com
21/04/06
Presentation
page 41

Ajax e DWR

Uploaded by

Document Information

Original Title

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

Ajax e DWR

Uploaded by

Copyright:

Available Formats

Ajax e DWR

Franklin Samir FISL 2006 franklin@portaljava.com

O Framework DWR Setup Dicas

Significa Asynchronous JavaScript And Xml

AJAX = DHTML + XHR

Motivaes Porque usar Ajax

Por que passar a usar JavaScript?

Como funciona o XHR

Modelo MVC vs Ajax(XHR)

Exemplo de XHR puro

Caractersticas principais do DWR

Classe Java e cdigo Js gerado

DWR com Spring

DWRUtil.useLoadingMessage() DWRUtil.setValue(element, val) DWRUtil.getValue(element) DWRUtil.addOptions(list) DWRUtil.removeAllOptions(element) DWRUtil.addRows(element, data, ) DWRUtil.removeAllRows(element);

Ajax vs. MVC

You might also like