250 likes | 351 Vues
Treinamento AJAX. Waelson Negreiros Email: waelson@gmail.com Blog: http://waelson.com.br. Agenda. O que DWR? Primeiros Passos Modo Debug Biblioteca Utils.js JSON Exercício. O que é DWR?. Framework Open Source; Blibliotecas Java e JavaScript; Oculta a complexidade;
E N D
Treinamento AJAX Waelson Negreiros Email: waelson@gmail.comBlog: http://waelson.com.br
Agenda • O que DWR? • Primeiros Passos • Modo Debug • Biblioteca Utils.js • JSON • Exercício
O que é DWR? • Framework Open Source; • Blibliotecas Java e JavaScript; • Oculta a complexidade; • Acessa métodos em classes Java; • Java Script mais fácil.
O que é DWR? • Está dividido em duas partes: • Parte Server-Side • Servlet Java rodando no servidor; • Processa as requisições e retorna ao DWR; • Parte Client-Side • DWR encapsula o XMLHttpRequest
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.
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.
Primeiros Passos • WEB.XML
Primeiros Passos • DWR.XML • Define as classes e métodos que serão disponibilizados para acesso do lado cliente.
Primeiros Passos • Classes Java
Primeiros Passos • DWR.XML
Primeiros Passos • Chamadas dos script gerados pelo DWR
Primeiros Passos • JavaScript
Primeiros Passos • Teste sua aplicação através da URL abaixo http://localhost:8080/<my_app> EXEMPLO
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
Biblioteca Utils.js • Facilita o desenvolvimento JavaScript; • Métodos auxiliares para manipulação de: • Tabelas • Listas
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
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
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
JSON • Exemplo: var pessoa = { nome: ”Waelson Negreiros”, cpf: “92007279304” };
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.