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.

Treinamento ajax 03

519 views

Published on

  • Be the first to comment

  • Be the first to like this

Treinamento ajax 03

  1. 1. Treinamento AJAX Waelson Negreiros Email: waelson@gmail.com Blog: http://waelson.com.br
  2. 2. Agenda O que DWR?  Primeiros Passos  Modo Debug  Biblioteca Utils.js  JSON  Exercício
  3. 3. O que é DWR?  Framework Open Source;  Blibliotecas Java e JavaScript;  Oculta a complexidade;  Acessa métodos em classes Java;  Java Script mais fácil.
  4. 4. O que é DWR?
  5. 5. O que é DWR?  Está  Parte Server-Side    dividido em duas partes: Servlet Java rodando no servidor; Processa as requisições e retorna ao DWR; Parte Client-Side  DWR encapsula o XMLHttpRequest
  6. 6. O que é DWR?  Falicidade     de uso DWR cria os JavaScript para acesso ao Java; Código personalizado para cada classe Java; Conversão automática de parâmetros; Comunicação assíncrona via XMLHttpRequest.
  7. 7. Primeiros Passos  Baixe a biblioteca do site www.directwebremoting.org  Crie um projeto Java Web e coloque todas as blibliotecas na pasta WEB-INF/lib  Mapei o servlet do DWR no web.xml;  Crie o arquivo dwr.xml no diretório WEB-INF  Crie sua classe Java e registre no dwr.xml  Crie sua página, adicione os scripts gerado pelo DWR e invoque os métodos Java.
  8. 8. Primeiros Passos  WEB.XML
  9. 9. Primeiros Passos  DWR.XML  Define as classes e métodos que serão disponibilizados para acesso do lado cliente.
  10. 10. Primeiros Passos  Classes Java
  11. 11. Primeiros Passos  DWR.XML
  12. 12. Primeiros Passos  Chamadas dos script gerados pelo DWR
  13. 13. Primeiros Passos  JavaScript
  14. 14. Primeiros Passos  Teste sua aplicação através da URL abaixo http://localhost:8080/<my_app> EXEMPLO
  15. 15. Primeiros Passos
  16. 16. Modo Debug  Permite você testar as chamadas aos métodos Java;  URL http://localhost:8080/<my_app>/dwr  Modo deve está habilitado no web.xml
  17. 17. Modo Debug
  18. 18. Modo Debug
  19. 19. Biblioteca Utils.js  Facilita o desenvolvimento JavaScript;  Métodos auxiliares para manipulação de:   Tabelas Listas
  20. 20. Biblioteca Utils.js  Principais      Funções: $(id) – Retorna um objeto getValue(id) - Retorna o valor de um objeto getText(id) – Retorna o texto de listas (option) setValue(id, valor) – Configura um valor em um objeto setValues([notação Json]) – Configura o valor em mais de um objeto
  21. 21. Biblioteca Utils.js  Principais     Funções addOptions(id, array) – Adiciona vários options a um select addRows(id, array, cellfuncs, [options]) – Preenche uma tabela; removeAllOptions(id) – remove todos os options ou ul de um objeto; removeAllRows(id) – remove todas as linhas de uma tabela
  22. 22. JSON  Acrônimo de JavaScript Object Notation;  Usado para troca de dados;  Alternativa aos XMLs;  Construído sobre 2 estruturas   Coleção de pares nome:valor; Lista de valores ordenado
  23. 23. JSON
  24. 24. JSON  Exemplo: var pessoa = { nome: ”Waelson Negreiros”, cpf: “92007279304” };
  25. 25. Exercício  Com base no que foi ensinado construa uma simples aplicação que ao clicar em um botão, retorne a data e hora dos servidor e a exibe em um textarea.

×