Treinamento AJAX
Waelson Negreiros
Email: [email protected]
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;
Acessa métodos em classes Java;
Java Script mais fácil.
O que é DWR?
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
Primeiros Passos
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
Modo Debug
Modo Debug
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
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.