Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Conexão Java 2006: Introdução ao Ajax

515 views

Published on

Palestra sobre

  • Be the first to comment

  • Be the first to like this

Conexão Java 2006: Introdução ao Ajax

  1. 1. «LO arqonauis Introdução ao Ajax Helder da Rocha (heIder@argonavis. com. br)
  2. 2. Programa (1) 1. O que é Ajax? - Por que usar? - Quando usar? - Quem usa? - Alternativas 2. Fundamentos tecnológicos - Arquitetura Web tradicional e Web 2.0 - XML - JavaScript - CSS - DOM
  3. 3. Programa (2) 3. Ajax passo-a-passo: requisição e resposta - Obtendo o XMLHttpRequest - Iniciando o request) - Obtendo a resposta - Processando a resposta 4. Demonstração 5. Processamento de respostas em XML 6. Frameworks para uso com Java - Passo-a-passo com DWR - Overview de JSF
  4. 4. i O que é Ajax? - O que é Ajax? O que não é Ajax? - Por que usar? - Quando usar? - Quem usa? - Alternativas
  5. 5. Ajax v Ajax é uma solução lado-cliente baseada em HTML, JavaScript e DOM que permite que a comunicação entre o browser e o servidor Web ocorra de forma assíncrona v Ajax não é uma linguagem nova, nem mesmo uma tecnologia nova e Ajax não é uma solução lado-servidor
  6. 6. Por que usar? ~ A comunicação HTTP é ineficiente - Para cada requisição há uma resposta - Cada resposta devolve uma página inteira - É preciso esperar toda a página carregar antes de usar uma aplicação Web v Ajax permite comunicação assincrona - Pequenos trechos de dados podem ser transferidos assíncronamente - Permite que aplicação funcione enquanto dados são transferidos
  7. 7. Quando usar? - Use em aplicações Web interativas que sofrem com o modelo requisição-resposta - Aplicações com menus, muitas opções, que requerem interatividade em tempo real - Aplicações que modelam aplicações gráficas de desktop - Não use em aplicações que realmente precisam carregar uma página inteira - Ex: alguns tipos de sistemas de informação
  8. 8. Quem usa? Exemplos v Aplicações mais populares -Google Maps -Google GMail -Yahoo Flickr
  9. 9. Alternativas v Flash v SVG v Java Web Start
  10. 10. 2 Fundamentos tecnológicos v Arquitetura Web e Web 2.0 v XML v JavaScript v CSS v DOM
  11. 11. Arquitetura Web v Baseada em cliente, protocolo HTTP e servidor v Principais características - Protocolo de transferência de arquivos (HTTP: RFC 2068) não mantém estado da sessão do cliente - Servidor representa sistema de arquivos virtual e responde a comandos que contém URLs - Cabeçalhos contém meta-informação de requisição e resposta í Máquina www. xyz. com _ Abre conexão para www. xyz. com: §0 A. Uma requisição: Í GET / index. html HTTP/1.1 Cliente “ HTTP «j *o* '_, l Sóégarantida uma (browser) Uma resposta: / _Íl requisição/ resposta HTTP/1.1 20o OK f / ñ por conexão _ _ Fecha conexão l
  12. 12. Exemplo de requisição/ resposta HTTP 31o. ... l : u › um. . Ewluir¡ . .« um: a- sa yu FlndI"«°-V-J_]dl "mu. um um_ sem amam. . ; wi-mm - 1. Página HTML MÊÇÍÇÍÍÕ' <img src= "tomcat. gif"/ > _ S v 2. Requisição: browser solicita imagem 1 GET / tomcat. gif HTTP/1.1 Umwem User-Agent: Mozilla 6.0 [en] (Windows 95; I) NWWO Cookies: querty= uiop; SessionID= D236S11943245 wmmm cabeçalhos t' v 3. Resposta: servidor devolve cabeçalho + stream Gea requisição GET HTTP 1.1 200 OK . Server: Apache 1.32 wnmmg# Date: Friday, August 13, 2003 03:12:56 GMT-03 Content-type: image/ gif Content-length: 23779 ? p ! #GIF89~ã 7 .55.a 6nU4
  13. 13. Ciclo de vida de aplicação Web Browser Semdor Sessão
  14. 14. Ciclo de vida de aplicação Ajax (Web 2.0) BFOWSeF SeNidor _ Sessão
  15. 15. XML v Fornece um meio simples de transmitir informações estruturadas entre o cliente e o servidor - Pode-se transferir toda a informação de objetos independente de linguagem - Validação XML Schema - Manipulação via DOM, SAX, mapeamento objeto- XML, JAXB, Web Services v Forma mais comum para devolver dados ao cliente (garante mais controle)
  16. 16. Documento XML elemento raiz ç declaração FJL no' fa¡ ( ) K7 . * , _ l _ / ' <? .ml version= ”1.u' encod; ng= ”i: o-3859-; ” ? > atributos <cartao-simples> 1/7 <1ogotipolhref= vv/ imagens/ iogoubigegifvv/ /> <nome>Alberto Santos Dumont</ nom <endereco>Rua do Encanto, 22 - o. andar - Centro - 25600-000 - Petrópoli - RJ</ endereco> <emai1>dumont@14bis. com. br</ e ail> <te1efone ti o= "residencia1' <ddd>2 1< / ddd> t_ -_ <numero>2313011</ numero> , /“”f </ telefone> </ cartao-simples> elementos
  17. 17. l _v nóraiz 4 _ _ , " l / elemento raiz gfíj_dà: _(gl~gj: lnjtl_kggv nun-nun. ... uu-. .uu-n. u-. .uuunm quçi_ -' ' __ dumont@14bis . com. br e›qx6(e›; ¡;4e4v~ "' -. ,_ ¡ "-- . : ' A; ~9I: (9'Ç-! ]:I9~ ' l l Rua do Encanto, 22 2o. andar - Centro É - 25600-000 - nua? Petrópolis - RJ E I . ui. /imagens/ logolvlbisgif no de elemento nó de atributo nó de texto residencial N w o-v (g) Illlllll o H l-l N H LEGENDA
  18. 18. JavaScript v Linguagem de propósito geral projetada para ser embutida em aplicações v Permite interação com o modelo de objetos do browser e com o DOM v Aplicações Ajax são escritas em JavaScript v Incluído na página de três formas - <script src= "url_da_api. js" / > - <script> codigo estático </ script> - Dentro de atributos especiais (on load, onX>O() ou usando prefixo javascript: em atributos comuns
  19. 19. Exemplo de JavaScript function sgma(a, b) f Nbmus return a + b; pagmaiúml <3cript LAN3UAGÉ= Jav:5cript SRC= "biblio. js"><fscrip: > (col) <SCIlCt> resulta: : = s: :'(5, 0); dQcument. w:i: e('<P>A soma de <fvov'ht> _a . gv- _
  20. 20. JavaScript v Tem palavras chave parecidas com as de Java (mas têm outras) v Não é strongIy-typed como Java - Declaração de variáveis globais é opcional - Declaração de variáveis locais com "var" v Integra-se com Java v É baseada em objetos (pode-se criar objetos a partir de protótipos mas não de herança) - Não suporta sobrecarga ou sobreposição - Funções (function) são objetos
  21. 21. Tipos e objetos I . . t' a : :sszzsírvv a na IVOS_ E Tipo de dados E ECMAScript j nativo que j ___________ n j representa Boo/ ea” j function ~j j coleçoes de j ¡ - l : j pmjmedades - Number Date : -j-¡po de objeto que j j contendo valores de j representa funções' j j ÍIpOSjpFIMIÍIVOS, j métodos e j jxfunction ou object Math lj construtores I """""" 'Í """""" ' '_' 'Í', """""""""""" " . ... ... ... ... . -x Tipos de dados primitivos (que representam valores) f' "" 'T """""""""" "*j ¡ """"""""""""""""""""" " j Wdef/ "ed : number Min: : 4.94065 e-324 j j representa valores : In-: íefineá j j representa números Max: :1779769 e+308 j j anda não deñnidos j l de ponto-flutuante j | x ___________________________ _, ' j IEEE 754 com precisão _ : IÍGN: _ j (J--íl - - - - - - - - - - - - - - - - - - - - - - -- j -n---n--VÀ/ : j HL! j j (64 bjjs) -Infinity j j representa o valor null l v ________________________________________ __»' l nuno a ---------------------------------- lx ___________________________ _, ' j 8177/79 "i_1l][ii: _ii: _i _ '__i_1EEFF" j I'- _________________________ --x ' nt d ' ' LZÚ E! El IÍl - L1FFFF' ' Hvvv/ vvn l i : :efaããasaêa ›- i ' true l l j representa valores fal j_ e j j indexáveis) de " " E j booleanos j j caracteres Unicode. "ac : :lei i -Z-C E . " j
  22. 22. JavaScript no browser v Os objetos, variáveis, etc. estão disponíveis a partir do objeto raiz, que no browser é document v Todos os elementos da página estão em uma árvore a partir de document v Pode-se criar novos elementos e anexá-los a document, fazendo-os aparecer dinamicamente na página (usando o DOM - Document Object Model) v Exemplo - document . forms [0] - primeiro formulário da página - document . getEIementById ( "botao_2") - acessa um elemento HTML que tenha ID botao_2
  23. 23. CSS v Permite definir estilos reutilizáveis para elementos de página v Estilos podem ser atribuídos estaticamente a uma página e alterados dinamicamente via JavaScript e DOM v Incluídos numa página de 3 formas: - Via <1ink re1=sty1esheet href= "fo1ha. css" / > - <sty1e> . . . CSS . . . </ §ty1e> - Em atributos <span sty1e= " . . . ">. . . </span> v Veja exemplos
  24. 24. CSS Sintaxe básica v Uma folha de estilos é uma coleção de regras v Cada regra tem o formato: - seletores j propriedade: valor, j v Seletores são elementos, ids, classes: - h1, h2 (. ..) - h1.principa1, . outros (. ..) - #id35 t. . . E v Classes e lDs são definidos em elementos - <h1 c1ass= "principa1 titulo" id= “id99"> v Propriedades definem estilo: - h1 (color: red)
  25. 25. CSS para layout v Há várias propriedades que definem layout e visibilidade - position, absolute, relative, static - visibility - display v Várias podem ser alteradas via JavaScript para realizar mudanças dinâmicas de posicionamento e visibilidade.
  26. 26. Alterando CSS via JavaScript v Localize o elemento -var e = document. getE1ementById(“id02"); v Altere seu estilo -e. c1assName = 'outros'; -e. sty1e. border= "so1id red 1px"; -e. sty1e. disp1ay= "b1ock";
  27. 27. DOM v É impossível usar JavaScript no browser sem usar document, que é a raiz do DOM v O DOM é um modelo de objetos padrão, independente de linguagem, usado para representar elementos, atributos, nós de texto, etc. v Tem uma API padrão independente de linguagem
  28. 28. Hierarquia do DOM DocumentFragment D°cument Text -› CDATASection CharacterData-j: Comment Attr Element Node _ DocumentType N°deL15t N°tati°n NamedNodeMap Entity EntityReference Processinglnstruction
  29. 29. Como criar nós, atributos var doc = document; <carta> Element carta = doc. createE1ement("carta") <mensagem> Element mens = doc. createElement("mensagem") 30m ("ai String texto = doc. createTextNode("Bom dia! ") I H. ll <me|15a9em ¡C'= J- > mens . setAttribute ("id" , "1")
  30. 30. Como montar uma arvore I . Sub-árvore <mensagem> <mensagem id= "1"> mens. appendChild(texto) 3. Árvore completa 2. Sub-árvore <carta> carta. appendChild(mens) <mensagem id= "1">
  31. 31. innerHTML v Método menos prolixo para gerar XML/ HTML (evita o uso de createElement e appendChild) pai. innerHtm1 = “<fi1ho>. ..</ fi1ho>"; v Mais prático para alterações dinâmicas (por exemplo, quando um fragmento é recebido assíncronamente)
  32. 32. Exemplos interativos v Alerta em JavaScript v Alteração de formulário em JavaScript v Ocultação com JavaScript e CSS v Alteração de estilo com CSS v Localização de elemento com DOM v Criação de árvore DOM dinâmica
  33. 33. Conclusões v Aplicações Ajax são escritas em JavaScript v CSS e DOM permitem grande parte do comportamento dinâmico (DHTML) usado em aplicações Ajax através do uso de JavaScript v É importante conhecer essas tecnologias para utilizar melhor os recursos do Ajax
  34. 34. 3 Ajax passo-a-passo v Passo 1: Obtendo o XMLHttpRequest - Independente do browser v Passo 2: Abrindo uma conexão - Métodos do objeto XMLHttpRequest v Passo 3: Obtendo a resposta - Estados (ready states) v Passo 4: Processando a resposta - Obtendo e usando os dados
  35. 35. Passo 1: Obtendo o XMLHttpRequest v O XMLHttpRequest é o objeto do DOM que irá realizar a comunicação assíncrona - Ou seja, é o coração do Ajax v Nos browsers modernos (IE7, FireFox, etc. ) é obtido da seguinte forma: - http_request = new XMLHttpRequest(); v Nos browsers Microsoft antigos, há duas formas - http_request = new ActiveXObject("Msxm12.XMLHTTP"); - http_request = new ActiveX0bject(“Microsoft. XMLHTTP"); dependendo da versão
  36. 36. XMLHttpRequest cross-browser v A solução é lidar com os diferentes browsers var http_request = false; if (window. XMLHttpRequest) t / / Mozilla, Safari, http_request = new XMLHttpRequest(); i else if (window. ActiveX0bject) t / / IE try í http_request = new ActiveX0bject("Msxml2.XMLHTTP"); I catch (e) t try í http_request = new ActiveX0bject("Microsoft. XMLHTTP"); j I catch (e) ti 1 if (! http_request) t alert('Giving up : ( Cannot create an XMLHTTP instance'); return false; E / / agora pode usar o http_request
  37. 37. Passo 2: Iniciando um Request 1. Pegue o que for necessário do formulário Web dado = document. getElementById(“campo1"). value; 2. Construa a URL de conexão url = "/ scripts/ dados. php? dado= escape(dado)"; 3. Abra conexão ao servidor http_request. open("GET", url, true); 4. Defina uma função para executar quando terminar http_request. onreadystatechange = updatePage; 5. Envie a requisição http_request. send(null);
  38. 38. Propriedades importantes v onreadystatechange - deve receber o nome de uma função que sera executada quando a requisição terminar (callback) v readyState - deve ser lida para se saber em que estado está a resposta; o estado útil é 4 v status - contém o status HTTP (200, 404, etc. ) v responseText e responseXML - contém dados da resposta
  39. 39. Passo 3: Obtendo uma Resposta 1. Não faça nada até que o valor de readyState seja 4 2. Leia o que está em responseText ou responseXML v Exemplo (se onreadystatechange apontar para a função abaixo, o texto de resposta sera gravado no value do objeto #resposta) function updatePage() t if (http_request. readyState = = 4) t var response = http_request. responseText; document. getElementById(“resposta"). value = response; t Pode-se chamar o método de conexão usando o evento onChange dos campos do form HTML (veja demonstração a seguir)
  40. 40. Passo 4: Processando a Resposta v A resposta pode retornar texto (text/ plain) ou XML (application/ xml, text/ xml) v Se for texto (responseText) ela pode ser usada como está ou ser processada (usando expressões regulares, etc. ) v Se for XML (responseXmI), pode ser manipulada usando DOM e ferramentas XML para extrair campos significativos
  41. 41. 4 Demonstração v Fonte: Make asynchronous requests with JavaScript and Ajax (Brett McLaughin) - http: //www-128.ibm. com/ deveIopenNorks/ web/ Iibrary/ wa-ajaxintro2/index. html
  42. 42. Obtendo o XMLHttpRequest <script language= "javascript" type= "text/ javascript"> var request = false; try j request = new XMLH: tpRequest(); ] catch (trymicrosofz) l try j request = new Ac: iveXObject("Msxml2.XMLHTTP"); ] catch (othermicrosoft) l try j request = new Activexobject("Microsoft. XMLHTTP"); ] catch (failed) l C request = _alse; if (lrequest) alert("7.rror initiaii ing XMLHttpRequestW); f ' I f - - , “mu” getcustmner n °(› j Funçao de conexao: usara o objeto request para criar e enviar uma requisição ao servidor i % </ sCript>
  43. 43. Passo 2: iniciando uma requisição Quando o conteudo mudar, sera chamada esta função que irá criar e enviar uma requisição Ajax <body> <p><img src= "breakneck-logo_4c. gif" alt= "3reak Neck Pizza" / ></ p> <form action= "POST"> <p>Enter your phone number: <input type= "text" size= "14" name= "phone" id= "phone" onChange= "getCustomerInfo(); " / > </ p> <p>Your order will be delivered to: </p> <div id= "address"></ div> <p>Type your order in here: </p> <p><textarea name= "order" rows= "6" cols= "50" id= "order"></ teXtarea></ p> <p><input type= "submit" value= "Order Pizza" id= "submit" / ></ p> </ form> </ bOdy>
  44. 44. Passo 2: iniciando uma requisição assíncrona (disparada pelo onChange - tela anterior) <script> function getCustomerInfo() i var phone = document. get3lementById("phone"). value; var url = "/ cgi-local/ lookupcustomer. php? phone= " + escape(phone); request. open("G3T", url, true); request. onreadystatechange = updatePage; request. send(null); f / Função que vai receber o evento function updatePage() I if (request-readyState = = > i / Passo 3: obtendo uma resposta if (request. status = = 200) I var response = request. responseText. split("| "); document. get3lementById("order"). value = response[O]; document. get3lementById("address"). innerHTML = response[1]. replace(/ n/ g, " ] else alert("status is " + request. status); j 1 Passo 4: usando a resposta </ script>
  45. 45. Ready States v Pode haver 5 estados durante a requisição e resposta assíncrona v Eles são lidos através da propriedade readyState - 0 - não inicializado - 1 - não enviado - 2 - sendo processado (cabeçalhos) - 3 - sendo processado (parte dos dados) - 4 - concluído v São dependentes de browser (o único realmente confiavel e 4)
  46. 46. 5 Resposta em XML __ _ <ra: i1gs> - Facilita apresentaçao <s1ow> <: i:le>Alias</ title> dos dados <_a: ing>6.5</ rating> </ show> <s1ow> / /,/ ///27 <: i:le>Lost</ title> Exemplo <_a: ing>14.2</ rating> </ show> <s1ow> Processamento <: i:le>Six Degrees</ title> usando DOM <_a: ing>9.l</ rating> </ show> 1 </ ratings> var xmlDoc : request. responseXML; var show3lements : xnlDoc. getElementsBy"agName("show"); for (var x: O; x<showElenents. length; x+~) l va_ title : show3lements[x]. childNodes[O]. value; va_ rating : s1ow3lemen: s[x]. childNodes[1]. value; 1
  47. 47. Transferência de objetos ~ O estado de objetos pode ser passado do servidor para o JavaScript no cliente através da serialização em formato XML - Requer que o servidor converta objeto para XML (ex: usando mapeamento) e que cliente processe XML (usando DOM) - Soluções de baixo nível incluem soluções próprias, JAXB, templates e a API JSON (JavaScript Object Notation) - Solução mais fácil é usar frameworks
  48. 48. 6 Frameworks ~ Para qualquer aplicação é essencial entender os fundamentos da programação com Ajax e Para trabalhar com aplicações mais complexas, é importante poder trabalhar em um nível de abstração maior e Solução: usar frameworks ~ Principais frameworks para Java - DOJO (usado em componentes JSF) - DWR (Direct Web Remoting)
  49. 49. DWR - Direct Web Remoting e Solução simples da Apache - http: //getahead. Itd. uk/ dwr/ ~ Permite que código em um browser use funções Java como se estivesse no browser (gera JS a partir de classes Java) o Consiste de duas partes - Um servlet - Uma API JavaScript
  50. 50. Arquitetura HTML / Javascript function ngvnntllond wtf] AjaxS-: rvrtr: r_›I: tC; vlirJn: ~[; :-: :.. |.al«: L<t. l); Í' p-t›lic class Agaxservice i r "I. pu: IC Str rug[j gctOptrrsIj) 4 L re(. .'r1ne~. -.'Stn^; [] «f ". ', '7', " " , lunruoiw mnpulifrlinllñalà] * ¡ DWRJÍIÍ addOptions( 'l stid'. data): v¡ Fonte: DWR
  51. 51. Como usar DWR (1) 1. Baixe o pacote em http: //getahead. Itd. uk/ dwr/ 2. Instale o arquivo dwr. jar no seu WEB-lNF/ lib 3. Configure seu web. xmI <serv1et> <serv1et-name>dwr-invoker</ servlet-name> <serv1et-c1ass>uk.1td. getahead. dwr. DwRServ1et</ serv1et- c1ass> <init-param> <param-name>debug</ param-name> <param-va1ue>true</ param-va1ue> </ init-param> </ serv1et> <serv1et-mapping> <serv1et-name>dwr-invoker</ servlet-name> <ur1-pattern>/ dwr/ *</ ur1-pattern> </ servlet-mapping>
  52. 52. Como usar DWR (2) 4. Crie um arquivo dwr. xmI e guarde no WEB-INF <! DOCTYPE dwr PUBLIC "-/ /GetAhead Limited/ /DTD Direct web Remoting 1.0// EN" "http: //www. getahead.1td. uk/ dwr/ dwr10.dtd"> <dwr> <a11ow> <create creator= "new" javascript= "JDate"> <param name= "c1ass" va1ue= "java. uti1.Date"/ > </ create> <create creator= "new" javascript= "He11o"> <param name= "c1ass" va1ue= "he11o. He11owor1d"/ > </ create> </ a11ow> </ dwr> Determina quais classes o DWR pode criar e disponibilizar para uso pelo JavaScript (classes precisam ter construtor default)
  53. 53. Como usar DWR (3) 5. Abra a URL http: //localhost:8080/contexto/ dwr/ - Lista de classes disponiveis - Lista de métodos que podem ser chamados
  54. 54. Como usar DWR (4) - 6. Crie aplicações que usem os objetos - Veja o código fonte da classe em http/ /loca/ host:8080/contexto/ dwr/ - Ache a linha que executa o método que você querusar - Cole o texto em uma página HTML ou JSP - Inclua os arquivos JavaScript necessários <script src= 'dwr/ interface/ Helloworld. js'></ script> <script src= 'dwr/ engine. js'></ script>
  55. 55. Exemplo de uso DWR e Suponha que tenhamos o seguinte código Java public class Helloworld í public String getMessage(String n) (. ..) l - Pode-se usar o JavaScript das seguinte formas: <script src= "dwr/ interface/ Helloworld. js"></ script> function handleGetData(str) f alert(str); I Helloworld. getMessage(“Hello”, handleGetData); ou simplesmente HelloWorld. getMessage(“Hello”, function(str) f alert(str); 1):
  56. 56. Como passar objetos - Suponha que existam as seguintes classes public class PedidoDAO í public void addPedido(Pedido p) (. ..) E public Pedido Í private String nome; private double preco; private int[] categorias; I - Um Pedido pode ser adicionado em JavaScript da seguinte forma (notação JSON): var pedido = Í nome: "Computador", preco: 345.99, categorias: [456, 999] l: PedidoDAO. addPedido(pedido);
  57. 57. dwr. xmI - mapeamento essencial ~ Veja mais em httpz/ /getahead. Itd. uk/ dwr/ server/ dwrxml ~ O tag mais importante dentro de <dwr> é <allow>. Dentro de <allow> há - Creators <create> e Converters <convert> r Creators são necessários para cada classe em que se executa métodos - use com atributo creator= "new" por enquanto ou veja mais em getahead. Itd. uk/ dwr/ server/ dwrxmI/ creators) - javascript= "NomeDoObj" - scope= "request| session| ... " - <param name= "class" value= "nome. da. Classe" / > e Converters servem para converter tipos
  58. 58. Exemplo <! DOCTYPE dwr PUBLIC "-/ /GetAhead Limited/ /DTD Direct Web Remoting 1.0// EN" "http: //www. getahead. ltd. uk/ dwr/ dwr10.dtd"> <dwr> <allow> <create creator= "new" javascript= “dao"> <param name= "class" value= “exemplo. ProdutoDAO"/ > <include method= "getProduto"/ > <include method= “addProduto"/ > </ create> <convert converter= "bean" match= “exemplo. Produto"> <param name= "include" value= “id, nome, preco"/ > </ convert> </ allow> </ dwr>
  59. 59. Utilitários DWR (opcional) - Inclua util. js - $() lê elementos pelo ID: - $ equivale a document. getElementByld - Ou seja $(form1) recupera o elemento form1 - Outras funções (veja documentação em httpz/ /getahead. Itd. uk/ dwr/ browser/ ut¡I/ gettext) - getVaIue(id) / setValue(id, value) - addRows(. ..) e removeAllRows(id) -facilita a manipulação de tabelas (veja exemplos)
  60. 60. Hands-on: como começar e Instale e teste os exemplos ~ Analise o código e tente incluir as funcionalidades em sua aplicação. Lembre-se de - Verificar o dwr. xml - Verificar se objetos (classes) estão no WEB- INF/ classes - Verificar se arquivos JS estão sendo carregados
  61. 61. Hands-on: exercício e Monte a aplicação abaixo, que permite listar produtos em uma tabela (nome e preço), acrescentar e remover, usando DWR e Dicas: - Utilize código HTML disponível - Siga o passo-a-passo para instalar o DWR - Use como exemplo httpz/ /getahead. ltd. uk/ dwr/ examples/ table
  62. 62. Outras alternativas: JSF / DOJO e Vários componentes JSF suportam Ajax. Para usá- Ios em uma página é preciso importar as bibliotecas padrão <%@ taglib uri= "http: //java. sun. com/ jsf/ html" prefix= "h" %> <%@ taglib uri= "http: //java. sun. com/ jsf/ core" prefix= "f" °<, > <%@ taglib prefix= "dl" uri= "http: //java. sun. com/ blueprints/ dl" %> e E depois utilizar o tag abaixo para mapear os elementos desejados <dl: dlabel valueBinding= "#íClasse. propk" / > ~ Tutorial completo sobre essa técnica em http: //ja va. sun. com/ ja vaee/ ja vaserverfaces/ ajax/ tutoria/ .jsp
  63. 63. Conclusões - Ajax é uma técnica para aplicações Web com programação lado-cliente que permite maior eficiência e resposta - Ajax depende de programação em JavaScript e utiliza várias tecnologias já existentes e consagradas como CSS, JavaScript, DHTML e DOM - Integração com Java através de frameworks permite que o modelo de objetos seja compartilhado entre cliente e servidor - As mais populares soluções Java hoje são o DWR e o DOJO (nativo JSF)
  64. 64. Obrigado ('10 _ arqonauis heIder@argonavis. com. br

×